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

package/src/IconButton/IconButton.js

@@ -1,175 +0,0 @@
-import React, { cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Tooltip } from '../Tooltip';
-import { BaseButton } from '../BaseButton';
-import { Flex } from '../Flex';
-import { VisuallyHidden } from '../VisuallyHidden';
-
-const IconButtonWrapper = styled(BaseButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${32 / 16}rem;
-  width: ${32 / 16}rem;
-
-  svg {
-    > g,
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-  &:hover {
-    svg {
-      > g,
-      path {
-        fill: ${({ theme }) => theme.colors.neutral600};
-      }
-    }
-  }
-  &:active {
-    svg {
-      > g,
-      path {
-        fill: ${({ theme }) => theme.colors.neutral400};
-      }
-    }
-  }
-  &[aria-disabled='true'] {
-    background-color: ${({ theme }) => theme.colors.neutral150};
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral600};
-      }
-    }
-  }
-  ${({ noBorder }) => (noBorder ? `border: none;` : undefined)}
-`;
-
-export const IconButtonGroup = styled(Flex)`
-  & span:first-child button {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
-  }
-
-  & span:last-child button {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
-  }
-
-  & ${IconButtonWrapper} {
-    border-radius: 0;
-    border-left: none;
-
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral700};
-      }
-    }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.neutral100};
-
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral800};
-        }
-      }
-    }
-
-    &:active {
-      background-color: ${({ theme }) => theme.colors.neutral150};
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral900};
-        }
-      }
-    }
-
-    &[aria-disabled='true'] {
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral600};
-        }
-      }
-    }
-  }
-`;
-
-export const IconButton = React.forwardRef(
-  ({ label, noBorder, children, icon, disabled, onClick, ['aria-label']: ariaLabel, ...restProps }, ref) => {
-    /**
-     * @type {React.MouseEventHandler<HTMLButtonElement>}
-     */
-    const handleClick = (e) => {
-      if (!disabled && onClick) {
-        onClick(e);
-      }
-    };
-
-    if (!label) {
-      return (
-        <IconButtonWrapper {...restProps} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
-          <VisuallyHidden as="span">{ariaLabel}</VisuallyHidden>
-          {cloneElement(children ?? icon, {
-            'aria-hidden': true,
-            focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-          })}
-        </IconButtonWrapper>
-      );
-    }
-
-    return (
-      <Tooltip label={label}>
-        <IconButtonWrapper {...restProps} ref={ref} noBorder={noBorder} onClick={handleClick} aria-disabled={disabled}>
-          <VisuallyHidden as="span">{label}</VisuallyHidden>
-          {cloneElement(children ?? icon, {
-            'aria-hidden': true,
-            focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-          })}
-        </IconButtonWrapper>
-      </Tooltip>
-    );
-  },
-);
-
-IconButton.displayName = 'IconButton';
-
-IconButton.defaultProps = {
-  label: undefined,
-  noBorder: false,
-  disabled: false,
-  onClick: undefined,
-};
-
-/**
- * @type {(otherProps: string[]) => (props: Record<string, unknown>, propName: string) => Error | undefined}
- */
-const throwPropErrorIfNoneAreDefined = (otherProps, propType) => (props, propName) => {
-  if (!props[propName] && otherProps.every((otherProp) => !props[otherProp])) {
-    return new Error(`One of the following props is required: ${propName}, ${otherProps.join(', ')}`);
-  }
-
-  PropTypes.checkPropTypes({ [propName]: PropTypes[propType] }, props, 'prop', 'IconButton');
-};
-
-IconButton.propTypes = {
-  /**
-   * `PropTypes.string` – must be defined if `label` is not defined.
-   */
-  ['aria-label']: throwPropErrorIfNoneAreDefined(['label'], 'string'),
-  /**
-   * `PropTypes.node` – must be defined if `icon` is not defined.
-   */
-  children: throwPropErrorIfNoneAreDefined(['icon'], 'node'),
-  disabled: PropTypes.bool,
-  /**
-   * `PropTypes.node` – must be defined if `children` is not defined.
-   */
-  icon: throwPropErrorIfNoneAreDefined(['children'], 'node'),
-  /**
-   * `PropTypes.string` – must be defined if `aria-label` is not defined.
-   */
-  label: throwPropErrorIfNoneAreDefined(['aria-label'], 'string'),
-  noBorder: PropTypes.bool,
-  onClick: PropTypes.func,
-};

package/src/IconButton/IconButton.stories.mdx

@@ -1,153 +0,0 @@
-<!--- IconButton.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { useState } from 'react';
-
-import Pencil from '@strapi/icons/Pencil';
-import Play from '@strapi/icons/Play';
-import Trash from '@strapi/icons/Trash';
-import Plus from '@strapi/icons/Plus';
-
-import { IconButton, IconButtonGroup } from './IconButton';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/IconButton" component={IconButton} />
-
-# IconButton
-
-Icon Buttons are a way to perform actions within a page, a table or another object. They help interact with its content via a single click in small page portion. According to their minimal style, they help understand the most important actions to take.
-
-**Best practices**
-
-- Icon Buttons do not have labels.
-- A Tooltip should be displayed at hover.
-- Icon Buttons can be used within a group form whenever the action are related.
-- Icon Buttons can be displayed next to each others whenever the actions are distinct.
-- In Table component, avoid using a border.
-- The icon chosen to represent the action should be perfectly explicit.
-  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/IconButton)
-
-## Imports
-
-```js
-import { IconButton, IconButtonGroup } from '@strapi/design-system/IconButton';
-```
-
-## Usage
-
-Icon Buttons are used to perform actions within a page, a table or another object. They have the advantage of being minimal and by so, efficient in small areas. Icon Buttons should be associated with Tooltips.
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [currentAction, setCurrentAction] = useState('None Selected');
-      return (
-        <Box padding={7}>
-          <Box paddingBottom={3}>
-            <Typography>{currentAction}</Typography>
-          </Box>
-          <Flex>
-            <IconButton onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
-            <IconButton onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
-            <IconButton onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
-            <IconButton onClick={() => setCurrentAction('Publish')} label="Publish" icon={<Play />} />
-          </Flex>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### IconButton Disabled
-
-Depending on the status of an action or the permissions, an IconButton can be unaccessible or unreachable yet.
-
-<Canvas>
-  <Story name="disabled">
-    {() => {
-      const [currentAction, setCurrentAction] = useState('None Selected');
-      return (
-        <Box padding={7}>
-          <Box paddingBottom={3}>
-            <Typography>{currentAction}</Typography>
-          </Box>
-          <Flex>
-            <IconButton disabled onClick={() => setCurrentAction('edit')} label="Edit" icon={<Pencil />} />
-            <IconButton disabled onClick={() => setCurrentAction('Create')} label="Create" icon={<Plus />} />
-            <IconButton disabled onClick={() => setCurrentAction('Delete')} label="Delete" icon={<Trash />} />
-            <IconButton disabled onClick={() => setCurrentAction('Publish')} label="Publish" icon={<Play />} />
-          </Flex>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### IconButton Disabled
-
-An Icon button without the tooltip. It can be interesting to rely on this component to avoid showing a tooltip when focusing the modals close button. **However, when not using a label, the developer should add an explicit aria-label to the button.**
-
-<Canvas>
-  <Story name="without tooltip">
-    <Box padding={7}>
-      <IconButton onClick={() => console.log('edit')} aria-label="Edit" icon={<Pencil />} />
-    </Box>
-  </Story>
-</Canvas>
-
-### IconButtonGroup
-
-IconButtons can be used within another component is a Group shape.
-
-<Canvas>
-  <Story name="group">
-    <Box padding={7}>
-      <IconButtonGroup>
-        <IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
-        <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
-        <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
-        <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
-      </IconButtonGroup>
-    </Box>
-  </Story>
-</Canvas>
-
-### Icons as Children & aria-label
-
-IconButtons can take Icons as their children and can be fully accessible without a tooltip.
-
-<Canvas>
-  <Story name="children">
-    {() => {
-      const [currentAction, setCurrentAction] = useState('None Selected');
-      return (
-        <Box padding={7}>
-          <Box paddingBottom={3}>
-            <Typography>{currentAction}</Typography>
-          </Box>
-          <Flex>
-            <IconButton onClick={() => setCurrentAction('Edit')} aria-label={'Edit'}>
-              <Pencil />
-            </IconButton>
-            <IconButton onClick={() => setCurrentAction('Create')} aria-label="Create">
-              <Plus />
-            </IconButton>
-            <IconButton onClick={() => setCurrentAction('Delete')} aria-label="Delete">
-              <Trash />
-            </IconButton>
-            <IconButton onClick={() => setCurrentAction('Publish')} aria-label="Publish">
-              <Play />
-            </IconButton>
-          </Flex>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={IconButton} />

package/src/IconButton/__tests__/IconButton.e2e.js

@@ -1,57 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('IconButton', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--base&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--disabled&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('group', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--group&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--base&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--disabled&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('group', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-iconbutton--group&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/IconButton/index.js

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

package/src/KeyboardNavigable/KeyboardNavigable.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import { KeyboardKeys } from '../helpers/keyboardKeys';
-
-export const KeyboardNavigable = ({ tagName, attributeName, ...props }) => {
-  const isValidFocusedElement = () => {
-    const focused = document.activeElement;
-
-    if (tagName) {
-      return focused.tagName.toLowerCase() === tagName;
-    }
-
-    return focused.hasAttribute(attributeName);
-  };
-
-  const queryElement = (parentEl) => {
-    if (tagName) {
-      return parentEl.querySelectorAll(tagName);
-    }
-
-    return parentEl.querySelectorAll(`[${attributeName}]`);
-  };
-
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case KeyboardKeys.RIGHT:
-      case KeyboardKeys.DOWN: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-
-          const focused = document.activeElement;
-
-          const allElements = [...queryElement(e.currentTarget)];
-          const focusedIndex = allElements.findIndex((node) => node === focused);
-
-          const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
-          allElements[nextIndex].focus();
-        }
-        break;
-      }
-
-      case KeyboardKeys.LEFT:
-      case KeyboardKeys.UP: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-
-          const focused = document.activeElement;
-          const allElements = [...queryElement(e.currentTarget)];
-          const focusedIndex = allElements.findIndex((node) => node === focused);
-
-          const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
-          allElements[nextIndex].focus();
-        }
-        break;
-      }
-
-      case KeyboardKeys.HOME: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-
-          const allElements = queryElement(e.currentTarget);
-          allElements.item(0).focus();
-        }
-
-        break;
-      }
-
-      case KeyboardKeys.END: {
-        if (isValidFocusedElement()) {
-          e.preventDefault();
-
-          const allElements = queryElement(e.currentTarget);
-          allElements.item(allElements.length - 1).focus();
-        }
-
-        break;
-      }
-
-      default:
-        break;
-    }
-  };
-
-  return <Box onKeyDown={handleKeyDown} {...props} />;
-};
-
-KeyboardNavigable.defaultProps = {
-  attributeName: undefined,
-  tagName: undefined,
-};
-
-KeyboardNavigable.propTypes = {
-  attributeName: PropTypes.string,
-  tagName: PropTypes.string,
-};

package/src/KeyboardNavigable/index.js

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

package/src/Layout/ActionLayout.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-
-const StartBlockActions = styled(Flex)`
-  & > * + * {
-    margin-left: ${({ theme }) => theme.spaces[2]};
-  }
-
-  margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
-`;
-
-const EndBlockActions = styled(StartBlockActions)`
-  flex-shrink: 0;
-`;
-
-export const ActionLayout = ({ startActions, endActions }) => {
-  return startActions || endActions ? (
-    <Box paddingLeft={10} paddingRight={10}>
-      <Box paddingBottom={4}>
-        <Flex justifyContent="space-between" alignItems="flex-start">
-          {startActions && <StartBlockActions wrap="wrap">{startActions}</StartBlockActions>}
-          {endActions && <EndBlockActions pullRight>{endActions}</EndBlockActions>}
-        </Flex>
-      </Box>
-    </Box>
-  ) : null;
-};
-
-ActionLayout.defaultProps = {
-  endActions: undefined,
-  startActions: undefined,
-};
-
-ActionLayout.propTypes = {
-  endActions: PropTypes.node,
-  startActions: PropTypes.node,
-};

package/src/Layout/ContentLayout.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-
-export const ContentLayout = ({ children }) => {
-  return (
-    <Box paddingLeft={10} paddingRight={10}>
-      {children}
-    </Box>
-  );
-};
-
-ContentLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Layout/GridLayout.js

@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-export const GridLayout = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: ${({ theme }) => theme.spaces[4]};
-`;
-
-GridLayout.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Layout/GridLayout.stories.mdx

@@ -1,36 +0,0 @@
-<!--- GridLayout.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { GridLayout } from './GridLayout';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/GridLayout" component={GridLayout} />
-
-# GridLayout
-
-`GridLayout` creates a responsive grid that will dispatch `Box` elements in 1, 2 or 3 columns depending on the size of the screen.
-
-## Imports
-
-```js
-import { GridLayout } from '@strapi/design-system/Layout';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    <Box padding={8} background="neutral100">
-      <GridLayout>
-        {Array(12)
-          .fill(null)
-          .map((_, idx) => (
-            <Box padding={4} hasRadius background="neutral0" key={`box-${idx}`} shadow="tableShadow">
-              <Typography>hello world</Typography>
-            </Box>
-          ))}
-      </GridLayout>
-    </Box>
-  </Story>
-</Canvas>