@marigold/components 0.0.1 → 0.2.0

package/src/Button/Button.tsx

@@ -1,16 +1,50 @@
-import React from 'react';
-import { Box, system } from '@marigold/system';
+import React, { forwardRef, RefObject } from 'react';
+import { useButton } from '@react-aria/button';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-type ButtonProps = {};
+import { Box, BoxOwnProps } from '../Box';
 
-export const Button = system<ButtonProps, 'button'>(
-  ({ variant = 'primary.large', children, ...props }) => {
-    return (
-      <Box as="button" themeSection="button" variant={variant} {...props}>
-        <span style={{ display: 'inline-flex', alignItems: 'center' }}>
-          {children}
-        </span>
-      </Box>
-    );
-  }
-);
+export type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
+
+export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
+  forwardRef(
+    (
+      {
+        as = 'button',
+        variant = 'primary',
+        size = 'large',
+        disabled,
+        children,
+        className,
+        ...props
+      },
+      ref
+    ) => {
+      const { buttonProps } = useButton(
+        {
+          ...props,
+          elementType: typeof as === 'string' ? as : 'span',
+          isDisabled: disabled,
+        },
+        ref as RefObject<HTMLSpanElement>
+      );
+
+      return (
+        <Box
+          {...buttonProps}
+          {...props}
+          as={as}
+          variant={[`button.${variant}`, `button.${size}`]}
+          className={className}
+          ref={ref}
+        >
+          <Box as="span" display="inline-flex" alignItems="center">
+            {children}
+          </Box>
+        </Box>
+      );
+    }
+  );

package/src/Card/Card.stories.mdx

@@ -0,0 +1,49 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Heading } from '../Heading';
+import { Card } from './Card';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Card"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'card title',
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+      description: 'max width of the card',
+    },
+  }}
+/>
+
+# Card
+
+export const Template = args => (
+  <Card title="Card" {...args}>
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      dignissim dapibus elit.
+    </Text>
+  </Card>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Card/Card.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Card } from './Card';
+
+const theme = {
+  card: {
+    default: {
+      p: '8px',
+    },
+    custom: {
+      p: '4px',
+    },
+  },
+};
+
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 8px`);
+});
+
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card variant="custom">card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 4px`);
+});
+
+test('accepts title prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card title="title">content</Card>
+    </ThemeProvider>
+  );
+  const title = screen.getByText(/title/);
+  expect(title).toBeDefined();
+});
+
+test('accepts width prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card width="320px">content</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/content/);
+  expect(card).toHaveStyle(`maxWidth: 320px`);
+});
+
+test('renders correct HTMl element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Card/Card.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+
+import { Box } from '../Box';
+
+export type CardProps = {
+  title?: string;
+  width?: ResponsiveStyleValue<string>;
+  variant?: string;
+} & ComponentProps<'div'>;
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  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.mdx

@@ -1,108 +1,86 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label, Checkbox } from '@marigold/components';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Checkbox } from './Checkbox';
 import { useState } from 'react';
 
-<Meta title="Components/Form/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
+export const Template = ({ onChange, checked, ...args }) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      label="Checkbox Label"
+      {...args}
+    />
+  );
+};
 
-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: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `checkbox`.
-Specific css style prop can also be added.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Properties
-
-| Property  | Type        | Default      |
-| :-------- | :---------- | :----------- |
-| `variant` | `string`    | `'checkbox'` |
-| `css`     | `css props` |              |
-
-## Import
-
-```tsx
-import { Checkbox } from '@marigold/components';
-```
-
-## Usage
-
-### Checkbox standard labeled
-
-<Preview>
-  <Story name="CheckboxOne">
-    {() => {
-      const [state, setState] = React.useState({
-        bi: false,
-        ca: false,
-        bo: false,
-        je: false,
-      });
-      const onChange = changeEvent => {
-        setState({
-          ...state,
-          [changeEvent.target.name]: changeEvent.target.checked,
-        });
-      };
-      return (
-        <div>
-          <Label htmlFor="bi">
-            <Checkbox
-              id="bi"
-              name="bi"
-              onChange={onChange}
-              checked={state.bi}
-              value="Bike"
-            />
-            Bike
-          </Label>
-          <br />
-          <Label htmlFor="ca">
-            <Checkbox
-              id="ca"
-              name="ca"
-              onChange={onChange}
-              checked={state.ca}
-              value="Car"
-            />
-            Car
-          </Label>
-          <br />
-          <Label htmlFor="bo">
-            <Checkbox
-              id="bo"
-              name="bo"
-              onChange={onChange}
-              checked={state.bo}
-              value="Boat"
-            />
-            Boat
-          </Label>
-          <br />
-          <Label htmlFor="je">
-            <Checkbox
-              id="je"
-              name="je"
-              onChange={onChange}
-              checked={state.je}
-              value="Jet"
-            />
-            Jet
-          </Label>
-        </div>
-      );
-    }}
-  </Story>
-</Preview>
-
-### Checkbox checked and disabled
-
-<Preview>
-  <Story name="CheckboxTwo">
-    <div>
-      <Checkbox checked />
-      <Checkbox disabled />
-      <Checkbox checked disabled />
-    </div>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Checkbox/Checkbox.test.tsx

