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

package/src/Accordion/AccordionToggle.js

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

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

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

@@ -1,73 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('Accordion Keyboard Navigable', () => {
-  test.beforeEach(async ({ page }) => {
-    // This is the URL of the Storybook Iframe
-    await page.goto('/iframe.html?id=design-system-components-accordion--keyboard-navigable&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('Keyboard interactions', () => {
-    test('focuses the next node when pressing arrow down until reaching the end of the group where it focuses the first accordion', async ({
-      page,
-    }) => {
-      await page.focus('[aria-labelledby="accordion-label-acc-1"]');
-
-      await page.keyboard.press('ArrowDown');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-2"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowDown');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-3"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowDown');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-4"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowDown');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-1"]')).toBeFocused();
-    });
-
-    test('focuses the previous node when pressing arrow up and reaches the latest accordion when being on the first one', async ({
-      page,
-    }) => {
-      await page.focus('[aria-labelledby="accordion-label-acc-1"]');
-
-      await page.keyboard.press('ArrowUp');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-4"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowUp');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-3"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowUp');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-2"]')).toBeFocused();
-
-      await page.keyboard.press('ArrowUp');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-1"]')).toBeFocused();
-    });
-
-    test('focuses the last element when pressing end', async ({ page }) => {
-      await page.focus('[aria-labelledby="accordion-label-acc-1"]');
-
-      await page.keyboard.press('End');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-4"]')).toBeFocused();
-    });
-
-    test('focuses the first element when pressing home', async ({ page }) => {
-      await page.focus('[aria-labelledby="accordion-label-acc-1"]');
-
-      await page.keyboard.press('ArrowUp');
-      await page.keyboard.press('Home');
-      await expect(page.locator('[aria-labelledby="accordion-label-acc-1"]')).toBeFocused();
-    });
-  });
-});

package/src/Accordion/index.js

@@ -1,4 +0,0 @@
-export * from './Accordion';
-export * from './AccordionContent';
-export * from './AccordionToggle';
-export * from './AccordionGroup';

package/src/Accordion/utils.js

@@ -1,15 +0,0 @@
-export const getBackground = ({ expanded, disabled, variant }) => {
-  let boxBackground;
-
-  if (expanded) {
-    boxBackground = 'primary100';
-  } else if (disabled) {
-    boxBackground = 'neutral150';
-  } else if (variant === 'primary') {
-    boxBackground = 'neutral0';
-  } else {
-    boxBackground = 'neutral100';
-  }
-
-  return boxBackground;
-};

