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

package/playwright.config.js

@@ -1,39 +0,0 @@
-const { devices } = require('@playwright/test');
-
-const config = {
-  testMatch: '**/__tests__/*.e2e.js',
-  // Forbid test.only on CI
-  forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  use: {
-    baseURL: 'http://localhost:6006',
-    headless: true,
-    contextOptions: {
-      locale: 'en-US', // set the locale
-    },
-    actionTimeout: 0,
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: {
-        ...devices['Desktop Chrome'],
-      },
-    },
-    {
-      name: 'firefox',
-      use: {
-        ...devices['Desktop Firefox'],
-      },
-    },
-    {
-      name: 'webkit',
-      use: {
-        ...devices['Desktop Safari'],
-      },
-    },
-  ],
-};
-
-module.exports = config;

package/src/Accordion/Accordion.js

@@ -1,148 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Typography } from '../Typography';
-import { AccordionContext } from './AccordionContext';
-import { useId } from '../helpers/useId';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-
-const getBorder = ({ theme, expanded, variant, disabled, error }) => {
-  if (error) {
-    return `1px solid ${theme.colors.danger600} !important`;
-  }
-
-  if (disabled) {
-    return `1px solid ${theme.colors.neutral150}`;
-  }
-
-  if (expanded) {
-    return `1px solid ${theme.colors.primary600}`;
-  }
-
-  if (variant === 'primary') {
-    return `1px solid ${theme.colors.neutral0}`;
-  }
-
-  return `1px solid ${theme.colors.neutral100}`;
-};
-
-export const AccordionTypography = styled(Typography)``;
-
-const AccordionWrapper = styled(Box)`
-  border: ${getBorder};
-
-  &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    ${AccordionTypography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
-    }
-
-    ${Typography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
-    }
-
-    & > ${Flex} {
-      background: ${({ theme }) => theme.colors.primary100};
-    }
-
-    [data-strapi-dropdown='true'] {
-      background: ${({ theme }) => theme.colors.primary200};
-    }
-  }
-`;
-
-export const Accordion = ({
-  children,
-  expanded,
-  id,
-  size,
-  variant,
-  disabled,
-  error,
-  hasErrorMessage,
-  onToggle,
-  toggle,
-}) => {
-  const generatedId = useId('accordion', id);
-
-  return (
-    <AccordionContext.Provider value={{ expanded, onToggle, toggle, id: generatedId, size, variant, disabled }}>
-      <AccordionWrapper
-        data-strapi-expanded={expanded}
-        disabled={disabled}
-        aria-disabled={disabled}
-        expanded={expanded}
-        hasRadius
-        variant={variant}
-        error={error}
-      >
-        {children}
-      </AccordionWrapper>
-      {error && hasErrorMessage && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600">
-            {error}
-          </Typography>
-        </Box>
-      )}
-    </AccordionContext.Provider>
-  );
-};
-
-Accordion.defaultProps = {
-  disabled: false,
-  error: undefined,
-  expanded: false,
-  hasErrorMessage: true,
-  id: undefined,
-  toggle: false,
-  size: 'M',
-  variant: 'primary',
-  onToggle: undefined,
-  toggle: undefined,
-};
-
-Accordion.propTypes = {
-  children: PropTypes.node.isRequired,
-  /**
-   * If `true`, the accordion will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * If defined, will add a border (borderColor: `danger600`) and display the error message below the component.
-   */
-  error: PropTypes.string,
-  /**
-   * If `true`, an expanded Accordion will be rendered.
-   */
-  expanded: PropTypes.bool,
-  /**
-   * If `false`, the error message won't show.
-   * If the `Accordion` is as child of an `AccordionGroup`, this prop will be set to `false` automatically.
-   * The error message of the `AccordionGroup` will be shown below the group instead of the Accordion itself.
-   */
-  hasErrorMessage: PropTypes.bool,
-  /**
-   * The id of the component.
-   */
-  id: PropTypes.string,
-  /**
-   * The callback invoked after a click event on the `AccordionToggle`.
-   */
-  onToggle: PropTypes.func,
-  /**
-   * Size of the Accordion.
-   */
-  size: PropTypes.oneOf(['S', 'M']),
-  /**
-   * DEPRECATED: The callback invoked after a click event on the `AccordionToggle`.
-   */
-  toggle: PropTypes.func,
-  /**
-   * Color variant for `Accordion`. The "secondary" variant reverses the background colors.
-   * This is useful when you want to display a list and alternate the colors of the accordions.
-   */
-  variant: PropTypes.oneOf(['primary', 'secondary']),
-};

