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

package/src/IconButton/IconButton.js

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

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

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

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

package/src/KeyboardNavigable/KeyboardNavigable.js

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

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

package/src/Layout/ActionLayout.js

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

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

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

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