package/src/Alert/Alert.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Information from '@strapi/icons/Information';
-import CheckCircle from '@strapi/icons/CheckCircle';
-import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
-import Cross from '@strapi/icons/Cross';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-import { Flex } from '../Flex';
-import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
-import { buttonFocusStyle } from '../themes/utils';
-
-const AlertBody = styled(Box)`
-  flex: 1;
-  flex-wrap: wrap;
-  display: flex;
-  flex-direction: row;
-`;
-
-const AlertWrapper = styled(Box)`
-  border: 1px solid ${handleBorderColor};
-  background: ${handleBackgroundColor};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-`;
-
-const CloseButton = styled.button`
-  border: none;
-  background: transparent;
-  font-size: ${12 / 16}rem;
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral700};
-  }
-  margin-top: ${({ theme }) => theme.spaces[1]};
-  ${buttonFocusStyle};
-`;
-
-const AlertIconWrapper = styled(Box)`
-  font-size: ${20 / 16}rem;
-  svg path {
-    fill: ${handleIconColor};
-  }
-`;
-
-const AlertIcon = ({ variant, ...props }) => {
-  if (variant === 'success') {
-    return <CheckCircle {...props} />;
-  }
-
-  if (variant === 'danger') {
-    return <ExclamationMarkCircle {...props} />;
-  }
-
-  return <Information {...props} />;
-};
-
-const ActionBox = styled(Box)`
-  // Checked with the designers, validated
-  padding-top: 1px;
-
-  & a > span {
-    color: ${handleIconColor};
-
-    svg path {
-      fill: ${handleIconColor};
-    }
-  }
-`;
-
-export const Alert = ({ title, children, variant, onClose, closeLabel, titleAs, action, ...props }) => {
-  return (
-    <AlertWrapper hasRadius paddingLeft={5} paddingRight={6} paddingTop={5} variant={variant} {...props}>
-      <Flex alignItems="flex-start">
-        <AlertIconWrapper paddingRight={3} variant={variant}>
-          <AlertIcon variant={variant} aria-hidden={true} />
-        </AlertIconWrapper>
-        <AlertBody role={variant === 'danger' ? 'alert' : 'status'}>
-          <Box paddingBottom={2} paddingRight={1}>
-            <Typography fontWeight="bold" textColor="neutral800" as={titleAs}>
-              {title}
-            </Typography>
-          </Box>
-
-          <Box paddingBottom={action ? 2 : 5} paddingRight={2}>
-            <Typography as="p" textColor="neutral800">
-              {children}
-            </Typography>
-          </Box>
-
-          {action && (
-            <ActionBox paddingBottom={5} variant={variant}>
-              {action}
-            </ActionBox>
-          )}
-        </AlertBody>
-
-        <CloseButton onClick={onClose} aria-label={closeLabel}>
-          <Cross aria-hidden={true} />
-        </CloseButton>
-      </Flex>
-    </AlertWrapper>
-  );
-};
-
-Alert.defaultProps = {
-  action: undefined,
-  variant: 'default',
-  titleAs: 'p',
-};
-
-Alert.propTypes = {
-  /**
-   * Render a React element below the body of an `Alert` (Mainly used to render a Link).
-   */
-  action: PropTypes.element,
-  /**
-   * The body of the `Alert` (Will be rendered under the `Alert` title).
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Accessible label for the close icon button.
-   */
-  closeLabel: PropTypes.string.isRequired,
-  /**
-   * The callback invoked when click on the close icon button.
-   */
-  onClose: PropTypes.func.isRequired,
-  /**
-   * The title of the `Alert`.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Changes the element, as which a component will render (similar to styled-components).
-   */
-  titleAs: PropTypes.string,
-  /**
-   * `Alert` color variant.
-   */
-  variant: PropTypes.oneOf(['danger', 'success', 'default']),
-};
-
-AlertIcon.propTypes = {
-  variant: Alert.propTypes.variant,
-};

package/src/Alert/Alert.stories.mdx

