@marigold/components 0.1.0 → 0.2.0

package/src/Radio/Radio.tsx

@@ -1,78 +1,79 @@
 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 { Box } from '../Box';
 import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+import { RadioChecked, RadioUnchecked } from './RadioIcons';
 
 // Radio Icon
 // ---------------
 type RadioIconProps = {
-  className?: string;
   variant?: string;
   checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
   children?: never;
 };
 
 const RadioIcon: React.FC<RadioIconProps> = ({
-  className,
   variant,
   checked,
+  disabled,
+  error,
 }) => {
-  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 (
+      <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />
+    );
   }
-  return <CircleUnchecked className={radioIconStyle} />;
+  return (
+    <Box
+      as={RadioUnchecked}
+      variant={`radio.${variant}`}
+      disabled={disabled}
+      error={error}
+    />
+  );
 };
 
 // Radio Input
 // ---------------
 type RadioInputProps = {
   variant?: string;
+  error?: boolean;
 } & ComponentProps<'input'>;
 
 const RadioInput: React.FC<RadioInputProps> = ({
   className,
-  variant = 'radio',
+  variant = 'default',
+  error,
   ...props
-}) => {
-  const radioStyle = useStyles({
-    css: {
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden',
-    },
-  });
-
-  return (
-    <Box display="inline-block">
-      <input type="radio" className={radioStyle} {...props} />
-      <RadioIcon
-        checked={props.checked}
-        className={className}
-        variant={variant}
-      />
-    </Box>
-  );
-};
+}) => (
+  <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
 // ---------------
@@ -80,16 +81,35 @@ export type RadioProps = {
   id: string;
   label?: string;
   required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
 } & RadioInputProps;
 
-export const Radio: React.FC<RadioProps> = ({ label, required, ...props }) => {
+export const Radio: React.FC<RadioProps> = ({
+  label,
+  required,
+  error,
+  errorMessage,
+  ...props
+}) => {
   if (label) {
     return (
-      <Label htmlFor={props.id}>
-        <RadioInput {...props} />
-        {label}
-        {required && <Required size={16} />}
-      </Label>
+      <>
+        <Label
+          htmlFor={props.id}
+          required={required}
+          variant={props.disabled ? 'disabled' : 'inline'}
+        >
+          <Box as={RadioInput} pr="8px" error={error} {...props} />
+          {label}
+        </Label>
+        {error && errorMessage && (
+          <ValidationMessage>
+            <Exclamation size={16} />
+            {errorMessage}
+          </ValidationMessage>
+        )}
+      </>
     );
   }
 

package/src/Radio/RadioIcons.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { SVG } from '@marigold/icons';
+
+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,39 @@
+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"
+      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.mdx

@@ -1,44 +1,78 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Label } from '../Label';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Select } from './Select';
+import { Item } from '@marigold/components';
 
-<Meta title="Components/Select" />
+<Meta
+  title="Components/Select"
+  argTypes={{
+    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',
+    },
+  }}
+/>
 
 # Select
 
-## Description
-
-Dropdown for selecting a value among different options.
-
-## Import
-
-```tsx
-import { Select } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Select label="Favorite Color" htmlFor="id" {...args}>
+    {/* Storybook crashes with imported <Item> component
+      <Item>Red</Item>
+      <Item>Orange</Item>
+      <Item>Yellow</Item> */}
+  </Select>
+);
 
 <Canvas>
-  <Story name="Select">
-    <Label htmlFor="select">
-      Dropdown
-      <Select id="select">
-        <option selected>Choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
-  <Story name="Select disabled">
-    <Label htmlFor="select2">
-      Dropdown disabled
-      <Select disabled>
-        <option selected>Can't choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />