@marigold/components 0.0.2 → 0.3.0

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>
+);

package/src/Select/Select.test.tsx

@@ -1,81 +1,349 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Select } from '@marigold/components';
+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 = {
-  form: {
+  colors: {
+    red: 'red',
+  },
+  fonts: {
+    body: 'Inter',
+  },
+  button: {
     select: {
-      fontFamily: 'Inter',
+      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('renders correct HTML element', () => {
+test('accepts custom styles prop className', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select">
-        <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 instanceof HTMLSelectElement).toBeTruthy();
+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('variant styles cannot be overridden with CSS prop', () => {
+test('supports disabled prop', () => {
   render(
-    <ThemeProvider theme={theme}>
-      <Select title="select" css={{ fontFamily: 'Oswald Regular' }}>
-        <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).not.toHaveStyle(`font-family: Oswald Regular`);
-  expect(select).toHaveStyle(`font-family: Inter`);
+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();
 });