@marigold/components 0.1.0 → 0.2.0

package/src/Image/Image.stories.mdx

@@ -1,40 +1,36 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Image } from './Image';
 import image1 from '../../../images/src/type_logo.png';
-import image2 from '../../../images/src/Marigold_Logo_Hotelstyle.png';
 
-<Meta title="Components/Image" />
+<Meta
+  title="Components/Image"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'there is only one variant',
+      table: {
+        defaultValue: {
+          summary: 'fullWidth',
+        },
+      },
+    },
+    alt: {
+      control: {
+        type: 'text',
+      },
+      description: 'Description text for screenreaders'
+    },
+  }}
+/>
 
 # Image
 
-## Description
-
-With the Image component you can render an `img` element.
-The themeSection is `images` and the variant can be added with the variant prop which is `fullWidth` per default.
-
-## Properties
-
-| Property             | Type     | Default     |
-| :------------------- | :------- | :---------- |
-| `variant` (optional) | `string` | `fullWidth` |
-| `alt` (optional)     | `string` | ``          |
-
-## Import
-
-```tsx
-import { Image } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => <Image src={image1} alt="marigold_logo" />;
 
 <Canvas>
-  <Story name="firstImage">
-    <Image src={image1} alt="marigold_logo" />
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="secondImage">
-    <Image src={image2} width="500" height="300" />
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Input/Input.stories.mdx

@@ -1,45 +1,61 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Input } from './Input';
 import { Label } from '../Label';
 
-<Meta title="Components/Input" />
+<Meta
+  title="Components/Input"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      type: { required: true },
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  }}
+/>
 
 # Input
 
-## Description
-
-With the Input component you can add a HTML `<input>` field for different types of text to your form.
-The element uses always the themeSection with the name: `input` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-
-## Properties
-
-| Property             | Type     | Default   |
-| :------------------- | :------- | :-------- |
-| `variant` (optional) | `string` | `default` |
-
-## Import
-
-```tsx
-import { Input } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Label htmlFor="input">
+    Label
+    <Input id="input" placeholder="Placeholder..." {...args} />
+  </Label>
+);
 
 <Canvas>
-  <Story name="Input">
-    <div>
-      <Label htmlFor="input">
-        Label
-        <Input id="input" placeholder="Placeholder" />
-      </Label>
-      <Label htmlFor="input2">
-        Label
-        <Input id="input2" placeholder="Disabled" disabled />
-      </Label>
-      <Label htmlFor="input3">
-        Label
-        <Input id="input2" type="submit" />
-      </Label>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Label/Label.stories.mdx

@@ -1,34 +1,52 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Label } from './Label';
 
-<Meta title="Components/Label" />
-
-# Label-Component
-
-## Description
-
-With the Label component you can add a HTML `<Label>` element to your form.
-The element uses always the themeSection with the name: `label` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-
-## Properties
-
-| Property             | Type     | Default   |
-| :------------------- | :------- | :-------- |
-| `variant` (optional) | `string` | `default` |
-| `htmlFor`            | `string` |           |
-
-## Import
-
-```tsx
-import { Label } from '@marigold/components';
-```
-
-## Usage
+<Meta
+  title="Components/Label"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      type: {
+        required: true,
+      },
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds required Icon to label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  }}
+/>
+
+# Label
+
+export const Template = args => (
+  <Label htmlFor="input" {...args}>
+    Label
+  </Label>
+);
 
 <Canvas>
-  <Story name="label">
-    <Label variant="label" htmlFor="labelId">
-      I am a Label!
-    </Label>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Label/Label.test.tsx

@@ -5,7 +5,7 @@ import { Label } from './Label';
 
 const theme = {
   label: {
-    default: {
+    above: {
       fontFamily: 'Inter Regular',
     },
     myLabel: {
@@ -49,6 +49,20 @@ test('supports htmlFor prop', () => {
   expect(label).toHaveAttribute('for');
 });
 
+test('supports required prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" required>
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  const parent = label.parentElement;
+
+  expect(parent instanceof HTMLSpanElement).toBeTruthy();
+});
+
 test('renders <label> element', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Label/Label.tsx

@@ -1,18 +1,31 @@
 import React from 'react';
 import { ComponentProps } from '@marigold/types';
+import { Required } from '@marigold/icons';
+
 import { Box } from '../Box';
 
 export type LabelProps = {
-  htmlFor: string;
+  htmlFor?: string;
   variant?: string;
+  required?: boolean;
 } & ComponentProps<'label'>;
 
 export const Label: React.FC<LabelProps> = ({
-  variant = 'default',
+  variant = 'above',
+  required,
   children,
   ...props
-}) => (
-  <Box {...props} as="label" variant={`label.${variant}`}>
-    {children}
-  </Box>
-);
+}) => {
+  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' }} />}
+    </Box>
+  ) : (
+    <Box {...props} as="label" variant={`label.${variant}`}>
+      {children}
+    </Box>
+  );
+};

package/src/Link/Link.stories.mdx

@@ -1,38 +1,45 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Link } from './Link';
 import { Text } from '../Text';
 
-<Meta title="Components/Link" />
+<Meta
+  title="Components/Link"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'link',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The URL to direct to',
+      type: {
+        required: true,
+      },
+    },
+  }}
+/>
 
 # Link
 