@@ -1,56 +1,97 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Label, Checkbox } from '@marigold/components';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+import { ThemeProvider } from '@marigold/system';
 
-test('supports default type', () => {
-  render(<Checkbox title="checkbox" />);
-  const checkbox = screen.getByTitle(/checkbox/);
+const theme = {
+  checkbox: {
+    default: {
+      m: '2px',
+    },
+  },
+};
 
-  expect(checkbox.getAttribute('type')).toEqual('checkbox');
+test('supports label prop', () => {
+  render(<Checkbox label="Test" id="test" title="checkbox" />);
+
+  const checkboxLabel = screen.getByText(/Test/);
+  expect(checkboxLabel).toBeDefined();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
-  render(<Checkbox title="checkbox" css={{ color: 'blue' }} />);
-  const checkbox = screen.getByTitle(/checkbox/);
+test('supports required prop and renders required icon', () => {
+  render(<Checkbox label="Test" id="test" required title="checkbox" />);
 
-  expect(checkbox).not.toHaveStyle('color: blue');
+  const label = screen.getByText(/Test/);
+  expect(label.nextSibling).toContainHTML('path d="M10.8');
 });
 
-test('renders <input> element', () => {
-  render(<Checkbox title="checkbox" />);
+test('supports default type', () => {
+  render(<Checkbox id="checkbox" title="checkbox" />);
+
   const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox.getAttribute('type')).toEqual('checkbox');
+});
+
+test('renders <input> element', () => {
+  render(<Checkbox id="checkbox" title="checkbox" />);
 
+  const checkbox = screen.getByTitle(/checkbox/);
   expect(checkbox instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <SVG> CircleUnchecked element', () => {
+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('supports error and errorMessage prop', () => {
   render(
-    <Label htmlFor="checkbox">
-      <Checkbox id="checkbox" /> Test
-    </Label>
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        label="test"
+        error
+        errorMessage="error"
+      />
+    </ThemeProvider>
   );
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+
+  const errorMessage = screen.getByText(/error/);
+  expect(errorMessage).toBeDefined();
 });
 
-test('renders <SVG> CircleChecked element', () => {
+test('supports checked checkbox', () => {
   render(
-    <Label htmlFor="checkbox">
-      <Checkbox id="checkbox" checked /> Test
-    </Label>
+    <ThemeProvider theme={theme}>
+      <Checkbox id="test" title="checkbox" onChange={() => {}} checked />
+    </ThemeProvider>
   );
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toBeDefined();
 });
 
-test('change state onClick ', () => {
+test('supports checked and disabled checkbox', () => {
   render(
-    <Label htmlFor="checkbox">
-      <Checkbox id="checkbox" /> Test
-    </Label>
+    <ThemeProvider theme={theme}>
+      <Checkbox
+        id="test"
+        title="checkbox"
+        onChange={() => {}}
+        checked
+        disabled
+      />
+    </ThemeProvider>
   );
-  const checkbox = screen.getByText(/Test/);
-  expect(checkbox).toContainHTML('path d="M19.2917');
-  fireEvent.click(checkbox);
-  expect(checkbox).toContainHTML('path d="M19.2917');
+
+  const checkbox = screen.getByTitle(/checkbox/);
+  expect(checkbox).toBeDefined();
+  expect(checkbox).toHaveAttribute('disabled');
 });

package/src/Checkbox/Checkbox.tsx

@@ -1,42 +1,121 @@
 import React from 'react';
-import { Box, system } from '@marigold/system';
-import { SquareUnchecked, SquareChecked } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
+import { Exclamation } from '@marigold/icons';
 
-type CheckboxProps = {};
+import { CheckboxChecked, CheckboxUnchecked } from './CheckboxIcons';
 
-export const Checkbox = system<CheckboxProps, 'input'>(
-  ({ variant = 'checkbox', ...props }) => {
+import { Box } from '../Box';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+// Checkbox Icon
+// ---------------
+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 css={{ display: 'inline-block' }}>
-        <Box
-          as="input"
-          type="checkbox"
-          {...props}
-          css={{
-            position: 'absolute',
-            opacity: 0,
-            zIndex: -1,
-            width: 1,
-            height: 1,
-            overflow: 'hidden',
-          }}
-        />
-        <Box
-          as={props.checked ? SquareChecked : SquareUnchecked}
-          aria-hidden="true"
-          themeSection="form"
-          variant={variant}
-          css={{
-            mr: 2,
-            verticalAlign: 'middle',
-            ':hover': { cursor: 'pointer' },
-            'input:disabled ~ &': {
-              color: 'muted',
-              cursor: 'not-allowed',
-            },
-          }}
-        />
-      </Box>
+      <Box
+        as={CheckboxChecked}
+        variant={`checkbox.${variant}`}
+        disabled={disabled}
+      />
     );
   }
+  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
+}) => (
+  <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
+// ---------------
+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}
+          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} />;
+};