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

package/src/Popover/Popover.stories.mdx

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

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

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

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

package/src/Portal/Portal.js

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

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

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

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

package/src/ProgressBar/ProgressBar.js

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

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

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

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

package/src/Radio/Radio.js

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