-## Description
-
-Element to style links.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `link`  |
-| `href`               | `string` |         |
-
-## Import
-
-```tsx
-import { Link } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Text>
+    <Link href="https://marigold-ui.io" target="_blank">
+      Cool site
+    </Link>
+  </Text>
+);
 
 <Canvas>
-  <Story name="Link">
-    <Text>
-      Link something nice like{' '}
-      <Link href="#!" target="_blank">
-        Marigold
-      </Link>{' '}
-      in text.
-    </Text>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Menu/Menu.stories.mdx

@@ -1,49 +1,81 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Divider } from '../Divider';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Menu } from './Menu';
 import { MenuItem } from '../MenuItem';
 import { BurgerMenu } from '@marigold/icons';
+import { useState } from 'react';
 
-<Meta title="Components/Menu" />
+<Meta
+  title="Components/Menu"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Menu label on hover',
+      table: {
+        defaultValue: {
+          summary: 'Menu',
+        },
+      },
+    },
+    show: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Show what',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    onClick: {
+      control: {
+        type: 'text',
+      },
+      description: 'Function to show menu or toggle something',
+      type: { required: true },
+    },
+  }}
+/>
 
 # Menu
 
-## Description
-
-With the Menu component you can add a Menu Button with Text or Icon as Label and as children some MenuItem components.
-The element uses always the themeSection with the name: `content` in your given theme. The variant in your section can be added with the variant prop. The default variant is `menu`.
-
-## Properties
-
-| Property             | Type       | Default |
-| :------------------- | :--------- | :------ |
-| `variant` (optional) | `string`   | `menu`  |
-| `label` (optional)   | `string`   | `Menu`  |
-| `onClick`            | `function` |         |
-| `show` (optional)    | `boolean`  | `false` |
-
-## Import
-
-```tsx
-import { Menu } from '@marigold/components';
-```
-
-## Usage
+export const Template = ({ onClick, ...args }) => {
+  const [showMenu, setShowMenu] = React.useState(false);
+  return (
+    <Menu
+      onClick={() => setShowMenu(!showMenu)}
+      show={showMenu}
+      label={<BurgerMenu />}
+      {...args}
+    >
+      <MenuItem href="#">Home</MenuItem>
+      <MenuItem href="#">Tickets</MenuItem>
+      <MenuItem href="#">Logout</MenuItem>
+    </Menu>
+  );
+};
 
 <Canvas>
-  <Story name="menu">
-    {() => {
-      const [showMenu, setShowMenu] = React.useState(false);
-      const toggle = () => {
-        setShowMenu(!showMenu);
-      };
-      return (
-        <Menu onClick={toggle} show={showMenu} label={<BurgerMenu />}>
-          <MenuItem href="#">Home</MenuItem>
-          <MenuItem href="#">Tickets</MenuItem>
-          <MenuItem href="#">Kundenkonto</MenuItem>
-        </Menu>
-      );
-    }}
-  </Story>
+  <Story name="Mini menu">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Mini menu" />

package/src/Menu/Menu.test.tsx

@@ -5,11 +5,11 @@ import { Menu } from './Menu';
 import { MenuItem } from '../MenuItem';
 
 const theme = {
-  content: {
-    menu: {
+  menu: {
+    default: {
       padding: '4px',
     },
-    options: {
+    custom: {
       padding: '8px',
     },
   },
@@ -31,7 +31,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Menu variant="options" title="menu" onClick={() => {}}>
+      <Menu variant="custom" title="menu" onClick={() => {}}>
         <MenuItem href="#">Home</MenuItem>
       </Menu>
     </ThemeProvider>

package/src/Menu/Menu.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
 import { Button } from '../Button';
@@ -15,29 +14,28 @@ export type MenuProps = {
 };
 
 export const Menu: React.FC<MenuProps> = ({
-  variant = 'menu',
+  variant = 'default',
   label = 'Menu',
   onClick,
   show = false,
   children,
   ...props
 }) => {
-  const itemStyles = useStyles({
-    css: {
-      position: 'absolute',
-      minWidth: '120px',
-      display: 'block',
-      textAlign: 'left',
-      borderRadius: '2px',
-    },
-  });
-
   return (
-    <Box variant={`content.${variant}`} {...props}>
+    <Box variant={`menu.${variant}`} {...props}>
       <Button onClick={onClick} variant="menu">
         {label}
       </Button>
-      {show ? <div className={itemStyles}>{children}</div> : null}
+      {show ? (
+        <Box
+          display="block"
+          position="absolute"
+          minWidth="120px"
+          borderRadius="2px"
+        >
+          {children}
+        </Box>
+      ) : null}
     </Box>
   );
 };

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,32 +1,37 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Menu } from '../Menu';
 import { MenuItem } from './MenuItem';
 
-<Meta title="Components/MenuItem" />
-
-# Menu
-
-## Description
-
-With the MenuItem component you can add a MenuItem which renders a link component to a Menu component.
-The element uses always the themeSection with the name: `menu` in your given theme. The variant in your section can be added with the variant prop. The default variant is `menuItem`.
-The Link component in the MenuItem uses the variant `menu`.
-
-## Properties
-
-| Property             | Type     | Default    |
-| :------------------- | :------- | :--------- |
-| `variant` (optional) | `string` | `menuItem` |
-
-## Import
-
-```tsx
-import { MenuItem } from '@marigold/components';
-```
-
-## Usage
+<Meta
+  title="Components/MenuItem"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+  }}
+/>
+
+# Menu Item
+
+export const Template = args => {
+  return <MenuItem href="#">Home</MenuItem>;
+};
 
 <Canvas>
-  <Story name="MenuItem">
-    <MenuItem href="#">Menu Item</MenuItem>
-  </Story>
+  <Story name="Menu Item">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Menu Item" />