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

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

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

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

package/src/Accordion/utils.js

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

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

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

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

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

package/src/Alert/utils.js

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

package/src/Avatar/Avatar.js

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { avatarSize, previewSize } from './constants';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+
+const AvatarImg = styled.img`
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  position: relative;
+`;
+
+const AvatarImgWrapper = styled.div`
+  position: relative;
+  width: ${avatarSize / 16}rem;
+  height: ${avatarSize / 16}rem;
+  z-index: ${({ hovering }) => (hovering ? 1 : undefined)};
+`;
+
+const PreviewContainer = styled.img`
+  border-radius: 50%;
+  object-fit: cover;
+  position: absolute;
+  transform: translate(-${(previewSize - avatarSize) / 2}px, -100%);
+  margin-top: -${({ theme }) => theme.spaces[1]};
+`;
+
+const Overlay = styled.div`
+  z-index: 1;
+  border-radius: 30%;
+  position: absolute;
+  width: ${avatarSize / 16}rem;
+  height: ${avatarSize / 16}rem;
+  background: ${({ theme }) => theme.colors.neutral0};
+  opacity: 0.4;
+`;
+
+export const Avatar = ({ src, alt, preview }) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+
+  return (
+    <span>
+      {preview && previewVisible ? (
+        <PreviewContainer
+          aria-hidden
+          alt=""
+          width={`${previewSize}px`}
+          height={`${previewSize}px`}
+          src={preview === true ? src : preview}
+        />
+      ) : null}
+
+      <AvatarImgWrapper
+        hovering={preview && previewVisible}
+        onMouseEnter={() => setPreviewVisible(true)}
+        onMouseLeave={() => setPreviewVisible(false)}
+      >
+        {preview && previewVisible ? <Overlay /> : null}
+        <AvatarImg src={src} alt={alt} width={`${avatarSize}px`} height={`${avatarSize}px`} />
+      </AvatarImgWrapper>
+    </span>
+  );
+};
+
+const InitialsWrapper = styled(Flex)`
+  span {
+    line-height: 0;
+  }
+`;
+
+export const Initials = ({ children }) => {
+  return (
+    <InitialsWrapper
+      borderRadius="50%"
+      width={`${avatarSize}px`}
+      height={`${avatarSize}px`}
+      background="primary600"
+      justifyContent="center"
+    >
+      <Typography fontWeight="bold" textColor="buttonNeutral0" fontSize={0} textTransform="uppercase">
+        {children}
+      </Typography>
+    </InitialsWrapper>
+  );
+};
+
+Initials.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+Avatar.defaultProps = {
+  preview: undefined,
+};
+
+Avatar.propTypes = {
+  /**
+   * Alternative text
+   */
+  alt: PropTypes.string.isRequired,
+  /**
+   * Image src of the image preview (displayed on `Avatar` hover).
+   */
+  preview: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /**
+   * Image src of the `Avatar`
+   */
+  src: PropTypes.string.isRequired,
+};

package/src/Avatar/Avatar.stories.mdx

@@ -0,0 +1,67 @@
+<!--- Avatar.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Avatar, Initials } from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+import { Box } from '../Box';
+
+<Meta title="Design System/Components/Avatar" component={Avatar} />
+
+# Avatar
+
+Avatars are used to show a thumbnail of an asset or an individual.
+
+**Best practices**
+
+- Use the thumbnail preview feature only when the avatar might not be enough.
+- Use avatar in small areas such as tables.
+- In a form we should rather use the Card component.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Avatar)
+
+## Imports
+
+```js
+import { Avatar, AvatarGroup } from '@strapi/design-system/Avatar';
+```
+
+## Usage
+
+The avatar has a feature to display a preview of its thumbnail.
+
+<Canvas>
+  <Story name="base">
+    <Box padding={11}>
+      <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
+    </Box>
+  </Story>
+</Canvas>
+
+## Group
+
+<Canvas>
+  <Story name="group">
+    <Box padding={11}>
+      <AvatarGroup>
+        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
+        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
+        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
+      </AvatarGroup>
+    </Box>
+  </Story>
+</Canvas>
+
+## Basic initials
+
+<Canvas>
+  <Story name="initials">
+    <Box padding={11}>
+      <Initials>MF</Initials>
+    </Box>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Avatar} />

package/src/Avatar/AvatarGroup.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Flex } from '../Flex';
+import { avatarSize } from './constants';
+
+export const AvatarGroup = styled(Flex)`
+  & > * + * {
+    margin-left: -${avatarSize / 2}px;
+  }
+`;

package/src/Avatar/__tests__/Avatar.e2e.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Avatar', () => {
+  test.describe('light mode', () => {
+    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-avatar--base&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+
+  test.describe('dark mode', () => {
+    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-avatar--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});