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

package/src/v2/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/v2/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/v2/Pagination)
+
+## Imports
+
+```js
+import { Dots, NextLink, PageLink, Pagination, PreviousLink } from '@strapi/design-system/v2/Pagination';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    <Pagination activePage={1} pageCount={26}>
+      <PreviousLink href="/1">Go to previous page</PreviousLink>
+      <PageLink number={1} href="/1">
+        Go to page 1
+      </PageLink>
+      <PageLink number={2} href="/2">
+        Go to page 2
+      </PageLink>
+      <Dots>And 23 other links</Dots>
+      <PageLink number={25} href="/25">
+        Go to page 3
+      </PageLink>
+      <PageLink number={26} href="/26">
+        Go to page 26
+      </PageLink>
+      <NextLink href="/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/v2/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/v2/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-v2-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-v2-pagination--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/v2/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/v2/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/v2/Pagination/components.js

@@ -0,0 +1,136 @@
+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 { VisuallyHidden } from '../../VisuallyHidden';
+import { usePagination } from './PaginationContext';
+import { Typography } from '../../Typography';
+import { buttonFocusStyle } from '../../themes/utils';
+import { BaseLink } from '../../BaseLink';
+
+const PaginationText = styled(Typography)`
+  line-height: revert;
+`;
+
+const transientProps = {
+  active: true,
+};
+
+const LinkWrapper = styled(BaseLink).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 = React.forwardRef(({ children, ...props }, ref) => {
+  const { activePage } = usePagination();
+
+  const disabled = activePage === 1;
+
+  return (
+    <ActionLinkWrapper ref={ref} aria-disabled={disabled} tabIndex={disabled ? -1 : undefined} {...props}>
+      <VisuallyHidden>{children}</VisuallyHidden>
+      <ChevronLeft aria-hidden={true} />
+    </ActionLinkWrapper>
+  );
+});
+
+PreviousLink.displayName = 'PreviousLink';
+
+export const NextLink = React.forwardRef(({ children, ...props }, ref) => {
+  const { activePage, pageCount } = usePagination();
+
+  const disabled = activePage === pageCount;
+
+  return (
+    <ActionLinkWrapper ref={ref} aria-disabled={disabled} tabIndex={disabled ? -1 : undefined} {...props}>
+      <VisuallyHidden>{children}</VisuallyHidden>
+      <ChevronRight aria-hidden={true} />
+    </ActionLinkWrapper>
+  );
+});
+
+NextLink.displayName = 'NextLink';
+
+export const PageLink = React.forwardRef(({ number, children, ...props }, ref) => {
+  const { activePage } = usePagination();
+
+  const isActive = activePage === number;
+
+  return (
+    <PageLinkWrapper ref={ref} {...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,
+};
+
+NextLink.propTypes = sharedPropTypes;
+PreviousLink.propTypes = sharedPropTypes;
+
+Dots.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/v2/Pagination/index.js

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

package/src/v2/SimpleMenu/SimpleMenu.js

@@ -0,0 +1,252 @@
+import React, { useRef, useState, Children, cloneElement, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import CarretDown from '@strapi/icons/CarretDown';
+import { Typography } from '../../Typography';
+import { Box } from '../../Box';
+import { Flex } from '../../Flex';
+import { Button } from '../../Button';
+import { BaseLink } from '../../BaseLink';
+import { Popover, POPOVER_PLACEMENTS } from '../../Popover';
+import { getOptionStyle } from './utils';
+import { useId } from '../../helpers/useId';
+import { KeyboardKeys } from '../../helpers/keyboardKeys';
+
+const OptionButton = styled.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  ${getOptionStyle}
+`;
+
+const OptionLink = styled(BaseLink)`
+  text-decoration: none;
+  ${getOptionStyle}
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 4px;
+    width: 6px;
+  }
+`;
+
+const StyledButtonSmall = styled(Button)`
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
+`;
+
+export const MenuItem = ({ as, children, onClick, isFocused, isLink, ...props }) => {
+  const menuItemRef = useRef();
+
+  useEffect(() => {
+    if (isFocused && menuItemRef.current) {
+      menuItemRef.current.focus();
+    }
+  }, [isFocused]);
+
+  const menuItemProps = {
+    tabIndex: isFocused ? 0 : -1,
+    ref: menuItemRef,
+    role: 'menuitem',
+    ...props,
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.SPACE || e.key === KeyboardKeys.ENTER) {
+      onClick();
+    }
+  };
+
+  return isLink ? (
+    <OptionLink as={as} {...menuItemProps}>
+      <Box padding={2}>
+        <Typography>{children}</Typography>
+      </Box>
+    </OptionLink>
+  ) : (
+    <OptionButton onKeyDown={handleKeyDown} onMouseDown={onClick} type="button" {...menuItemProps}>
+      <Box padding={2}>
+        <Typography>{children}</Typography>
+      </Box>
+    </OptionButton>
+  );
+};
+
+MenuItem.defaultProps = {
+  onClick: () => {},
+  isFocused: false,
+  isLink: false,
+};
+
+MenuItem.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node.isRequired,
+  isFocused: PropTypes.bool,
+  isLink: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export const SimpleMenu = ({
+  label,
+  children,
+  id,
+  as: asComp,
+  onOpen = () => {},
+  onClose = () => {},
+  size,
+  popoverPlacement,
+  ...props
+}) => {
+  const menuButtonRef = useRef();
+  const menuId = useId('simplemenu', id);
+  const didMount = useRef(false);
+  const [visible, setVisible] = useState(false);
+  const [focusedItemIndex, setFocusItem] = useState(0);
+  const childrenArray = Children.toArray(children);
+  const DefaultComponent = size === 'S' ? StyledButtonSmall : Button;
+  const Component = asComp || DefaultComponent;
+
+  useEffect(() => {
+    if (['string', 'number'].includes(typeof label)) {
+      // Useful to focus the selected item in the list
+      const defaultItemIndexToFocus = childrenArray.findIndex((c) => c.props.children === label);
+
+      if (defaultItemIndexToFocus !== -1) {
+        setFocusItem(defaultItemIndexToFocus);
+      }
+    }
+  }, [label]);
+
+  useEffect(() => {
+    if (didMount?.current) {
+      if (visible && typeof onOpen === 'function') {
+        onOpen();
+      } else if (typeof onClose === 'function') {
+        onClose();
+      }
+    } else {
+      didMount.current = true;
+    }
+  }, [didMount, visible]);
+
+  /* in case `label` is a custom react component, we know it is going to be
+      a child of the menu button.
+  */
+  useEffect(() => {
+    if (React.isValidElement(label) && focusedItemIndex == -1) {
+      menuButtonRef.current.focus();
+    }
+  }, [label, focusedItemIndex]);
+
+  const handleWrapperKeyDown = (e) => {
+    if (visible) {
+      if (e.key === KeyboardKeys.ESCAPE) {
+        e.stopPropagation();
+        setVisible(false);
+        menuButtonRef.current.focus();
+      }
+
+      if (e.key === KeyboardKeys.DOWN) {
+        setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
+      }
+
+      if (e.key === KeyboardKeys.UP) {
+        setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
+      }
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.ENTER || e.key === KeyboardKeys.SPACE) {
+      setVisible((prevVisible) => !prevVisible);
+    }
+  };
+
+  const handleBlur = (e) => {
+    e.preventDefault();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setVisible(false);
+    }
+  };
+
+  const handleMenuButtonMouseDown = (e) => {
+    e.preventDefault();
+    setVisible((prevVisible) => !prevVisible);
+  };
+
+  const childrenClone = childrenArray.map((child, index) => (
+    <Flex as="li" key={index} justifyContent="center" role="menuitem">
+      {cloneElement(child, {
+        onClick: () => {
+          child.props.onClick();
+          setVisible(false);
+          menuButtonRef.current.focus();
+        },
+        isFocused: focusedItemIndex === index,
+      })}
+    </Flex>
+  ));
+
+  return (
+    <div onKeyDown={handleWrapperKeyDown}>
+      <Component
+        label={React.isValidElement(label) ? null : label}
+        aria-haspopup
+        aria-expanded={visible}
+        aria-controls={menuId}
+        onKeyDown={handleKeyDown}
+        onMouseDown={handleMenuButtonMouseDown}
+        ref={menuButtonRef}
+        type="button"
+        variant="ghost"
+        endIcon={
+          <IconWrapper>
+            <CarretDown aria-hidden />
+          </IconWrapper>
+        }
+        {...props}
+      >
+        {label}
+      </Component>
+      {visible && (
+        <Popover onBlur={handleBlur} placement={popoverPlacement} source={menuButtonRef} spacing={4}>
+          <Box role="menu" as="ul" padding={1} id={menuId}>
+            {childrenClone}
+          </Box>
+        </Popover>
+      )}
+    </div>
+  );
+};
+
+SimpleMenu.defaultProps = {
+  as: undefined,
+};
+
+SimpleMenu.displayName = 'SimpleMenu';
+
+SimpleMenu.defaultProps = {
+  popoverPlacement: 'bottom-start',
+  size: 'M',
+};
+
+SimpleMenu.propTypes = {
+  as: PropTypes.any,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  id: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]).isRequired,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  popoverPlacement: PropTypes.oneOf(POPOVER_PLACEMENTS),
+
+  /**
+   * Size of the trigger button.
+   * Note: in case a custom component is passed through the "as"
+   * prop, the size prop is passed along too, but needs to be handled there
+   */
+
+  size: PropTypes.oneOf(['S', 'M']),
+};