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

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

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

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

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

package/src/SimpleMenu/utils.js

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

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

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

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

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

package/src/Status/Status.js

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

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

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

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

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

package/src/SubNav/SubNav.js

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