@marigold/components 0.0.1 → 0.2.0

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,84 @@
+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 { Heading } from '../Heading';
+
+import { ModalDialog } from './ModalDialog';
+
+export type DialogProps = {
+  isOpen: boolean;
+  close: ComponentProps<typeof Button>['onClick'];
+  title?: string;
+} & ComponentProps<'div'>;
+
+export const Dialog: React.FC<DialogProps> = ({
+  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 (
+    <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="close"
+              size="xsmall"
+              {...closeButtonProps}
+              ref={closeButtonRef}
+            >
+              <Close size={16} />
+            </Button>
+          </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,
+  };
+};

package/src/Dialog/ModalDialog.tsx

@@ -0,0 +1,47 @@
+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';
+
+export type ModalDialogProps = OverlayProps & AriaDialogProps;
+
+export const ModalDialog: React.FC<ModalDialogProps> = ({
+  children,
+  ...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);
+
+  // 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 variant="dialog.modalWrapper" {...underlayProps}>
+      <FocusScope contain restoreFocus autoFocus>
+        <Box
+          {...overlayProps}
+          {...dialogProps}
+          {...modalProps}
+          ref={ref}
+          variant="dialog.modalBody"
+        >
+          {children}
+        </Box>
+      </FocusScope>
+    </Box>
+  );
+};

package/src/Dialog/index.ts

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

package/src/Divider/Divider.stories.mdx

@@ -0,0 +1,37 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Divider } from './Divider';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Divider"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['regular', 'bold'],
+      description: 'Thick or thin line',
+      table: {
+        defaultValue: {
+          summary: 'regular',
+        },
+      },
+    },
+  }}
+/>
+
+# Divider
+
+export const Template = args => (
+  <div>
+    <Text>Above</Text>
+    <Divider {...args} />
+    <Text>Below</Text>
+  </div>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Divider/Divider.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Divider } from './Divider';
+
+const theme = {
+  divider: {
+    regular: {
+      border: 0,
+      borderBottom: '1px solid',
+      margin: '2px',
+    },
+    bold: {
+      border: 0,
+      borderBottom: '2px solid',
+      margin: '2px',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Divider title="divider" />
+    </ThemeProvider>
+  );
+  const divider = screen.getByTitle(/divider/);
+
+  expect(divider).toHaveStyle(`borderBottom: 1px solid`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Divider variant="bold" title="divider" />
+    </ThemeProvider>
+  );
+  const divider = screen.getByTitle(/divider/);
+
+  expect(divider).toHaveStyle(`borderBottom: 2px solid`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Divider title="divider" />
+    </ThemeProvider>
+  );
+  const divider = screen.getByTitle(/divider/);
+
+  expect(divider instanceof HTMLHRElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Divider className="custom-class-name" title="divider" />
+    </ThemeProvider>
+  );
+  const divider = screen.getByTitle(/divider/);
+
+  expect(divider.className).toMatch('custom-class-name');
+});

package/src/Divider/Divider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box } from '../Box';
+
+export type DividerProps = {
+  className?: string;
+  variant?: string;
+  title?: string; // Should only be used for testing.
+};
+
+export const Divider: React.FC<DividerProps> = ({
+  variant = 'regular',
+  ...props
+}) => <Box {...props} as="hr" variant={`divider.${variant}`} />;

package/src/Divider/index.ts

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

package/src/Field/Field.stories.mdx

@@ -0,0 +1,97 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Field } from './Field';
+
+<Meta
+  title="Components/Field"
+  argTypes={{
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      type: { required: true },
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  }}
+/>
+
+# Field
+
+export const Template = args => (
+  <Field htmlFor="id" label="A label" type="text" {...args} />
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Field/Field.test.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Field } from './Field';
+
+const theme = {
+  field: {
+    default: {
+      padding: '4px',
+    },
+    inputField: {
+      padding: '8px',
+    },
+  },
+};
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="label" />
+    </ThemeProvider>
+  );
+  const field = screen.getByText(/label/);
+
+  expect(field instanceof HTMLLabelElement).toBeTruthy();
+});
+
+test('supports label prop', () => {
+  render(<Field htmlFor="myId" label="Name" />);
+  const field = screen.getByText(/Name/);
+
+  expect(field).toBeDefined();
+});
+
+test('supports htmlFor prop', () => {
+  render(<Field htmlFor="myId" label="Name" />);
+  const field = screen.getByText(/Name/);
+
+  expect(field).toHaveAttribute('for');
+});
+
+test('supports required prop', () => {
+  render(<Field htmlFor="myId" label="label" required />);
+  const fieldLabel = screen.getByText(/label/);
+
+  expect(fieldLabel.nextSibling).toBeDefined();
+  expect(fieldLabel.nextSibling instanceof SVGElement).toBeTruthy();
+});
+
+test('supports error and errorMessage prop', () => {
+  render(
+    <Field htmlFor="myId" label="label" error errorMessage="Validation error" />
+  );
+
+  const errorMessage = screen.getByText(/Validation/);
+  expect(errorMessage).toBeDefined();
+});
+
+test('supports disabled prop', () => {
+  render(<Field htmlFor="myId" label="label" disabled />);
+  const fieldLabel = screen.getByText(/label/);
+  expect(fieldLabel.nextSibling).toHaveAttribute('disabled');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field
+        htmlFor="myId"
+        label="label"
+        className="custom-class-name"
+        title="field"
+        data-testid="field"
+      />
+    </ThemeProvider>
+  );
+  const field = screen.getByTestId(/field/);
+
+  expect(field.className).toMatch('custom-class-name');
+});

