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

package/src/Searchbar/SearchForm.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const SearchForm = (props) => <form {...props} role="search" />;

package/src/Searchbar/Searchbar.js

@@ -0,0 +1,103 @@
+import React, { forwardRef, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Search from '@strapi/icons/Search';
+import Cross from '@strapi/icons/Cross';
+import { sizes } from '../themes/sizes';
+import { Field, FieldLabel, FieldAction, FieldInput, InputWrapper } from '../Field';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { inputFocusStyle } from '../themes/utils';
+import { Flex } from '../Flex';
+
+const CloseIconWrapper = styled(Flex)`
+  font-size: 0.5rem;
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral400};
+  }
+`;
+
+const SearchIconWrapper = styled(Flex)`
+  font-size: 0.8rem;
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral800};
+  }
+`;
+
+const SearchbarWrapper = styled.div`
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+
+  &:focus-within {
+    ${SearchIconWrapper} {
+      svg path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+
+  ${InputWrapper} {
+    border: 1px solid transparent;
+  }
+
+  ${inputFocusStyle(InputWrapper)}
+`;
+
+export const Searchbar = forwardRef(({ name, size, children, value, onClear, clearLabel, ...props }, ref) => {
+  const inputRef = useRef(null);
+  const isCompleting = value.length > 0;
+
+  const handleClear = (e) => {
+    onClear(e);
+    inputRef.current.focus();
+  };
+
+  const actualRef = ref || inputRef;
+
+  return (
+    <SearchbarWrapper>
+      <Field name={name}>
+        <VisuallyHidden>
+          <FieldLabel>{children}</FieldLabel>
+        </VisuallyHidden>
+
+        <FieldInput
+          ref={actualRef}
+          value={value}
+          startAction={
+            <SearchIconWrapper>
+              <Search aria-hidden={true} />
+            </SearchIconWrapper>
+          }
+          size={size}
+          endAction={
+            isCompleting ? (
+              <FieldAction label={clearLabel} onClick={handleClear}>
+                <CloseIconWrapper>
+                  <Cross />
+                </CloseIconWrapper>
+              </FieldAction>
+            ) : undefined
+          }
+          {...props}
+        />
+      </Field>
+    </SearchbarWrapper>
+  );
+});
+
+Searchbar.displayName = 'Searchbar';
+
+Searchbar.defaultProps = {
+  value: '',
+  size: 'M',
+};
+
+Searchbar.propTypes = {
+  children: PropTypes.node.isRequired,
+  clearLabel: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onClear: PropTypes.func.isRequired,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+  value: PropTypes.string,
+};

package/src/Searchbar/Searchbar.stories.mdx

@@ -0,0 +1,115 @@
+<!--- Searchbar.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Searchbar } from './Searchbar';
+import { SearchForm } from './SearchForm';
+
+<Meta title="Design System/Components/Searchbar" component={Searchbar} />
+
+# Searchbar
+
+SearchBars are used to search and navigate through specific content.
+
+**Best practices**
+
+- SearchBar should not be used at a global application level.
+- The search icon or the cancel one should not be changed.
+- SearchBar should always have a "Search" placeholder.
+- SearchBar should be placed above the content to search into.
+- SearchBar do not have a visual label but hidden details should be provided for accessibility matters.
+- If adding a SearchBar, make sure to add a "No results found" state.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Searchbar)
+
+## Imports
+
+```js
+import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+```
+
+## Usage
+
+SearchBars are used to search and navigate through specific content.
+
+### Default SearchBar
+
+The default SearchBar.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <SearchForm>
+          <Searchbar
+            name="searchbar"
+            onClear={() => setValue('')}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            clearLabel="Clearing the plugin search"
+            placeholder="e.g: strapi-plugin-abcd"
+          >
+            Searching for a plugin
+          </Searchbar>
+        </SearchForm>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### SearchBar size S
+
+The default SearchBar.
+
+<Canvas>
+  <Story name="size S">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <SearchForm>
+          <Searchbar
+            name="searchbar"
+            onClear={() => setValue('')}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            clearLabel="Clearing the plugin search"
+            placeholder="e.g: strapi-plugin-abcd"
+            size="S"
+          >
+            Searching for a plugin
+          </Searchbar>
+        </SearchForm>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Disabled SearchBar
+
+Depending on the status of an action or the permissions, a SearchBar can be disabled.
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [value, setValue] = useState('');
+      return (
+        <Searchbar
+          name="searchbar"
+          onClear={() => setValue('')}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          clearLabel="Clearing the plugin search"
+          placeholder="e.g: strapi-plugin-abcd"
+          disabled={true}
+        >
+          Searching for a plugin
+        </Searchbar>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Searchbar} />

package/src/Searchbar/__tests__/Searchbar.e2e.js

