@marigold/components 0.1.0 → 0.2.0

package/src/Columns/Columns.stories.mdx

@@ -1,247 +1,65 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Column, Columns, Divider, Text } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Columns" />
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Column, Columns, Text } from '@marigold/components';
+
+<Meta
+  title="Components/Columns"
+  argTypes={{
+    space: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 96,
+        step: 2,
+      },
+      description: 'Absolute space value',
+      table: {
+        defaultValue: {
+          summary: 0,
+        },
+      },
+    },
+    horizontalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'where to place',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+    verticalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'bottom', 'center'],
+      description: 'where to place',
+      table: {
+        defaultValue: {
+          summary: 'top',
+        },
+      },
+    },
+  }}
+/>
 
 # Columns
 
-## Description
-
-With the Columns component you can add a bundle of column components by adding props to create a layout.
-
-## Properties
-
-| Property                     | Type                  | Default |
-| :--------------------------- | :-------------------- | :------ |
-| `space` (optional)           | `number`              | `0`     |
-| `horizontalAlign` (optional) | `left, right, center` | `left`  |
-| `verticalAlign` (optional)   | `top, bottom, center` | `top`   |
-
-## Import
-
-```tsx
-import { Columns } from '@marigold/components';
-```
-
-## Usage
-
-### Spacing
+export const Template = args => (
+  <Columns {...args}>
+    <Column width={6}>
+      <Text>First column</Text>
+    </Column>
+    <Column width={6}>
+      <Text>Second column</Text>
+    </Column>
+  </Columns>
+);
 
 <Canvas>
-  <Story name="Spacing">
-    <Columns space={24} className={useStyles({ bg: '#f3f3f3' })}>
-      <Column width={4}>
-        <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>
-      </Column>
-      <Column width={4}>
-        <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>
-      </Column>
-      <Column width={4}>
-        <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>
-      </Column>
-    </Columns>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### Width
-
-<Canvas>
-  <Story name="Width">
-    <Columns space={24} className={useStyles({ bg: '#f3f3f3' })}>
-      <Column
-        width={12}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=12</Text>
-      </Column>
-      <Column
-        width={6}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=6</Text>
-      </Column>
-      <Column
-        width={6}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=6</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-### Horizontal Alignment
-
-<Canvas>
-  <Story name="horizantalAlign">
-    <Columns
-      space={24}
-      horizontalAlign="left"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>left</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      space={24}
-      horizontalAlign="center"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>center</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      space={24}
-      horizontalAlign="right"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>right</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-### Vertical Alignment
-
-<Canvas>
-  <Story name="verticalAlign">
-    <Columns
-      verticalAlign="top"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>top</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      verticalAlign="center"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>center</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      verticalAlign="bottom"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>bottom</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Container/Container.stories.mdx

@@ -1,36 +1,19 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Container } from './Container';
 import { Text } from '../Text';
-import { useStyles } from '@marigold/system';
 
 <Meta title="Components/Container" />
 
 # Container
 