package/src/Field/Field.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Exclamation } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
+
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+export type FieldProps = {
+  htmlFor: string;
+  label: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+} & ComponentProps<'input'>;
+
+export const Field: React.FC<FieldProps> = ({
+  type = 'text',
+  className,
+  htmlFor,
+  label,
+  required,
+  error,
+  errorMessage,
+  disabled,
+  ...props
+}) => {
+  return (
+    <>
+      <Label
+        variant={disabled ? 'disabled' : 'above'}
+        htmlFor={htmlFor}
+        required={required}
+      >
+        {label}
+      </Label>
+      <Input
+        {...props}
+        type={type}
+        id={htmlFor}
+        disabled={disabled}
+        variant={error ? 'error' : 'default'}
+        className={className}
+      />
+      {error && errorMessage && (
+        <ValidationMessage>
+          <Exclamation size={16} />
+          {errorMessage}
+        </ValidationMessage>
+      )}
+    </>
+  );
+};

package/src/Field/index.ts

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

package/src/Heading/Heading.stories.mdx

@@ -1,79 +1,39 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Heading, Text } from '@marigold/components';
-
-<Meta title="Components/Typography/Heading" />
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Heading } from './Heading';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Heading"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'h2',
+        },
+      },
+    },
+  }}
+/>
 
 # Heading
 
-## Description
-
-Use the Heading component for headings of texts.
-
-## Properties
-
-| Property       | Type                               | Default |
-| :------------- | :--------------------------------- | :------ |
-| `headingStyle` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2`    |
-
-## Import
-
-```tsx
-import { Heading } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Headings">
-    <div>
-      <Heading headingStyle="h1">H1 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading>H2 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading headingStyle="h3">H3 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading headingStyle="h4">H4 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading headingStyle="h5">H5 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading headingStyle="h6">H6 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-    </div>
-  </Story>
-</Preview>
+export const Template = args => (
+  <div>
+    <Heading {...args}>Heading</Heading>
+    <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>
+  </div>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Heading/Heading.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
-import { Heading } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Heading } from './Heading';
 
 const theme = {
   text: {
@@ -16,9 +16,9 @@ const theme = {
 
 test('supports default variant and themeSection', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Heading title="default">Default</Heading>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const heading = screen.getByTitle(/default/);
 
@@ -27,37 +27,51 @@ test('supports default variant and themeSection', () => {
 
 test('accepts other variant than default', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Heading title="default" headingStyle="h3">
+    <ThemeProvider theme={theme}>
+      <Heading title="default" variant="h3">
         Default
       </Heading>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const heading = screen.getByTitle(/default/);
 
   expect(heading).toHaveStyle(`font-family: Roboto`);
 });
 
-test('renders correct HTML element', () => {
+test('supports default as prop', () => {
+  render(<Heading title="default">Default</Heading>);
+  const heading = screen.getByTitle(/default/);
+
+  expect(heading.tagName).toEqual('H2');
+});
+
+test('accepts other as prop than default', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Heading title="default">Default</Heading>
-    </MarigoldProvider>
+    <Heading as="h3" title="default" variant="h3">
+      Default
+    </Heading>
   );
   const heading = screen.getByTitle(/default/);
 
+  expect(heading.tagName).toEqual('H3');
+});
+
+test('renders correct HTML element', () => {
+  render(<Heading title="default">Default</Heading>);
+  const heading = screen.getByTitle(/default/);
+
   expect(heading instanceof HTMLHeadingElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('accepts custom styles prop className', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Heading css={{ fontFamily: 'Arial' }} title="default">
+    <ThemeProvider theme={theme}>
+      <Heading className="custom-class-name" title="heading">
         Default
       </Heading>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const heading = screen.getByTitle(/default/);
+  const heading = screen.getByTitle(/heading/);
 
-  expect(heading).not.toHaveStyle(`font-family: Arial`);
+  expect(heading.className).toMatch('custom-class-name');
 });