@marigold/components 0.0.2 → 0.3.0

package/src/Radio/Radio.stories.mdx

@@ -1,100 +1,97 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Radio } from '@marigold/components';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Radio } from './Radio';
 import { useState } from 'react';
 
-<Meta title="Components/Form/Radio" />
+<Meta
+  title="Components/Radio"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    id: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+      description: 'Unique ID',
+    },
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio variant',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio 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',
+    },
+  }}
+/>
 
-# Radio Button
+# Radio
 
-## Description
+export const Template = ({ onChange, checked, ...args }) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Radio
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      label="Radio Label"
+      {...args}
+    />
+  );
+};
 
-With the Radio Button component you can add a HTML `<input>` element with `type="radio"` 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 `radio`.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Properties
-
-| Property              | Type      | Default |
-| :-------------------- | :-------- | :------ |
-| `id`                  | `string`  |         |
-| `variant` (optional)  | `string`  | `radio` |
-| `label` (optional)    | `string`  |         |
-| `required` (optional) | `boolean` |         |
-
-## Import
-
-```tsx
-import { Radio } from '@marigold/components';
-```
-
-## Usage
-
-### Radio standard labeled
-
-<Preview>
-  <Story name="RadioOne">
-    {() => {
-      const [state, setState] = React.useState('Mastercard');
-      const onChange = changeEvent => {
-        setState(changeEvent.currentTarget.value);
-      };
-      return (
-        <div>
-          <Radio
-            id="mc"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Mastercard'}
-            value="Mastercard"
-            label="Mastercard"
-          />
-          <br />
-          <Radio
-            id="vi"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Visa'}
-            value="Visa"
-            label="Visa"
-          />
-          <br />
-          <Radio
-            id="ae"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'AmericanExpress'}
-            value="AmericanExpress"
-            label="AmericanExpress"
-          />
-        </div>
-      );
-    }}
-  </Story>
-</Preview>
-
-### Radio checked and disabled
-
-<Preview>
-  <Story name="RadioTwo">
-    <div>
-      <Radio id="radio" checked />
-      <Radio id="radio" disabled />
-      <Radio id="radio" checked disabled />
-    </div>
-  </Story>
-</Preview>
-
-### Radio with required label
-
-<Preview>
-  <Story name="RadioThree">
-    <div>
-      <Radio
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Radio/Radio.test.tsx

@@ -1,43 +1,119 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Radio } from '@marigold/components';
+import { Radio } from './Radio';
+import { ThemeProvider } from '@marigold/system';
+
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
+  radio: {
+    __default: {
+      m: 'small',
+    },
+  },
+  label: {
+    above: {
+      fontSize: '8px',
+    },
+    inline: {
+      fontSize: '14px',
+    },
+  },
+};
+
+test('supports default labelVariant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio 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}>
+      <Radio 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(<Radio label="Test" id="test" title="radio" />);
-  const radio = screen.getByText(/Test/);
 
-  expect(radio).toBeDefined();
+  const radioLabel = screen.getByText(/Test/);
+  expect(radioLabel).toBeDefined();
 });
 
