@marigold/components 0.1.0 → 0.2.0

package/src/Checkbox/Checkbox.stories.mdx

@@ -1,81 +1,86 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Checkbox } from './Checkbox';
 import { useState } from 'react';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/Checkbox" />
+<Meta
+  title="Components/Checkbox"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    id: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+      description: 'Unique ID',
+    },
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Checkbox variant',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Label',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Require',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+  }}
+/>
 
 # Checkbox
 
-## Description
-
-With the Checkbox component you can add a HTML `<input>` element with `type="checkbox"` to your form.
-The element uses always the themeSection with the name: `checkbox` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-
-## Properties
-
-| Property              | Type      | Default   |
-| :-------------------- | :-------- | :-------- |
-| `id`                  | `string`  |           |
-| `variant` (optional)  | `string`  | `default` |
-| `label` (optional)    | `string`  |           |
-| `required` (optional) | `boolean` |           |
-
-## Import
-
-```tsx
-import { Checkbox } from '@marigold/components';
-```
-
-## Usage
-
-### Checkbox standard labeled
+export const Template = ({ onChange, checked, ...args }) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      label="Checkbox Label"
+      {...args}
+    />
+  );
+};
 
 <Canvas>
-  <Story name="CheckboxOne">
-    {() => {
-      const [isChecked, setChecked] = React.useState(false);
-      const onChange = () => {
-        setChecked(!isChecked);
-      };
-      return (
-        <Checkbox
-          id="myCheckbox"
-          name="myCheckbox"
-          onChange={onChange}
-          checked={isChecked}
-          value="Checkbox"
-          label="check if you like Marigold"
-        />
-      );
-    }}
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### Checkbox checked, disabled and custom styled
-
-<Canvas>
-  <Story name="CheckboxTwo">
-    <>
-      <Checkbox id="checkboxOne" checked />
-      <Checkbox id="checkboxTwo" disabled />
-      <Checkbox id="checkboxThree" checked disabled />
-    </>
-  </Story>
-</Canvas>
-
-### Checkbox with required label
-
-<Canvas>
-  <Story name="CheckboxThree">
-    <div>
-      <Checkbox
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Checkbox/Checkbox.test.tsx

@@ -1,51 +1,97 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Checkbox } from './Checkbox';
+import { ThemeProvider } from '@marigold/system';
+
+const theme = {
+  checkbox: {
+    default: {
+      m: '2px',
+    },
+  },
+};
 
 test('supports label prop', () => {
   render(<Checkbox label="Test" id="test" title="checkbox" />);
-  const checkbox = screen.getByText(/Test/);
 
-  expect(checkbox).toBeDefined();
+  const checkboxLabel = screen.getByText(/Test/);
+  expect(checkboxLabel).toBeDefined();
 });
 
