@marigold/components 0.0.2 → 0.3.0

package/src/Card/Card.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Card } from './Card';
+
+const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  card: {
+    __default: {
+      p: 'medium',
+    },
+    custom: {
+      p: 'small',
+    },
+  },
+};
+
+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,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.mdx

@@ -1,119 +1,97 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Checkbox } from '@marigold/components';
+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/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',
+        },
+      },
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Checkbox label variant',
+      table: {
+        defaultValue: {
+          summary: 'inline',
+        },
+      },
+    },
+    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`.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Properties
-
-| Property              | Type      | Default    |
-| :-------------------- | :-------- | :--------- |
-| `id`                  | `string`  |            |
-| `variant` (optional)  | `string`  | `checkbox` |
-| `label` (optional)    | `string`  |            |
-| `required` (optional) | `boolean` |            |
-
-## 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>
-          <Checkbox
-            id="bi"
-            name="bi"
-            onChange={onChange}
-            checked={state.bi}
-            value="Bike"
-            label="Bike"
-          />
-          <br />
-          <Checkbox
-            id="ca"
-            name="ca"
-            onChange={onChange}
-            checked={state.ca}
-            value="Car"
-            label="Car"
-          />
-          <br />
-          <Checkbox
-            id="bo"
-            name="bo"
-            onChange={onChange}
-            checked={state.bo}
-            value="Boat"
-            label="Boat"
-          />
-          <br />
-          <Checkbox
-            id="je"
-            name="je"
-            onChange={onChange}
-            checked={state.je}
-            value="Jet"
-            label="Jet"
-          />
-        </div>
-      );
-    }}
-  </Story>
-</Preview>
-
-### Checkbox checked, disabled and custom styled
-
-<Preview>
-  <Story name="CheckboxTwo">
-    <div>
-      <Checkbox id="checkbox" checked />
-      <Checkbox id="checkbox" checked className={useStyles({ bg: 'red' })} />
-      <Checkbox id="checkbox" disabled />
-      <Checkbox id="checkbox" checked disabled />
-    </div>
-  </Story>
-</Preview>
-
-### Checkbox with required label
-
-<Preview>
-  <Story name="CheckboxThree">
-    <div>
-      <Checkbox
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

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 { Checkbox } from '@marigold/components';
+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);
 });