@marigold/components 0.1.0 → 0.3.2

package/src/Radio/Radio.test.tsx

@@ -1,43 +1,154 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Radio } from './Radio';
+import { ThemeProvider } from '@marigold/system';
+
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
+  colors: {
+    disabled: 'gray',
+  },
+  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/);
+  render(<Radio id="radio" title="radio" label="test" />);
 
+  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/);
+  render(<Radio id="radio" title="radio" label="test" />);
 
+  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');
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
+});
+
+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" label="test" onChange={() => {}} checked />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toHaveAttribute('checked');
+});
+
+test('supports checked and disabled radio', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio
+        id="test"
+        title="radio"
+        label="test"
+        onChange={() => {}}
+        checked
+        disabled
+      />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toHaveAttribute('checked');
+  expect(radio).toHaveAttribute('disabled');
 });
 
-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('correctly handles interaction', () => {
+  const click = jest.fn();
+  const change = jest.fn();
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio
+        id="test"
+        title="radio"
+        label="Test"
+        onClick={click}
+        onChange={change}
+      />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  fireEvent.click(radio);
+
+  expect(click).toHaveBeenCalledTimes(1);
+  expect(change).toHaveBeenCalledTimes(1);
 });

package/src/Radio/Radio.tsx

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

package/src/Radio/RadioIcon.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { conditional, State, SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Radio Icon
+// ---------------
+export type RadioIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+export const RadioIcon: React.FC<RadioIconProps> = ({
+  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
+        variant={conditional(`radio.${variant}`, conditionalStates)}
+        as="circle"
+        cx="8"
+        cy="16"
+        r="7.5"
+      />
+      {checked && <circle fill="white" cx="8" cy="16" r="3" />}
+    </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>
+  );
+};

package/src/Select/Popover.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, RefObject } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import {
+  DismissButton,
+  OverlayContainer,
+  useModal,
+  useOverlay,
+} from '@react-aria/overlays';
+import { mergeProps } from '@react-aria/utils';
+
+import { Box } from '../Box';
+
+interface PopoverProps {
+  isOpen?: boolean;
+  onClose?: () => void;
+  ref?: React.Ref<HTMLDivElement>;
+  className?: string;
+}
+
+export const Popover: React.FC<PopoverProps> = forwardRef(
+  ({ children, className, isOpen, onClose, ...otherProps }, ref) => {
+    // Handle events that should cause the popup to close,
+    const { overlayProps } = useOverlay(
+      {
+        isOpen,
+        onClose,
+        shouldCloseOnBlur: true,
+        isDismissable: true,
+      },
+      ref as RefObject<HTMLElement>
+    );
+    // Hide content outside the modal from screen readers.
+    const { modalProps } = useModal();
+
+    return (
+      <OverlayContainer>
+        <FocusScope restoreFocus>
+          <Box
+            {...mergeProps(overlayProps, otherProps, modalProps)}
+            className={className}
+            ref={ref}
+          >
+            {children}
+            <DismissButton onDismiss={onClose} />
+          </Box>
+        </FocusScope>
+      </OverlayContainer>
+    );
+  }
+);

package/src/Select/Select.stories.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Select } from './Select';
+import { Item } from '@marigold/components';
+
+export default {
+  title: 'Components/Select',
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Select label',
+        },
+      },
+      defaultValue: 'Favorite Color',
+    },
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Select an option',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    width: {
+      control: 'number',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Select> = args => (
+  <Select {...args}>
+    <Item>Red</Item>
+    <Item>Orange</Item>
+    <Item>Yellow</Item>
+  </Select>
+);