-test('supports required prop an renders required icon', () => {
+test('supports required prop and renders required icon', () => {
   render(<Checkbox label="Test" id="test" required title="checkbox" />);
-  const checkbox = screen.getByText(/Test/);
 
-  expect(checkbox).toContainHTML('path d="M10.8');
+  const label = screen.getByText(/Test/);
+  expect(label.nextSibling).toContainHTML('path d="M10.8');
 });
 
 test('supports default type', () => {
-  render(<Checkbox id="test" title="checkbox" />);
-  const checkbox = screen.getByTitle(/checkbox/);
+  render(<Checkbox id="checkbox" title="checkbox" />);
 
+  const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox.getAttribute('type')).toEqual('checkbox');
 });
 
 test('renders <input> element', () => {
-  render(<Checkbox id="test" title="checkbox" />);
-  const checkbox = screen.getByTitle(/checkbox/);
+  render(<Checkbox id="checkbox" title="checkbox" />);
 
+  const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <SVG> SquareUnchecked element', () => {
-  render(<Checkbox id="checkbox" label="Test" />);
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+test('supports disabled prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox id="test" title="checkbox" label="label" disabled />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toHaveAttribute('disabled');
 });
 
-test('renders <SVG> SquareChecked element', () => {
-  render(<Checkbox id="checkbox" label="Test" checked onChange={() => {}} />);
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917 2.62');
+test('supports error and errorMessage prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="test"
+        error
+        errorMessage="error"
+      />
+    </ThemeProvider>
+  );
+
+  const errorMessage = screen.getByText(/error/);
+  expect(errorMessage).toBeDefined();
 });
 
-test('change state onClick', () => {
-  render(<Checkbox id="checkbox" label="Test" />);
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
-  fireEvent.click(checkbox);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+test('supports checked checkbox', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox id="test" title="checkbox" onChange={() => {}} checked />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toBeDefined();
+});
+
+test('supports checked and disabled checkbox', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        onChange={() => {}}
+        checked
+        disabled
+      />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toBeDefined();
+  expect(checkbox).toHaveAttribute('disabled');
 });

package/src/Checkbox/Checkbox.tsx

@@ -1,79 +1,83 @@
 import React from 'react';
-import { Required, SquareUnchecked, SquareChecked } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
+import { Exclamation } from '@marigold/icons';
+
+import { CheckboxChecked, CheckboxUnchecked } from './CheckboxIcons';
 
 import { Box } from '../Box';
 import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
 
 // Checkbox Icon
 // ---------------
 type CheckboxIconProps = {
-  className?: string;
   variant?: string;
   checked?: boolean;
+  disabled?: boolean;
   children?: never;
+  error?: boolean;
 };
 
 const CheckboxIcon: React.FC<CheckboxIconProps> = ({
-  className,
   variant,
   checked,
+  disabled,
+  error,
 }) => {
-  const checkboxIconStyle = useStyles({
-    variant: variant,
-    css: {
-      ariaHidden: 'true',
-      mr: 2,
-      verticalAlign: 'middle',
-      ':hover': { cursor: 'pointer' },
-      'input:disabled ~ &': {
-        color: 'disabled',
-        cursor: 'not-allowed',
-      },
-    },
-    className,
-  });
-
   if (checked) {
-    return <SquareChecked className={checkboxIconStyle} />;
+    return (
+      <Box
+        as={CheckboxChecked}
+        variant={`checkbox.${variant}`}
+        disabled={disabled}
+      />
+    );
   }
-  return <SquareUnchecked className={checkboxIconStyle} />;
+  return (
+    <Box
+      as={CheckboxUnchecked}
+      variant={`checkbox.${variant}`}
+      disabled={disabled}
+      error={error}
+    />
+  );
 };
 
 // Checkbox Input
 // ---------------
 type CheckboxInputProps = {
   variant?: string;
+  error?: boolean;
 } & ComponentProps<'input'>;
 
 const CheckboxInput: React.FC<CheckboxInputProps> = ({
   className,
   variant = 'default',
+  error,
   ...props
-}) => {
-  const checkboxStyle = useStyles({
-    css: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden',
-    },
-  });
-
-  return (
-    <Box display="inline-block">
-      <input type="checkbox" className={checkboxStyle} {...props} />
-      <CheckboxIcon
-        checked={props.checked}
-        className={className}
-        variant={variant}
-      />
-    </Box>
-  );
-};
+}) => (
+  <Box display="inline-block" className={className}>
+    <Box
+      as="input"
+      type="checkbox"
+      css={{
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }}
+      {...props}
+    />
+    <CheckboxIcon
+      checked={props.checked}
+      variant={variant}
+      disabled={props.disabled}
+      error={error}
+    />
+  </Box>
+);
 
 // Checkbox
 // ---------------
@@ -81,20 +85,35 @@ export type CheckboxProps = {
   id: string;
   label?: string;
   required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
 } & CheckboxInputProps;
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   required,
+  error,
+  errorMessage,
   ...props
 }) => {
   if (label) {
     return (
-      <Label htmlFor={props.id}>
-        <CheckboxInput {...props} />
-        {label}
-        {required && <Required size={16} />}
-      </Label>
+      <>
+        <Label
+          htmlFor={props.id}
+          required={required}
+          variant={props.disabled ? 'disabled' : 'inline'}
+        >
+          <Box as={CheckboxInput} pr="8px" error={error} {...props} />
+          {label}
+        </Label>
+        {error && errorMessage && (
+          <ValidationMessage>
+            <Exclamation size={16} />
+            {errorMessage}
+          </ValidationMessage>
+        )}
+      </>
     );
   }
 

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

@@ -1,74 +1,49 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Column } from './Column';
-import { useState } from 'react';
+import { Text } from '../Text';
 import { useStyles } from '@marigold/system';
 
-<Meta title="Components/Column" />
+<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
 
-## Description
-
-With the Column component you can add a column with a width in percent of the full content.
-
-## Properties
-
-| Property           | Type                                    | Default |
-| :----------------- | :-------------------------------------- | :------ |
-| `width` (optional) | `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12` | `12`    |
-
-## Import
-
-```tsx
-import { Column } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Column">
-    <Column
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=12
-    </Column>
-    <Column
-      width={6}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=6
-    </Column>
-    <Column
-      width={3}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=3
-    </Column>
-    <Column
-      width={2}
-      className={useStyles({
+export const Template = args => (
+  <Column
+    className={useStyles({
+      css: {
         textAlign: 'center',
-        border: '1px solid',
+        border: '1px solid red',
         padding: 2,
         margin: 2,
-      })}
-    >
-      width=2
-    </Column>
-  </Story>
+      },
+    })}
+    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

@@ -22,3 +22,11 @@ test('accepts custom styles prop className', () => {
 
   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

@@ -1,9 +1,19 @@
 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?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  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> = ({
@@ -11,7 +21,7 @@ export const Column: React.FC<ColumnProps> = ({
   children,
   ...props
 }) => (
-  <Box {...props} width={`${(width / 12) * 100}%`}>
+  <Box {...props} width={transform(width)}>
     {children}
   </Box>
 );