-test('supports required prop an renders required icon', () => {
+test('supports required prop and renders required icon', () => {
   render(<Radio label="Test" id="test" required title="radio" />);
-  const radio = screen.getByText(/Test/);
 
-  expect(radio).toContainHTML('path d="M10.8');
+  const label = screen.getByText(/Test/);
+  expect(label.nextSibling).toContainHTML('path d="M10.8');
 });
 
 test('supports default type', () => {
   render(<Radio id="radio" title="radio" />);
-  const radio = screen.getByTitle(/radio/);
 
+  const radio = screen.getByTitle(/radio/);
   expect(radio.getAttribute('type')).toEqual('radio');
 });
 
 test('renders <input> element', () => {
   render(<Radio id="radio" title="radio" />);
-  const radio = screen.getByTitle(/radio/);
 
+  const radio = screen.getByTitle(/radio/);
   expect(radio instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <SVG> CircleUnchecked element', () => {
-  render(<Radio id="radio" label="Test" />);
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M5.62507');
+test('supports disabled prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" label="label" disabled />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toHaveAttribute('disabled');
+});
+
+test('supports error and errorMessage prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" label="test" error errorMessage="error" />
+    </ThemeProvider>
+  );
+
+  const errorMessage = screen.getByText(/error/);
+  expect(errorMessage).toBeDefined();
+});
+
+test('supports checked radio', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" onChange={() => {}} checked />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
 });
 
-test('renders <SVG> CircleChecked element', () => {
-  render(<Radio id="radio" checked onChange={() => {}} label="Test" />);
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M12');
+test('supports checked and disabled radio', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('disabled');
 });

package/src/Radio/Radio.tsx

@@ -1,64 +1,128 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
-import { CircleUnchecked, CircleChecked, Required } from '@marigold/icons';
-import { Label } from '@marigold/components';
+import { ComponentProps } from '@marigold/types';
+import { Exclamation } from '@marigold/icons';
 
-type RadioProps = {
-  id: string;
+import { Box } from '../Box';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+import { RadioChecked, RadioUnchecked } from './RadioIcons';
+
+// Theme Extension
+// ---------------
+export interface RadioThemeExtension<Value> {
+  radio?: {
+    [key: string]: Value;
+  };
+}
+
+// Radio Icon
+// ---------------
+type RadioIconProps = {
   variant?: string;
-  label?: string;
-  required?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
 };
 
-export const Radio = system<RadioProps, 'input'>(
-  ({ id, variant = 'radio', label, required, className, ...props }) => {
-    const radioStyle = useStyles({
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden',
-    });
-
-    const radioIconStyle = useStyles(
-      {
-        variant: `form.${variant}`,
-        ariaHidden: 'true',
-        mr: 2,
-        verticalAlign: 'middle',
-        ':hover': { cursor: 'pointer' },
-        'input:disabled ~ &': {
-          color: 'muted',
-          cursor: 'not-allowed',
-        },
-      },
-      className
+const RadioIcon: React.FC<RadioIconProps> = ({
+  variant,
+  checked,
+  disabled,
+  error,
+}) => {
+  if (checked) {
+    return (
+      <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />
     );
+  }
+  return (
+    <Box
+      as={RadioUnchecked}
+      variant={`radio.${variant}`}
+      disabled={disabled}
+      error={error}
+    />
+  );
+};
 
-    const radio = (
-      <div className={useStyles({ display: 'inline-block' })}>
-        <input type="radio" id={id} className={radioStyle} {...props} />
-        {props.checked ? (
-          <CircleChecked className={radioIconStyle} />
-        ) : (
-          <CircleUnchecked className={radioIconStyle} />
-        )}
-      </div>
-    );
+// Radio Input
+// ---------------
+type RadioInputProps = {
+  variant?: string;
+  error?: boolean;
+} & ComponentProps<'input'>;
+
+const RadioInput: React.FC<RadioInputProps> = ({
+  className,
+  variant = '',
+  error,
+  ...props
+}) => (
+  <Box display="inline-block" className={className}>
+    <Box
+      as="input"
+      type="radio"
+      css={{
+        position: 'absolute',
+        opacity: 0,
+        zIndex: -1,
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }}
+      {...props}
+    />
+    <RadioIcon
+      checked={props.checked}
+      variant={variant}
+      disabled={props.disabled}
+      error={error}
+    />
+  </Box>
+);
 
+// Radio
+// ---------------
+export type RadioProps = {
+  id: string;
+  label?: string;
+  required?: boolean;
+  labelVariant?: string;
+  error?: boolean;
+  errorMessage?: string;
+} & RadioInputProps;
+
+export const Radio: React.FC<RadioProps> = ({
+  label,
+  required,
+  labelVariant = 'inline',
+  error,
+  errorMessage,
+  ...props
+}) => {
+  if (label) {
     return (
       <>
-        {label ? (
-          <Label htmlFor={id}>
-            {radio}
-            {label}
-            {required ? <Required size={16} /> : ''}
-          </Label>
-        ) : (
-          <>{radio}</>
+        <Label
+          htmlFor={props.id}
+          required={required}
+          variant={labelVariant}
+          color={props.disabled ? 'disabled' : 'text'}
+        >
+          <Box as={RadioInput} pr="8px" error={error} {...props} />
+          {label}
+        </Label>
+        {error && errorMessage && (
+          <ValidationMessage>
+            <Exclamation size={16} />
+            {errorMessage}
+          </ValidationMessage>
         )}
       </>
     );
   }
-);
+
+  return <RadioInput {...props} />;
+};

package/src/Radio/RadioIcons.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export const RadioChecked = ({ disabled = false, ...props }) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="circle"
+      cx="8"
+      cy="16"
+      r="7.5"
+      variant={disabled ? 'radio.checked.disabled' : 'radio.checked'}
+    />
+    <Box as="circle" cx="8" cy="16" r="3" variant="radio.checked.circle" />
+  </SVG>
+);
+
+export const RadioUnchecked = ({
+  disabled = false,
+  error = false,
+  ...props
+}) => (
+  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
+    <Box
+      as="circle"
+      cx="8"
+      cy="16"
+      r="7.5"
+      variant={
+        disabled
+          ? 'radio.unchecked.disabled'
+          : error
+          ? 'radio.unchecked.error'
+          : 'radio.unchecked'
+      }
+    />
+  </SVG>
+);

package/src/Select/ListBox.tsx

@@ -0,0 +1,40 @@
+import React, { useRef } from 'react';
+import { useListBox } from '@react-aria/listbox';
+import type { AriaListBoxOptions } from '@react-aria/listbox';
+import type { ListState } from '@react-stately/list';
+
+import { Box } from '../Box';
+import { Option } from './Option';
+import { ListBoxSection } from './ListBoxSection';
+
+interface ListBoxProps extends AriaListBoxOptions<unknown> {
+  state: ListState<unknown>;
+  error?: boolean;
+}
+
+export const ListBox = (props: ListBoxProps) => {
+  const ref = useRef<HTMLUListElement>(null);
+  const { state, error } = props;
+  const { listBoxProps } = useListBox(props, state, ref);
+
+  return (
+    <Box
+      as="ul"
+      p="none"
+      css={{
+        listStyle: 'none',
+      }}
+      {...listBoxProps}
+      variant={error ? 'select.listbox.error' : 'select.listbox'}
+      ref={ref}
+    >
+      {[...state.collection].map(item =>
+        item.type === 'section' ? (
+          <ListBoxSection key={item.key} section={item} state={state} />
+        ) : (
+          <Option key={item.key} item={item} state={state} />
+        )
+      )}
+    </Box>
+  );
+};

package/src/Select/ListBoxSection.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useListBoxSection } from '@react-aria/listbox';
+import type { ListState } from '@react-stately/list';
+import type { Node } from '@react-types/shared';
+
+import { Box } from '../Box';
+import { Option } from './Option';
+
+interface SectionProps {
+  section: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+export const ListBoxSection = ({ section, state }: SectionProps) => {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label'],
+  });
+
+  return (
+    <Box
+      as="li"
+      {...itemProps}
+      css={{
+        cursor: 'not-allowed',
+      }}
+    >
+      {section.rendered && (
+        <Box as="span" {...headingProps} variant={'select.section'}>
+          {section.rendered}
+        </Box>
+      )}
+      <Box as="ul" {...groupProps}>
+        {[...section.childNodes].map(node => (
+          <Option key={node.key} item={node} state={state} />
+        ))}
+      </Box>
+    </Box>
+  );
+};

package/src/Select/Option.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef, useState } from 'react';
+import type { ListState } from '@react-stately/list';
+import type { Node } from '@react-types/shared';
+import { useOption } from '@react-aria/listbox';
+
+import { Box } from '../Box';
+
+interface OptionProps {
+  item: Node<unknown>;
+  state: ListState<unknown>;
+}
+
+export const Option = ({ item, state }: OptionProps) => {
+  const ref = useRef<HTMLLIElement>(null);
+  const [disabled, setDisabled] = useState(false);
+  const { optionProps, isSelected } = useOption(
+    {
+      key: item.key,
+    },
+    state,
+    ref
+  );
+
+  useEffect(() => {
+    for (const key of state.disabledKeys.values()) {
+      if (key === item.key) {
+        setDisabled(true);
+      }
+    }
+  }, [state.disabledKeys, item.key]);
+
+  return (
+    <Box
+      as="li"
+      {...optionProps}
+      ref={ref}
+      variant={
+        isSelected
+          ? 'select.option.selected'
+          : disabled
+          ? 'select.option.disabled'
+          : 'select.option'
+      }
+    >
+      {item.rendered}
+    </Box>
+  );
+};