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

package/src/Flex/index.js

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

package/src/FocusTrap/ExampleComponent.js

@@ -0,0 +1,71 @@
+/* eslint-disable react/prop-types */
+import React, { useState } from 'react';
+import Cross from '@strapi/icons/Cross';
+import { Box } from '../Box';
+import { Stack } from '../Stack';
+import { Typography } from '../Typography';
+import { Button } from '../Button';
+import { Flex } from '../Flex';
+
+import { FocusTrap } from './FocusTrap';
+
+const TrappedComponent = ({ onClose }) => {
+  const [newLastVisible, setNewLastVisible] = useState(false);
+
+  return (
+    <FocusTrap onEscape={onClose}>
+      <Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
+        <Stack spacing={2}>
+          <Flex justifyContent="space-between">
+            <Typography variant="beta" as="h2">
+              Hey folks!
+            </Typography>
+            <button style={{ border: 'none', background: 'transparent' }} onClick={onClose} aria-label="Close">
+              <Cross aria-hidden={true} />
+            </button>
+          </Flex>
+          <Box paddingTop={2} paddingBottom={2}>
+            <Typography>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </Typography>
+          </Box>
+          <Flex justifyContent="space-between">
+            <Button id="second">Second focusable</Button>
+            <Button id="last" onClick={() => setNewLastVisible(true)}>
+              Last focusable (at the beginning)
+            </Button>
+
+            {newLastVisible && <Button id="real-last">Last focusable (at the end)</Button>}
+          </Flex>
+        </Stack>
+      </Box>
+    </FocusTrap>
+  );
+};
+
+export const ExampleComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <Box background="neutral150" padding={10}>
+      <Stack spacing={2}>
+        {visible && <TrappedComponent onClose={() => setVisible(false)} />}
+        <Box background="neutral0" padding={4} hasRadius style={{ width: '600px' }}>
+          <Typography variant="beta" as="h2">
+            Outside the trap!
+          </Typography>
+
+          <Box paddingTop={2}>
+            <Button onClick={() => setVisible(true)} id="trigger">
+              Open the trap
+            </Button>
+          </Box>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};

