@strapi/design-system 1.2.6 → 1.3.0-beta.0

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

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

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

package/src/Pagination/Pagination.js

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

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

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

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

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

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

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

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

package/src/Popover/Popover.js

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