@marigold/components 0.2.0 → 0.3.0

package/src/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Components/Checkbox',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Checkbox variant',
+      defaultValue: '__default',
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Checkbox label variant',
+      defaultValue: 'inline',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Label',
+      defaultValue: 'Checkbox Label',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Required',
+      defaultValue: false,
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Disabled',
+      defaultValue: false,
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      defaultValue: false,
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Checkbox> = ({
+  onChange,
+  checked,
+  ...args
+}) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      {...args}
+    />
+  );
+};

package/src/Checkbox/Checkbox.test.tsx

@@ -1,16 +1,53 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Checkbox } from './Checkbox';
 import { ThemeProvider } from '@marigold/system';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
+  colors: {
+    disabled: 'gray',
+  },
   checkbox: {
-    default: {
-      m: '2px',
+    __default: {
+      m: 'small',
+    },
+  },
+  label: {
+    inline: {
+      fontSize: '14px',
+    },
+    above: {
+      fontSize: '8px',
     },
   },
 };
 
+test('supports default labelVariant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox id="test" title="checkbox" label="label" />
+    </ThemeProvider>
+  );
+
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`font-size: 14px`);
+});
+
+test('supports other labelVariant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox id="test" title="checkbox" label="label" labelVariant="above" />
+    </ThemeProvider>
+  );
+
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`font-size: 8px`);
+});
+
 test('supports label prop', () => {
   render(<Checkbox label="Test" id="test" title="checkbox" />);
 
@@ -26,14 +63,14 @@ test('supports required prop and renders required icon', () => {
 });
 
 test('supports default type', () => {
-  render(<Checkbox id="checkbox" title="checkbox" />);
+  render(<Checkbox id="checkbox" title="checkbox" label="Test" />);
 
   const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox.getAttribute('type')).toEqual('checkbox');
 });
 
 test('renders <input> element', () => {
-  render(<Checkbox id="checkbox" title="checkbox" />);
+  render(<Checkbox id="checkbox" title="checkbox" label="Test" />);
 
   const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox instanceof HTMLInputElement).toBeTruthy();
@@ -48,6 +85,8 @@ test('supports disabled prop', () => {
 
   const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox).toHaveAttribute('disabled');
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
 });
 
 test('supports error and errorMessage prop', () => {
@@ -70,12 +109,18 @@ test('supports error and errorMessage prop', () => {
 test('supports checked checkbox', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Checkbox id="test" title="checkbox" onChange={() => {}} checked />
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="Test"
+        onChange={() => {}}
+        checked
+      />
     </ThemeProvider>
   );
 
   const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox).toBeDefined();
+  expect(checkbox).toHaveAttribute('checked');
 });
 
 test('supports checked and disabled checkbox', () => {
@@ -84,6 +129,7 @@ test('supports checked and disabled checkbox', () => {
       <Checkbox
         id="test"
         title="checkbox"
+        label="Test"
         onChange={() => {}}
         checked
         disabled
@@ -92,6 +138,29 @@ test('supports checked and disabled checkbox', () => {
   );
 
   const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox).toBeDefined();
+  expect(checkbox).toHaveAttribute('checked');
   expect(checkbox).toHaveAttribute('disabled');
 });
+
+test('correctly handles interaction', () => {
+  const click = jest.fn();
+  const change = jest.fn();
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="Test"
+        onClick={click}
+        onChange={change}
+      />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  fireEvent.click(checkbox);
+
+  expect(click).toHaveBeenCalledTimes(1);
+  expect(change).toHaveBeenCalledTimes(1);
+});

package/src/Checkbox/Checkbox.tsx

@@ -1,90 +1,68 @@
 import React from 'react';
+import { useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useCheckbox } from '@react-aria/checkbox';
+import { useToggleState } from '@react-stately/toggle';
+import { ToggleProps } from '@react-types/checkbox';
+
 import { ComponentProps } from '@marigold/types';
 import { Exclamation } from '@marigold/icons';
 
-import { CheckboxChecked, CheckboxUnchecked } from './CheckboxIcons';
-
+import { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';
 import { Box } from '../Box';
 import { Label } from '../Label';
 import { ValidationMessage } from '../ValidationMessage';
 
-// Checkbox Icon
+// Theme Extension
 // ---------------
-type CheckboxIconProps = {
-  variant?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  children?: never;
-  error?: boolean;
-};
-
-const CheckboxIcon: React.FC<CheckboxIconProps> = ({
-  variant,
-  checked,
-  disabled,
-  error,
-}) => {
-  if (checked) {
-    return (
-      <Box
-        as={CheckboxChecked}
-        variant={`checkbox.${variant}`}
-        disabled={disabled}
-      />
-    );
-  }
-  return (
-    <Box
-      as={CheckboxUnchecked}
-      variant={`checkbox.${variant}`}
-      disabled={disabled}
-      error={error}
-    />
-  );
-};
+export interface CheckboxThemeExtension<Value> {
+  checkbox?: {
+    [key: string]: Value;
+  };
+}
 
 // Checkbox Input
 // ---------------
-type CheckboxInputProps = {
-  variant?: string;
-  error?: boolean;
-} & ComponentProps<'input'>;
+type CheckboxInputProps = CheckboxIconProps &
+  ToggleProps &
+  ComponentProps<'input'>;
 
-const CheckboxInput: React.FC<CheckboxInputProps> = ({
-  className,
-  variant = 'default',
-  error,
-  ...props
-}) => (
-  <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>
-);
+const CheckboxInput: React.FC<CheckboxInputProps> = ({ error, ...props }) => {
+  const state = useToggleState(props);
+  const ref = React.useRef<HTMLInputElement>(null);
+  const { inputProps } = useCheckbox(props, state, ref);
+  const { focusProps } = useFocusRing();
+
+  return (
+    <Box pr="xsmall">
+      <VisuallyHidden>
+        <Box
+          as="input"
+          type="checkbox"
+          disabled={props.disabled}
+          {...inputProps}
+          {...focusProps}
+          ref={ref}
+          {...props}
+        />
+      </VisuallyHidden>
+      <CheckboxIcon
+        checked={props.checked}
+        variant={props.variant}
+        disabled={props.disabled}
+        error={error}
+      />
+    </Box>
+  );
+};
 
 // Checkbox
 // ---------------
 export type CheckboxProps = {
   id: string;
-  label?: string;
+  label: string;
   required?: boolean;
+  labelVariant?: string;
   error?: boolean;
   errorMessage?: string;
 } & CheckboxInputProps;
@@ -92,30 +70,32 @@ export type CheckboxProps = {
 export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   required,
+  labelVariant = 'inline',
   error,
   errorMessage,
   ...props
 }) => {
-  if (label) {
-    return (
-      <>
-        <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>
-        )}
-      </>
-    );
-  }
-
-  return <CheckboxInput {...props} />;
+  return (
+    <>
+      <Box
+        as={Label}
+        __baseCSS={{
+          ':hover': { cursor: props.disabled ? 'not-allowed' : 'pointer' },
+        }}
+        htmlFor={props.id}
+        required={required}
+        variant={`label.${labelVariant}`}
+        color={props.disabled ? 'disabled' : 'text'}
+      >
+        <Box as={CheckboxInput} error={error} {...props} />
+        {label}
+      </Box>
+      {error && errorMessage && (
+        <ValidationMessage>
+          <Exclamation size={16} />
+          {errorMessage}
+        </ValidationMessage>
+      )}
+    </>
+  );
 };

package/src/Checkbox/CheckboxIcons.tsx

@@ -1,49 +1,59 @@
 import React from 'react';
-import { SVG } from '@marigold/icons';
+import { conditional, State, SVG } from '@marigold/system';
 
 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>
-);
+// Checkbox Icon
+// ---------------
+export type CheckboxIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
 
-export const CheckboxUnchecked = ({
+export const CheckboxIcon: React.FC<CheckboxIconProps> = ({
+  variant = '',
+  checked = false,
   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'
+}) => {
+  const conditionalStates: State = disabled
+    ? {
+        disabled: disabled,
       }
-    />
-  </SVG>
-);
+    : {
+        checked: checked,
+        error: error,
+      };
+
+  return (
+    <SVG
+      width="16"
+      height="32"
+      viewBox="0 0 16 32"
+      fill="none"
+      aria-hidden="true"
+    >
+      <Box
+        as="rect"
+        x="0.5"
+        y="8.5"
+        width="15px"
+        height="15px"
+        rx="1.5"
+        variant={conditional(`checkbox.${variant}`, conditionalStates)}
+      />
+      {checked && (
+        <Box
+          __baseCSS={{ fill: 'gray00' }}
+          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"
+        />
+      )}
+    </SVG>
+  );
+};

package/src/Column/Column.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Column } from './Column';
+import { Box } from '../Box';
+
+export default {
+  title: 'Components/Column',
+  argTypes: {
+    width: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 12,
+        step: 1,
+      },
+      description: 'Absolute width in 12 grid',
+      table: {
+        defaultValue: {
+          summary: 12,
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Column> = args => (
+  <Column width={12} {...args}>
+    <Box p="small" border="1px solid gray" borderRadius="4px">
+      width=12
+    </Box>
+  </Column>
+);

package/src/Columns/Columns.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Column, Columns, Text } from '@marigold/components';
+
+export default {
+  title: 'Components/Columns',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Columns> = args => (
+  <Columns {...args}>
+    <Column width={6}>
+      <Text>First column</Text>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
+        massa nec ultricies efficitur.
+      </Text>
+    </Column>
+    <Column width={6}>
+      <Text>Second column</Text>
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
+        massa nec ultricies efficitur.
+      </Text>
+    </Column>
+  </Columns>
+);