-## Description
-
-Primitive layout component to embed other elements.
-
-## Import
-
-```tsx
-import { Container } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Container {...args}>
+    <Text>Container with width=100%</Text>
+  </Container>
+);
 
 <Canvas>
-  <Story name="Example 1">
-    <Container className={useStyles({ bg: 'gray' })}>
-      <Text>Example #1</Text>
-    </Container>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="Example 2">
-    <Container className={useStyles({ bg: 'green', padding: 4, margin: 1 })}>
-      <Text>Example #2</Text>
-    </Container>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Dialog/Dialog.stories.mdx

@@ -1,64 +1,73 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useStyles } from '@marigold/system';
-import { Dialog } from './Dialog';
-import { Heading } from '../Heading/';
-import { Text } from '../Text/';
-import { Button } from '../Button/';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Dialog, useDialogButtonProps } from './Dialog';
+import { Button } from '../Button';
+import { Text } from '../Text';
 
-<Meta title="Components/Dialog" />
+<Meta
+  title="Components/Dialog"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    isOpen: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'handled by state from useDialogButtonProps',
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'set dialog title',
+    },
+    close: {
+      control: {
+        type: 'text',
+      },
+      description: 'handled by state from useDialogButtonProps',
+    },
+  }}
+/>
 
 # Dialog
 
-## Description
-
-Element to display a Dialog as a reaction to an event. The user style or fill the body of the dialog with content.
-
-## Properties
-
-| Property  | Type       | Default |
-| :-------- | :--------- | :------ |
-| `onClick` | `function` |         |
-
-## Import
-
-```tsx
-import { Dialog } from '@marigold/components';
-```
-
-## Usage
+export const Template = ({ ...args }) => {
+  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
+  return (
+    <>
+      <Button
+        variant="secondary"
+        size="small"
+        {...openButtonProps}
+        ref={openButtonRef}
+      >
+        Open Dialog
+      </Button>
+      {state.isOpen && (
+        <Dialog
+          title="Dialog Title"
+          isOpen={state.isOpen}
+          close={state.close}
+          {...args}
+        >
+          <Text>Dialog content</Text>
+        </Dialog>
+      )}
+    </>
+  );
+};
 
 <Canvas>
-  <Story name="basic">
-    <Dialog
-      title="Title"
-      className={useStyles({
-        background: '#f3f3f3',
-      })}
-    >
-      <Heading as="h4" variant="h4">
-        Dialog Title
-      </Heading>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-    </Dialog>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="button">
-    <Dialog
-      title="Title"
-      className={useStyles({
-        border: '1px solid',
-      })}
-    >
-      <Heading as="h4" variant="h4">
-        Marigold
-      </Heading>
-      <Text>Do you love the marigold design system?</Text>
-      <br />
-      <Button variant="secondary.small">Agree</Button>
-    </Dialog>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Dialog/Dialog.test.tsx

@@ -1,47 +1,87 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ThemeProvider } from '@marigold/system';
-import { Dialog } from './Dialog';
+import { Dialog, useDialogButtonProps } from './Dialog';
+import { Button } from '../Button';
 
 const theme = {
   dialog: {
     wrapper: {
-      alignItems: 'center',
+      p: '8px',
+    },
+    body: {
+      p: '4px',
+    },
+    onClose: {
+      p: '0px',
     },
   },
 };
 
-test('supports default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Dialog title="default">Default</Dialog>
-    </ThemeProvider>
+const DialogComponent: React.FC = props => {
+  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
+  return (
+    <>
+      <Button {...openButtonProps} ref={openButtonRef}>
+        Open
+      </Button>
+      {state.isOpen && (
+        <Dialog
+          title="Title"
+          isOpen={state.isOpen}
+          close={state.close}
+          {...props}
+        >
+          Content
+        </Dialog>
+      )}
+    </>
   );
-  const dialog = screen.getByTitle(/default/);
+};
 
-  expect(dialog).toHaveStyle(`align-items: center`);
+test('dialog can be opened by button', () => {
+  render(<DialogComponent />);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+  const dialog = screen.getByText(/Content/);
+  expect(dialog).toBeDefined();
 });
 
-test('renders correct HTML element', () => {
+test('supports theme variants', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Dialog title="default">Default</Dialog>
+      <DialogComponent data-testid="Dialog" />
     </ThemeProvider>
   );
-  const dialog = screen.getByTitle(/default/);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
 
-  expect(dialog instanceof HTMLDivElement).toBeTruthy();
+  const dialogBody = screen.getByTestId(/Dialog/);
+  expect(dialogBody).toHaveStyle(`padding: 8px`);
+  const dialogTitle = screen.getByText(/Title/);
+  expect(dialogTitle.parentElement).toHaveStyle(`padding: 4px`);
 });
 
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Dialog className="custom-class-name" title="dialog">
-        Dialog
-      </Dialog>
-    </ThemeProvider>
-  );
-  const dialog = screen.getByTitle(/dialog/);
+test('close Dialog by escape key', () => {
+  render(<DialogComponent />);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByText(/Content/);
+  userEvent.type(dialog, '{esc}');
+  expect(dialog).not.toBeVisible();
+});
+
+test('close Dialog by close button', () => {
+  render(<DialogComponent data-testid="Dialog" />);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
 
-  expect(dialog.className).toMatch('custom-class-name');
+  const dialog = screen.getByTestId(/Dialog/);
+  expect(dialog).toBeVisible();
+  const buttonDiv = dialog.lastChild;
+  const onClose = buttonDiv && buttonDiv.firstChild;
+  onClose && fireEvent.click(onClose);
+  expect(dialog).not.toBeVisible();
 });

package/src/Dialog/Dialog.tsx

@@ -1,32 +1,84 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import { ComponentProps } from '@marigold/types';
-
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { OverlayContainer } from '@react-aria/overlays';
+import { useButton } from '@react-aria/button';
 import { Close } from '@marigold/icons';
-import { Button } from '../Button';
+
 import { Box } from '../Box';
+import { Button } from '../Button';
+import { Heading } from '../Heading';
+
+import { ModalDialog } from './ModalDialog';
 
 export type DialogProps = {
-  onClose?: ComponentProps<typeof Button>['onClick'];
+  isOpen: boolean;
+  close: ComponentProps<typeof Button>['onClick'];
+  title?: string;
 } & ComponentProps<'div'>;
 
 export const Dialog: React.FC<DialogProps> = ({
-  onClose,
   children,
+  title,
   className,
+  isOpen,
+  close,
   ...props
 }) => {
+  const closeButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
+
+  // useButton ensures that focus management is handled correctly,
+  // across all browsers. Focus is restored to the button once the
+  // dialog closes.
+  const { buttonProps: closeButtonProps } = useButton(
+    {
+      onPress: () => close(),
+    },
+    closeButtonRef
+  );
+
   return (
-    <Box display="flex" width="100%">
-      <Box {...props} variant="dialog.wrapper" className={className}>
-        <Box display="flex">
-          <Box variant="dialog.body">{children}</Box>
+    <OverlayContainer>
+      <ModalDialog isOpen={isOpen} onClose={close} isDismissable>
+        <Box variant="dialog.wrapper" className={className} {...props}>
+          <Box variant="dialog.body">
+            {title && (
+              <Heading as="h4" variant="h4">
+                {title}
+              </Heading>
+            )}
+            {children}
+          </Box>
           <Box variant="dialog.onClose">
-            <Button variant="text.root" onClick={onClose}>
+            <Button
+              variant="close"
+              size="xsmall"
+              {...closeButtonProps}
+              ref={closeButtonRef}
+            >
               <Close size={16} />
             </Button>
           </Box>
         </Box>
-      </Box>
-    </Box>
+      </ModalDialog>
+    </OverlayContainer>
+  );
+};
+
+// use this hook to get the overlayTriggerState and openButton props for using the dialog component
+export const useDialogButtonProps = () => {
+  const state = useOverlayTriggerState({});
+  const openButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
+  const { buttonProps: openButtonProps } = useButton(
+    {
+      onPress: () => state.open(),
+    },
+    openButtonRef
   );
+
+  return {
+    state,
+    openButtonProps,
+    openButtonRef,
+  };
 };