@marigold/components 0.0.2 → 0.3.0

package/src/Container/Container.test.tsx

@@ -1,52 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Container, Text } from '@marigold/components';
-
-const theme = {
-  layout: {
-    container: {
-      margin: 0,
-    },
-    notContainer: {
-      margin: '2px',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Container title="container">
-        <Text>sdf</Text>
-      </Container>
-    </ThemeProvider>
-  );
-  const container = screen.getByTitle(/container/);
-
-  expect(container).toHaveStyle(`margin: 0`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Container variant="notContainer" title="container">
-        <Text>sdf</Text>
-      </Container>
-    </ThemeProvider>
-  );
-  const container = screen.getByTitle(/container/);
-
-  expect(container).toHaveStyle(`margin: 2px`);
-});
+import { Container } from './Container';
+import { Text } from '../Text';
 
 test('renders correct HTML element', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Container title="container">
-        <Text>sdf</Text>
-      </Container>
-    </ThemeProvider>
+    <Container title="container">
+      <Text>sdf</Text>
+    </Container>
   );
   const container = screen.getByTitle(/container/);
 
@@ -55,11 +16,9 @@ test('renders correct HTML element', () => {
 
 test('accepts custom styles prop className', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Container className="custom-class-name" title="container">
-        <Text>text</Text>
-      </Container>
-    </ThemeProvider>
+    <Container className="custom-class-name" title="container">
+      <Text>text</Text>
+    </Container>
   );
   const container = screen.getByTitle(/container/);
 

package/src/Container/Container.tsx

@@ -1,24 +1,13 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { Box } from '../Box';
 
-type ContainerProps = {
-  variant?: string;
+export type ContainerProps = {
+  className?: string;
+  title?: string; // Used for testing.
 };
 
-export const Container = system<ContainerProps, 'div'>(
-  ({ variant = 'container', className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `layout.${variant}`,
-        width: '100%',
-      },
-      className
-    );
-
-    return (
-      <div className={classNames} {...props}>
-        {children}
-      </div>
-    );
-  }
+export const Container: React.FC<ContainerProps> = ({ children, ...props }) => (
+  <Box {...props} width="100%">
+    {children}
+  </Box>
 );

package/src/Dialog/Dialog.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Dialog, useDialogButtonProps } from './Dialog';
+import { Button } from '../Button';
+import { Text } from '../Text';
+
+export default {
+  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',
+    },
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Dialog variant',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    backdropVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Dialog backdrop variant',
+      table: {
+        defaultValue: {
+          summary: 'backdrop',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Dialog> = args => {
+  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
+  return (
+    <>
+      <Button
+        variant="secondary"
+        size="small"
+        {...openButtonProps}
+        ref={openButtonRef}
+      >
+        Open Dialog
+      </Button>
+      {state.isOpen && (
+        <Dialog
+          title="Dialog Title"
+          {...args}
+          isOpen={state.isOpen}
+          close={state.close}
+        >
+          <Text>Dialog content</Text>
+        </Dialog>
+      )}
+    </>
+  );
+};

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ThemeProvider } from '@marigold/system';
+
+import { Dialog, useDialogButtonProps } from './Dialog';
+import { Button } from '../Button';
+
+const theme = {
+  space: {
+    none: 0,
+    xxsmall: 1,
+    xsmall: 2,
+    small: 4,
+    medium: 8,
+    large: 16,
+  },
+  dialog: {
+    __default: {
+      p: 'small',
+    },
+    default: {
+      p: 'medium',
+    },
+    backdrop: {
+      p: 'none',
+    },
+  },
+};
+
+type DialogComponentProps = {
+  title?: string;
+  variant?: string;
+  backdropVariant?: string;
+};
+
+const DialogComponent: React.FC<DialogComponentProps> = ({
+  variant,
+  backdropVariant,
+}) => {
+  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
+  return (
+    <>
+      <Button {...openButtonProps} ref={openButtonRef}>
+        Open
+      </Button>
+      {state.isOpen && (
+        <Dialog
+          variant={variant}
+          backdropVariant={backdropVariant}
+          title="Title"
+          isOpen={state.isOpen}
+          close={state.close}
+        >
+          Content
+        </Dialog>
+      )}
+    </>
+  );
+};
+
+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('supports default variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <DialogComponent />
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog).toHaveStyle(`padding: 4px`);
+  expect(dialog.parentElement).toHaveStyle(`padding: 0px`);
+});
+
+test('supports other variants than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <DialogComponent variant="default" backdropVariant="default" />
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog).toHaveStyle(`padding: 8px`);
+  expect(dialog.parentElement).toHaveStyle(`padding: 8px`);
+});
+
+test('dialog has correct baseCSS styles', async () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <DialogComponent variant="default" backdropVariant="default" />
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog.firstChild).toHaveStyle(`display: flex`);
+  expect(dialog.firstChild?.lastChild).toHaveStyle(`alignItems: start`);
+
+  // ModalDialog baseCSS
+  expect(dialog.parentElement).toHaveStyle(`display: grid`);
+});
+
+test('dialog has correct baseCSS styles with theme index', async () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <DialogComponent variant="default" backdropVariant="default" />
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog.firstChild).toHaveStyle(`paddingLeft: 16`);
+  expect(dialog.firstChild?.lastChild).toHaveStyle(`paddingTop: 2`);
+
+  // find all buttons to get the close and not the open button
+  const onCloseButton = await screen.findAllByRole('button');
+  expect(onCloseButton[1]).toHaveStyle(`paddingLeft: 1`);
+});
+
+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', async () => {
+  render(<DialogComponent />);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
+
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog).toBeVisible();
+
+  // find all buttons to get the close and not the open button
+  const onCloseButton = await screen.findAllByRole('button');
+  expect(onCloseButton[1]).toBeVisible();
+  fireEvent.click(onCloseButton[1]);
+
+  expect(dialog).not.toBeVisible();
+});

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,130 @@
+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 { Box } from '../Box';
+import { Button } from '../Button';
+import { Text } from '../Text';
+
+import { ModalDialog, ModalDialogProps } from './ModalDialog';
+
+// Props
+// ---------------
+export type DialogProps = {
+  backdropVariant?: string;
+  close: ComponentProps<typeof Button>['onClick'];
+  isOpen: boolean;
+  title?: string;
+  variant?: string;
+} & ModalDialogProps &
+  ComponentProps<'div'>;
+
+// Component
+// ---------------
+export const Dialog: React.FC<DialogProps> = ({
+  backdropVariant,
+  children,
+  className,
+  close,
+  isOpen,
+  title,
+  variant,
+  ...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 (
+    <OverlayContainer>
+      <ModalDialog
+        variant={variant}
+        backdropVariant={backdropVariant}
+        isOpen={isOpen}
+        onClose={close}
+        isDismissable
+        {...props}
+      >
+        <Box
+          __baseCSS={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            borderRadius: 'small',
+            pl: 'large',
+            pb: 'large',
+          }}
+          className={className}
+        >
+          <Box pt="medium">
+            {title && (
+              <Text as="h4" variant="headline4">
+                {title}
+              </Text>
+            )}
+            {children}
+          </Box>
+          <Box
+            __baseCSS={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'start',
+              paddingTop: 'xsmall',
+              paddingX: 'xsmall',
+            }}
+          >
+            <Box
+              as={Button}
+              __baseCSS={{
+                color: 'text',
+                bg: 'transparent',
+                lineHeight: 'xsmall',
+                px: 'xxsmall',
+                ':hover': {
+                  color: 'text',
+                  bg: 'transparent',
+                  cursor: 'pointer',
+                },
+                ':focus': {
+                  outline: 0,
+                },
+              }}
+              {...closeButtonProps}
+              ref={closeButtonRef}
+            >
+              <Close size={16} />
+            </Box>
+          </Box>
+        </Box>
+      </ModalDialog>
+    </OverlayContainer>
+  );
+};
+
+// 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,
+  };
+};

