@marigold/components 0.0.3 → 0.3.1

package/src/Select/Select.test.tsx

@@ -1,67 +1,349 @@
 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: {
-      fontFamily: 'Inter',
+  colors: {
+    red: 'red',
+  },
+  fonts: {
+    body: 'Inter',
+  },
+  button: {
+    select: {
+      fontFamily: 'body',
+      errorOpened: {
+        color: 'red',
+      },
     },
-    other: {
-      fontFamily: 'Oswald',
+  },
+  label: {
+    above: {
+      fontSize: '8px',
+    },
+    inline: {
+      fontSize: '14px',
     },
   },
 };
 
-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('supports default labelVariant', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select" variant="other">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId">
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const label = screen.getAllByText('MyLabel');
+  expect(label[0]).toHaveStyle(`font-size: 8px`);
+});
 
-  expect(select).toHaveStyle(`font-family: Oswald`);
+test('supports other labelVariant than default', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" labelVariant="inline">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const label = screen.getAllByText('MyLabel');
+  expect(label[0]).toHaveStyle(`font-size: 14px`);
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select
+        label="MyLabel"
+        className="custom-class-name"
+        data-testid="selectId"
+      >
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const select = screen.getByTestId('selectId');
+  expect(select.className).toMatch('custom-class-name');
 });
 
-test('renders correct HTML element', () => {
+test('supports label with htmlFor prop', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel">
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const selectLabel = screen.getAllByText(/MyLabel/);
+  expect(selectLabel[0]).toHaveAttribute('for');
+});
 
-  expect(select instanceof HTMLSelectElement).toBeTruthy();
+test('supports disabled prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" data-testid="selectId" disabled>
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const select = screen.getByTestId('selectId');
+  expect(select).toHaveAttribute('disabled');
+  fireEvent.click(select);
+  expect(select).toHaveAttribute('aria-expanded', 'false');
 });
 
-test('accepts custom styles prop className', () => {
+test('supports placeholder prop', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select className="custom-class-name" title="select">
-        <option>1</option>
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" placeholder="placeholder" data-testid="selectId">
+        <Item>1</Item>
       </Select>
-    </ThemeProvider>
+    </MarigoldProvider>
   );
-  const select = screen.getByTitle(/select/);
+  const button = screen.getByTestId('selectId');
+  expect(button).toHaveTextContent(/placeholder/);
+});
 
-  expect(select.className).toMatch('custom-class-name');
+test('supports required prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Select label="MyLabel" required data-testid="selectId">
+        <Item>1</Item>
+      </Select>
+    </MarigoldProvider>
+  );
+  const selectLabel = screen.getAllByText(/MyLabel/);
+  expect(selectLabel[0]).toContainHTML('path d="M10.8 3.84003');
+});
+
+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,174 @@
-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'>;
+// Theme Extension
+// ---------------
+export interface SelectThemeExtension<Value> {
+  select?: {
+    __default: Value;
+    disabled?: Value;
+    listbox?: {
+      __default: Value;
+      error?: Value;
+    };
+    section?: Value;
+    option?: Value;
+  };
+}
 
-export const Select: React.FC<SelectProps> = ({
-  variant = 'default',
-  children,
+// Props
+// ---------------
+export type SelectProps = {
+  labelVariant?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  width?: ResponsiveStyleValue<number | string>;
+  error?: boolean;
+  errorMessage?: string;
+} & ComponentProps<'select'> &
+  AriaSelectProps<object> &
+  SingleSelection;
+
+// Component
+// ---------------
+export const Select = ({
+  labelVariant = 'above',
+  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={labelVariant}>
+            {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: '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: 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.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Slider } from './Slider';
+
+export default {
+  title: 'Components/Slider',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Style',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Slider> = args => (
+  <Slider name="vol" min="0" max="50" {...args} />
+);

package/src/Slider/Slider.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Slider } from './Slider';
 
 const theme = {
-  form: {
-    slider: {
-      fontFamily: 'Oswald Regular',
+  fonts: {
+    regular: 'Oswald Regular',
+    body: 'Inter',
+  },
+  slider: {
+    __default: {
+      fontFamily: 'regular',
     },
-    range: {
-      fontFamily: 'Inter',
+    special: {
+      fontFamily: 'body',
     },
   },
 };
@@ -28,7 +32,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Slider variant="range" title="slider" />
+      <Slider variant="special" title="slider" />
     </ThemeProvider>
   );
   const slider = screen.getByTitle(/slider/);

package/src/Slider/Slider.tsx

@@ -1,23 +1,35 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface SliderThemeExtension<Value> {
+  slider?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type SliderProps = {
   variant?: string;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Slider: React.FC<SliderProps> = ({
-  variant = 'slider',
+  variant = '',
   className,
   ...props
-}) => {
-  const classNames = useStyles({
-    variant: `form.${variant}`,
-    css: {
-      verticalAlign: 'middle',
-    },
-    className,
-  });
-
-  return <input type="range" className={classNames} {...props} />;
-};
+}) => (
+  <Box
+    as="input"
+    type="range"
+    css={{ verticalAlign: 'middle' }}
+    variant={`slider.${variant}`}
+    className={className}
+    {...props}
+  />
+);