@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/src/Combobox/Combobox.stories.mdx

@@ -0,0 +1,191 @@
+<!--- Combobox.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { Combobox, CreatableCombobox } from './Combobox';
+import { ComboboxOption } from './ComboboxOption';
+
+<Meta title="Design System/Components/Combobox" component={Combobox} />
+
+# Combobox
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Combobox)
+
+## Imports
+
+```js
+import { Combobox } from '@strapi/design-system/Combobox';
+```
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <Combobox label="Food" value={value} onChange={setValue}>
+          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
+          <ComboboxOption value="bagel">Bagel</ComboboxOption>
+          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
+          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
+        </Combobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Disabled
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <Combobox label="Food" disabled value={value} onChange={setValue}>
+          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
+          <ComboboxOption value="bagel">Bagel</ComboboxOption>
+          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
+          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
+        </Combobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Without label
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="withoutLabel">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <Combobox aria-label="Food" value={value} onChange={setValue}>
+          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
+          <ComboboxOption value="bagel">Bagel</ComboboxOption>
+          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
+          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
+        </Combobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Error
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="error">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <Combobox label="Food" value={value} error="An error occured" onChange={setValue}>
+          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
+          <ComboboxOption value="bagel">Bagel</ComboboxOption>
+          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
+          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
+        </Combobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Initial data
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="initial-data">
+    {() => {
+      const [value, setValue] = useState('tartuffo');
+      return (
+        <Combobox label="Food" value={value} onChange={setValue}>
+          <ComboboxOption value="hamburger">Hamburger</ComboboxOption>
+          <ComboboxOption value="bagel">Bagel</ComboboxOption>
+          <ComboboxOption value="tartuffo">Tartuffo</ComboboxOption>
+          <ComboboxOption value="carbonara">Carbonara</ComboboxOption>
+        </Combobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Creatable
+
+This is the doc of the `Combobox` component
+
+<Canvas>
+  <Story name="creatable">
+    {() => {
+      const [value, setValue] = useState('');
+      const [options, setOptions] = useState([
+        {
+          name: 'Hamburger',
+          value: 'hamburger',
+        },
+        {
+          name: 'Hambu',
+          value: 'hambu',
+        },
+        {
+          name: 'Ham',
+          value: 'ham',
+        },
+        {
+          name: 'Sandwich',
+          value: 'sandwich',
+        },
+        {
+          name: 'Peperroni',
+          value: 'peperroni',
+        },
+        {
+          name: 'Asparagus',
+          value: 'asparagus',
+        },
+        {
+          name: 'Lettuce',
+          value: 'lettuce',
+        },
+        {
+          name: 'Tomato',
+          value: 'tomato',
+        },
+        {
+          name: 'Bagel',
+          value: 'bagel',
+        },
+        {
+          name: 'Tartuffo',
+          value: 'tartuffo',
+        },
+        {
+          name: 'Carbonara',
+          value: 'carbonara',
+        },
+      ]);
+      const onCreateOption = (value) => {
+        setOptions((opt) => [...opt, { name: value, value }]);
+        setValue(value);
+      };
+      return (
+        <CreatableCombobox label="Food" value={value} onChange={setValue} onCreateOption={onCreateOption}>
+          {options.map(({ name, value }) => (
+            <ComboboxOption key={value} value={value}>
+              {name}
+            </ComboboxOption>
+          ))}
+        </CreatableCombobox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Combobox} />

package/src/Combobox/ComboboxList.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { maintainScrollVisibility } from './utils';
+
+export const ComboboxList = ({ options, activeOptionRef }) => {
+  useEffect(() => {
+    if (activeOptionRef.current) {
+      maintainScrollVisibility(activeOptionRef.current);
+    }
+  }, []);
+
+  return options;
+};
+
+ComboboxList.defaultProps = {
+  activeOptionRef: undefined,
+};
+
+ComboboxList.propTypes = {
+  options: PropTypes.array.isRequired,
+};

package/src/Combobox/ComboboxOption.js

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '../Typography';
+import { OptionBox } from './components';
+
+export const ComboboxOption = forwardRef(({ isSelected, children, ...props }, ref) => {
+  return (
+    <OptionBox
+      hasRadius
+      paddingLeft={4}
+      paddingRight={4}
+      paddingTop={2}
+      paddingBottom={2}
+      role="option"
+      background={'neutral0'}
+      isSelected={isSelected}
+      ref={ref}
+      {...props}
+    >
+      <Typography textColor={isSelected ? 'primary600' : 'neutral800'} fontWeight={isSelected ? 'bold' : null}>
+        {children}
+      </Typography>
+    </OptionBox>
+  );
+});
+
+ComboboxOption.defaultProps = {
+  isSelected: false,
+};
+
+ComboboxOption.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  isSelected: PropTypes.bool,
+};
+
+ComboboxOption.displayName = 'ComboboxOption';

package/src/Combobox/__tests__/Combobox.e2e.js

@@ -0,0 +1,133 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('Combobox', () => {
+  test.describe('light mode', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--base&globals=&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test('Focus and select a value then close the combobox', async ({ page }) => {
+      await page.click('input');
+      await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 300 });
+
+      await page.click('text="Tartuffo"');
+
+      const selectedValue = await page.textContent('#combobox-1-selected-value');
+      await expect(selectedValue).toBe('Tartuffo');
+      await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 300 });
+    });
+
+    test('Select a value', async ({ page }) => {
+      await page.click('input');
+      await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 300 });
+
+      await page.click('text="Tartuffo"');
+
+      const selectedValue = await page.textContent('#combobox-1-selected-value');
+      await expect(selectedValue).toBe('Tartuffo');
+      await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 300 });
+    });
+
+    test('Displays no results', async ({ page }) => {
+      await page.fill('input', 'Apple Pie');
+      const content = await page.textContent('text="No results found"');
+      await expect(content).toBe('No results found');
+    });
+
+    test('Type a value', async ({ page }) => {
+      await page.fill('input', 'Hamburger');
+      let options = await page.$$('[role="option"]');
+      expect(options.length).toEqual(1);
+
+      await page.fill('input', '');
+      options = await page.$$('[role="option"]');
+      expect(options.length).toEqual(4);
+    });
+
+    test('Select with keyboard', async ({ page }) => {
+      await page.focus('input');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowDown');
+
+      const ariaDescendantValue = await page.getAttribute('input', 'aria-activedescendant');
+      expect(ariaDescendantValue).toBe('combobox-1-2');
+
+      await page.keyboard.press('Enter');
+
+      const selectedValue = await page.textContent('#combobox-1-selected-value');
+      await expect(selectedValue).toBe('Tartuffo');
+    });
+  });
+
+  test.describe.parallel('Combobox - initial data', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--initial-data&args=&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test('initialize the value', async ({ page }) => {
+      const selectedValue = await page.textContent('#combobox-1-selected-value');
+      await expect(selectedValue).toBe('Tartuffo');
+    });
+  });
+
+  test.describe.parallel('Combobox - creatable', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--creatable&globals=&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test('Create a new item', async ({ page }) => {
+      await page.fill('input', 'Apple Pie');
+      const content = await page.textContent('[role="option"]');
+      await expect(content).toBe('Create "Apple Pie"');
+
+      await page.click('[role="option"]');
+
+      const selectedValue = await page.textContent('#combobox-1-selected-value');
+      await expect(selectedValue).toBe('Apple Pie');
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--base&globals=&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('disabled A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--disabled&globals=&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('error A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-combobox--error&globals=&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Combobox/__tests__/utils.spec.js

@@ -0,0 +1,94 @@
+import { filterOptions } from '../utils';
+
+describe('Combobox | utils', () => {
+  describe('filterOptions', () => {
+    const options = [{ props: { children: 'Hamburger' } }, { props: { children: 'Bagel' } }];
+
+    it('should filter the options correctly', () => {
+      const actual = filterOptions(options, 'ham');
+      const expected = [options[0]];
+
+      expect(actual).toEqual(expected);
+    });
+
+    it('empty array, without any param', () => {
+      const expected = [];
+      const result = filterOptions();
+
+      expect(result).toEqual(expected);
+    });
+
+    it('all items, without filter param', () => {
+      const expected = options;
+      const result = filterOptions(options);
+
+      expect(result).toEqual(expected);
+    });
+
+    it('all items, with empty filter param', () => {
+      const expected = options;
+      const result = filterOptions(options, '');
+
+      expect(result).toEqual(expected);
+    });
+
+    it('all items, with null as filter param', () => {
+      const expected = options;
+      const result = filterOptions(options, null);
+
+      expect(result).toEqual(expected);
+    });
+
+    it('no items, with 0 as filter param', () => {
+      const expected = [];
+      const result = filterOptions(options, 0);
+
+      expect(result).toEqual(expected);
+    });
+
+    it('should filter the options if the search is a number', () => {
+      const optionsNumeric = [{ props: { children: 421 } }, { props: { children: 1285 } }];
+      const expected = [optionsNumeric[1]];
+
+      expect(filterOptions(optionsNumeric, 12)).toEqual(expected);
+    });
+
+    describe('should filter the options correctly, with partial term', () => {
+      const optionsPartial = [
+        { props: { children: 'some-gh-user/project-super-cms' } },
+        { props: { children: 'other-gh-user/project-awesome-cms' } },
+        { props: { children: 'one-more-gh-user/cool-cms' } },
+        { props: { children: 'strapi/strapi' } },
+        { props: { children: 'strapi/design-system' } },
+      ];
+
+      it('3 of 5 items', () => {
+        const result = filterOptions(optionsPartial, 'cms');
+        const expected = [optionsPartial[0], optionsPartial[1], optionsPartial[2]];
+
+        expect(result).toEqual(expected);
+      });
+
+      it('2 of 5 items', () => {
+        const result = filterOptions(optionsPartial, 'project');
+        const expected = [optionsPartial[0], optionsPartial[1]];
+
+        expect(result).toEqual(expected);
+      });
+
+      it('2 last of 5 items', () => {
+        const result = filterOptions(optionsPartial, 'strapi');
+        const expected = [optionsPartial[3], optionsPartial[4]];
+
+        expect(result).toEqual(expected);
+      });
+
+      it('1 item', () => {
+        const result = filterOptions(optionsPartial, 'awesome');
+        const expected = [optionsPartial[1]];
+
+        expect(result).toEqual(expected);
+      });
+    });
+  });
+});

package/src/Combobox/components.js

@@ -0,0 +1,69 @@
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import styled from 'styled-components';
+import { inputFocusStyle } from '../themes/utils';
+
+export const MainRow = styled(Flex)`
+  position: relative;
+  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+
+  ${({ theme, $disabled }) =>
+    $disabled
+      ? `
+    color: ${theme.colors.neutral600};
+    background: ${theme.colors.neutral150};
+  `
+      : undefined}
+
+  ${inputFocusStyle()}
+`;
+
+export const ValueContainer = styled.div`
+  padding: 1px 2px;
+  grid-area: 1 / 1 / 2 / 3;
+`;
+
+export const InputContainer = styled(Flex)`
+  display: grid;
+  flex: 1 1 0%;
+  position: relative;
+`;
+
+export const Input = styled.input`
+  display: inline-grid;
+  grid-area: 1 / 1 / 2 / 3;
+  grid-template-columns: 0px min-content;
+  background: transparent;
+  min-height: ${40 / 16}rem;
+  border: none;
+  flex: 1;
+  font-size: ${14 / 16}rem;
+  color: ${({ theme }) => theme.colors.neutral800};
+  outline: none;
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+    outline-offset: 0;
+  }
+  &[aria-disabled='true'] {
+    background: inherit;
+    color: inherit;
+    cursor: not-allowed;
+  }
+`;
+
+export const OptionBox = styled(Box)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  ${({ isSelected, theme }) => isSelected && `background: ${theme.colors.primary100};`}
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primary100};
+  }
+`;

package/src/Combobox/index.js

@@ -0,0 +1,2 @@
+export * from './Combobox';
+export * from './ComboboxOption';

package/src/Combobox/utils.js

@@ -0,0 +1,97 @@
+import computeScrollIntoView from 'compute-scroll-into-view';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+
+export const MenuActions = {
+  Close: 'Close',
+  CloseSelect: 'CloseSelect',
+  First: 'First',
+  Last: 'Last',
+  Next: 'Next',
+  Open: 'Open',
+  PageDown: 'PageDown',
+  PageUp: 'PageUp',
+  Previous: 'Previous',
+  Select: 'Select',
+  Space: 'Space',
+  Type: 'Type',
+};
+
+export const TreeActions = {
+  Close: 'Close',
+  First: 'First',
+  Last: 'Last',
+  Next: 'Next',
+  Open: 'Open',
+  Previous: 'Previous',
+  Select: 'Select',
+  UpLevel: 'UpLevel',
+};
+
+// filter an array of options against an input string
+// returns an array of options that contains the filter string, case-independent
+export function filterOptions(options = [], filter, exclude = []) {
+  const equalizedTerm = String(filter ?? '').toLowerCase();
+
+  return equalizedTerm
+    ? options.filter((option) => {
+        const equalizedOptionChildren = option.props.children.toString().toLowerCase();
+        const matches = equalizedOptionChildren.includes(equalizedTerm);
+
+        return matches && exclude.indexOf(option) < 0;
+      })
+    : options;
+}
+
+// return combobox action from key press
+export function getActionFromKey(key, menuOpen) {
+  // handle opening when closed
+  if (!menuOpen && key === KeyboardKeys.DOWN) {
+    return MenuActions.Open;
+  }
+  // handle keys when open
+  if (key === KeyboardKeys.DOWN) {
+    return MenuActions.Next;
+  } else if (key === KeyboardKeys.UP) {
+    return MenuActions.Previous;
+  } else if (key === KeyboardKeys.HOME) {
+    return MenuActions.First;
+  } else if (key === KeyboardKeys.END) {
+    return MenuActions.Last;
+  } else if (key === KeyboardKeys.ESCAPE) {
+    return MenuActions.Close;
+  } else if (key === KeyboardKeys.ENTER) {
+    return MenuActions.CloseSelect;
+  } else if (key === KeyboardKeys.BACKSPACE || key === KeyboardKeys.CLEAR || key.length === 1) {
+    return MenuActions.Type;
+  }
+}
+
+// get updated option index
+export function getUpdatedIndex(current, max, action) {
+  switch (action) {
+    case MenuActions.First:
+      return 0;
+    case MenuActions.Last:
+      return max;
+    case MenuActions.Previous:
+      return Math.max(0, current - 1);
+    case MenuActions.Next:
+      return Math.min(max, current + 1);
+    default:
+      return current;
+  }
+}
+
+// ensure given child element is within the parent's visible scroll area
+export function maintainScrollVisibility(activeElement) {
+  const actions = computeScrollIntoView(activeElement, {
+    scrollMode: 'if-needed',
+    block: 'nearest',
+    inline: 'nearest',
+  });
+
+  actions.forEach(({ el, top, left }) => {
+    el.scrollTop = top;
+    el.scrollLeft = left;
+  });
+}