💩 More theme changes + new message component!

danieldelcore · Aug 4, 2020 · 731b230 · 731b230
1 parent e703f0c
commit 731b230
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 13 deletions.
diff --git a/examples/0_Palette.tsx b/examples/0_Palette.tsx
@@ -15,6 +15,7 @@ import Input from '@precursor/input';
 import Image from '@precursor/image';
 import Label from '@precursor/label';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from '@precursor/modal';
+import Message from '@precursor/message';
 import Panel from '@precursor/panel';
 import Radio from '@precursor/radio';
 import Select from '@precursor/select';
@@ -278,6 +279,39 @@ const BasicExample = () => {
                                 </Text>
                             </Panel>
                         </Panel>
+                        <Heading id="messages">Messages</Heading>
+                        <Panel>
+                            <Stack>
+                                <Message>
+                                    <Text>
+                                        Hello <Emoji label="wave">👋</Emoji>,
+                                        here is some{' '}
+                                        <Text as="strong">
+                                            contextual information
+                                        </Text>
+                                    </Text>
+                                </Message>
+                                <Message status="success">
+                                    <Text>
+                                        <Text as="strong">Congratulations</Text>
+                                        , you did something right!
+                                    </Text>
+                                </Message>
+                                <Message status="warning">
+                                    <Text>
+                                        Be careful, something bad might happen{' '}
+                                        <Emoji label="worried face">😨</Emoji>
+                                    </Text>
+                                </Message>
+                                <Message status="error">
+                                    <Text>
+                                        <Text as="strong">Oh no</Text>,
+                                        something bad happened!{' '}
+                                        <Emoji label="sad face">😞</Emoji>
+                                    </Text>
+                                </Message>
+                            </Stack>
+                        </Panel>
                         <Heading id="input">Input</Heading>
                         <Panel>
                             <Stack>

diff --git a/fixtures/ThemeEditor.tsx b/fixtures/ThemeEditor.tsx
@@ -4,6 +4,7 @@ import { jsx } from '@trousers/core';
 import Label from '@precursor/label';
 import Select from '@precursor/select';
 import Input from '@precursor/input';
+import Message from '@precursor/message';
 import Heading from '@precursor/heading';
 import Stack from '@precursor/stack';
 import Toggle from '@precursor/toggle';
@@ -194,6 +195,14 @@ const renderOptionGroup = (
                     );
                 }
 
+                if (!schema) {
+                    return (
+                        <Message status="error">
+                            Error: schema not found for property: {nestedKey}
+                        </Message>
+                    );
+                }
+
                 return (
                     <Fragment key={nestedKey}>
                         {renderOption(

diff --git a/fixtures/themeSchema.ts b/fixtures/themeSchema.ts
@@ -54,6 +54,10 @@ const themeSchema: Record<keyof Theme, OptionType> = {
                 type: 'color',
                 options: Object.values(color.neutral),
             },
+            info: {
+                type: 'color',
+                options: Object.values(color.info),
+            },
             warning: {
                 type: 'color',
                 options: Object.values(color.warning),

diff --git a/packages/components/message/CHANGELOG.md b/packages/components/message/CHANGELOG.md
@@ -0,0 +1 @@
+# @precursor/message
diff --git a/packages/components/message/Message.tsx b/packages/components/message/Message.tsx
@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import { jsx } from '@trousers/core';
+import collector from '@trousers/collector';
+
+import { Theme } from '@precursor/theme';
+
+export interface MessageProps {
+    status?: 'error' | 'success' | 'warning';
+    children: ReactNode;
+}
+
+const styles = (status: MessageProps['status']) =>
+    collector<Theme>('message').element`
+    display: block;
+    padding: ${({ spacePreset }) => spacePreset.inset};
+    border-radius: ${({ radius }) => radius.m};
+    background-color: ${({ color }) => color.info.light};
+    color: ${({ color }) => color.info.base};
+`.modifier(status === 'error')`
+    background-color: ${({ color }) => color.error.light}
+    color: ${({ color }) => color.error.base}
+`.modifier(status === 'warning')`
+    background-color: ${({ color }: Theme) => color.warning.light}
+    color: ${({ color }: Theme) => color.warning.base}
+`.modifier(status === 'success')`
+    background-color: ${({ color }: Theme) => color.success.light}
+    color: ${({ color }: Theme) => color.success.base}
+`;
+
+const Message: FC<MessageProps> = props => {
+    return <div css={styles(props.status)}>{props.children}</div>;
+};
+
+export default Message;
diff --git a/packages/components/message/index.ts b/packages/components/message/index.ts
@@ -0,0 +1 @@
+export { default, MessageProps } from './Message';
diff --git a/packages/components/message/package.json b/packages/components/message/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "@precursor/message",
+    "version": "0.1.0",
+    "description": "message component",
+    "main": "dist/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "license": "MIT",
+    "dependencies": {
+        "@precursor/text": "^0.1.4",
+        "@precursor/theme": "^0.1.5",
+        "@trousers/collector": "^3.0.2",
+        "@trousers/core": "^3.0.2"
+    },
+    "devDependencies": {
+        "react": "^16.8.1"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0"
+    },
+    "repository": "https://github.com/danieldelcore/precursor/tree/master/packages/components/message"
+}
diff --git a/packages/components/message/tsconfig.json b/packages/components/message/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "include": ["*.tsx", "*.ts"],
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "rootDir": ".",
+        "baseUrl": "."
+    },
+    "references": [
+        {
+            "path": "../../theming/theme"
+        },
+        {
+            "path": "../../elements/text"
+        }
+    ]
+}
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
@@ -14,10 +14,12 @@
         "@trousers/core": "^3.0.2"
     },
     "devDependencies": {
-        "react": "^16.8.1"
+        "react": "^16.8.1",
+        "react-dom": "^16.8.4"
     },
     "peerDependencies": {
-        "react": ">=16.8.0"
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
     },
     "repository": "https://github.com/danieldelcore/precursor/tree/master/packages/components/modal"
 }
diff --git a/packages/theming/theme/Theme.ts b/packages/theming/theme/Theme.ts
@@ -22,6 +22,11 @@ const theme = {
             base: color.neutral[0],
             dark: color.neutral[500],
         },
+        info: {
+            light: color.info[100],
+            base: color.info[400],
+            dark: color.info[700],
+        },
         warning: {
             light: color.warning[100],
             base: color.warning[400],
@@ -51,8 +56,8 @@ const theme = {
         xxxl: space[800],
     },
     spacePreset: {
-        inset: space[400],
-        stack: space[400],
+        inset: space[300],
+        stack: space[300],
         inline: space[200],
         insetSquish: `${space[200]} ${space[400]}`,
         stretchInset: `${space[400]} ${space[200]}`,

diff --git a/packages/theming/tokens/tokens.ts b/packages/theming/tokens/tokens.ts
@@ -49,20 +49,25 @@ export const color = {
         400: secondary,
         700: secondaryDarkest,
     },
+    info: {
+        100: '#dcf2ff',
+        400: '#134f83',
+        700: '#134f83',
+    },
     warning: {
-        100: '#f0574f',
-        400: '#E11900',
-        700: '#ba0b02',
+        100: '#fffac6',
+        400: '#7e7015',
+        700: '#7e7015',
     },
     error: {
-        100: '#ffca61',
-        400: '#FFC043',
-        700: '#cc8800',
+        100: '#fad6d6',
+        400: '#bb2525',
+        700: '#7c0404',
     },
     success: {
-        100: '#26ed8d',
-        400: '#08d472',
-        700: '#05A357',
+        100: '#d8ffd8',
+        400: '#137043',
+        700: '#137043',
     },
     neutral: {
         0: `#ffffff`,

diff --git a/tsconfig.json b/tsconfig.json
@@ -54,6 +54,7 @@
         { "path": "packages/components/input" },
         { "path": "packages/components/label" },
         { "path": "packages/components/modal" },
+        { "path": "packages/components/message" },
         { "path": "packages/components/overlay" },
         { "path": "packages/components/panel" },
         { "path": "packages/components/radio" },