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

package/src/NumberInput/__tests__/NumberInput.e2e.js

@@ -1,194 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('NumberInput', () => {
-  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-numberinput--base&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      test('fills the input when typing valid numeric numbers', async ({ page }) => {
-        await page.fill('input', '123.123');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('123.123');
-      });
-
-      test('fills the input when typing valid float numbers with more than 3 significant digits after the seperator', async ({
-        page,
-      }) => {
-        await page.fill('input', '1.23456789');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('1.23456789');
-      });
-
-      test('keeps a scientific number after blur / focus', async ({ page }) => {
-        await page.fill('input', '0.00000001');
-
-        await page.keyboard.press('Tab');
-        await page.focus('input');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('0.00000001');
-      });
-
-      test('fills the input when typing a valid numeric and a trailing comma', async ({ page }) => {
-        await page.fill('input', '123456,');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('123,456');
-        expect(await page.$('text="The value is 123456"')).toBeTruthy();
-      });
-
-      test('erases the value in the input when pressing backspace', async ({ page }) => {
-        await page.fill('input', '-1');
-        await page.keyboard.press('Backspace');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('');
-        expect(await page.$('text="The value is undefined"')).toBeTruthy();
-      });
-
-      test('puts the step value in the input when pressing ArrowUp and that the input is empty', async ({ page }) => {
-        await page.focus('input');
-        await page.fill('input', '1,');
-        await page.keyboard.press('ArrowUp');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('2');
-        expect(await page.$('text="The value is 2"')).toBeTruthy();
-      });
-
-      test('keeps zero/ a falsy value on blur/ focus', async ({ page }) => {
-        await page.focus('input');
-        await page.fill('input', '0,');
-        await page.keyboard.press('Tab');
-        await page.focus('input');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('0');
-      });
-
-      test('puts the step value in the input when pressing ArrowDown and that the input contains only the minus sign', async ({
-        page,
-      }) => {
-        await page.fill('input', '-');
-        await page.keyboard.press('ArrowDown');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('-1');
-        expect(await page.$('text="The value is -1"')).toBeTruthy();
-      });
-
-      test('puts the step value in the input when pressing ArrowDown and that the input is empty', async ({ page }) => {
-        await page.focus('input');
-        await page.fill('input', '-');
-        await page.keyboard.press('ArrowDown');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('-1');
-        expect(await page.$('text="The value is -1"')).toBeTruthy();
-      });
-
-      test('puts the step value in the input when pressing ArrowUp and that the input contains only the minus sign', async ({
-        page,
-      }) => {
-        await page.fill('input', '-');
-        await page.keyboard.press('ArrowUp');
-        await page.keyboard.press('Tab');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('1');
-        expect(await page.$('text="The value is 1"')).toBeTruthy();
-      });
-
-      test('increments the value when clicking on ArrowUp without blur needed', async ({ page }) => {
-        await page.fill('input', '0');
-        await page.click('[data-testid="ArrowUp"]');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('1');
-        expect(await page.$('text="The value is 1"')).toBeTruthy();
-      });
-
-      test('decrements the value when clicking on ArrowUp without blur needed', async ({ page }) => {
-        await page.fill('input', '0');
-        await page.click('[data-testid="ArrowDown"]');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('-1');
-        expect(await page.$('text="The value is -1"')).toBeTruthy();
-      });
-
-      test('increments the value eventhough the field is empty', async ({ page }) => {
-        await page.fill('input', '');
-        await page.click('[data-testid="ArrowUp"]');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('1');
-      });
-
-      test('decrements the value eventhough the field is empty', async ({ page }) => {
-        await page.fill('input', '');
-        await page.click('[data-testid="ArrowDown"]');
-
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('-1');
-      });
-    });
-
-    test.describe('with initial value', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-components-numberinput--with-initial-0&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('shows an initial value of 0', async ({ page }) => {
-        const value = await page.$eval('input', (el) => el.value);
-        expect(value).toBe('0');
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('disabled A11ly', async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-components-numberinput--disabled&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('base A11ly', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-numberinput--base&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('disabled A11ly', async ({ page }) => {
-      // This is the URL of the Storybook Iframe
-      await page.goto('/iframe.html?id=design-system-components-numberinput--disabled&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/NumberInput/index.js

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

package/src/Pagination/Pagination.js

@@ -1,37 +0,0 @@
-import React, { Children } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Flex } from '../Flex';
-import { PaginationContext } from './PaginationContext';
-
-const PaginationWrapper = styled.nav``;
-const PaginationList = styled(Flex)`
-  & > * + * {
-    margin-left: ${({ theme }) => theme.spaces[1]};
-  }
-`;
-
-export const Pagination = ({ children, label, activePage, pageCount }) => {
-  return (
-    <PaginationContext.Provider value={{ activePage, pageCount }}>
-      <PaginationWrapper aria-label={label}>
-        <PaginationList as="ul">
-          {Children.map(children, (child, index) => {
-            return <li key={index}>{child}</li>;
-          })}
-        </PaginationList>
-      </PaginationWrapper>
-    </PaginationContext.Provider>
-  );
-};
-
-Pagination.defaultProps = {
-  label: 'pagination',
-};
-
-Pagination.propTypes = {
-  activePage: PropTypes.number.isRequired,
-  children: PropTypes.node.isRequired,
-  label: PropTypes.string,
-  pageCount: PropTypes.number.isRequired,
-};

package/src/Pagination/Pagination.stories.mdx

@@ -1,97 +0,0 @@
-<!--- Pagination.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Pagination } from './Pagination';
-import { PreviousLink, NextLink, PageLink, Dots } from './components';
-
-<Meta title="Design System/Components/Pagination" component={Pagination} />
-
-# Pagination
-
-The Pagination component is used to navigate multipage content.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Pagination)
-
-## Imports
-
-```js
-import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system/Pagination';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    <Pagination activePage={1} pageCount={26}>
-      <PreviousLink to="/1">Go to previous page</PreviousLink>
-      <PageLink number={1} to="/1">
-        Go to page 1
-      </PageLink>
-      <PageLink number={2} to="/2">
-        Go to page 2
-      </PageLink>
-      <Dots>And 23 other links</Dots>
-      <PageLink number={25} to="/25">
-        Go to page 3
-      </PageLink>
-      <PageLink number={26} to="/26">
-        Go to page 26
-      </PageLink>
-      <NextLink to="/3">Go to next page</NextLink>
-    </Pagination>
-  </Story>
-</Canvas>
-
-### Usage with routing libraries
-
-To use the PreviousLink/PageLink/NextLink component 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 now be able to pass all `NavLink` props.
-
-```jsx
-import { PreviousLink, PageLink, NextLink } from '@strapi/design-system/Pagination';
-import { NavLink } from 'react-router-dom';
-
-<Pagination>
-  <PreviousLink as={NavLink} to="/1">
-    Previous
-  </PreviousLink>
-  <PageLink as={NavLink} to="/1">
-    1
-  </PageLink>
-  <PageLink as={NavLink} to="/2">
-    2
-  </PageLink>
-  <NextLink as={NavLink} to="/2">
-    Next page
-  </NextLink>
-</Pagination>;
-```
-
-#### Usage with NextJS
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { PreviousLink, PageLink, NextLink } from '@strapi/design-system/Pagination';
-import NextLink from 'next/link';
-
-<Pagination>
-  <NextLink href="/home" passHref>
-    <PreviousLink>Previous</PreviousLink>
-  </NextLink>
-  <NextLink href="/1" passHref>
-    <PageLink>1</PageLink>
-  </NextLink>
-  <NextLink href="/2" passHref>
-    <PageLink>2</PageLink>
-  </NextLink>
-  <NextLink href="/2" passHref>
-    <NextLink>Next page</NextLink>
-  </NextLink>
-</Pagination>;
-```
-
-## Props
-
-<ArgsTable of={Pagination} />

package/src/Pagination/PaginationContext.js

@@ -1,4 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const PaginationContext = createContext({ activePage: 1, pageCount: 1 });
-export const usePagination = () => useContext(PaginationContext);

package/src/Pagination/__tests__/Pagination.e2e.js

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

package/src/Pagination/assets/next.svg

@@ -1,3 +0,0 @@
-<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M-0.000195503 1.175L3.81647 5L-0.000195503 8.825L1.1748 10L6.1748 5L1.1748 0L-0.000195503 1.175Z" fill="#8E8EA9"/>
-</svg>

package/src/Pagination/assets/previous.svg

@@ -1,3 +0,0 @@
-<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.175 8.825L2.35833 5L6.175 1.175L5 0L0 5L5 10L6.175 8.825Z" fill="#8E8EA9"/>
-</svg>

package/src/Pagination/components.js

@@ -1,147 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import ChevronLeft from '@strapi/icons/ChevronLeft';
-import ChevronRight from '@strapi/icons/ChevronRight';
-import { NavLink } from 'react-router-dom';
-import { VisuallyHidden } from '../VisuallyHidden';
-import { usePagination } from './PaginationContext';
-import { Typography } from '../Typography';
-import { buttonFocusStyle } from '../themes/utils';
-
-const PaginationText = styled(Typography)`
-  line-height: revert;
-`;
-
-const transientProps = {
-  active: true,
-};
-
-const LinkWrapper = styled(NavLink).withConfig({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-})`
-  padding: ${({ theme }) => theme.spaces[3]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};
-  text-decoration: none;
-  display: flex;
-
-  ${buttonFocusStyle}
-`;
-
-const PageLinkWrapper = styled(LinkWrapper)`
-  color: ${({ theme, active }) => (active ? theme.colors.primary700 : theme.colors.neutral800)};
-  background: ${({ theme, active }) => (active ? theme.colors.neutral0 : undefined)};
-
-  &:hover {
-    box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  }
-`;
-
-const ActionLinkWrapper = styled(LinkWrapper)`
-  font-size: 0.7rem;
-  svg path {
-    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};
-  }
-
-  &:focus,
-  &:hover {
-    svg path {
-      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};
-    }
-  }
-
-  ${(p) =>
-    p['aria-disabled']
-      ? `
-  pointer-events: none;
-    `
-      : undefined}
-`;
-
-const DotsWrapper = styled(LinkWrapper)`
-  color: ${({ theme }) => theme.colors.neutral800};
-`;
-
-export const PreviousLink = ({ children, to, ...props }) => {
-  const { activePage } = usePagination();
-
-  const disabled = activePage === 1;
-
-  return (
-    <ActionLinkWrapper
-      to={disabled ? '#' : to}
-      aria-disabled={disabled}
-      tabIndex={disabled ? -1 : undefined}
-      {...props}
-    >
-      <VisuallyHidden>{children}</VisuallyHidden>
-      <ChevronLeft aria-hidden={true} />
-    </ActionLinkWrapper>
-  );
-};
-
-PreviousLink.displayName = 'PreviousLink';
-
-export const NextLink = ({ children, to, ...props }) => {
-  const { activePage, pageCount } = usePagination();
-
-  const disabled = activePage === pageCount;
-
-  return (
-    <ActionLinkWrapper
-      to={disabled ? '#' : to}
-      aria-disabled={disabled}
-      tabIndex={disabled ? -1 : undefined}
-      {...props}
-    >
-      <VisuallyHidden>{children}</VisuallyHidden>
-      <ChevronRight aria-hidden={true} />
-    </ActionLinkWrapper>
-  );
-};
-
-NextLink.displayName = 'NextLink';
-
-export const PageLink = ({ number, children, ...props }) => {
-  const { activePage } = usePagination();
-
-  const isActive = activePage === number;
-
-  return (
-    <PageLinkWrapper {...props} active={isActive}>
-      <VisuallyHidden>{children}</VisuallyHidden>
-      <PaginationText aria-hidden={true} variant="pi" fontWeight={isActive ? 'bold' : null}>
-        {number}
-      </PaginationText>
-    </PageLinkWrapper>
-  );
-};
-
-PageLink.displayName = 'PageLink';
-
-export const Dots = ({ children, ...props }) => (
-  <DotsWrapper {...props} as="div">
-    <VisuallyHidden>{children}</VisuallyHidden>
-    <PaginationText aria-hidden={true} variant="pi">
-      …
-    </PaginationText>
-  </DotsWrapper>
-);
-
-PageLink.propTypes = {
-  children: PropTypes.node.isRequired,
-  number: PropTypes.number.isRequired,
-};
-
-const sharedPropTypes = {
-  children: PropTypes.node.isRequired,
-  to: PropTypes.string.isRequired,
-};
-
-NextLink.propTypes = sharedPropTypes;
-PreviousLink.propTypes = sharedPropTypes;
-
-Dots.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Pagination/index.js

@@ -1,2 +0,0 @@
-export * from './Pagination';
-export * from './components';

package/src/Popover/Popover.js

@@ -1,167 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { useFloating, flip, shift, offset, autoUpdate } from '@floating-ui/react-dom';
-
-import { Box } from '../Box';
-import { Portal } from '../Portal';
-
-import { useIntersection } from '../helpers/useIntersection';
-
-export const POPOVER_PLACEMENTS = [
-  'top',
-  'top-start',
-  'top-end',
-  'right',
-  'right-start',
-  'right-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'left',
-  'left-start',
-  'left-end',
-];
-
-const PopoverWrapper = styled(Box)`
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  z-index: 4;
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  background: ${({ theme }) => theme.colors.neutral0};
-`;
-
-const PopoverScrollable = styled(Box)`
-  // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
-  max-height: ${3 * 5}rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    width: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: ${({ theme }) => theme.colors.neutral0};
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => theme.colors.neutral150};
-    border-radius: ${({ theme }) => theme.borderRadius};
-    margin-right: 10px;
-  }
-`;
-
-const PopoverContent = ({
-  source,
-  children,
-  spacing,
-  fullWidth,
-  placement,
-  onReachEnd,
-  intersectionId,
-  centered,
-  ...props
-}) => {
-  const popoverRef = React.useRef(null);
-  const [width, setWidth] = React.useState(undefined);
-  const { x, y, reference, floating, strategy } = useFloating({
-    strategy: 'fixed',
-    placement: centered ? 'bottom' : placement,
-    middleware: [
-      offset({
-        mainAxis: spacing,
-      }),
-      shift(),
-      flip(),
-    ],
-    whileElementsMounted: autoUpdate,
-  });
-
-  React.useLayoutEffect(() => {
-    reference(source.current);
-  }, [source]);
-
-  React.useLayoutEffect(() => {
-    if (fullWidth) {
-      setWidth(source.current.offsetWidth);
-    }
-  }, [fullWidth]);
-
-  useIntersection(popoverRef, onReachEnd, {
-    selectorToWatch: `#${intersectionId}`,
-    skipWhen: !intersectionId || !onReachEnd,
-  });
-
-  return (
-    <PopoverWrapper
-      ref={floating}
-      style={{
-        left: x,
-        top: y,
-        position: strategy,
-        width: width ? width : undefined,
-      }}
-      hasRadius
-      background="neutral0"
-      padding={1}
-    >
-      <PopoverScrollable ref={popoverRef} {...props}>
-        {children}
-        {intersectionId && onReachEnd && <Box id={intersectionId} width="100%" height="1px" />}
-      </PopoverScrollable>
-    </PopoverWrapper>
-  );
-};
-
-export const Popover = (props) => {
-  return (
-    <Portal>
-      <PopoverContent {...props} />
-    </Portal>
-  );
-};
-
-const popoverDefaultProps = {
-  fullWidth: false,
-  intersectionId: undefined,
-  onReachEnd: undefined,
-  centered: false,
-  placement: 'bottom-start',
-};
-
-const popoverProps = {
-  /**
-   * Horizontally center the popover
-   */
-  centered: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  /**
-   * Display full width popover
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * Element id to watch for the onReachEnd event
-   */
-  intersectionId: PropTypes.string,
-  /**
-   * The callback invoked after a scroll to the bottom of the popover content.
-   */
-  onReachEnd: PropTypes.func,
-  /**
-   * The popover position
-   */
-  placement: PropTypes.oneOf(POPOVER_PLACEMENTS),
-  /**
-   * A React ref. Used to defined the position of the popover.
-   */
-  source: PropTypes.shape({
-    current: (typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)).isRequired,
-  }).isRequired,
-  spacing: PropTypes.number,
-};
-
-PopoverContent.propTypes = popoverProps;
-PopoverContent.defaultProps = popoverDefaultProps;
-Popover.propTypes = popoverProps;
-Popover.defaultProps = popoverDefaultProps;