@@ -1,135 +0,0 @@
-<!--- Alert.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Alert } from './Alert';
-import { Box } from '../Box';
-import { Stack } from '../Stack';
-import { Link } from '../Link';
-
-<Meta title="Design System/Components/Alert" component={Alert} />
-
-# Alert
-
-Alerts are messages displayed over the content, at the top of the screen to give information to users. They have multiple purposes and provide context.
-
-**Best practices**
-
-- The alert should be relevant to the page.
-- Address a single piece of information or required action.
-- Content of the alert should be concise and straightforward. Provide additional information on how to resolve the issue if needed.
-- Alerts should be used thoughtfully and occasionally not to overwhelmed the users.
-- Should not be used for marketing purposes.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Alert)
-
-## Imports
-
-```js
-import { Alert } from '@strapi/design-system/Alert';
-```
-
-## Usage
-
-The most common button component used in the interface. Alerts have a title, a description, and two sizes. This default one is aimed to give a small piece of text.
-
-<Canvas withSource="open">
-  <Story
-    name="base"
-    parameters={{
-      docs: {
-        source: {
-          code: '<Alert closeLabel="Close alert" title="Title">This is the default alert.</Alert>',
-        },
-      },
-    }}
-  >
-    <Box style={{ width: 700 }}>
-      <Alert closeLabel="Close alert" title="Title" onClose={() => {}}>
-        This is the default alert.
-      </Alert>
-    </Box>
-  </Story>
-</Canvas>
-
-### Alert variants
-
-Use the variant prop to change the visual style of the Button.
-You can set the value to `default`, `success`, or `danger`.
-
-<Canvas withSource="open">
-  <Story
-    name="variants"
-    parameters={{
-      docs: {
-        source: {
-          code: '<Alert closeLabel="Close alert" title="Title" variant="success">This is the default variant.</Alert>',
-        },
-      },
-    }}
-  >
-    <Box style={{ width: 700 }}>
-      <Stack spacing={1}>
-        <Alert onClose={() => {}} closeLabel="Close" title="Title">
-          This is the default variant.
-        </Alert>
-        <Alert onClose={() => {}} closeLabel="Close" title="Title" variant="success">
-          This is the success variant.
-        </Alert>
-        <Alert onClose={() => {}} closeLabel="Close" title="Title" variant="danger">
-          This is the danger variant.
-        </Alert>
-      </Stack>
-    </Box>
-  </Story>
-</Canvas>
-
-| State               | Description                                                                                                           |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| Default/Information | Use a default alert for an informational purpose. Examples: Latest update, a specific mode, ...                       |
-| Success             | Use a success alert to indicate a successful action. Examples: Content has been saved, the locale has been added, ... |
-| Danger              | Examples: Content has been saved, the locale has been added, ...                                                      |
-
-### Alert with action
-
-Alerts can contain an action. Via a Link component, they mostly encourage the user to be redirected to another page with more information. The wording of the action should be clear and concise.
-
-<Canvas withSource="open">
-  <Story
-    name="with action"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-<Alert closeLabel="Close alert" title="This is the title of the alert" action={<Link to="/somewhere">See more</Link>}>
-  Alert with title and longer description, lorem ipsum dolor sit amet constrectum adipisicng lorem ipsum dolor sit
-  amet consrectumis adipisingus.
-</Alert>`,
-        },
-      },
-    }}
-  >
-    <Box style={{ width: 700 }}>
-      <Alert
-        closeLabel="Close"
-        onClose={() => {}}
-        title="This is the title of the alert"
-        action={<Link to="/somewhere">See more</Link>}
-      >
-        Alert with title and longer description, lorem ipsum dolor sit amet constrectum adipisicng lorem ipsum dolor sit
-        amet consrectumis adipisingus.
-      </Alert>
-    </Box>
-  </Story>
-</Canvas>
-
-## Accessibility
-
-- Alerts use a combination of icons and colors to show their purpose and level of importance.
-- This is a visual component which does not implement toasted notification nor a live region.
-
-## Props
-
-The Alert component wraps all its children in the (Box)[https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base] component, so you can pass all Box props to change its style.
-
-<ArgsTable of={Alert} />

package/src/Alert/__tests__/Alert.e2e.js

@@ -1,39 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('Alert', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-alert--base&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('variants', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-alert--variants&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('with action', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-alert--with-action&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('triggers axe on the document', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-alert--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Alert/index.js

@@ -1 +0,0 @@
-export * from './Alert';

package/src/Alert/utils.js

@@ -1,35 +0,0 @@
-export const handleBackgroundColor = ({ theme, variant }) => {
-  if (variant === 'danger') {
-    return theme.colors.danger100;
-  }
-
-  if (variant === 'success') {
-    return theme.colors.success100;
-  }
-
-  return theme.colors.primary100;
-};
-
-export const handleBorderColor = ({ theme, variant }) => {
-  if (variant === 'danger') {
-    return theme.colors.danger200;
-  }
-
-  if (variant === 'success') {
-    return theme.colors.success200;
-  }
-
-  return theme.colors.primary200;
-};
-
-export const handleIconColor = ({ theme, variant }) => {
-  if (variant === 'danger') {
-    return theme.colors.danger700;
-  }
-
-  if (variant === 'success') {
-    return theme.colors.success700;
-  }
-
-  return theme.colors.primary700;
-};