package/src/Dialog/ModalDialog.tsx

@@ -0,0 +1,76 @@
+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';
+
+// Props
+// ---------------
+export type ModalDialogProps = {
+  variant?: string;
+  backdropVariant?: string;
+} & OverlayProps &
+  AriaDialogProps;
+
+// Component
+// ---------------
+export const ModalDialog: React.FC<ModalDialogProps> = ({
+  variant,
+  backdropVariant = 'backdrop',
+  children,
+  ...props
+}) => {
+  const { isDismissable, isOpen, onClose, ...restProps } = 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(
+    { isDismissable, isOpen, onClose },
+    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
+      __baseCSS={{
+        display: 'grid',
+        placeItems: 'center',
+        position: 'fixed',
+        zIndex: 100,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+      }}
+      variant={`dialog.${backdropVariant}`}
+      {...underlayProps}
+    >
+      <FocusScope contain restoreFocus autoFocus>
+        <Box
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          variant={variant ? `dialog.${variant}` : `dialog`}
+          {...restProps}
+        >
+          {children}
+        </Box>
+      </FocusScope>
+    </Box>
+  );
+};

package/src/Dialog/index.ts

@@ -0,0 +1 @@
+export * from './Dialog';

package/src/Divider/Divider.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Divider } from './Divider';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Divider',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['regular', 'bold'],
+      description: 'Thick or thin line',
+      table: {
+        defaultValue: {
+          summary: 'regular',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Divider> = args => (
+  <>
+    <Text>Above</Text>
+    <Divider {...args} />
+    <Text>Below</Text>
+  </>
+);

package/src/Divider/Divider.test.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Divider } from '@marigold/components';
+import { Divider } from './Divider';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
+  borders: {
+    none: 0,
+    regular: '1px solid',
+  },
   divider: {
     regular: {
-      border: 0,
-      borderBottom: '1px solid',
-      margin: '2px',
+      border: 'none',
+      borderBottom: 'regular',
+      margin: 'small',
     },
     bold: {
-      border: 0,
+      border: 'none',
       borderBottom: '2px solid',
-      margin: '2px',
+      margin: 'small',
     },
   },
 };

package/src/Divider/Divider.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { Box } from '../Box';
 
-type DividerProps = {
+// Theme Extension
+// ---------------
+export interface DividerThemeExtension<Value> {
+  divider?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type DividerProps = {
+  className?: string;
   variant?: string;
+  title?: string; // Should only be used for testing.
 };
 
-export const Divider = system<DividerProps, 'hr'>(
-  ({ variant = 'regular', className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `divider.${variant}`,
-      },
-      className
-    );
-    return <hr className={classNames} {...props} />;
-  }
-);
+// Component
+// ---------------
+export const Divider: React.FC<DividerProps> = ({
+  variant = 'regular',
+  ...props
+}) => <Box {...props} as="hr" variant={`divider.${variant}`} />;