@marigold/components 0.1.0 → 0.2.0

package/src/Dialog/ModalDialog.tsx

@@ -0,0 +1,47 @@
+import React, { RefObject } from 'react';
+import {
+  useOverlay,
+  usePreventScroll,
+  useModal,
+  OverlayProps,
+} from '@react-aria/overlays';
+import { useDialog } from '@react-aria/dialog';
+import { FocusScope } from '@react-aria/focus';
+import { AriaDialogProps } from '@react-types/dialog';
+
+import { Box } from '../Box';
+
+export type ModalDialogProps = OverlayProps & AriaDialogProps;
+
+export const ModalDialog: React.FC<ModalDialogProps> = ({
+  children,
+  ...props
+}) => {
+  // Handle interacting outside the dialog and pressing
+  // the Escape key to close the modal.
+  const ref = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
+  const { overlayProps, underlayProps } = useOverlay(props, ref);
+
+  // Prevent scrolling while the modal is open, and hide content
+  // outside the modal from screen readers.
+  usePreventScroll();
+
+  const { modalProps } = useModal();
+  const { dialogProps } = useDialog(props, ref);
+
+  return (
+    <Box variant="dialog.modalWrapper" {...underlayProps}>
+      <FocusScope contain restoreFocus autoFocus>
+        <Box
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          variant="dialog.modalBody"
+        >
+          {children}
+        </Box>
+      </FocusScope>
+    </Box>
+  );
+};

package/src/Divider/Divider.stories.mdx

@@ -1,43 +1,37 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Divider } from './Divider';
 import { Text } from '../Text';
 
-<Meta title="Components/Divider" />
+<Meta
+  title="Components/Divider"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['regular', 'bold'],
+      description: 'Thick or thin line',
+      table: {
+        defaultValue: {
+          summary: 'regular',
+        },
+      },
+    },
+  }}
+/>
 
 # Divider
 
