@marigold/components 0.1.0 → 0.3.2

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/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: ['__default', 'bold'],
+      description: 'Thick or thin line',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Divider> = args => (
+  <>
+    <Text>Above</Text>
+    <Divider {...args} />
+    <Text>Below</Text>
+  </>
+);

package/src/Divider/Divider.test.tsx

@@ -4,60 +4,69 @@ import { ThemeProvider } from '@marigold/system';
 import { Divider } from './Divider';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+  },
+  colors: {
+    text: 'hotpink',
+  },
   divider: {
-    regular: {
-      border: 0,
-      borderBottom: '1px solid',
-      margin: '2px',
+    __default: {
+      margin: 'small',
     },
     bold: {
-      border: 0,
-      borderBottom: '2px solid',
-      margin: '2px',
+      margin: 'medium',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('has base styles', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Divider title="divider" />
+      <Divider data-testid="divider" />
     </ThemeProvider>
   );
-  const divider = screen.getByTitle(/divider/);
+  const divider = screen.getByTestId(/divider/);
 
-  expect(divider).toHaveStyle(`borderBottom: 1px solid`);
+  // __baseCSS
+  expect(divider).toHaveStyle(`background: hotpink`);
+  expect(divider).toHaveStyle(`width: 100%`);
+  expect(divider).toHaveStyle(`height: 1px`);
+  // margin from default variant
+  expect(divider).toHaveStyle(`margin: 2px`);
 });
 
-test('accepts other variant than default', () => {
+test('supports default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Divider variant="bold" title="divider" />
+      <Divider data-testid="divider" />
     </ThemeProvider>
   );
-  const divider = screen.getByTitle(/divider/);
+  const divider = screen.getByTestId(/divider/);
 
-  expect(divider).toHaveStyle(`borderBottom: 2px solid`);
+  expect(divider).toHaveStyle(`margin: 2px`);
 });
 
-test('renders correct HTML element', () => {
+test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Divider title="divider" />
+      <Divider variant="bold" data-testid="divider" />
     </ThemeProvider>
   );
-  const divider = screen.getByTitle(/divider/);
+  const divider = screen.getByTestId(/divider/);
 
-  expect(divider instanceof HTMLHRElement).toBeTruthy();
+  expect(divider).toHaveStyle(`margin: 4px`);
 });
 
-test('accepts custom styles prop className', () => {
+test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Divider className="custom-class-name" title="divider" />
+      <Divider data-testid="divider" />
     </ThemeProvider>
   );
-  const divider = screen.getByTitle(/divider/);
+  const divider = screen.getByTestId(/divider/);
 
-  expect(divider.className).toMatch('custom-class-name');
+  expect(divider instanceof HTMLDivElement).toBeTruthy();
 });

package/src/Divider/Divider.tsx

@@ -1,13 +1,33 @@
 import React from 'react';
+import { SeparatorProps, useSeparator } from '@react-aria/separator';
+
 import { Box } from '../Box';
 
+// 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.
-};
+} & SeparatorProps;
 
-export const Divider: React.FC<DividerProps> = ({
-  variant = 'regular',
-  ...props
-}) => <Box {...props} as="hr" variant={`divider.${variant}`} />;
+// Component
+// ---------------
+export const Divider: React.FC<DividerProps> = ({ variant = '', ...props }) => {
+  const { separatorProps } = useSeparator(props);
+
+  return (
+    <Box
+      __baseCSS={{ width: '100%', height: '1px', m: 'none', bg: 'text' }}
+      variant={`divider.${variant}`}
+      {...props}
+      {...separatorProps}
+    />
+  );
+};

package/src/Field/Field.stories.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Field } from './Field';
+
+export default {
+  title: 'Components/Field',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field variant',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field label variant',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'id',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'Label',
+    },
+    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',
+      ],
+      defaultValue: 'text',
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Field> = args => <Field {...args} />;

package/src/Field/Field.test.tsx

@@ -2,20 +2,29 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
 import { Field } from './Field';
