@marigold/components 0.0.1 → 0.2.0

package/src/Checkbox/CheckboxIcons.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { SVG } from '@marigold/icons';
+
+import { Box } from '../Box';
+
+export const CheckboxChecked = ({ disabled = false, ...props }) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="rect"
+      x="0.5"
+      y="8.5"
+      width="15px"
+      height="15px"
+      rx="1.5"
+      variant={disabled ? 'checkbox.checked.disabled' : 'checkbox.checked'}
+    />
+    <Box
+      as="path"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z"
+      variant="checkbox.checked.icon"
+    />
+  </SVG>
+);
+
+export const CheckboxUnchecked = ({
+  disabled = false,
+  error = false,
+  ...props
+}) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="rect"
+      x="0.5"
+      y="8.5"
+      width="15px"
+      height="15px"
+      rx="1.5"
+      variant={
+        disabled
+          ? 'checkbox.unchecked.disabled'
+          : error
+          ? 'checkbox.unchecked.error'
+          : 'checkbox.unchecked'
+      }
+    />
+  </SVG>
+);

package/src/Column/Column.stories.mdx

@@ -0,0 +1,49 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Column } from './Column';
+import { Text } from '../Text';
+import { useStyles } from '@marigold/system';
+
+<Meta
+  title="Components/Column"
+  argTypes={{
+    width: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 12,
+        step: 1,
+      },
+      description: 'Absolute width in 12 grid',
+      table: {
+        defaultValue: {
+          summary: 12,
+        },
+      },
+    },
+  }}
+/>
+
+# Column
+
+export const Template = args => (
+  <Column
+    className={useStyles({
+      css: {
+        textAlign: 'center',
+        border: '1px solid red',
+        padding: 2,
+        margin: 2,
+      },
+    })}
+    width={12}
+    {...args}
+  >
+    <Text>full width</Text>
+  </Column>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Column/Column.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Column } from './Column';
+
+test('supports width prop', () => {
+  render(<Column width={6}>column</Column>);
+  const column = screen.getByText('column');
+
+  expect(column).toHaveStyle(`width: 50%`);
+});
+
+test('renders correct HTML element', () => {
+  render(<Column>column</Column>);
+  const column = screen.getByText('column');
+
+  expect(column instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(<Column className="custom-class-name">column</Column>);
+  const column = screen.getByText('column');
+
+  expect(column.className).toMatch('custom-class-name');
+});
+
+test('accepts responsive values', () => {
+  render(<Column width={[12, 6]}>column</Column>);
+  const column = screen.getByText('column');
+
+  // Note: as of November 2021 jest-dom does not support media queries...
+  expect(column).toHaveStyle('width: 100%');
+});

package/src/Column/Column.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Box } from '../Box';
+
+type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type ColumnProps = {
+  className?: string;
+  width?: WidthValues | WidthValues[];
+};
+
+const transform = (width: WidthValues | WidthValues[]) => {
+  if (Array.isArray(width)) {
+    return width.map(v => `${(v / 12) * 100}%`);
+  }
+
+  return `${(width / 12) * 100}%`;
+};
+
+export const Column: React.FC<ColumnProps> = ({
+  width = 12,
+  children,
+  ...props
+}) => (
+  <Box {...props} width={transform(width)}>
+    {children}
+  </Box>
+);

package/src/Column/index.ts

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

package/src/Columns/Columns.stories.mdx

@@ -0,0 +1,65 @@
+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
+
+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="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Columns/Columns.test.tsx

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

package/src/Columns/Columns.tsx

@@ -0,0 +1,69 @@
+import React, { Children } from 'react';
+import { useStyles } from '@marigold/system';
+import { Box } from '../Box';
+import flattenChildren from 'react-keyed-flatten-children';
+
+type ColumnsProps = {
+  className?: string;
+  space?: number;
+  horizontalAlign?: 'left' | 'right' | 'center';
+  verticalAlign?: 'top' | 'bottom' | 'center';
+  title?: string; // Should only be used for testing.
+};
+
+export const Columns: React.FC<ColumnsProps> = ({
+  space = 0,
+  horizontalAlign = 'left',
+  verticalAlign = 'top',
+  className,
+  children,
+  ...props
+}) => {
+  let columnItems = flattenChildren(children);
+  let childClassNames = useStyles({ css: { p: `${space / 2}px` } });
+
+  // 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';
+  }
+
+  return (
+    <Box p={`${space}px`} display="flex" className={className}>
+      <Box
+        width={`calc(100% + ${space}px)`}
+        m={`${-space / 2}px`}
+        display="flex"
+        flexWrap="wrap"
+        alignItems={alignItems}
+        justifyContent={justify}
+        {...props}
+      >
+        {Children.map(
+          columnItems as unknown as React.ReactElement,
+          (child: React.ReactElement) => {
+            return React.cloneElement(
+              child,
+              {
+                className: childClassNames,
+              },
+              <Box className={child && child.props.className}>
+                {child.props.children}
+              </Box>
+            );
+          }
+        )}
+      </Box>
+    </Box>
+  );
+};

package/src/Columns/index.ts

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

package/src/Container/Container.stories.mdx

@@ -0,0 +1,19 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Container } from './Container';
+import { Text } from '../Text';
+
+<Meta title="Components/Container" />
+
+# Container
+
+export const Template = args => (
+  <Container {...args}>
+    <Text>Container with width=100%</Text>
+  </Container>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Container/Container.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Container } from './Container';
+import { Text } from '../Text';
+
+test('renders correct HTML element', () => {
+  render(
+    <Container title="container">
+      <Text>sdf</Text>
+    </Container>
+  );
+  const container = screen.getByTitle(/container/);
+
+  expect(container instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <Container className="custom-class-name" title="container">
+      <Text>text</Text>
+    </Container>
+  );
+  const container = screen.getByTitle(/container/);
+
+  expect(container.className).toMatch('custom-class-name');
+});

package/src/Container/Container.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box } from '../Box';
+
+export type ContainerProps = {
+  className?: string;
+  title?: string; // Used for testing.
+};
+
+export const Container: React.FC<ContainerProps> = ({ children, ...props }) => (
+  <Box {...props} width="100%">
+    {children}
+  </Box>
+);

package/src/Container/index.ts

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

package/src/Dialog/Dialog.stories.mdx

@@ -0,0 +1,73 @@
+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"
+  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
+
+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="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,87 @@
+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 = {
+  dialog: {
+    wrapper: {
+      p: '8px',
+    },
+    body: {
+      p: '4px',
+    },
+    onClose: {
+      p: '0px',
+    },
+  },
+};
+
+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>
+      )}
+    </>
+  );
+};
+
+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 theme variants', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <DialogComponent data-testid="Dialog" />
+    </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`);
+});
+
+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);
+
+  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();
+});