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

package/src/v2/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/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

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

@@ -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-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

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

@@ -1,136 +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 { 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

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

package/src/v2/SimpleMenu/SimpleMenu.js

@@ -1,252 +0,0 @@
-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']),
-};