@marigold/components 0.1.0 → 0.2.0

package/src/Select/Select.test.tsx

@@ -1,67 +1,311 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Item, MarigoldProvider, Section } from '..';
 import { Select } from './Select';
 
 const theme = {
-  select: {
-    default: {
+  button: {
+    select: {
       fontFamily: 'Inter',
-    },
-    other: {
-      fontFamily: 'Oswald',
+      errorOpened: {
+        color: 'red',
+      },
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports button select variant', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
-
+  const select = screen.getByTestId('selectId');
+  expect(select).toBeDefined();
   expect(select).toHaveStyle(`font-family: Inter`);
 });
 
-test('accepts other variant than default', () => {
+test('accepts custom styles prop className', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select" variant="other">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select
+        label="MyLabel"
+        className="custom-class-name"
+        data-testid="selectId"
+      >
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const select = screen.getByTestId('selectId');
+  expect(select.className).toMatch('custom-class-name');
+});
 
-  expect(select).toHaveStyle(`font-family: Oswald`);
+test('supports label with htmlFor prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const selectLabel = screen.getAllByText(/MyLabel/);
+  expect(selectLabel[0]).toHaveAttribute('for');
 });
 
-test('renders correct HTML element', () => {
+test('supports disabled prop', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" disabled>
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const select = screen.getByTestId('selectId');
+  expect(select).toHaveAttribute('disabled');
+  fireEvent.click(select);
+  expect(select).toHaveAttribute('aria-expanded', 'false');
+});
 
-  expect(select instanceof HTMLSelectElement).toBeTruthy();
+test('supports placeholder prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" placeholder="placeholder" data-testid="selectId">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent(/placeholder/);
 });
 
-test('accepts custom styles prop className', () => {
+test('supports required prop', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select className="custom-class-name" title="select">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" required data-testid="selectId">
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const selectLabel = screen.getAllByText(/MyLabel/);
+  expect(selectLabel[0]).toContainHTML('path d="M10.8 3.84003');
+});
 
-  expect(select.className).toMatch('custom-class-name');
+test('supports error and errorMessage prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" error errorMessage="error" data-testid="selectId">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const validationMessage = screen.getAllByText(/error/);
+  expect(validationMessage).toBeDefined();
+});
+
+test('supports width prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" width="120px" data-testid="selectId">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const select = screen.getByTestId('selectId');
+
+  expect(select.parentElement).toHaveStyle(`width: 120px`);
+});
+
+test('option list opens when element is clicked', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+
+  fireEvent.click(button);
+
+  // more than one item found because of the HiddenSelect component
+  const items = screen.getByRole('listbox');
+  expect(items).toBeVisible();
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('option list opens when element is clicked and theres an error', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" error errorMessage="error" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+
+  fireEvent.click(button);
+
+  const items = screen.getByRole('listbox');
+  expect(items).toBeVisible();
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+  expect(button).toHaveStyle(`color: red`);
+});
+
+test('supports click and select an option', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+
+  fireEvent.click(button);
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+  const items = screen.getAllByText(/Red/);
+  expect(items[1]).toBeVisible();
+  expect(items[1]).toHaveAttribute('aria-selected', 'false');
+
+  fireEvent.click(items[1]);
+  expect(button).toHaveTextContent('Red');
+
+  fireEvent.click(button);
+
+  // after selecting one item there are three elements with item text
+  const newItems = screen.getAllByText(/Red/);
+  expect(newItems[2]).toHaveAttribute('aria-selected', 'true');
+});
+
+test('popup closes after an option is selected', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+
+  fireEvent.click(button);
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+  const items = screen.getAllByText(/Red/);
+  expect(items[1]).toBeVisible();
+
+  fireEvent.click(items[1]);
+  expect(button).toHaveTextContent('Red');
+  expect(items[1]).not.toBeVisible();
+});
+
+test('dismiss popup by clicking escape', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const selectButton = screen.getByTestId('selectId');
+  fireEvent.click(selectButton);
+  expect(selectButton).toHaveAttribute('aria-expanded', 'true');
+  userEvent.type(selectButton, '{esc}');
+  expect(selectButton).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('allow users to dismiss the popup with hidden dismiss button', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>Red</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const selectButton = screen.getByTestId('selectId');
+  fireEvent.click(selectButton);
+
+  const dismissButton = screen.getByLabelText(/Dismiss/);
+  expect(dismissButton).toBeDefined();
+
+  fireEvent.click(dismissButton);
+  expect(selectButton).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('supports default selectedKey prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent('Red');
+});
+
+test('supports change default selectedKey', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent('Red');
+
+  fireEvent.click(button);
+  const items = screen.getAllByText(/Red/);
+  fireEvent.click(items[1]);
+
+  expect(button).toHaveTextContent('Red');
+});
+
+test('supports disabled item prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" disabledKeys={['Red']}>
+        <Item key="Red">Red</Item>
+        <Item key="Orange">Orange</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  fireEvent.click(button);
+  const redItem = screen.getAllByText(/Red/);
+  fireEvent.click(redItem[1]);
+  expect(button).toHaveTextContent('Select an option');
+
+  const orangeItem = screen.getAllByText(/Orange/);
+  fireEvent.click(orangeItem[1]);
+  expect(button).toHaveTextContent('Orange');
+});
+
+test('supports section with items', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="Section" data-testid="selectId">
+        <Section title="Color">
+          <Item>Red</Item>
+        </Section>
+      </Select>
+    </MarigoldProvider>
+  );
+  const button = screen.getByTestId('selectId');
+  fireEvent.click(button);
+
+  const items = screen.getAllByText(/Red/);
+  expect(items[1]).toBeVisible();
+  const sections = screen.getAllByText(/Color/);
+  expect(sections[0]).toBeVisible();
 });

