@marigold/components 0.2.0 → 0.3.0

package/src/Label/{Label.stories.mdx → Label.stories.tsx}

@@ -1,9 +1,10 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Label } from './Label';
 
-<Meta
-  title="Components/Label"
-  argTypes={{
+export default {
+  title: 'Components/Label',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
@@ -19,9 +20,7 @@ import { Label } from './Label';
       control: {
         type: 'text',
       },
-      type: {
-        required: true,
-      },
+      defaultValue: 'input',
     },
     required: {
       control: {
@@ -34,19 +33,9 @@ import { Label } from './Label';
         },
       },
     },
-  }}
-/>
-
-# Label
+  },
+} as Meta;
 
-export const Template = args => (
-  <Label htmlFor="input" {...args}>
-    Label
-  </Label>
+export const Basic: ComponentStory<typeof Label> = args => (
+  <Label {...args}>Label</Label>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Label/Label.test.tsx

@@ -4,17 +4,25 @@ import { ThemeProvider } from '@marigold/system';
 import { Label } from './Label';
 
 const theme = {
+  fonts: {
+    body: 'Inter Regular',
+    label: 'Oswald',
+  },
   label: {
     above: {
-      fontFamily: 'Inter Regular',
+      fontFamily: 'body',
     },
     myLabel: {
-      fontFamily: 'Oswald Regular',
+      fontFamily: 'label',
     },
   },
+  colors: {
+    text: 'black',
+    disabled: 'gray',
+  },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant and styles', () => {
   render(
     <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
@@ -23,6 +31,7 @@ test('supports default variant and themeSection', () => {
   const label = screen.getByText(/label/);
 
   expect(label).toHaveStyle(`font-family: Inter Regular`);
+  expect(label).toHaveStyle(`color: black`);
 });
 
 test('supports other variant than default', () => {
@@ -35,7 +44,7 @@ test('supports other variant than default', () => {
   );
   const label = screen.getByText(/label/);
 
-  expect(label).toHaveStyle(`font-family: Oswald Regular`);
+  expect(label).toHaveStyle(`font-family: Oswald`);
 });
 
 test('supports htmlFor prop', () => {
@@ -63,6 +72,18 @@ test('supports required prop', () => {
   expect(parent instanceof HTMLSpanElement).toBeTruthy();
 });
 
+test('supports color prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" color="disabled">
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
+});
+
 test('renders <label> element', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Label/Label.tsx

@@ -1,31 +1,64 @@
 import React from 'react';
+
 import { ComponentProps } from '@marigold/types';
 import { Required } from '@marigold/icons';
+import { ResponsiveStyleValue } from '@marigold/system';
 
 import { Box } from '../Box';
 
-export type LabelProps = {
+// Theme Extension
+// ---------------
+export interface LabelThemeExtension<Value> {
+  label?: {
+    [key: string]: Value;
+  };
+}
+
+// LabelBase
+// ---------------
+export type LabelBaseProps = {
   htmlFor?: string;
   variant?: string;
   required?: boolean;
+  color?: ResponsiveStyleValue<string>;
 } & ComponentProps<'label'>;
 
-export const Label: React.FC<LabelProps> = ({
+export const LabelBase: React.FC<LabelProps> = ({
   variant = 'above',
+  required,
+  color = 'text',
+  children,
+  ...props
+}) => {
+  return (
+    <Box
+      {...props}
+      as="label"
+      __baseCSS={{ color: color }}
+      variant={`label.${variant}`}
+    >
+      {children}
+    </Box>
+  );
+};
+
+// Label
+// ---------------
+export type LabelProps = {
+  required?: boolean;
+} & LabelBaseProps;
+
+export const Label: React.FC<LabelProps> = ({
   required,
   children,
   ...props
 }) => {
   return required ? (
     <Box as="span" display="inline-flex" alignItems="center">
-      <Box {...props} as="label" variant={`label.${variant}`}>
-        {children}
-      </Box>
-      {required && <Box as={Required} size={16} css={{ color: 'red60' }} />}
+      <LabelBase {...props}>{children}</LabelBase>
+      {required && <Box as={Required} size={16} css={{ color: 'error' }} />}
     </Box>
   ) : (
-    <Box {...props} as="label" variant={`label.${variant}`}>
-      {children}
-    </Box>
+    <LabelBase {...props}>{children}</LabelBase>
   );
 };

package/src/Link/Link.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Link } from './Link';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Link',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'link',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The URL to direct to',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Link> = args => (
+  <Text>
+    <Link href="https://marigold-ui.io" target="_blank" {...args}>
+      Marigold Docs
+    </Link>
+  </Text>
+);

package/src/Link/Link.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Link } from './Link';
 
 const theme = {
+  fonts: {
+    link: 'Inter',
+    body: 'Oswald',
+  },
   text: {
     link: {
-      fontFamily: 'Inter',
+      fontFamily: 'link',
     },
     second: {
-      fontFamily: 'Oswald',
+      fontFamily: 'body',
     },
   },
 };

package/src/Link/Link.tsx

@@ -4,9 +4,19 @@ import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
 import { Text, TextOwnProps } from '../Text';
 
+// Theme Extension
+// ---------------
+export interface LinkThemeExtension<Value> {
+  link?: Value;
+}
+
+// Props
+// ---------------
 export type LinkOwnProps = { disabled?: boolean } & TextOwnProps;
 export type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
 
+// Component
+// ---------------
 export const Link = (({
   as = 'a',
   variant = 'link',

package/src/Menu/{Menu.stories.mdx → Menu.stories.tsx}

@@ -1,17 +1,16 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React, { useState } from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Menu } from './Menu';
 import { MenuItem } from '../MenuItem';
-import { BurgerMenu } from '@marigold/icons';
-import { useState } from 'react';
 
-<Meta
-  title="Components/Menu"
-  parameters={{
+export default {
+  title: 'Components/Menu',
+  parameters: {
     actions: {
       handles: ['click'],
     },
-  }}
-  argTypes={{
+  },
+  argTypes: {
     variant: {
       control: {
         type: 'text',
@@ -28,11 +27,7 @@ import { useState } from 'react';
         type: 'text',
       },
       description: 'Menu label on hover',
-      table: {
-        defaultValue: {
-          summary: 'Menu',
-        },
-      },
+      defaultValue: 'Menu',
     },
     show: {
       control: {
@@ -51,31 +46,17 @@ import { useState } from 'react';
         type: 'text',
       },
       description: 'Function to show menu or toggle something',
-      type: { required: true },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Menu
-
-export const Template = ({ onClick, ...args }) => {
-  const [showMenu, setShowMenu] = React.useState(false);
+export const Basic: ComponentStory<typeof Menu> = ({ onClick, ...args }) => {
+  const [showMenu, setShowMenu] = useState(false);
   return (
-    <Menu
-      onClick={() => setShowMenu(!showMenu)}
-      show={showMenu}
-      label={<BurgerMenu />}
-      {...args}
-    >
+    <Menu onClick={() => setShowMenu(!showMenu)} show={showMenu} {...args}>
       <MenuItem href="#">Home</MenuItem>
       <MenuItem href="#">Tickets</MenuItem>
       <MenuItem href="#">Logout</MenuItem>
     </Menu>
   );
 };
-
-<Canvas>
-  <Story name="Mini menu">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Mini menu" />

package/src/Menu/Menu.test.tsx

@@ -5,12 +5,17 @@ import { Menu } from './Menu';
 import { MenuItem } from '../MenuItem';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   menu: {
     default: {
-      padding: '4px',
+      padding: 'small',
     },
     custom: {
-      padding: '8px',
+      padding: 'medium',
     },
   },
 };

package/src/Menu/Menu.tsx

@@ -4,6 +4,14 @@ import { ComponentProps } from '@marigold/types';
 import { Button } from '../Button';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface MenuThemeExtension<Value> {
+  menu?: Value;
+}
+
+// Props
+// ---------------
 export type MenuProps = {
   variant?: string;
   label?: string;
@@ -13,6 +21,8 @@ export type MenuProps = {
   title?: string; // For testing
 };
 
+// Component
+// ---------------
 export const Menu: React.FC<MenuProps> = ({
   variant = 'default',
   label = 'Menu',

package/src/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { MenuItem } from './MenuItem';
+
+export default {
+  title: 'Components/MenuItem',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof MenuItem> = args => (
+  <MenuItem href="#" {...args}>
+    Home
+  </MenuItem>
+);

package/src/MenuItem/MenuItem.test.tsx

@@ -4,12 +4,17 @@ import { ThemeProvider } from '@marigold/system';
 import { MenuItem } from './MenuItem';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   menuItem: {
     default: {
-      padding: '4px',
+      padding: 'small',
     },
     item: {
-      padding: '8px',
+      padding: 'medium',
     },
   },
 };

package/src/MenuItem/MenuItem.tsx

@@ -3,10 +3,22 @@ import { ComponentProps } from '@marigold/types';
 import { Link } from '../Link';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface MenuItemThemeExtension<Value> {
+  menuItem?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type MenuItemProps = {
   variant?: string;
 } & ComponentProps<typeof Link>;
 
+// Component
+// ---------------
 export const MenuItem: React.FC<MenuItemProps> = ({
   variant = 'default',
   className,

package/src/Message/Message.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Message } from './Message';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Message',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['warning', 'error', 'info'],
+      description: 'Messaging in different colors and icons',
+    },
+    messageTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'Content',
+      defaultValue: 'Danger Zone!',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Message> = args => (
+  <Message {...args}>
+    <Text>Hello, I am a simple message.</Text>
+  </Message>
+);

package/src/Message/Message.test.tsx

@@ -4,7 +4,10 @@ import { ThemeProvider } from '@marigold/system';
 import { Message } from './Message';
 
 const theme = {
-  messages: {
+  colors: {
+    primary: 'hotpink',
+  },
+  message: {
     info: {
       alignItems: 'center',
     },

package/src/Message/Message.tsx

@@ -2,13 +2,25 @@ import React from 'react';
 import { Exclamation, Info, Notification } from '@marigold/icons';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
-import { Heading } from '../Heading';
+import { Text } from '../Text';
 
+// Theme Extension
+// ---------------
+export interface MessageThemeExtension<Value> {
+  message?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type MessageProps = {
   messageTitle: string;
   variant?: string;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Message: React.FC<MessageProps> = ({
   messageTitle,
   variant = 'info',
@@ -27,15 +39,15 @@ export const Message: React.FC<MessageProps> = ({
   return (
     <Box
       display="inline-block"
-      variant={`messages.${variant}`}
+      variant={`message.${variant}`}
       className={className}
       {...props}
     >
-      <Box display="flex" alignItems="center" variant="messages.title">
+      <Box display="flex" alignItems="center" variant="message.title">
         {icon}
-        <Heading as="h4" variant="h4">
+        <Text as="h4" variant="headline4">
           {messageTitle}
-        </Heading>
+        </Text>
       </Box>
       <Box css={{ color: 'black' }}>{children}</Box>
     </Box>