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

package/src/Popover/Popover.stories.mdx

@@ -1,167 +0,0 @@
-<!--- Popover.stories.mdx --->
-
-import { useRef, useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Popover } from './Popover';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/Popover" component={Popover} />
-
-# Popover
-
-The `Popover` component is used to give access to extra information.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Popover)
-
-## Imports
-
-```js
-import { Popover } from '@strapi/design-system/Popover';
-```
-
-## Usage
-
-The popover can be centered relatively to their triggering element.
-
-<Canvas>
-  <Story name="centered">
-    {() => {
-      const [visible, setVisible] = useState(false);
-      const buttonRef = useRef();
-      return (
-        <div style={{ marginLeft: '200px' }}>
-          <button ref={buttonRef} onClick={() => setVisible((s) => !s)}>
-            <Typography>Open popover</Typography>
-          </button>
-          {visible && (
-            <Popover centered source={buttonRef} spacing={16}>
-              <ul style={{ width: '200px' }}>
-                {Array(15)
-                  .fill(null)
-                  .map((_, index) => (
-                    <Box color="neutral800" key={index} padding={3} as="li">
-                      Element{index}
-                    </Box>
-                  ))}
-              </ul>
-            </Popover>
-          )}
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Full Width
-
-<Canvas>
-  <Story name="full width">
-    {() => {
-      const [visible, setVisible] = useState(false);
-      const buttonRef = useRef();
-      return (
-        <Box padding={10}>
-          <button ref={buttonRef} onClick={() => setVisible((s) => !s)}>
-            <Typography>Open popover</Typography>
-          </button>
-          {visible && (
-            <Popover source={buttonRef} fullWidth spacing={16}>
-              <ul style={{ width: '200px' }}>
-                {Array(15)
-                  .fill(null)
-                  .map((_, index) => (
-                    <Box color="neutral800" key={index} padding={3} as="li">
-                      Element {index}
-                    </Box>
-                  ))}
-              </ul>
-            </Popover>
-          )}
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## onReachEnd
-
-You can define an action to be performed when the end of the popover is reached.
-
-<Canvas>
-  <Story name="onReachEnd">
-    {() => {
-      const [visible, setVisible] = useState(false);
-      const [items, setItems] = useState(Array(10).fill(null));
-      const buttonRef = useRef();
-      return (
-        <Box padding={10}>
-          <button id="popover1" ref={buttonRef} onClick={() => setVisible((s) => !s)}>
-            <Typography>Open popover</Typography>
-          </button>
-          {visible && (
-            <Popover
-              source={buttonRef}
-              spacing={16}
-              id="on-reach-end"
-              intersectionId="test-123"
-              onReachEnd={() => setItems(Array(15).fill(null))}
-            >
-              <ul style={{ width: '200px' }} id="list" tabIndex={-1}>
-                {items.map((_, index) => (
-                  <Box color="neutral800" key={index} padding={3} as="li" id={`item-${index}`}>
-                    Element {index}
-                  </Box>
-                ))}
-              </ul>
-            </Popover>
-          )}
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Overflow
-
-The popover will overflow over other elements.
-
-<Canvas>
-  <Story name="overflow-right">
-    {() => {
-      const [visible, setVisible] = useState(false);
-      const buttonRef = useRef();
-      return (
-        <div style={{ height: '20vh' }}>
-          <div style={{ position: 'absolute', bottom: 40, right: 20 }}>
-            <div>
-              <button ref={buttonRef} onClick={() => setVisible((s) => !s)}>
-                <Typography>Open popover</Typography>
-              </button>
-              {visible && (
-                <Popover centered source={buttonRef} spacing={16}>
-                  <ul style={{ width: '200px' }}>
-                    {Array(15)
-                      .fill(null)
-                      .map((_, index) => (
-                        <Box color="neutral800" key={index} padding={3} as="li">
-                          Element {index}
-                        </Box>
-                      ))}
-                  </ul>
-                </Popover>
-              )}
-            </div>
-          </div>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## props
-
-The Popover 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={Popover} />

package/src/Popover/__tests__/Popover.e2e.js

@@ -1,48 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('Popover', () => {
-  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-popover--centered&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('onReachEnd', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-components-popover--on-reach-end&viewMode=story');
-      });
-
-      test('adds item when reaching the end', async ({ page }) => {
-        await page.focus('#popover1');
-        await page.keyboard.press('Enter');
-        const lis = await page.$$('#on-reach-end li');
-        expect(lis.length).toBe(10);
-
-        await page.focus('#list');
-        await page.keyboard.press('PageDown', { delay: 1000 });
-
-        const lis2 = await page.$$('#on-reach-end li');
-        expect(lis2.length).toBe(15);
-      });
-    });
-  });
-
-  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-popover--centered&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Popover/__tests__/Popover.spec.js

@@ -1,153 +0,0 @@
-import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { Popover } from '../Popover';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-describe('Popover', () => {
-  it('snapshots the component', () => {
-    const Component = () => {
-      const divRef = React.useRef(null);
-      const [visible] = React.useState(true);
-
-      return (
-        <ThemeProvider theme={lightTheme}>
-          <div>
-            <div ref={divRef}>Source</div>
-            {visible && (
-              <Popover source={divRef}>
-                <div>Hello world</div>
-              </Popover>
-            )}
-          </div>
-        </ThemeProvider>
-      );
-    };
-
-    const { container } = render(<Component />, { container: document.body });
-
-    expect(container).toMatchInlineSnapshot(`
-      .c1 {
-        background: #ffffff;
-        padding: 4px;
-        border-radius: 4px;
-      }
-
-      .c2 {
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-        z-index: 4;
-        border: 1px solid #eaeaef;
-        background: #ffffff;
-      }
-
-      .c3 {
-        max-height: 15rem;
-        overflow-y: auto;
-        overflow-x: hidden;
-      }
-
-      .c3::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 4px;
-      }
-
-      .c3::-webkit-scrollbar-track {
-        background: #ffffff;
-      }
-
-      .c3::-webkit-scrollbar-thumb {
-        background: #eaeaef;
-        border-radius: 4px;
-        margin-right: 10px;
-      }
-
-      .c0 {
-        border: 0;
-        -webkit-clip: rect(0 0 0 0);
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
-      }
-
-      <body>
-        <div>
-          <div>
-            Source
-          </div>
-        </div>
-        <div
-          class="c0"
-        >
-          <p
-            aria-live="polite"
-            aria-relevant="all"
-            id="live-region-log"
-            role="log"
-          />
-          <p
-            aria-live="polite"
-            aria-relevant="all"
-            id="live-region-status"
-            role="status"
-          />
-          <p
-            aria-live="assertive"
-            aria-relevant="all"
-            id="live-region-alert"
-            role="alert"
-          />
-        </div>
-        <div
-          data-react-portal="true"
-        >
-          <div
-            class="c1 c2"
-            style="position: fixed;"
-          >
-            <div
-              class="c3"
-            >
-              <div>
-                Hello world
-              </div>
-            </div>
-          </div>
-        </div>
-      </body>
-    `);
-  });
-
-  it('should render the popover when visible is true', () => {
-    const Component = () => {
-      const divRef = React.useRef(null);
-      const [isVisible, setIsVisible] = React.useState(false);
-
-      return (
-        <ThemeProvider theme={lightTheme}>
-          <div>
-            <button ref={divRef} onClick={() => setIsVisible((s) => !s)}>
-              Source
-            </button>
-            {isVisible && (
-              <Popover source={divRef}>
-                <div>Hello world</div>
-              </Popover>
-            )}
-          </div>
-        </ThemeProvider>
-      );
-    };
-
-    render(<Component />, { container: document.body });
-
-    expect(() => screen.getByText('Hello world')).toThrow();
-
-    fireEvent.click(screen.getByText('Source'));
-
-    expect(screen.getByText('Hello world')).toBeVisible();
-  });
-});

package/src/Popover/index.js

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

package/src/Portal/Portal.js

@@ -1,25 +0,0 @@
-import { useLayoutEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export const Portal = ({ children }) => {
-  const rootRef = useRef(null);
-  const [mounted, setMounted] = useState(false);
-
-  useLayoutEffect(() => {
-    rootRef.current = document.createElement('div');
-    rootRef.current.setAttribute('data-react-portal', 'true');
-    document.body.appendChild(rootRef.current);
-
-    setMounted(true);
-
-    return () => {
-      rootRef.current?.remove();
-    };
-  }, []);
-
-  if (!mounted || !rootRef.current) {
-    return null;
-  }
-
-  return createPortal(children, rootRef.current);
-};

package/src/Portal/Portal.stories.mdx

@@ -1,33 +0,0 @@
-<!--- Portal.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { Portal } from './Portal';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Technical Components/Portal" component={Portal} />
-
-# Portal
-
-This is the doc of the `Portal` component
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Portal)
-
-## Imports
-
-```js
-import { Portal } from '@strapi/design-system/Portal';
-```
-
-## Usage
-
-Creates a portal using a Declarative API
-
-<Canvas>
-  <Story name="base">
-    <Portal>
-      <aside>
-        <Typography>This is rendered outside the root react app</Typography>
-      </aside>
-    </Portal>
-  </Story>
-</Canvas>

package/src/Portal/__tests__/Portal.e2e.js

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

package/src/Portal/index.js

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

package/src/ProgressBar/ProgressBar.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const ProgressBarSmall = styled.div`
-  background: ${({ theme }) => theme.colors.neutral600};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  position: relative;
-
-  width: 78px;
-  height: ${({ theme }) => theme.spaces[1]};
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    border-radius: ${({ theme }) => theme.borderRadius};
-    width: ${({ value }) => `${value}%`};
-    background: ${({ theme }) => theme.colors.neutral150};
-  }
-`;
-
-const ProgressBarMedium = styled(ProgressBarSmall)`
-  width: 102px;
-  height: ${({ theme }) => theme.spaces[2]};
-`;
-
-export const ProgressBar = ({ min, max, value, children, size, ...props }) => {
-  const sharedProps = {
-    role: 'progressbar',
-    'aria-valuenow': value,
-    'aria-valuemin': min,
-    'aria-valuemax': max,
-  };
-
-  if (size === 'M') {
-    return <ProgressBarMedium {...sharedProps} value={value} aria-label={children} {...props} />;
-  }
-
-  return <ProgressBarSmall {...sharedProps} value={value} aria-label={children} {...props} />;
-};
-
-ProgressBar.defaultProps = {
-  min: 0,
-  max: 100,
-  value: 0,
-  size: 'M',
-};
-
-ProgressBar.propTypes = {
-  children: PropTypes.node.isRequired,
-  max: PropTypes.number,
-  min: PropTypes.number,
-  size: PropTypes.oneOf(['S', 'M']),
-  value: PropTypes.number,
-};

package/src/ProgressBar/ProgressBar.stories.mdx

@@ -1,47 +0,0 @@
-<!--- ProgressBar.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { ProgressBar } from './ProgressBar';
-
-<Meta title="Design System/Components/ProgressBar" component={ProgressBar} />
-
-# ProgressBar
-
-This is the doc of the `ProgressBar` component
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/ProgressBar)
-
-## Imports
-
-```js
-import { ProgressBar } from '@strapi/design-system/ProgressBar';
-```
-
-## Usage
-
-### ProgressBar M
-
-Default "M" progressbar
-
-<Canvas>
-  <Story name="M">
-    <ProgressBar value={33}>33/100 plugins loaded</ProgressBar>
-  </Story>
-</Canvas>
-
-### ProgressBar S
-
-The "S" progressbar
-
-<Canvas>
-  <Story name="S">
-    <ProgressBar value={100} size="S">
-      100/200 plugins loaded
-    </ProgressBar>
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={ProgressBar} />

package/src/ProgressBar/__tests__/ProgressBar.e2e.js

@@ -1,41 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('ProgressBar', () => {
-  test.describe('light mode', () => {
-    test.describe('size M', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-progressbar--m&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('size S', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-progressbar--s&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test.describe('size M', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-progressbar--m&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('size S', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-progressbar--s&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/ProgressBar/index.js

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

package/src/Radio/Radio.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { BaseRadio } from '../BaseRadio/BaseRadio';
-import { Typography } from '../Typography';
-import { Box } from '../Box';
-
-const TextLabel = styled(Typography)`
-  display: flex;
-  align-items: center;
-`;
-
-export const Radio = ({ children, ...props }) => {
-  return (
-    <TextLabel as="label" textColor="neutral800">
-      <BaseRadio {...props} />
-      <Box paddingLeft={2}>{children}</Box>
-    </TextLabel>
-  );
-};
-
-Radio.propTypes = {
-  children: PropTypes.node.isRequired,
-  value: PropTypes.any.isRequired,
-};