@marigold/components 0.0.3 → 0.3.1

package/src/Card/Card.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface CardThemeExtension<Value> {
+  card?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type CardProps = {
+  title?: string;
+  width?: ResponsiveStyleValue<string>;
+  variant?: string;
+} & ComponentProps<'div'>;
+
+// Component
+// ---------------
+export const Card: React.FC<CardProps> = ({
+  variant = '',
+  title,
+  width,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Box
+      {...props}
+      variant={`card.${variant}`}
+      maxWidth={width}
+      className={className}
+    >
+      {title && (
+        <Box as="h2" variant="text.h2" pb="small">
+          {title}
+        </Box>
+      )}
+      {children}
+    </Box>
+  );
+};

package/src/Card/index.ts

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

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,51 +1,166 @@
 import React from 'react';
-import { render, screen, fireEvent } 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: '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" />);
-  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" label="Test" />);
 
+  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" label="Test" />);
 
+  const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <SVG> CircleUnchecked 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');
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
+});
+
+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('renders <SVG> CircleChecked element', () => {
-  render(<Checkbox id="checkbox" label="Test" checked onChange={() => {}} />);
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+test('supports checked checkbox', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="Test"
+        onChange={() => {}}
+        checked
+      />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toHaveAttribute('checked');
 });
 
-test('change state onClick', () => {
-  render(<Checkbox id="checkbox" label="Test" />);
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+test('supports checked and disabled checkbox', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="Test"
+        onChange={() => {}}
+        checked
+        disabled
+      />
+    </ThemeProvider>
+  );
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  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(checkbox).toContainHTML('path d="M19.2917');
+
+  expect(click).toHaveBeenCalledTimes(1);
+  expect(change).toHaveBeenCalledTimes(1);
 });

package/src/Checkbox/Checkbox.tsx

@@ -1,71 +1,100 @@
 import React from 'react';
-import { Required, SquareUnchecked, SquareChecked } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
+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 { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';
 import { Box } from '../Box';
 import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+// Theme Extension
+// ---------------
+export interface CheckboxThemeExtension<Value> {
+  checkbox?: {
+    [key: string]: Value;
+  };
+}
+
+// Checkbox Input
+// ---------------
+type CheckboxInputProps = CheckboxIconProps &
+  ToggleProps &
+  ComponentProps<'input'>;
+
+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;
-  variant?: string;
-  label?: string;
-} & Omit<ComponentProps<'input'>, 'type' | 'id'>;
+  label: string;
+  required?: boolean;
+  labelVariant?: string;
+  error?: boolean;
+  errorMessage?: string;
+} & CheckboxInputProps;
 
 export const Checkbox: React.FC<CheckboxProps> = ({
-  id,
-  variant = 'default',
   label,
   required,
-  className,
+  labelVariant = 'inline',
+  error,
+  errorMessage,
   ...props
 }) => {
-  const checkboxStyles = useStyles({
-    css: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden',
-    },
-  });
-
-  const checkboxIconStyles = useStyles({
-    variant: `checkbox.${variant}`,
-    css: {
-      mr: 2,
-      verticalAlign: 'middle',
-      ':hover': { cursor: 'pointer' },
-      'input:disabled ~ &': {
-        color: 'muted',
-        cursor: 'not-allowed',
-      },
-    },
-    className,
-  });
-
-  const checkbox = (
-    <Box display="inline-block">
-      <input type="checkbox" className={checkboxStyles} {...props} />
-      {props.checked ? (
-        <SquareChecked aria-hidden="true" className={checkboxIconStyles} />
-      ) : (
-        <SquareUnchecked aria-hidden="true" className={checkboxIconStyles} />
-      )}
-    </Box>
-  );
-
   return (
     <>
-      {label ? (
-        <Label htmlFor={id}>
-          {checkbox}
-          {label}
-          {required ? <Required size={16} /> : ''}
-        </Label>
-      ) : (
-        <>{checkbox}</>
+      <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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { conditional, State, SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Checkbox Icon
+// ---------------
+export type CheckboxIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+export const CheckboxIcon: React.FC<CheckboxIconProps> = ({
+  variant = '',
+  checked = false,
+  disabled = false,
+  error = false,
+}) => {
+  const conditionalStates: State = disabled
+    ? {
+        disabled: disabled,
+      }
+    : {
+        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/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>
 );

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>
+);