package/src/FocusTrap/FocusTrap.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { getFocusableNodes } from '../helpers/getFocusableNodes';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+
+export const FocusTrap = ({ onEscape, restoreFocus, ...props }) => {
+  const trappedRef = useRef(null);
+
+  /**
+   * Restore the focus to the previously focused element (often, it's the CTA that opened the trap)
+   */
+  useEffect(() => {
+    if (restoreFocus) {
+      const currentFocus = document.activeElement;
+
+      return () => {
+        currentFocus.focus();
+      };
+    }
+  }, [restoreFocus]);
+
+  /**
+   * Sends the focus to the first element of the focus trap tree
+   */
+  useEffect(() => {
+    if (!trappedRef.current) return;
+
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+
+      firstElement.focus();
+    } else {
+      console.warn(
+        '[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.',
+      );
+    }
+  }, []);
+
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.ESCAPE && onEscape) {
+      return onEscape();
+    }
+
+    if (e.key !== KeyboardKeys.TAB) return;
+
+    const focusableChildren = getFocusableNodes(trappedRef.current);
+
+    if (focusableChildren.length > 0) {
+      const firstElement = focusableChildren[0];
+      const lastElement = focusableChildren[focusableChildren.length - 1];
+
+      // e.shiftKey allows to verify reverse tab
+      if (e.shiftKey) {
+        if (firstElement === document.activeElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else if (lastElement === document.activeElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+
+  return <div ref={trappedRef} onKeyDown={handleKeyDown} {...props} />;
+};
+
+FocusTrap.defaultProps = {
+  restoreFocus: true,
+};
+
+FocusTrap.propTypes = {
+  /**
+   * A callback called on escape key. Useful to deactivate the focus trap.
+   */
+  onEscape: PropTypes.func,
+  /**
+   * A boolean value to define whether the focus should be restored or not.
+   */
+  restoreFocus: PropTypes.bool,
+};

package/src/FocusTrap/FocusTrap.stories.mdx

@@ -0,0 +1,32 @@
+<!--- FocusTrap.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { FocusTrap } from './FocusTrap';
+import { ExampleComponent } from './ExampleComponent';
+
+<Meta title="Design System/Technical Components/FocusTrap" component={FocusTrap} />
+
+# FocusTrap
+
+The FocusTrap restricts keyboard navigation to a certain zone of the screen. For instance, it can be used in a modal to limit tab navigation to a specific context.
+
+## Imports
+
+```js
+import FocusTrap from '@strapi/parts/FocusTrap';
+```
+
+## Usage
+
+To use it, wrap your code into a `<FocusTrap onEscape={onClose}>` block.
+
+<Canvas>
+  <Story name="base">
+    <ExampleComponent />
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={FocusTrap} />

package/src/FocusTrap/__tests__/FocusTrap.e2e.js

@@ -0,0 +1,126 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('FocusTrap', () => {
+  test.describe('light mode', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-technical-components-focustrap--base&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test.beforeEach(async ({ page }) => {
+      await page.focus('#trigger');
+      await page.keyboard.press('Space');
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test('focuses the first focusable element when opening the focus trap', async ({ page }) => {
+      await expect(page.locator('[aria-label="Close"]')).toBeFocused();
+    });
+
+    test('restores focus when pressing Escape', async ({ page }) => {
+      await page.waitForSelector('[aria-label="Close"]');
+      await page.keyboard.press('Escape');
+
+      await expect(page.locator('#trigger')).toBeFocused();
+    });
+
+    test.describe('Pressing Tab in the trap', () => {
+      test('traps the focus when pressing Tab for Firefox and Chrome', async ({ page, browserName }) => {
+        test.skip(browserName === 'webkit', 'Still working on it');
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#last')).toBeFocused();
+
+        await page.keyboard.press('Tab');
+        await expect(page.locator('[aria-label="Close"]')).toBeFocused();
+      });
+
+      test('traps the focus when pressing Tab for Webkit', async ({ page, browserName }) => {
+        test.skip(['firefox', 'chromium'].includes(browserName), 'Still working on it');
+        await page.waitForSelector('[aria-label="Close"]');
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('#last')).toBeFocused();
+
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('[aria-label="Close"]')).toBeFocused();
+      });
+
+      test('traps the focus when dynamically adding an element in the focus tree and pressing Tab for Firefox and Chrome', async ({
+        page,
+        browserName,
+      }) => {
+        test.skip(browserName === 'webkit', 'Still working on it');
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#last')).toBeFocused();
+        await page.click('#last');
+
+        await page.keyboard.press('Tab');
+        await expect(page.locator('#real-last')).toBeFocused();
+      });
+
+      test('traps the focus when pressing Tab with click for Webkit', async ({ page, browserName }) => {
+        test.skip(['firefox', 'chromium'].includes(browserName), 'Still working on it');
+        await page.waitForSelector('[aria-label="Close"]');
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('#last')).toBeFocused();
+        await page.click('#last');
+
+        await page.keyboard.press('Alt+Tab');
+        await expect(page.locator('#real-last')).toBeFocused();
+      });
+    });
+
+    test.describe('Pressing Shift+Tab in the trap', () => {
+      test('traps the focus when pressing Tab for Firefox and Chrome', async ({ page, browserName }) => {
+        test.skip(browserName === 'webkit', 'Still working on it');
+        await page.keyboard.press('Shift+Tab');
+        await expect(page.locator('#last')).toBeFocused();
+
+        await page.keyboard.press('Shift+Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Shift+Tab');
+        await expect(page.locator('[aria-label="Close"]')).toBeFocused();
+      });
+
+      test('traps the focus when pressing Tab for Webkit', async ({ page, browserName }) => {
+        test.skip(['firefox', 'chromium'].includes(browserName), 'Still working on it');
+        await page.waitForSelector('[aria-label="Close"]');
+        await page.keyboard.press('Alt+Shift+Tab');
+        await expect(page.locator('#last')).toBeFocused();
+
+        await page.keyboard.press('Alt+Shift+Tab');
+        await expect(page.locator('#second')).toBeFocused();
+
+        await page.keyboard.press('Alt+Shift+Tab');
+        await expect(page.locator('[aria-label="Close"]')).toBeFocused();
+      });
+    });
+  });
+
+  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-technical-components-focustrap--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/FocusTrap/index.js

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

package/src/Grid/Grid.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { GridContext } from './GridContext';
+import { Box } from '../Box';
+import handleResponsiveValues from '../helpers/handleResponsiveValues';
+
+const GridWrapper = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
+  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
+`;
+
+export const Grid = ({ gap, gridCols, ...props }) => {
+  return (
+    <GridContext.Provider value={{ gap, gridCols }}>
+      <GridWrapper gap={gap} gridCols={gridCols} {...props} />
+    </GridContext.Provider>
+  );
+};
+
+Grid.defaultProps = {
+  gap: 0,
+  gridCols: 12,
+};
+
+Grid.propTypes = {
+  gap: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  gridCols: PropTypes.number,
+};

package/src/Grid/Grid.stories.mdx

@@ -0,0 +1,112 @@
+<!--- Grid.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Grid } from './Grid';
+import { GridItem } from './GridItem';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Technical Components/Grid" component={Grid} />
+
+# Grid
+
+A grid system helps the content to follow a logical order and increase readability.
+
+**Baseline**
+The Strapi type stack specifies 14px/0.875rem for the base font size, which produces an 8px x-height. The x-height is halved to produce a 4px baseline.
+This baseline convention naturally flows on to the rest of the grid system, which includes icons, components, and layout dimensions. Always try to align objects on the 8px grid, but where necessary use good judgement to fine tune your designs to 4px. The 4px baseline is there to allow more flexibility for line heights and smaller adjustments.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Grid)
+
+## Imports
+
+```js
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+```
+
+## Usage
+
+The component allows to create a Grid on the screen using the CSS grid feature. This component extends the `<Box />` one and can receive the same props.
+
+<Canvas>
+  <Story name="base">
+    <Grid gap={5}>
+      <GridItem col={1} background="primary100">
+        <Typography>First</Typography>
+      </GridItem>
+      <GridItem col={1} background="primary100">
+        <Typography>Second</Typography>
+      </GridItem>
+      <GridItem col={1} background="primary100">
+        <Typography>Third</Typography>
+      </GridItem>
+      <GridItem col={1} background="primary100" color="primary700">
+        <Typography>Last</Typography>
+      </GridItem>
+    </Grid>
+  </Story>
+</Canvas>
+
+The following is a representation of the 12 columns Grid presented in the documentation.
+
+<Canvas>
+  <Story name="base grid">
+    <Grid gap={5}>
+      {Array(12)
+        .fill(null)
+        .map((_, i) => (
+          <GridItem key={i} background="warning200" col={1}>
+            <Typography>{i + 1}</Typography>
+          </GridItem>
+        ))}
+    </Grid>
+  </Story>
+</Canvas>
+
+A more complex one
+
+<Canvas>
+  <Story name="complex grid">
+    <Grid gap={{ desktop: 5, tablet: 2, mobile: 1 }} background={'primary200'}>
+      <GridItem background="neutral100" padding={1} col={6} s={12}>
+        <Typography>Some box 1</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={6} s={12}>
+        <Typography>Some box 2</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={3} s={6} xs={12}>
+        <Typography>Some box 3</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={3} s={6} xs={12}>
+        <Typography>Some box 4</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={3} s={6} xs={12}>
+        <Typography>Some box 5</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={3} s={6} xs={12}>
+        <Typography>Some box 6</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={8} xs={12}>
+        <Typography>Some box 7</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={1} col={2} xs={12}>
+        <Typography>Some box 8</Typography>
+      </GridItem>
+      <GridItem background="neutral100" padding={5} col={2} xs={12}>
+        <Typography>Some box 9</Typography>
+      </GridItem>
+    </Grid>
+  </Story>
+</Canvas>
+
+## Props
+
+The Grid and GridItem components wraps all their 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 their style.
+
+### Grid Props
+
+<ArgsTable of={Grid} />
+
+### GridItem Props
+
+<ArgsTable of={GridItem} />

package/src/Grid/GridContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const GridContext = createContext({ gap: 0, gridCols: 12 });
+
+export const useGrid = () => useContext(GridContext);

package/src/Grid/GridItem.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { useGrid } from './GridContext';
+
+const GridItemWrapper = styled.div`
+  grid-column: span ${({ col }) => col};
+  max-width: 100%;
+
+  ${({ theme }) => theme.mediaQueries.tablet} {
+    grid-column: span ${({ s }) => s};
+  }
+
+  ${({ theme }) => theme.mediaQueries.mobile} {
+    grid-column: span ${({ xs }) => xs};
+  }
+`;
+
+export const GridItem = ({ col, xs, s, ...props }) => {
+  const { gap, gridCols } = useGrid();
+
+  return (
+    <GridItemWrapper gap={gap} gridCols={gridCols} col={col} xs={xs} s={s}>
+      <Box {...props} />
+    </GridItemWrapper>
+  );
+};
+
+GridItem.defaultProps = {
+  col: undefined,
+  s: undefined,
+  xs: undefined,
+};
+
+GridItem.propTypes = {
+  col: PropTypes.number,
+  s: PropTypes.number,
+  xs: PropTypes.number,
+};

package/src/Grid/__tests__/Grid.e2e.js

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

package/src/Grid/index.js

@@ -0,0 +1,2 @@
+export * from './Grid';
+export * from './GridItem';

package/src/Icon/Icon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import styled from 'styled-components';
+
+const IconWrapper = styled(Box)`
+  path {
+    fill: ${({ color, theme }) => theme.colors[color]};
+  }
+  ${({ theme, colors }) => colors(theme)}
+`;
+
+export const Icon = React.forwardRef((props, ref) => {
+  return <IconWrapper ref={ref} {...props} />;
+});
+
+Icon.displayName = 'Icon';
+
+Icon.defaultProps = {
+  color: 'neutral600',
+  colors: () => undefined,
+};
+
+Icon.propTypes = {
+  color: PropTypes.string,
+  colors: PropTypes.func,
+};

package/src/Icon/Icon.stories.mdx

@@ -0,0 +1,41 @@
+<!--- BaseButton.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Pencil from '@strapi/icons/Pencil';
+import Play from '@strapi/icons/Play';
+import Trash from '@strapi/icons/Trash';
+import Plus from '@strapi/icons/Plus';
+import { Icon } from './Icon';
+import { Stack } from '../Stack';
+
+<Meta title="Design System/Technical Components/Icon" component={Icon} />
+
+## Imports
+
+```js
+import { Icon } from '@strapi/design-system/Icon';
+```
+
+# Icon
+
+The `Icon` component is used to customize Strapi icons.
+
+## Usage
+
+<Canvas withSource="open">
+  <Story name="base">
+    <Stack spacing={3} horizontal>
+      <Icon width={`${25 / 16}rem`} height={`${25 / 16}rem`} color="secondary500" as={Pencil} />
+      <Icon width={`${15 / 16}rem`} height={`${15 / 16}rem`} color="alternative500" as={Play} />
+      <Icon width={`${30 / 16}rem`} height={`${30 / 16}rem`} color="danger500" as={Trash} />
+      <Icon as={Plus} />
+    </Stack>
+  </Story>
+</Canvas>
+
+## Props
+
+The Icon 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={Icon} />

package/src/Icon/__tests__/Icon.e2e.js

@@ -0,0 +1,21 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('IconButton', () => {
+  test.describe('light mode', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      await page.goto('/iframe.html?id=design-system-technical-components-icon&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-technical-components-icon&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Icon/index.js

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