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

package/src/Accordion/Accordion.stories.mdx

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

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

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

package/src/Accordion/AccordionGroup.js

@@ -0,0 +1,114 @@
+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,
+};

package/src/Accordion/AccordionToggle.js

@@ -0,0 +1,192 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import DropdownIcon from '@strapi/icons/CarretDown';
+import styled from 'styled-components';
+import { TextButton } from '../TextButton';
+import { Typography } from '../Typography';
+import { AccordionTypography } from './Accordion';
+import { useAccordion } from './AccordionContext';
+import { Flex } from '../Flex';
+import { Stack } from '../Stack';
+import { Icon } from '../Icon';
+import { getBackground } from './utils';
+
+const ToggleButton = styled(TextButton)`
+  text-align: left;
+
+  // necessary to make the ellipsis prop work on the title
+  > span {
+    max-width: 100%;
+  }
+
+  svg {
+    width: ${14 / 16}rem;
+    height: ${14 / 16}rem;
+
+    path {
+      fill: ${({ theme, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
+    }
+  }
+`;
+
+const FlexWithSize = styled(Flex)`
+  min-height: ${({ theme, size }) => theme.sizes.accordions[size]};
+  border-radius: ${({ theme, expanded }) =>
+    expanded ? `${theme.borderRadius} ${theme.borderRadius} 0 0` : theme.borderRadius};
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.primary600};
+      }
+    }
+  }
+`;
+
+export const AccordionToggle = ({ title, description, as, togglePosition, action, ...props }) => {
+  const toggleButtonRef = useRef(null);
+  const { onToggle, toggle, expanded, id, size, variant, disabled } = useAccordion();
+
+  // Accessibility identifiers
+  const ariaControls = `accordion-content-${id}`;
+  const ariaLabelId = `accordion-label-${id}`;
+  const ariaDescriptionId = `accordion-desc-${id}`;
+
+  // Style overrides
+  const boxPaddingX = size === 'M' ? 6 : 4;
+  const boxPaddingY = size === 'M' ? boxPaddingX : boxPaddingX - 2;
+  const boxBackground = getBackground({ expanded, disabled, variant });
+  const titleColor = expanded ? 'primary600' : 'neutral700';
+  const titleProps = {
+    as,
+    fontWeight: size === 'S' ? 'bold' : undefined,
+    id: ariaLabelId,
+    textColor: titleColor,
+    ellipsis: true,
+    variant: size === 'M' ? 'delta' : undefined,
+  };
+  const descriptionColor = expanded ? 'primary600' : 'neutral600';
+  const iconColor = expanded ? 'primary200' : 'neutral200';
+  const iconSize = size === 'M' ? `${32 / 16}rem` : `${24 / 16}rem`;
+
+  const handleToggle = () => {
+    if (!disabled) {
+      if (toggle && !onToggle) {
+        console.warn(
+          'Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead',
+        );
+        toggle();
+      } else {
+        onToggle();
+      }
+    }
+  };
+
+  const dropdownIcon = (
+    <Flex
+      justifyContent="center"
+      borderRadius="50%"
+      height={iconSize}
+      width={iconSize}
+      transform={expanded ? `rotate(180deg)` : undefined}
+      data-strapi-dropdown={true}
+      disabled={disabled}
+      aria-hidden
+      as="span"
+      background={iconColor}
+      cursor={disabled ? 'not-allowed' : 'pointer'}
+      onClick={() => toggleButtonRef?.current?.click()}
+      shrink={0}
+    >
+      <Icon
+        as={DropdownIcon}
+        width={size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`}
+        color={expanded ? 'primary600' : 'neutral600'}
+      />
+    </Flex>
+  );
+
+  return (
+    <FlexWithSize
+      paddingBottom={boxPaddingY}
+      paddingLeft={boxPaddingX}
+      paddingRight={boxPaddingX}
+      paddingTop={boxPaddingY}
+      background={boxBackground}
+      expanded={expanded}
+      size={size}
+      justifyContent="space-between"
+      cursor={disabled ? 'not-allowed' : ''}
+    >
+      <Stack horizontal spacing={3} flex={1} maxWidth="100%">
+        {togglePosition === 'left' && dropdownIcon}
+
+        <ToggleButton
+          ref={toggleButtonRef}
+          onClick={handleToggle}
+          aria-disabled={disabled}
+          aria-expanded={expanded}
+          aria-controls={ariaControls}
+          aria-labelledby={ariaLabelId}
+          data-strapi-accordion-toggle={true}
+          expanded={expanded}
+          type="button"
+          flex={1}
+          minWidth={0}
+          {...props}
+        >
+          <>
+            <AccordionTypography {...titleProps}>{title}</AccordionTypography>
+
+            {description && (
+              <Typography as="p" id={ariaDescriptionId} textColor={descriptionColor}>
+                {description}
+              </Typography>
+            )}
+          </>
+        </ToggleButton>
+
+        {togglePosition === 'right' && (
+          <Stack horizontal spacing={3}>
+            {dropdownIcon}
+            {action}
+          </Stack>
+        )}
+
+        {togglePosition === 'left' && action}
+      </Stack>
+    </FlexWithSize>
+  );
+};
+
+AccordionToggle.defaultProps = {
+  action: undefined,
+  as: 'span',
+  description: undefined,
+  variant: 'primary',
+  togglePosition: 'right',
+};
+
+AccordionToggle.propTypes = {
+  /**
+   * Will render a node to the right of the Accordion component
+   */
+  action: PropTypes.node,
+  as: PropTypes.string,
+  /**
+   * Show the secondary text of the Accordion component
+   */
+  description: PropTypes.string,
+  /**
+   * Show the main title of the Accordion component
+   */
+  title: PropTypes.string.isRequired,
+  /**
+   * Set the position of the toggle icon button
+   */
+  togglePosition: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Color variant
+   */
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+};

package/src/Accordion/__tests__/Accordion.e2e.js

@@ -0,0 +1,32 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Accordion', () => {
+  test.describe('light theme', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-accordion--base&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test('triggers axe on the document when the accordion is expanded', async ({ page }) => {
+      await page.click('[aria-labelledby="accordion-label-acc-1"]');
+
+      await checkA11y(page);
+    });
+  });
+
+  test.describe('dark theme', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-accordion--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});