package/src/Select/Select.tsx

@@ -1,30 +1,163 @@
-import React from 'react';
-import { ArrowDown } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
+import React, { Ref, RefObject, useRef } from 'react';
+import { useSelectState } from '@react-stately/select';
+import { useButton } from '@react-aria/button';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-aria/focus';
+import { HiddenSelect, useSelect } from '@react-aria/select';
+import type { AriaSelectProps } from '@react-types/select';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';
+import { SingleSelection } from '@react-types/shared';
+
 import { ComponentProps } from '@marigold/types';
+import { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';
+import { ResponsiveStyleValue } from '@marigold/system';
+
 import { Box } from '../Box';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+import { ListBox } from './ListBox';
+import { Popover } from './Popover';
 
-export type SelectProps = { variant?: string } & ComponentProps<'select'>;
+export type SelectProps = {
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  width?: ResponsiveStyleValue<number | string>;
+  error?: boolean;
+  errorMessage?: string;
+} & ComponentProps<'select'> &
+  AriaSelectProps<object> &
+  SingleSelection;
 
-export const Select: React.FC<SelectProps> = ({
-  variant = 'default',
-  children,
+export const Select = ({
+  placeholder = 'Select an option',
+  disabled,
+  required,
+  error,
+  errorMessage,
+  width,
+  className,
   ...props
-}) => {
-  const iconStyles = useStyles({
-    css: {
-      alignSelf: 'center',
-      pointerEvents: 'none',
-      ml: '-28px',
-    },
+}: SelectProps) => {
+  const state = useSelectState(props);
+  const overlayTriggerState = useOverlayTriggerState({});
+  const triggerRef = useRef<HTMLElement>() as RefObject<HTMLElement>;
+  const overlayRef = useRef<HTMLDivElement>();
+
+  // Get props for the overlay
+  const { overlayProps } = useOverlayTrigger(
+    { type: 'listbox' },
+    overlayTriggerState,
+    triggerRef
+  );
+  // Get popover positioning props relative to the trigger
+  const { overlayProps: positionProps } = useOverlayPosition({
+    targetRef: triggerRef,
+    overlayRef: overlayRef as RefObject<HTMLElement>,
+    placement: 'bottom',
+    shouldFlip: false,
+    isOpen: state.isOpen,
+    onClose: state.close,
   });
+  // Get props for child elements from useSelect
+  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
+    props,
+    state,
+    triggerRef
+  );
+  // Get props for the button based on the trigger props from useSelect
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+
+  const { focusProps } = useFocusRing();
 
   return (
-    <Box display="flex">
-      <Box as="select" variant={`select.${variant}`} {...props}>
-        {children}
+    <Box position="relative" display="inline-block" width={width && width}>
+      {props.label && (
+        <Box>
+          <Label
+            {...labelProps}
+            htmlFor={labelProps.id}
+            variant={disabled ? 'disabled' : 'above'}
+          >
+            {required ? (
+              <Box as="span" display="inline-flex" alignItems="center">
+                {props.label}
+                <Box as={Required} size={16} css={{ color: 'error' }} />
+              </Box>
+            ) : (
+              props.label
+            )}
+          </Label>
+        </Box>
+      )}
+      <HiddenSelect
+        state={state}
+        triggerRef={triggerRef}
+        label={props.label}
+        name={props.name}
+        isDisabled={disabled}
+      />
+      <Box
+        as="button"
+        {...mergeProps(buttonProps, focusProps)}
+        ref={triggerRef as RefObject<HTMLButtonElement>}
+        variant={
+          error && state.isOpen && !disabled
+            ? 'button.select.errorOpened'
+            : error
+            ? 'button.select.error'
+            : state.isOpen && !disabled
+            ? 'button.select.open'
+            : 'button.select'
+        }
+        disabled={disabled}
+        className={className}
+      >
+        <Box
+          as="span"
+          {...valueProps}
+          variant={disabled ? 'select.disabled' : 'select'}
+        >
+          {state.selectedItem ? state.selectedItem.rendered : placeholder}
+        </Box>
+        {state.isOpen && !disabled ? (
+          <Box
+            as={ArrowUp}
+            size={16}
+            css={{ fill: disabled ? 'disabled' : 'text' }}
+          />
+        ) : (
+          <Box
+            as={ArrowDown}
+            size={16}
+            css={{ fill: disabled ? 'disabled' : 'text' }}
+          />
+        )}
       </Box>
-      <ArrowDown className={iconStyles} />
+      {state.isOpen && !disabled && (
+        <Box
+          as={Popover}
+          {...overlayProps}
+          {...positionProps}
+          css={{
+            width: width
+              ? width
+              : triggerRef.current && triggerRef.current.offsetWidth + 'px',
+          }}
+          ref={overlayRef as Ref<HTMLDivElement>}
+          isOpen={state.isOpen}
+          onClose={state.close}
+        >
+          <ListBox error={error} {...menuProps} state={state} />
+        </Box>
+      )}
+      {error && errorMessage && (
+        <Box as="span" display="inline-flex" alignItems="center">
+          <Box as={Exclamation} size={16} css={{ color: 'error' }} />
+          <ValidationMessage>{errorMessage}</ValidationMessage>
+        </Box>
+      )}
     </Box>
   );
 };

package/src/Slider/Slider.stories.mdx

@@ -1,58 +1,31 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Label } from '../Label';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Slider } from './Slider';
 
-<Meta title="Components/Slider" />
+<Meta
+  title="Components/Slider"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Style',
+      table: {
+        defaultValue: {
+          summary: 'slider',
+        },
+      },
+    },
+  }}
+/>
 
 # Slider
 
-## Description
-
-With the Slider component you can add a HTML `<input>` element with `type="range"` 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 `slider`.
-
-## Properties
-
-| Property             | Type     | Default  |
-| :------------------- | :------- | :------- |
-| `variant` (optional) | `string` | `slider` |
-
-## Import
-
-```tsx
-import { Slider } from '@marigold/components';
-```
-
-## Usage
-
-### Slider with default range and fix value
+export const Template = args => (
+  <Slider name="vol" min="0" max="50" {...args} />
+);
 
 <Canvas>
-  <Story name="SliderOne">
-    <div>
-      <Label htmlFor="vol">
-        Volume:
-        <br />
-        <Slider id="vol" name="vol" min="0" max="50" />
-        <br />
-        <Slider id="vol" name="vol" min="0" max="50" value="25" />
-      </Label>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### Slider with steps
-
-<Canvas>
-  <Story name="SliderTwo">
-    <div>
-      <Label htmlFor="vol">
-        Volume:
-        <br />
-        <Slider id="vol" name="vol" min="0" max="100" step="10"></Slider>
-        <br />
-        <Slider id="vol" name="vol" min="20" max="80" step="5"></Slider>
-      </Label>
-    </div>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />