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

package/src/SimpleMenu/__tests__/SimpleMenu.e2e.js

@@ -0,0 +1,98 @@
+import { injectAxe, checkA11y, getViolations } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('SimpleMenu', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-simplemenu--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 menu is opened', async ({ page }) => {
+        await page.click('#root button');
+
+        await expect(page.locator('[role="menu"]')).toBeVisible();
+
+        const violations = await getViolations(page);
+
+        // Axe throws an error because the portal is not wrapped by a region.
+        const realViolations = violations
+          .filter((violation) => violation.id !== 'region')
+          .filter((violation) => violation.id !== 'aria-required-parent');
+
+        expect(realViolations.length).toBe(0);
+      });
+
+      test('select the second value of the menu key=Enter', async ({ page }) => {
+        await page.focus('#root button');
+        await page.keyboard.press('Enter');
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Enter');
+
+        const label = await page.textContent('#root button');
+        expect(label).toBe('February');
+      });
+
+      test('select the second value of the menu key=Space', async ({ page }) => {
+        await page.focus('#root button');
+        await page.keyboard.press('Space');
+        await page.keyboard.press('ArrowDown');
+        await page.keyboard.press('Space');
+
+        const label = await page.textContent('#root button');
+        expect(label).toBe('February');
+      });
+    });
+
+    test.describe('with links', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-simplemenu--with-links&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('triggers axe on the document when the menu is opened', async ({ page }) => {
+        await page.click('#root button');
+
+        await expect(page.locator('[role="menu"]')).toBeVisible();
+
+        const violations = await getViolations(page);
+
+        // Axe throws an error because the portal is not wrapped by a region.
+        const realViolations = violations
+          .filter((violation) => violation.id !== 'region')
+          .filter((violation) => violation.id !== 'aria-required-parent');
+
+        expect(realViolations.length).toBe(0);
+      });
+    });
+  });
+
+  test.describe('sizes', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      await page.goto('http://localhost:6006/iframe.html?id=design-system-components-simplemenu--sizes&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+
+  test.describe('with links', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-simplemenu--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/SimpleMenu/__tests__/SimpleMenu.spec.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { SimpleMenu, MenuItem } from '../SimpleMenu';
+import { ThemeProvider } from '../../ThemeProvider';
+import { lightTheme } from '../../themes';
+
+describe('SimpleMenu', () => {
+  it('display the menu on click on the menu button', async () => {
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <SimpleMenu label="January">
+          <MenuItem onClick={() => {}}>January</MenuItem>
+          <MenuItem onClick={() => {}}>February</MenuItem>
+          <MenuItem href="https://strapi.io">Strapi website</MenuItem>
+        </SimpleMenu>
+      </ThemeProvider>,
+    );
+
+    const button = await waitFor(() => screen.getByText('January'));
+    fireEvent.mouseDown(button);
+
+    await waitFor(() => {
+      expect(screen.getByText('February')).toBeInTheDocument();
+    });
+  });
+
+  it('display the menu and click on a menu item', async () => {
+    const onClickSpy = jest.fn();
+
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <SimpleMenu label="January">
+          <MenuItem onClick={onClickSpy}>January</MenuItem>
+          <MenuItem onClick={onClickSpy}>February</MenuItem>
+          <MenuItem href="https://strapi.io">Strapi website</MenuItem>
+        </SimpleMenu>
+      </ThemeProvider>,
+    );
+
+    const button = await waitFor(() => screen.getByText('January'));
+    fireEvent.mouseDown(button);
+
+    const menuItemButton = await waitFor(() => screen.getByText('February'));
+    fireEvent.mouseDown(menuItemButton);
+
+    expect(onClickSpy).toBeCalled();
+  });
+});

package/src/SimpleMenu/index.js

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

package/src/SimpleMenu/utils.js

@@ -0,0 +1,12 @@
+export const getOptionStyle = ({ theme }) => `
+    text-align: left;
+    width: 100%;
+    color: ${theme.colors.neutral800};
+    border-radius: ${theme.borderRadius};
+    &:focus {
+        background-color: ${theme.colors.primary100};
+    }
+    &:not([aria-disabled]):hover {
+        background-color: ${theme.colors.primary100};
+    }
+`;

package/src/Stack/Stack.js

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Flex } from '../Flex';
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+  size: true,
+};
+
+const StackV = styled(Flex).withConfig({
+  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+})`
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & > * + * {
+    margin-top: ${({ theme, spacing }) => theme.spaces[spacing]};
+  }
+`;
+
+const StackH = styled(Flex).withConfig({
+  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+})`
+  & > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: ${({ theme, spacing }) => theme.spaces[spacing]};
+  }
+`;
+
+export const Stack = forwardRef(({ horizontal, spacing, size, ...props }, ref) => {
+  if (size) {
+    console.warn(
+      'Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead',
+    );
+  }
+
+  if (horizontal) {
+    return <StackH ref={ref} spacing={spacing || size} {...props} />;
+  }
+
+  return <StackV direction="column" alignItems="stretch" ref={ref} spacing={spacing || size} {...props} />;
+});
+
+Stack.displayName = 'Stack';
+
+Stack.defaultProps = {
+  horizontal: false,
+  size: undefined,
+  spacing: undefined,
+};
+
+Stack.propTypes = {
+  /**
+   * If `true`, align the `Stack` item horizontally.
+   */
+  horizontal: PropTypes.bool,
+  /**
+   * DEPRECATED: The space between stack item.
+   */
+  size: PropTypes.number,
+  /**
+   * The space between stack item.
+   * See [theme.spaces](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-theme--spaces)
+   */
+  spacing: PropTypes.number,
+};