@@ -0,0 +1,52 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('Searchbar', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-searchbar--base&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('brings back the focus to the input when clearing it', async ({ page }) => {
+        await page.fill('input', 'Hello world');
+        expect(await page.locator('input').evaluate((el) => el.value)).toBe('Hello world');
+
+        await page.click('[aria-label="Clearing the plugin search"]');
+        expect(await page.locator('input').evaluate((el) => el.value)).toBe('');
+      });
+    });
+
+    test.describe('disabled', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-searchbar--disabled&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-searchbar--base&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('disabled', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-searchbar--disabled&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+});

package/src/Searchbar/index.js

@@ -0,0 +1,2 @@
+export * from './Searchbar';
+export * from './SearchForm';

package/src/Select/MultiSelectNested.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OptGroup } from './OptGroup';
+import { Option } from './Option';
+import { Select } from './Select';
+
+export const MultiSelectNested = ({ options, ...props }) => {
+  return (
+    <Select multi {...props}>
+      {options.map(({ label, value, children }) =>
+        children ? (
+          <OptGroup key={label} label={label}>
+            {children?.map((child) => (
+              <Option key={child.value} value={child.value}>
+                {child.label}
+              </Option>
+            ))}
+          </OptGroup>
+        ) : (
+          <Option key={value} value={value}>
+            {label}
+          </Option>
+        ),
+      )}
+    </Select>
+  );
+};
+
+MultiSelectNested.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.object).isRequired,
+};

package/src/Select/OptGroup.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Option } from './Option';
+
+export const OptGroup = ({ children, label, ...props }) => {
+  const childrenValues = children.map((child) => child.props.value);
+  return (
+    <>
+      <Option
+        data-opt-group={true}
+        data-opt-group-children={childrenValues}
+        aria-label={`${label}, ${children.length} items`}
+        {...props}
+      >
+        {label}
+      </Option>
+      {children}
+    </>
+  );
+};
+
+OptGroup.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  label: PropTypes.string.isRequired,
+};
+
+OptGroup.displayName = 'OptGroup';

package/src/Select/Option.js

@@ -0,0 +1,123 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+import checkmarkIcon from '../BaseCheckbox/assets/checkmark.svg';
+
+const CheckMark = styled.div`
+  border: 1px solid
+    ${({ theme, selected, indeterminate }) =>
+      selected || indeterminate ? theme.colors.primary600 : theme.colors.neutral300};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  height: 18px;
+  width: 18px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+  background-color: ${({ theme, selected, indeterminate }) =>
+    selected || indeterminate ? theme.colors.primary600 : theme.colors.neutral0};
+
+  ${({ theme, indeterminate }) =>
+    indeterminate &&
+    `&::after {
+      content: '';
+      display: block;
+      position: relative;
+      color: white;
+      height: 2px;
+      width: 10px;
+      background-color: ${theme.colors.neutral0};
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+  `}
+
+  ${({ selected }) =>
+    selected &&
+    `  
+    &::after {
+      content: '';
+      background: url(${checkmarkIcon}) no-repeat no-repeat center center;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+    }
+
+  `}
+`;
+
+const OptionBox = styled(Box)`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  &.is-focused {
+    background: ${({ theme }) => theme.colors.primary100};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primary100};
+  }
+`;
+
+export const Option = ({ selected, indeterminate, children, value, multi, isChild, startIcon, ...props }) => {
+  const optionRef = useRef(null);
+
+  return (
+    <OptionBox
+      as="li"
+      hasRadius
+      paddingLeft={isChild ? 7 : 4}
+      paddingRight={4}
+      paddingTop={2}
+      paddingBottom={2}
+      ref={optionRef}
+      role="option"
+      aria-selected={selected}
+      background={'neutral0'}
+      data-strapi-value={value}
+      {...props}
+    >
+      <Flex>
+        {startIcon && (
+          <Box paddingRight={2} aria-hidden>
+            {startIcon}
+          </Box>
+        )}
+
+        {multi && (
+          <Box paddingRight={2} aria-hidden>
+            <CheckMark selected={selected} indeterminate={indeterminate} />
+          </Box>
+        )}
+        <Typography textColor={selected ? 'primary600' : 'neutral800'} fontWeight={selected ? 'bold' : null}>
+          {children}
+        </Typography>
+      </Flex>
+    </OptionBox>
+  );
+};
+
+Option.defaultProps = {
+  isChild: false,
+  multi: false,
+  selected: false,
+  startIcon: undefined,
+  indeterminate: false,
+};
+
+Option.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  indeterminate: PropTypes.bool,
+  isChild: PropTypes.bool,
+  multi: PropTypes.bool,
+  selected: PropTypes.bool,
+  startIcon: PropTypes.node,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+Option.displayName = 'Option';