@marigold/components 0.0.3 → 0.3.1

package/src/Columns/Columns.test.tsx

@@ -1,102 +1,113 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Column, Columns } from '@marigold/components';
+import { Column, Columns, MarigoldProvider } from '@marigold/components';
+
+const theme = {
+  space: {
+    none: 0,
+    large: 24,
+  },
+};
 
 test('supports default space prop', () => {
   render(
-    <Columns title="column">
-      <Column>column</Column>
-    </Columns>
+    <MarigoldProvider theme={theme}>
+      <Columns data-testid="column">
+        <Column>column</Column>
+      </Columns>
+    </MarigoldProvider>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`margin: 0px`);
 });
 
 test('supports custom space prop', () => {
   render(
-    <Columns space={24} title="column">
-      <Column>column</Column>
-    </Columns>
+    <MarigoldProvider theme={theme}>
+      <Columns space="large" data-testid="column">
+        <Column>column</Column>
+      </Columns>
+    </MarigoldProvider>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`margin: -12px`);
 });
 
 test('supports default horizontalAlign prop: left', () => {
   render(
-    <Columns title="column">
+    <Columns data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`justify-content: flex-start`);
 });
 
 test('supports custom horizontalAlign prop: center', () => {
   render(
-    <Columns horizontalAlign="center" title="column">
+    <Columns horizontalAlign="center" data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`justify-content: center`);
 });
 
 test('supports custom horizontalAlign prop: right', () => {
   render(
-    <Columns horizontalAlign="right" title="column">
+    <Columns horizontalAlign="right" data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`justify-content: flex-end`);
 });
 
 test('supports default verticalAlign prop: top', () => {
   render(
-    <Columns title="column">
+    <Columns data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`align-items: flex-start`);
 });
 
 test('supports custom verticalAlign prop: center', () => {
   render(
-    <Columns verticalAlign="center" title="column">
+    <Columns verticalAlign="center" data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`align-items: center`);
 });
 
 test('supports custom verticalAlign prop: bottom', () => {
   render(
-    <Columns verticalAlign="bottom" title="column">
+    <Columns verticalAlign="bottom" data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column).toHaveStyle(`align-items: flex-end`);
 });
 
 test('renders correct HTML element', () => {
   render(
-    <Columns title="column">
+    <Columns data-testid="column">
       <Column>column</Column>
     </Columns>
   );
-  const column = screen.getByTitle(/column/);
+  const column = screen.getByTestId(/column/);
 
   expect(column instanceof HTMLDivElement).toBeTruthy();
 });

package/src/Columns/Columns.tsx

@@ -1,63 +1,63 @@
 import React, { Children } from 'react';
-import { useStyles } from '@marigold/system';
 import { Box } from '../Box';
 import flattenChildren from 'react-keyed-flatten-children';
+import { ResponsiveStyleValue, useTheme } from '@marigold/system';
 
 type ColumnsProps = {
   className?: string;
-  space?: number;
+  space?: ResponsiveStyleValue<string>;
   horizontalAlign?: 'left' | 'right' | 'center';
   verticalAlign?: 'top' | 'bottom' | 'center';
-  title?: string; // Should only be used for testing.
+};
+
+const useAlignment = (direction: string) => {
+  switch (direction) {
+    case 'right':
+      return 'flex-end';
+    case 'bottom':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+  }
+  return 'flex-start';
 };
 
 export const Columns: React.FC<ColumnsProps> = ({
-  space = 0,
+  space = 'none',
   horizontalAlign = 'left',
   verticalAlign = 'top',
   className,
   children,
   ...props
 }) => {
-  let columnItems = flattenChildren(children);
-  let childClassNames = useStyles({ css: { p: `${space / 2}px` } });
+  const justifyContent = useAlignment(horizontalAlign);
+  const alignItems = useAlignment(verticalAlign);
 
-  // horizontal Alignment
-  let justify = 'flex-start';
-  if (horizontalAlign === 'right') {
-    justify = 'flex-end';
-  } else if (horizontalAlign === 'center') {
-    justify = 'center';
-  }
-
-  // vertical Alignment
-  let alignItems = 'flex-start';
-  if (verticalAlign === 'bottom') {
-    alignItems = 'flex-end';
-  } else if (verticalAlign === 'center') {
-    alignItems = 'center';
-  }
+  /**
+   * transform space string to space value from theme
+   */
+  const { css } = useTheme();
+  const spaceObject = css({ space }) as Object;
+  const spaceValue = Object.values(spaceObject)[0];
 
   return (
-    <Box p={`${space}px`} display="flex" className={className}>
+    <Box p={space} display="flex" className={className}>
       <Box
-        width={`calc(100% + ${space}px)`}
-        m={`${-space / 2}px`}
+        width={`calc(100% + ${spaceValue}px)`}
+        m={`${-spaceValue / 2}px`}
         display="flex"
         flexWrap="wrap"
         alignItems={alignItems}
-        justifyContent={justify}
+        justifyContent={justifyContent}
         {...props}
       >
         {Children.map(
-          (columnItems as unknown) as React.ReactElement,
+          flattenChildren(children) as unknown as React.ReactElement,
           (child: React.ReactElement) => {
             return React.cloneElement(
               child,
-              {
-                className: childClassNames,
-              },
-              <Box className={child && child.props.className}>
+              {},
+              <Box css={{ p: `${spaceValue / 2}px` }}>
                 {child.props.children}
               </Box>
             );

package/src/Container/Container.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Container } from './Container';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Container',
+} as Meta;
+
+export const Basic: ComponentStory<typeof Container> = args => (
+  <Container {...args}>
+    <Text>Container with width=100%</Text>
+  </Container>
+);

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

@@ -1,47 +1,158 @@
 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 = {
+  space: {
+    none: 0,
+    xxsmall: 1,
+    xsmall: 2,
+    small: 4,
+    medium: 8,
+    large: 16,
+  },
   dialog: {
-    wrapper: {
-      alignItems: 'center',
+    __default: {
+      p: 'small',
+    },
+    default: {
+      p: 'medium',
+    },
+    backdrop: {
+      p: 'none',
     },
   },
 };
 
-test('supports default variant', () => {
+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}>
-      <Dialog title="default">Default</Dialog>
+      <DialogComponent />
     </ThemeProvider>
   );
-  const dialog = screen.getByTitle(/default/);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
 
-  expect(dialog).toHaveStyle(`align-items: center`);
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog).toHaveStyle(`padding: 4px`);
+  expect(dialog.parentElement).toHaveStyle(`padding: 0px`);
 });
 
-test('renders correct HTML element', () => {
+test('supports other variants than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Dialog title="default">Default</Dialog>
+      <DialogComponent variant="default" backdropVariant="default" />
     </ThemeProvider>
   );
-  const dialog = screen.getByTitle(/default/);
+  const button = screen.getByText(/Open/);
+  fireEvent.click(button);
 
-  expect(dialog instanceof HTMLDivElement).toBeTruthy();
+  const dialog = screen.getByRole(/dialog/);
+  expect(dialog).toHaveStyle(`padding: 8px`);
+  expect(dialog.parentElement).toHaveStyle(`padding: 8px`);
 });
 
-test('accepts custom styles prop className', () => {
+test('dialog has correct baseCSS styles', async () => {
   render(
     <ThemeProvider theme={theme}>
-      <Dialog className="custom-class-name" title="dialog">
-        Dialog
-      </Dialog>
+      <DialogComponent variant="default" backdropVariant="default" />
     </ThemeProvider>
   );
-  const dialog = screen.getByTitle(/dialog/);
+  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.className).toMatch('custom-class-name');
+  expect(dialog).not.toBeVisible();
 });

package/src/Dialog/Dialog.tsx

@@ -1,32 +1,130 @@
-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 { Text } from '../Text';
 
+import { ModalDialog, ModalDialogProps } from './ModalDialog';
+
+// Props
+// ---------------
 export type DialogProps = {
-  onClose?: ComponentProps<typeof Button>['onClick'];
-} & ComponentProps<'div'>;
+  backdropVariant?: string;
+  close: ComponentProps<typeof Button>['onClick'];
+  isOpen: boolean;
+  title?: string;
+  variant?: string;
+} & ModalDialogProps &
+  ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Dialog: React.FC<DialogProps> = ({
-  onClose,
+  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 (
-    <Box display="flex" width="100%">
-      <Box {...props} variant="dialog.wrapper" className={className}>
-        <Box display="flex">
-          <Box variant="dialog.body">{children}</Box>
-          <Box variant="dialog.onClose">
-            <Button variant="text.root" onClick={onClose}>
+    <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} />
-            </Button>
+            </Box>
           </Box>
         </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,
+  };
 };