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

package/src/v2/SimpleMenu/SimpleMenu.stories.mdx

@@ -0,0 +1,220 @@
+<!--- SimpleMenu.stories.mdx --->
+
+import { useState } from 'react';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import CarretDown from '@strapi/icons/CarretDown';
+import { SimpleMenu, MenuItem } from './SimpleMenu';
+import { IconButton } from '../../IconButton';
+import { Stack } from '../../Stack';
+
+<Meta title="Design System/Components/v2/SimpleMenu" component={SimpleMenu} />
+
+# SimpleMenu
+
+A menu displays a list of potential options or actions via a Popover component. A menu is used to give choices to the users in small spaces. However, a single option or action should be taken via a menu.
+
+**Best practices**
+
+- Use menu for small spaces. When there is more space, use Select component.
+- Use menu if you want the user to make a single choice. When you need your user to select one or several options, use Select component.
+- Try to have a sort logic in the popover of the menu.
+
+[View source](https://github.com/strapi/design-system-experiments/tree/main/packages/strapi-design-system/src/v2/SimpleMenu)
+
+## Imports
+
+```js
+import { SimpleMenu, MenuItem } from '@strapi/design-system/v2/SimpleMenu';
+```
+
+## Usage
+
+The label of the menu can be replaced by the option selected. For instance, in a Date picker component, the menu label will be replaced by the active month.
+
+By passing `aria-disabled` hover styles on `MenuItem`s can be disabled.
+
+<Canvas>
+  <Story
+    name="base"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+const [val, setValue] = useState('January');\n
+return (
+  <SimpleMenu id="label" label={val}>
+    <MenuItem id="menuItem-January" onClick={() => setValue('January')}>
+      January
+    </MenuItem>
+    <MenuItem id="menuItem-February" onClick={() => setValue('February')}>
+      February
+    </MenuItem>
+  </SimpleMenu>
+);
+  `,
+        },
+      },
+    }}
+  >
+    {() => {
+      const [val, setValue] = useState('January');
+      return (
+        <SimpleMenu id="label" label={val}>
+          <MenuItem id="menuItem-January" onClick={() => setValue('January')}>
+            January
+          </MenuItem>
+          <MenuItem id="menuItem-February" onClick={() => setValue('February')}>
+            February
+          </MenuItem>
+        </SimpleMenu>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### With links
+
+<Canvas>
+  <Story
+    name="with-links"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<SimpleMenu label="Menu">
+  <MenuItem to="/">
+    Home
+  </MenuItem>
+  <MenuItem to="/somewhere">
+    Somewhere internal
+  </MenuItem>
+</SimpleMenu>
+  `,
+        },
+      },
+    }}
+  >
+    <SimpleMenu label="Menu">
+      <MenuItem to="/">Home</MenuItem>
+      <MenuItem to="/somewhere">Somewhere internal</MenuItem>
+    </SimpleMenu>
+  </Story>
+</Canvas>
+
+A menu can allow the user to make actions. It can redirect the user to another page or another part of the product.
+
+### With IconButton
+
+<Canvas>
+  <Story name="with-iconbutton">
+    <SimpleMenu label="Menu" as={IconButton} icon={<CarretDown />}>
+      <MenuItem>Home</MenuItem>
+      <MenuItem>Somewhere internal</MenuItem>
+    </SimpleMenu>
+  </Story>
+</Canvas>
+
+### Sizes
+
+Use the size prop to change the size of the button. You can set the value to `S` or `M` (by default `M` is being used).
+If a custom component is rendered (through the `as` prop), the size is passed through, but needs to be handled in
+that component.
+
+Size `S` can be useful if the component is being used in places, where it needs to align on the left (ex: within tables).
+
+<Canvas>
+  <Story name="sizes">
+    <Stack horizontal spacing={4}>
+      <SimpleMenu label="Small Menu" size="S" icon={<CarretDown />}>
+        <MenuItem>Home</MenuItem>
+        <MenuItem>Somewhere internal</MenuItem>
+      </SimpleMenu>
+      <SimpleMenu label="Medium Menu" icon={<CarretDown />}>
+        <MenuItem>Home</MenuItem>
+        <MenuItem>Somewhere internal</MenuItem>
+      </SimpleMenu>
+    </Stack>
+  </Story>
+</Canvas>
+
+### With Custom Label
+
+<Canvas>
+  <Story
+    name="with-custom-label"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+const Label = <><span>2</span> special items</>;
+return (
+  <SimpleMenu label={Label}>
+    <MenuItem>Home</MenuItem>
+    <MenuItem>Somewhere internal</MenuItem>
+  </SimpleMenu>
+);
+  `,
+        },
+      },
+    }}
+  >
+    {() => {
+      const Label = (
+        <>
+          <span>2</span> special items
+        </>
+      );
+      return (
+        <SimpleMenu label={Label}>
+          <MenuItem>Home</MenuItem>
+          <MenuItem>Somewhere internal</MenuItem>
+        </SimpleMenu>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### with other routing libraries
+
+To use the SimpleMenu/MenuItem components with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
+You'll also need to pass the `isLink` props to the `MenuItem` component.
+
+```jsx
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+
+<SimpleMenu label={Label}>
+  <MenuItem as={RouterNavLink} to="/">
+    Home
+  </MenuItem>
+</SimpleMenu>;
+```
+
+#### with NextJS
+
+For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
+
+```jsx
+import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
+import NextLink from 'next/link';
+
+<SimpleMenu label={Label}>
+  <NextLink href="/home" passHref>
+    <MenuItem>Home</MenuItem>
+  </NextLink>
+</SimpleMenu>;
+```
+
+## Accessibility
+
+- When the menu button has focus, `Space` or `Enter` opens or closes the menu.
+- When the menu is open, the navigation between menu items can be done with the `ArrowDown` or `ArrowUp`
+
+## SimpleMenu props
+
+<ArgsTable of={SimpleMenu} />
+
+## MenuItem props
+
+<ArgsTable of={MenuItem} />

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

@@ -0,0 +1,100 @@
+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-v2-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-v2-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-v2-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-v2-simplemenu--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/v2/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/v2/SimpleMenu/index.js

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

package/src/v2/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/v2/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,
+};

package/src/v2/SubNav/SubNav.stories.mdx

@@ -0,0 +1,234 @@
+<!--- SubNav.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Apps from '@strapi/icons/Apps';
+import Plus from '@strapi/icons/Plus';
+import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
+import { SubNav } from './SubNav';
+import { SubNavHeader } from './SubNavHeader';
+import { SubNavSection } from './SubNavSection';
+import { SubNavSections } from './SubNavSections';
+import { SubNavLink } from './SubNavLink';
+import { SubNavLinkSection } from './SubNavLinkSection';
+import { Box } from '../../Box';
+import { Flex } from '../../Flex';
+import { TextButton } from '../../TextButton';
+
+<Meta title="Design System/Components/v2/SubNav" component={SubNav} />
+
+# SubNav
+
+The Sub Navigation is available and displayed on predefined sections of the admin panel to access advanced options (i.e. Content Manager, Content-types Builder and Settings). Thanks to it the users can easily navigation from an entry or a page to another. The Sub Navigation cannot be collapsed.
+
+**Best practices**
+
+- It is not possible to have more than 2 navigation bars next to each others.
+- Each page has its own icon taken from the iconography library.
+- Do not use icons for headers.
+- Use sentence case for page names and all caps for header labels.
+- Each plugin should have its own new category and its own header.
+
+## Usage
+
+The Sub Navigation cannot be collapsed. A notification system can appear in the Sub Navigation, especially in the Settings section for the Application page.
+
+A Text Button component can be found at the bottom of a pages gathering in the Sub Navigation.
+
+## Hierarchy
+
+Related pages are gathered under specific headers within the Sub Navigation. These headers are helpful to understand the section hierarchy. Moreover, each page gets its very own icon to make it distinctive.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/v2/SubNav)
+
+## Imports
+
+```js
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+  SubNavLinkSection,
+} from '@strapi/design-system/v2/SubNav';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [search, setSearch] = useState('');
+      const links = [
+        {
+          id: 1,
+          label: 'Addresses',
+          icon: <ExclamationMarkCircle />,
+          to: '/address',
+        },
+        {
+          id: 2,
+          label: 'Categories',
+          to: '/category',
+        },
+        {
+          id: 3,
+          label: 'Cities',
+          icon: <Apps />,
+          to: '/city',
+          active: true,
+        },
+        {
+          id: 4,
+          label: 'Countries',
+          to: '/country',
+        },
+      ];
+      return (
+        <Flex>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Builder sub nav">
+              <SubNavHeader
+                searchable
+                value={search}
+                onClear={() => setSearch('')}
+                onChange={(e) => setSearch(e.target.value)}
+                label="Content-Type Builder"
+                searchLabel="Search..."
+              />
+              <SubNavSections>
+                <SubNavSection label="Collection Type" collapsable badgeLabel={links.length.toString()}>
+                  {links.map((link) => (
+                    <SubNavLink to={link.to} active={link.active} key={link.id}>
+                      {link.label}
+                    </SubNavLink>
+                  ))}
+                </SubNavSection>
+                <Box paddingLeft={7} paddingBottom={3}>
+                  <TextButton startIcon={<Plus />}>Click on me</TextButton>
+                </Box>
+                <SubNavSection label="Single Type" collapsable badgeLabel={links.length.toString()}>
+                  <SubNavLinkSection label="Default">
+                    {links.map((link) => (
+                      <SubNavLink to={link.to} key={link.id} isSubSectionChild>
+                        {link.label}
+                      </SubNavLink>
+                    ))}
+                  </SubNavLinkSection>
+                </SubNavSection>
+                <Box paddingLeft={7}>
+                  <TextButton startIcon={<Plus />}>Click on me</TextButton>
+                </Box>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Settings sub nav">
+              <SubNavHeader label="Settings" />
+              <SubNavSections>
+                <SubNavLink to="/blabla" withBullet icon={<Apps />} className="active">
+                  Application
+                </SubNavLink>
+                <SubNavSection label="Global Settings">
+                  {links.map(
+                    (link) =>
+                      link.icon && (
+                        <SubNavLink to={link.to} active={link.active} icon={link.icon} key={link.id} isSubSectionChild>
+                          {link.label}
+                        </SubNavLink>
+                      ),
+                  )}
+                </SubNavSection>
+                <SubNavSection label="Permissions">
+                  {links.map(
+                    (link) =>
+                      link.icon && (
+                        <SubNavLink to={link.to} icon={link.icon} key={link.id}>
+                          {link.label}
+                        </SubNavLink>
+                      ),
+                  )}
+                </SubNavSection>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Mixed sub nav">
+              <SubNavHeader label="Mixed" />
+              <SubNavSections>
+                <SubNavLink to="/blabla" withBullet icon={<Apps />}>
+                  Application
+                </SubNavLink>
+                <SubNavSection label="Global Settings">
+                  <SubNavLinkSection label="Sub section">
+                    {links.map((link) => (
+                      <SubNavLink to={link.to} active={link.active} icon={link.icon} key={link.id}>
+                        {link.label}
+                      </SubNavLink>
+                    ))}
+                  </SubNavLinkSection>
+                </SubNavSection>
+                <SubNavSection label="Permissions">
+                  {links.map((link) => (
+                    <SubNavLink to={link.to} icon={link.icon} key={link.id}>
+                      {link.label}
+                    </SubNavLink>
+                  ))}
+                </SubNavSection>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+        </Flex>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Usage with other routing libraries
+
+To use the Strapi design system SubNavLink component with a routing library (e.g. react-router-dom), you'll need to pass the react-router-dom `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
+You'll now be able to pass all `NavLink` props.
+
+```jsx
+import { SubNavLink } from '@strapi/design-system/SubNavLink';
+import { NavLink } from 'react-router-dom';
+
+<SubNavLink as={NavLink} to="/home">
+  Home
+</SubNavLink>;
+```
+
+#### NextJS usage
+
+For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
+
+```jsx
+import { SubNavLink } from '@strapi/design-system/SubNavLink';
+import NextLink from 'next/link';
+
+<NextLink href="/home" passHref>
+  <SubNavLink>Home</SubNavLink>
+</NextLink>;
+```
+
+## SubNav Props
+
+<ArgsTable of={SubNav} />
+
+## SubNavHeader Props
+
+<ArgsTable of={SubNavHeader} />
+
+## SubNavSection Props
+
+<ArgsTable of={SubNavSection} />
+
+## SubNavLinkSection Props
+
+<ArgsTable of={SubNavLinkSection} />
+
+## SubNavLink Props
+
+<ArgsTable of={SubNavLink} />