-## Description
-
-A divider is a layout or list element to group content or separate elements.
-The themeSection is `divider` and the variant can be added with the variant prop which is `regular` per default.
-
-## Properties
-
-| Property             | Type     | Default   |
-| :------------------- | :------- | :-------- |
-| `variant` (optional) | `string` | `regular` |
-
-## Import
-
-```tsx
-import { Divider } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <div>
+    <Text>Above</Text>
+    <Divider {...args} />
+    <Text>Below</Text>
+  </div>
+);
 
 <Canvas>
-  <Story name="Divider/regular">
-    <div>
-      <Text>Some text</Text>
-      <Divider />
-      <Text>Some other text to show regular divider</Text>
-    </div>
-  </Story>
-  <Story name="Divider/bold">
-    <div>
-      <Text>Some text</Text>
-      <Divider variant="bold" />
-      <Text>Some other text to show strong divider</Text>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Field/Field.stories.mdx

@@ -1,57 +1,97 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Field } from './Field';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/Field" />
+<Meta
+  title="Components/Field"
+  argTypes={{
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+  }}
+/>
 
 # Field
 
-## Description
-
-With the Field component you can add a HTML `<label>` and `<input>` element to your form.
-The element uses always the themeSection with the name: `field` 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`                                                                                   |           |
-| `label`              | `string`                                                                                   |           |
-| `error` (optional)   | `string`                                                                                   |           |
-| `type`               | `date, datetime-local, email, month, number, password, search, tel, text, time, url, week` | `text`    |
-
-## Import
-
-```tsx
-import { Field } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Field htmlFor="id" label="A label" type="text" {...args} />
+);
 
 <Canvas>
-  <Story name="Field1">
-    <div>
-      <Field label="Firstname" htmlFor="myId" />
-      <br />
-      <Field label="Name" htmlFor="myId" error="Validation message" />
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="Field2">
-    <div>
-      <Field
-        label="Pick your date"
-        type="date"
-        htmlFor="myId"
-        error="ERROR!"
-        className={useStyles({ color: '#dd4142' })}
-      />
-      <br />
-      <Field label="Choose the week" type="week" htmlFor="myId" />
-    </div>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Field/Field.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
 import { Field } from './Field';
-import { useStyles } from '@marigold/system';
 
 const theme = {
   field: {
@@ -15,28 +14,6 @@ const theme = {
   },
 };
 
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="label" />
-    </ThemeProvider>
-  );
-  const field = screen.getByText(/label/);
-
-  expect(field).toHaveStyle(`padding: 4px`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="inputField" variant="inputField" />
-    </ThemeProvider>
-  );
-  const inputField = screen.getByText(/inputField/);
-
-  expect(inputField).toHaveStyle(`padding: 8px`);
-});
-
 test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -56,34 +33,48 @@ test('supports label prop', () => {
 });
 
 test('supports htmlFor prop', () => {
-  render(<Field htmlFor="myId" label="Name" error="Validation error" />);
+  render(<Field htmlFor="myId" label="Name" />);
   const field = screen.getByText(/Name/);
 
   expect(field).toHaveAttribute('for');
 });
 
-test('supports error prop', () => {
-  render(<Field htmlFor="myId" label="label" error="Validation error" />);
-  const field = screen.getByText(/Validation/);
+test('supports required prop', () => {
+  render(<Field htmlFor="myId" label="label" required />);
+  const fieldLabel = screen.getByText(/label/);
 
-  expect(field).toBeDefined();
+  expect(fieldLabel.nextSibling).toBeDefined();
+  expect(fieldLabel.nextSibling instanceof SVGElement).toBeTruthy();
 });
 
-test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ css: { fontSize: '8px' } });
-    return (
-      <Field htmlFor="myId" label="label" className={classNames} {...props} />
-    );
-  };
+test('supports error and errorMessage prop', () => {
+  render(
+    <Field htmlFor="myId" label="label" error errorMessage="Validation error" />
+  );
 
-  const { getByText } = render(
+  const errorMessage = screen.getByText(/Validation/);
+  expect(errorMessage).toBeDefined();
+});
+
+test('supports disabled prop', () => {
+  render(<Field htmlFor="myId" label="label" disabled />);
+  const fieldLabel = screen.getByText(/label/);
+  expect(fieldLabel.nextSibling).toHaveAttribute('disabled');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent />
+      <Field
+        htmlFor="myId"
+        label="label"
+        className="custom-class-name"
+        title="field"
+        data-testid="field"
+      />
     </ThemeProvider>
   );
-  const testelem = getByText('label');
-  const field = getComputedStyle(testelem);
+  const field = screen.getByTestId(/field/);
 
-  expect(field.fontSize).toEqual('8px');
+  expect(field.className).toMatch('custom-class-name');
 });

package/src/Field/Field.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
-import { Exclamation, Required } from '@marigold/icons';
+import { Exclamation } from '@marigold/icons';
 import { ComponentProps } from '@marigold/types';
 
 import { Input } from '../Input';
@@ -8,42 +7,48 @@ import { Label } from '../Label';
 import { ValidationMessage } from '../ValidationMessage';
 
 export type FieldProps = {
-  variant?: string;
   htmlFor: string;
   label: string;
-  error?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
 } & ComponentProps<'input'>;
 
 export const Field: React.FC<FieldProps> = ({
-  variant = 'default',
   type = 'text',
-  className = '',
+  className,
   htmlFor,
   label,
+  required,
   error,
+  errorMessage,
+  disabled,
   ...props
 }) => {
-  const labelClassName = useStyles({
-    variant: `field.${variant}`,
-    className,
-  });
-  const errorClassName = useStyles({ css: { color: 'red60' } });
-
   return (
-    <div>
-      <Label className={labelClassName} htmlFor={htmlFor}>
+    <>
+      <Label
+        variant={disabled ? 'disabled' : 'above'}
+        htmlFor={htmlFor}
+        required={required}
+      >
         {label}
-        {error ? <Required size={16} className={errorClassName} /> : ''}
       </Label>
-      <Input {...props} type={type} id={htmlFor} />
-      {error ? (
+      <Input
+        {...props}
+        type={type}
+        id={htmlFor}
+        disabled={disabled}
+        variant={error ? 'error' : 'default'}
+        className={className}
+      />
+      {error && errorMessage && (
         <ValidationMessage>
           <Exclamation size={16} />
-          {error}
+          {errorMessage}
         </ValidationMessage>
-      ) : (
-        ''
       )}
-    </div>
+    </>
   );
 };

package/src/Heading/Heading.stories.mdx

@@ -1,91 +1,39 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Heading } from './Heading';
 import { Text } from '../Text';
 
-<Meta title="Components/Heading" />
+<Meta
+  title="Components/Heading"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'h2',
+        },
+      },
+    },
+  }}
+/>
 
 # Heading
 
-## Description
-
-Use the Heading component for headings of texts. Predefined variants are `h1`, `h2`, `h3`, `h4`, `h5` and `h6`.
-
-## Properties
-
-| Property  | Type                               | Default |
-| :-------- | :--------------------------------- | :------ |
-| `as`      | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2`    |
-| `variant` | `string`                           | `h2`    |
-
-## Import
-
-```tsx
-import { Heading } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <div>
+    <Heading {...args}>Heading</Heading>
+    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          dignissim dapibus elit, vel egestas felis pharetra non. Cras
+          malesuada, massa nec ultricies efficitur, lectus ante consequat magna,
+          a porttitor massa ex ut quam.</Text>
+  </div>
+);
 
 <Canvas>
-  <Story name="Headings">
-    <div>
-      <Heading as="h2" variant="h1">
-        H1 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading>H2 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h3" variant="h3">
-        H3 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h4" variant="h4">
-        H4 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h5" variant="h5">
-        H5 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h6" variant="h6">
-        H6 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Hidden/Hidden.stories.mdx

@@ -1,64 +1,39 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Button } from '../Button';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Hidden } from './Hidden';
 import { Text } from '../Text';
-import { useState } from 'react';
 
-<Meta title="Components/Hidden" />
+<Meta
+  title="Components/Hidden"
+  argTypes={{
+    show: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Show or hide',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  }}
+/>
 
 # Hidden
 
-## Description
-
-With the Hidden component you can hide elements or components. E.g. to hide some text in specific cases, for groups or platforms.
-
-## Properties
-
-| Property          | Type      | Default |
-| :---------------- | :-------- | :------ |
-| `show` (optional) | `boolean` | `false` |
-
-## Import
-
-```tsx
-import { Hidden } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <div>
+    <Text>Change the "show" switch to "true"</Text>
+    <Hidden {...args}>
+      <br />
+      <Text>Hello here I am!</Text>
+    </Hidden>
+  </div>
+);
 
 <Canvas>
-  <Story name="HiddenText">
-    <div>
-      <Text>Hello, I am visible</Text>
-      <Hidden>
-        <Text>Hello, I am invisible</Text>
-      </Hidden>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="HiddenButton">
-    {() => {
-      const [state, setState] = React.useState({
-        showButton: false,
-      });
-      const handleToggleClick = () => {
-        setState(prevState => ({
-          showButton: !prevState.showButton,
-        }));
-      };
-      return (
-        <div>
-          <Button variant="primary.small" onClick={handleToggleClick}>
-            {state.showButton ? 'Hide Text' : 'Show Text'}
-          </Button>
-          <Hidden show={state.showButton}>
-            <br />
-            <Text>Hello, now I am visible</Text>
-          </Hidden>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />