@marigold/components 0.2.0 → 0.3.0

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.mdx → Dialog.stories.tsx}

@@ -1,16 +1,17 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Dialog, useDialogButtonProps } from './Dialog';
 import { Button } from '../Button';
 import { Text } from '../Text';
 
-<Meta
-  title="Components/Dialog"
-  parameters={{
+export default {
+  title: 'Components/Dialog',
+  parameters: {
     actions: {
       handles: ['click'],
     },
-  }}
-  argTypes={{
+  },
+  argTypes: {
     isOpen: {
       control: {
         type: 'boolean',
@@ -35,12 +36,32 @@ import { Text } from '../Text';
       },
       description: 'handled by state from useDialogButtonProps',
     },
-  }}
-/>
-
-# Dialog
+    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 Template = ({ ...args }) => {
+export const Basic: ComponentStory<typeof Dialog> = args => {
   const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
   return (
     <>
@@ -55,9 +76,9 @@ export const Template = ({ ...args }) => {
       {state.isOpen && (
         <Dialog
           title="Dialog Title"
+          {...args}
           isOpen={state.isOpen}
           close={state.close}
-          {...args}
         >
           <Text>Dialog content</Text>
         </Dialog>
@@ -65,9 +86,3 @@ export const Template = ({ ...args }) => {
     </>
   );
 };
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Dialog/Dialog.test.tsx

@@ -1,25 +1,44 @@
 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: {
-    wrapper: {
-      p: '8px',
+    __default: {
+      p: 'small',
     },
-    body: {
-      p: '4px',
+    default: {
+      p: 'medium',
     },
-    onClose: {
-      p: '0px',
+    backdrop: {
+      p: 'none',
     },
   },
 };
 
-const DialogComponent: React.FC = props => {
+type DialogComponentProps = {
+  title?: string;
+  variant?: string;
+  backdropVariant?: string;
+};
+
+const DialogComponent: React.FC<DialogComponentProps> = ({
+  variant,
+  backdropVariant,
+}) => {
   const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
   return (
     <>
@@ -28,10 +47,11 @@ const DialogComponent: React.FC = props => {
       </Button>
       {state.isOpen && (
         <Dialog
+          variant={variant}
+          backdropVariant={backdropVariant}
           title="Title"
           isOpen={state.isOpen}
           close={state.close}
-          {...props}
         >
           Content
         </Dialog>
@@ -48,19 +68,67 @@ test('dialog can be opened by button', () => {
   expect(dialog).toBeDefined();
 });
 
-test('supports theme variants', () => {
+test('supports default variants', () => {
   render(
     <ThemeProvider theme={theme}>
-      <DialogComponent data-testid="Dialog" />
+      <DialogComponent />
     </ThemeProvider>
   );
   const button = screen.getByText(/Open/);
   fireEvent.click(button);
 
-  const dialogBody = screen.getByTestId(/Dialog/);
-  expect(dialogBody).toHaveStyle(`padding: 8px`);
-  const dialogTitle = screen.getByText(/Title/);
-  expect(dialogTitle.parentElement).toHaveStyle(`padding: 4px`);
+  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', () => {
@@ -73,15 +141,18 @@ test('close Dialog by escape key', () => {
   expect(dialog).not.toBeVisible();
 });
 
-test('close Dialog by close button', () => {
-  render(<DialogComponent data-testid="Dialog" />);
+test('close Dialog by close button', async () => {
+  render(<DialogComponent />);
   const button = screen.getByText(/Open/);
   fireEvent.click(button);
 
-  const dialog = screen.getByTestId(/Dialog/);
+  const dialog = screen.getByRole(/dialog/);
   expect(dialog).toBeVisible();
-  const buttonDiv = dialog.lastChild;
-  const onClose = buttonDiv && buttonDiv.firstChild;
-  onClose && fireEvent.click(onClose);
+
+  // 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

@@ -7,22 +7,31 @@ import { Close } from '@marigold/icons';
 
 import { Box } from '../Box';
 import { Button } from '../Button';
-import { Heading } from '../Heading';
+import { Text } from '../Text';
 
-import { ModalDialog } from './ModalDialog';
+import { ModalDialog, ModalDialogProps } from './ModalDialog';
 
+// Props
+// ---------------
 export type DialogProps = {
-  isOpen: boolean;
+  backdropVariant?: string;
   close: ComponentProps<typeof Button>['onClick'];
+  isOpen: boolean;
   title?: string;
-} & ComponentProps<'div'>;
+  variant?: string;
+} & ModalDialogProps &
+  ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Dialog: React.FC<DialogProps> = ({
+  backdropVariant,
   children,
-  title,
   className,
-  isOpen,
   close,
+  isOpen,
+  title,
+  variant,
   ...props
 }) => {
   const closeButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
@@ -39,25 +48,62 @@ export const Dialog: React.FC<DialogProps> = ({
 
   return (
     <OverlayContainer>
-      <ModalDialog isOpen={isOpen} onClose={close} isDismissable>
-        <Box variant="dialog.wrapper" className={className} {...props}>
-          <Box variant="dialog.body">
+      <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 && (
-              <Heading as="h4" variant="h4">
+              <Text as="h4" variant="headline4">
                 {title}
-              </Heading>
+              </Text>
             )}
             {children}
           </Box>
-          <Box variant="dialog.onClose">
-            <Button
-              variant="close"
-              size="xsmall"
+          <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>
       </ModalDialog>
@@ -65,7 +111,7 @@ export const Dialog: React.FC<DialogProps> = ({
   );
 };
 
-// use this hook to get the overlayTriggerState and openButton props for using the dialog component
+// 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>;

package/src/Dialog/ModalDialog.tsx

@@ -11,16 +11,31 @@ import { AriaDialogProps } from '@react-types/dialog';
 
 import { Box } from '../Box';
 
-export type ModalDialogProps = OverlayProps & AriaDialogProps;
+// 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(props, ref);
+  const { overlayProps, underlayProps } = useOverlay(
+    { isDismissable, isOpen, onClose },
+    ref
+  );
 
   // Prevent scrolling while the modal is open, and hide content
   // outside the modal from screen readers.
@@ -30,14 +45,28 @@ export const ModalDialog: React.FC<ModalDialogProps> = ({
   const { dialogProps } = useDialog(props, ref);
 
   return (
-    <Box variant="dialog.modalWrapper" {...underlayProps}>
+    <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="dialog.modalBody"
+          variant={variant ? `dialog.${variant}` : `dialog`}
+          {...restProps}
         >
           {children}
         </Box>