package/src/Accordion/Accordion.stories.mdx

@@ -1,327 +0,0 @@
-<!--- Accordion.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import Pencil from '@strapi/icons/Pencil';
-import Information from '@strapi/icons/Information';
-import Trash from '@strapi/icons/Trash';
-import User from '@strapi/icons/User';
-import Plus from '@strapi/icons/Plus';
-
-import { Accordion } from './Accordion';
-import { AccordionToggle } from './AccordionToggle';
-import { AccordionContent } from './AccordionContent';
-import { AccordionGroup } from './AccordionGroup';
-
-import { KeyboardNavigable } from '../KeyboardNavigable';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import { Typography } from '../Typography';
-import { IconButton } from '../IconButton';
-import { TextButton } from '../TextButton';
-import { TextInput } from '../TextInput';
-import { Stack } from '../Stack';
-import { Tooltip } from '../Tooltip';
-
-<Meta title="Design System/Components/Accordion" component={Accordion} />
-
-# Accordion
-
-Accordions are collapsable blocks that vertically hide a stack of content. Clicking on the block reveals the associated content.
-
-**Best practices**
-
-- Use accordion when you need big and/or related chunks of content to be organized in a same place.
-- Use accordion for lower priority information.
-- Use to shorten pages and increase readability.
-- The chevron icon pointing down indicates a collapsed state and pointing up indicates an expanded state.
-- Hover and active states should be used anytime it's possible.
-- Content should not scroll within an accordion.
-- Use chevron icon on the left side if call-to-actions are available on the right side.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Accordion)
-
-## Imports
-
-```js
-import { Accordion, AccordionToggle, AccordionContent, AccordionGroup } from '@strapi/design-system/Accordion';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [expanded, setExpanded] = useState(false);
-      return (
-        <div>
-          <Box padding={8} background="neutral100">
-            <Accordion
-              error="The component contain error(s)"
-              expanded={expanded}
-              onToggle={() => setExpanded((s) => !s)}
-              id="acc-1"
-              size="S"
-            >
-              <AccordionToggle title="User informations" />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral0">
-            <Accordion expanded={expanded} onToggle={() => setExpanded((s) => !s)} id="acc-2" variant="secondary">
-              <AccordionToggle
-                title="User informations 2"
-                description="The following contains information about the current user 2"
-                action={<IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />}
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral100">
-            <Accordion expanded={expanded} onToggle={() => setExpanded((s) => !s)} id="acc-3">
-              <AccordionToggle
-                togglePosition="left"
-                title="User informations 3"
-                description="The following contains information about the current user 3"
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral0">
-            <Accordion expanded={expanded} onToggle={() => setExpanded((s) => !s)} id="acc-4" variant="secondary">
-              <AccordionToggle
-                togglePosition="left"
-                title="User informations 4"
-                action={<IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />}
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## AccordionGroup
-
-<Canvas>
-  <Story name="accordion-group">
-    {() => {
-      const [expandedID, setExpandedID] = useState(null);
-      const handleToggle = (id) => () => {
-        setExpandedID((s) => (s === id ? null : id));
-      };
-      return (
-        <div>
-          <Box padding={8} background="neutral0">
-            <AccordionGroup
-              error="The components contain error(s)"
-              footer={
-                <Flex justifyContent="center" height="48px" background="neutral150">
-                  <TextButton disabled={true} startIcon={<Plus />}>
-                    Add an entry
-                  </TextButton>
-                </Flex>
-              }
-              label="Label"
-              labelAction={
-                <Tooltip description="Content of the tooltip">
-                  <button
-                    aria-label="Information about the email"
-                    style={{
-                      border: 'none',
-                      padding: 0,
-                      background: 'transparent',
-                    }}
-                  >
-                    <Information aria-hidden={true} />
-                  </button>
-                </Tooltip>
-              }
-            >
-              <Accordion
-                error="The components contain error(s)"
-                expanded={expandedID === 'acc-1'}
-                onToggle={handleToggle('acc-1')}
-                id="acc-1"
-                size="S"
-              >
-                <AccordionToggle
-                  startIcon={<User aria-hidden={true} />}
-                  action={
-                    <Stack horizontal spacing={0}>
-                      <IconButton noBorder onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
-                      <IconButton noBorder onClick={() => console.log('delete')} label="Delete" icon={<Trash />} />
-                    </Stack>
-                  }
-                  title="User informations"
-                  togglePosition="left"
-                />
-                <AccordionContent>
-                  <Box padding={3}>
-                    <TextInput label="Name" />
-                  </Box>
-                </AccordionContent>
-              </Accordion>
-              <Accordion
-                error="The component contain error(s)"
-                expanded={expandedID === 'acc-2'}
-                onToggle={handleToggle('acc-2')}
-                id="acc-2"
-                size="S"
-              >
-                <AccordionToggle title="User informations" togglePosition="left" />
-                <AccordionContent>
-                  <Box padding={3}>
-                    <Typography>My name is John Duff</Typography>
-                  </Box>
-                </AccordionContent>
-              </Accordion>
-              <Accordion expanded={expandedID === 'acc-3'} onToggle={handleToggle('acc-3')} id="acc-3" size="S">
-                <AccordionToggle title="User informations" togglePosition="left" />
-                <AccordionContent>
-                  <Box padding={3}>
-                    <Typography>My name is Michka</Typography>
-                  </Box>
-                </AccordionContent>
-              </Accordion>
-              <Accordion expanded={expandedID === 'acc-4'} onToggle={handleToggle('acc-4')} id="acc-4" size="S">
-                <AccordionToggle
-                  startIcon={<User aria-hidden={true} />}
-                  title="User informations"
-                  togglePosition="left"
-                />
-                <AccordionContent>
-                  <Box padding={3}>
-                    <Typography>My name is John Duff</Typography>
-                  </Box>
-                </AccordionContent>
-              </Accordion>
-            </AccordionGroup>
-          </Box>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Accordion keyboard navigable
-
-The accordion component has two main states: collapsed and expanded. By default it has a collapsed state. If Call-to-actions are required, use them on the right side and use chevron icon on the left one.
-
-<Canvas>
-  <Story name="keyboard navigable">
-    {() => {
-      return (
-        <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-          <Box padding={8} background="neutral100">
-            <Accordion expanded={false} onToggle={() => {}} id="acc-1">
-              <AccordionToggle
-                title="User informations"
-                description="The following contains information about the current user"
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral0">
-            <Accordion expanded={false} onToggle={() => {}} id="acc-2">
-              <AccordionToggle
-                variant="secondary"
-                title="User informations 2"
-                description="The following contains information about the current user 2"
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral100">
-            <Accordion expanded={false} onToggle={() => {}} id="acc-3">
-              <AccordionToggle
-                togglePosition="left"
-                title="User informations 3"
-                description="The following contains information about the current user 3"
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-          <Box padding={8} background="neutral0">
-            <Accordion expanded={false} onToggle={() => {}} id="acc-4">
-              <AccordionToggle
-                variant="secondary"
-                togglePosition="left"
-                title="User informations 4"
-                action={<IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />}
-              />
-              <AccordionContent>
-                <Box padding={3}>
-                  <Typography>My name is John Duff</Typography>
-                </Box>
-              </AccordionContent>
-            </Accordion>
-          </Box>
-        </KeyboardNavigable>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Accordion expanded
-
-The Accordion component can also be open by default using the parameter `expanded={true}`.
-
-<Canvas>
-  <Story name="expanded">
-    <Accordion expanded={true} onToggle={() => {}} id="acc-1">
-      <AccordionToggle
-        title="User informations"
-        description="The following contains information about the current user"
-      />
-      <AccordionContent>
-        <Box padding={3}>
-          <Typography>My name is John Duff</Typography>
-        </Box>
-      </AccordionContent>
-    </Accordion>
-  </Story>
-</Canvas>
-
-## Accordion props
-
-<ArgsTable of={Accordion} />
-
-## AccordionGroup props
-
-<ArgsTable of={AccordionGroup} />
-
-## AccordionToggle props
-
-<ArgsTable of={AccordionToggle} />

package/src/Accordion/AccordionContent.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useAccordion } from './AccordionContext';
-import { Box } from '../Box';
-
-export const AccordionContent = ({ children, ...props }) => {
-  const { expanded, id } = useAccordion();
-
-  if (!expanded) {
-    return null;
-  }
-
-  const idContent = `accordion-content-${id}`;
-  const ariaLabelId = `accordion-label-${id}`;
-  const ariaDescriptionId = `accordion-desc-${id}`;
-
-  return (
-    <Box role="region" id={idContent} aria-labelledby={ariaLabelId} aria-describedby={ariaDescriptionId} {...props}>
-      {children}
-    </Box>
-  );
-};
-
-AccordionContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Accordion/AccordionContext.js

@@ -1,5 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const AccordionContext = createContext();
-
-export const useAccordion = () => useContext(AccordionContext);

package/src/Accordion/AccordionGroup.js

@@ -1,114 +0,0 @@
-import React, { Children, cloneElement } 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 { KeyboardNavigable } from '../KeyboardNavigable';
-
-const AccordionFooter = styled(Box)`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-
-const EnhancedGroup = styled(Box)`
-  & > * {
-    & > * {
-      border-radius: unset;
-    }
-  }
-
-  & > * {
-    border-radius: unset;
-    border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  }
-
-  & > *:first-of-type {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    & > * {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    }
-
-    &:hover {
-      border-top: 1px solid ${({ theme }) => theme.colors.primary600};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${({ theme, footer }) => `
-    &:not(${footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
-    }
-  `}
-`;
-
-const LabelAction = styled(Box)`
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-export const AccordionGroup = ({ children, footer, label, labelAction, error }) => {
-  const childrenArray = Children.toArray(children).map((child) => {
-    return cloneElement(child, { hasErrorMessage: false });
-  });
-
-  return (
-    <KeyboardNavigable attributeName="data-strapi-accordion-toggle">
-      {label && (
-        <Flex paddingBottom={1}>
-          <Typography variant="pi" as="label" textColor="neutral800" fontWeight="bold">
-            {label}
-          </Typography>
-          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Flex>
-      )}
-      <EnhancedGroup footer={footer}>{childrenArray}</EnhancedGroup>
-      {footer && <AccordionFooter>{footer}</AccordionFooter>}
-      {error && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600">
-            {error}
-          </Typography>
-        </Box>
-      )}
-    </KeyboardNavigable>
-  );
-};
-
-AccordionGroup.defaultProps = {
-  footer: null,
-  error: undefined,
-  label: null,
-  labelAction: undefined,
-};
-
-AccordionGroup.propTypes = {
-  children: PropTypes.node.isRequired,
-  /**
-   * If defined, the component will show the error message at the bottom of the `AccordionGroup` and will hide all Accordion error messages children (in order to display only one error).
-   */
-  error: PropTypes.string,
-  /**
-   * Render a node a last child. Mainly used for an "Add new accordion" button
-   */
-  footer: PropTypes.node,
-  /**
-   * The label of the AccordionGroup
-   */
-  label: PropTypes.string,
-  /**
-   * Will render a node to the right of the label
-   */
-  labelAction: PropTypes.node,
-};