-import { useStyles } from '@marigold/system';
 
 const theme = {
-  field: {
-    default: {
-      padding: '4px',
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  label: {
+    above: {
+      fontSize: '14px',
+    },
+  },
+  input: {
+    __default: {
+      padding: 'small',
     },
-    inputField: {
-      padding: '8px',
+    error: {
+      padding: 'medium',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
       <Field htmlFor="myId" label="label" />
@@ -23,29 +32,47 @@ test('supports default variant and themeSection', () => {
   );
   const field = screen.getByText(/label/);
 
-  expect(field).toHaveStyle(`padding: 4px`);
+  expect(field instanceof HTMLLabelElement).toBeTruthy();
 });
 
-test('accepts other variant than default', () => {
+test('supports default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="inputField" variant="inputField" />
+      <Field htmlFor="myId" label="Name" data-testid="field" />
     </ThemeProvider>
   );
-  const inputField = screen.getByText(/inputField/);
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 4px`);
+});
 
-  expect(inputField).toHaveStyle(`padding: 8px`);
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" variant="error" data-testid="field" />
+    </ThemeProvider>
+  );
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 8px`);
 });
 
-test('renders correct HTML element', () => {
+test('supports default variantLabel', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="label" />
+      <Field htmlFor="myId" label="Name" />
     </ThemeProvider>
   );
-  const field = screen.getByText(/label/);
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
+});
 
-  expect(field instanceof HTMLLabelElement).toBeTruthy();
+test('supports other variantLabel than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" />
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
 });
 
 test('supports label prop', () => {
@@ -56,34 +83,48 @@ test('supports label prop', () => {
 });
 
 test('supports htmlFor prop', () => {
-  render(<Field htmlFor="myId" label="Name" error="Validation error" />);
+  render(<Field htmlFor="myId" label="Name" />);
   const field = screen.getByText(/Name/);
 
   expect(field).toHaveAttribute('for');
 });
 
-test('supports error prop', () => {
-  render(<Field htmlFor="myId" label="label" error="Validation error" />);
-  const field = screen.getByText(/Validation/);
+test('supports required prop', () => {
+  render(<Field htmlFor="myId" label="label" required />);
+  const fieldLabel = screen.getByText(/label/);
 
-  expect(field).toBeDefined();
+  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', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ css: { fontSize: '8px' } });
-    return (
-      <Field htmlFor="myId" label="label" className={classNames} {...props} />
-    );
-  };
-
-  const { getByText } = render(
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent />
+      <Field
+        htmlFor="myId"
+        label="label"
+        className="custom-class-name"
+        title="field"
+        data-testid="field"
+      />
     </ThemeProvider>
   );
-  const testelem = getByText('label');
-  const field = getComputedStyle(testelem);
+  const field = screen.getByTestId(/field/);
 
-  expect(field.fontSize).toEqual('8px');
+  expect(field.className).toMatch('custom-class-name');
 });

package/src/Field/Field.tsx

@@ -1,49 +1,56 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
-import { Exclamation, Required } from '@marigold/icons';
+import { Exclamation } from '@marigold/icons';
 import { ComponentProps } from '@marigold/types';
 
 import { Input } from '../Input';
 import { Label } from '../Label';
 import { ValidationMessage } from '../ValidationMessage';
 
+// Props
+// ---------------
 export type FieldProps = {
   variant?: string;
+  labelVariant?: string;
   htmlFor: string;
   label: string;
-  error?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Field: React.FC<FieldProps> = ({
-  variant = 'default',
   type = 'text',
-  className = '',
+  variant = '',
+  labelVariant = 'above',
   htmlFor,
   label,
+  required,
   error,
+  errorMessage,
+  disabled,
   ...props
 }) => {
-  const labelClassName = useStyles({
-    variant: `field.${variant}`,
-    className,
-  });
-  const errorClassName = useStyles({ css: { color: 'red60' } });
-
   return (
-    <div>
-      <Label className={labelClassName} htmlFor={htmlFor}>
+    <>
+      <Label variant={labelVariant} htmlFor={htmlFor} required={required}>
         {label}
-        {error ? <Required size={16} className={errorClassName} /> : ''}
       </Label>
-      <Input {...props} type={type} id={htmlFor} />
-      {error ? (
+      <Input
+        {...props}
+        type={type}
+        id={htmlFor}
+        disabled={disabled}
+        variant={variant}
+      />
+      {error && errorMessage && (
         <ValidationMessage>
           <Exclamation size={16} />
-          {error}
+          {errorMessage}
         </ValidationMessage>
-      ) : (
-        ''
       )}
-    </div>
+    </>
   );
 };

package/src/Image/Image.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Image } from './Image';
+
+export default {
+  title: 'Components/Image',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'there is only one variant',
+      table: {
+        defaultValue: {
+          summary: 'fullWidth',
+        },
+      },
+    },
+    alt: {
+      control: {
+        type: 'text',
+      },
+      description: 'Description text for screenreaders',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Image> = args => (
+  <Image
+    src="https://www.reservix.net/_Resources/Persistent/0e8f5885125940fdb2bc2d54840f497782f56584/Reservix_Logo_dtp_web_rgb_font_black_180704.png"
+    alt="marigold_logo"
+    {...args}
+  />
+);

package/src/Image/Image.test.tsx

@@ -4,7 +4,10 @@ import { ThemeProvider } from '@marigold/system';
 import { Image } from './Image';
 
 const theme = {
-  images: {
+  colors: {
+    primary: 'hotpink',
+  },
+  image: {
     fullWidth: {
       alignItems: 'center',
     },

package/src/Image/Image.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface ImageThemeExtension<Value> {
+  image?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type ImageProps = {
   variant?: string;
   children?: never;
 } & ComponentProps<'img'>;
 
+// Component
+// ---------------
 export const Image: React.FC<ImageProps> = ({
   variant = 'fullWidth',
   ...props
-}) => <Box {...props} as="img" variant={`images.${variant}`} />;
+}) => <Box {...props} as="img" variant={`image.${variant}`} />;