package/src/Stack/Stack.stories.mdx

@@ -0,0 +1,66 @@
+<!--- Stack.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Stack } from './Stack';
+import { Box } from '../Box';
+
+<Meta title="Design System/Technical Components/Stack" component={Stack} />
+
+# Stack
+
+This is the doc of the `Stack` component
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Stack)
+
+## Imports
+
+```js
+import { Stack } from '@strapi/design-system/Stack';
+```
+
+## Usage
+
+Add vertical spacing between direct child: it allows not to have to deal with `margin-top` and `margin-bottom` anymore.
+
+<Canvas>
+  <Story name="base">
+    <Stack spacing={4} background="secondary200" padding={3}>
+      <Box color="neutral800" background="primary100" padding={4}>
+        First
+      </Box>
+      <Box color="neutral800" background="primary100" padding={4}>
+        Second
+      </Box>
+      <Box color="neutral800" background="primary100" padding={4}>
+        Third
+      </Box>
+    </Stack>
+  </Story>
+</Canvas>
+
+### Stack
+
+Add vertical spacing between direct child: it allows not to have to deal with `margin-top` and `margin-bottom` anymore.
+
+<Canvas>
+  <Story name="horizontal">
+    <Stack spacing={4} horizontal background="secondary200" padding={3}>
+      <Box color="neutral800" background="primary100" padding={4}>
+        First
+      </Box>
+      <Box color="neutral800" background="primary100" padding={4}>
+        Second
+      </Box>
+      <Box color="neutral800" background="primary100" padding={4}>
+        Third
+      </Box>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Props
+
+The Stack 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={Stack} />

package/src/Stack/__tests__/Stack.e2e.js

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

package/src/Stack/index.js

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

package/src/Status/Status.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
+import styled from 'styled-components';
+
+const Bullet = styled.div`
+  margin-right: ${({ theme }) => theme.spaces[3]};
+  width: ${6 / 16}rem;
+  height: ${6 / 16}rem;
+  border-radius: 50%;
+  background: ${({ theme, backgroundColor }) => theme.colors[backgroundColor]};
+`;
+
+const StatusWrapper = styled(Box)`
+  ${Typography} {
+    color: ${({ theme, textColor }) => theme.colors[textColor]};
+  }
+`;
+
+export const Status = ({ variant, showBullet, size, children, ...props }) => {
+  const backgroundColor = `${variant}100`;
+  const borderColor = `${variant}200`;
+  const bulletColor = `${variant}600`;
+  const textColor = `${variant}600`;
+
+  const paddingX = size === 'S' ? 2 : 5;
+  const paddingY = size === 'S' ? 1 : 4;
+
+  return (
+    <StatusWrapper
+      borderColor={borderColor}
+      textColor={textColor}
+      background={backgroundColor}
+      hasRadius
+      paddingTop={paddingY}
+      paddingBottom={paddingY}
+      paddingLeft={paddingX}
+      paddingRight={paddingX}
+      {...props}
+    >
+      {showBullet ? (
+        <Flex>
+          <Bullet backgroundColor={bulletColor} />
+          {children}
+        </Flex>
+      ) : (
+        children
+      )}
+    </StatusWrapper>
+  );
+};
+
+Status.defaultProps = {
+  showBullet: true,
+  size: 'M',
+  variant: 'primary',
+};
+
+Status.propTypes = {
+  children: PropTypes.node.isRequired,
+
+  /**
+   * If `false`, the preceeding bullet of the status won't be displayed.
+   * This prop and the bullet will be removed in the next major version.
+   */
+  showBullet: PropTypes.bool, // TODO V2: remove prop and bullet
+
+  size: PropTypes.oneOf(['S', 'M']),
+
+  /**
+   * Color variation
+   */
+  variant: PropTypes.oneOf(['alternative', 'danger', 'neutral', 'primary', 'secondary', 'success', 'warning']),
+};

