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

package/src/Searchbar/SearchForm.js

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

package/src/Searchbar/Searchbar.js

@@ -1,103 +0,0 @@
-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

@@ -1,115 +0,0 @@
-<!--- 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

@@ -1,52 +0,0 @@
-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

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

package/src/Select/MultiSelectNested.js

@@ -1,31 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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';