package/src/Status/Status.stories.mdx

@@ -0,0 +1,80 @@
+<!--- Status.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Status } from './Status';
+import { Typography } from '../Typography';
+import { Stack } from '../Stack';
+
+<Meta title="Design System/Components/Status" component={Status} />
+
+# Status
+
+Status are used to give an important visual indication to the users on a page level.
+
+**Best practices**
+
+- Use clear and concise words.
+- Use rather outside of a form.
+- One form should not have more than one status.
+- Status should not be used if there are no state change possible.
+- Use colors of the theme if a new colors is required.
+- Status should not be clickable. They are visual information only.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Status)
+
+## Imports
+
+```js
+import { Status } from '@strapi/design-system/Status';
+```
+
+## Usage
+
+Use a Status sparingly within forms to give an important visual indication. Status are not clickable.
+
+<Canvas>
+  <Story name="base">
+    <Stack spacing={3}>
+      <Status variant="success" showBullet={false}>
+        <Typography>
+          Hello world <Typography fontWeight="bold">thing happens</Typography>
+        </Typography>
+      </Status>
+      <Status variant="secondary" showBullet={false}>
+        <Typography>
+          Hello world <Typography fontWeight="bold">thing happens</Typography>
+        </Typography>
+      </Status>
+    </Stack>
+  </Story>
+</Canvas>
+
+### Size
+
+<Canvas>
+  <Story name="size S">
+    <Stack spacing={3}>
+      <Status variant="success" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="success700">
+          Published
+        </Typography>
+      </Status>
+      <Status variant="secondary" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="secondary700">
+          Draft
+        </Typography>
+      </Status>
+      <Status variant="alternative" size="S" showBullet={false}>
+        <Typography fontWeight="bold" textColor="alternative700">
+          Updated
+        </Typography>
+      </Status>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Props
+
+The Status 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={Status} />

package/src/Status/__tests__/Status.e2e.js

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

package/src/Status/__tests__/Status.spec.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { Status } from '../Status';
+import { ThemeProvider } from '../../ThemeProvider';
+import { lightTheme } from '../../themes';
+
+describe('Status', () => {
+  it('it displays its children', async () => {
+    const { getByText } = render(
+      <ThemeProvider theme={lightTheme}>
+        <Status>My status</Status>
+      </ThemeProvider>,
+    );
+
+    await waitFor(() => {
+      expect(getByText('My status')).toBeInTheDocument();
+    });
+  });
+
+  it('it displays a preceeding bullet by default', async () => {
+    const { queryByText } = render(
+      <ThemeProvider theme={lightTheme}>
+        <Status>My status</Status>
+      </ThemeProvider>,
+    );
+
+    const textNode = queryByText('My status');
+
+    await waitFor(() => {
+      expect(textNode.querySelector('div')).toBeInTheDocument();
+    });
+  });
+
+  it('it is possible to disable the preceeding bullet', async () => {
+    const { queryByText } = render(
+      <ThemeProvider theme={lightTheme}>
+        <Status showBullet={false}>My status</Status>
+      </ThemeProvider>,
+    );
+
+    const textNode = queryByText('My status');
+
+    await waitFor(() => {
+      expect(textNode.innerHTML).toBe('My status');
+    });
+  });
+});

package/src/Status/index.js

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

package/src/SubNav/SubNav.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Grid } from '../Grid';
+
+export const subNavWidth = `${232 / 16}rem`;
+
+const SubNavWrapper = styled(Grid)`
+  width: ${subNavWidth};
+  background: ${({ theme }) => theme.colors.neutral100};
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
+  z-index: 1;
+`;
+
+export const SubNav = ({ ariaLabel, ...props }) => {
+  return <SubNavWrapper aria-label={ariaLabel} as="nav" {...props} />;
+};
+
+SubNav.propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+};