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

package/src/Box/Box.js

@@ -0,0 +1,104 @@
+import styled from 'styled-components';
+import handleResponsiveValues from '../helpers/handleResponsiveValues';
+import { boxPropTypes, boxDefaultProps } from './BoxProps';
+
+/**
+ * Prevents these attributes from being spread on the DOM node
+ */
+const transientProps = {
+  color: true,
+};
+
+export const Box = styled.div.withConfig({
+  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+})`
+  // Font
+  font-size: ${({ fontSize, theme }) => theme.fontSizes[fontSize] || fontSize};
+
+  // Colors
+  background: ${({ theme, background }) => theme.colors[background]};
+  color: ${({ theme, color }) => theme.colors[color]};
+
+  // Spaces
+  ${({ theme, padding }) => handleResponsiveValues('padding', padding, theme)}
+  ${({ theme, paddingTop }) => handleResponsiveValues('padding-top', paddingTop, theme)}
+  ${({ theme, paddingRight }) => handleResponsiveValues('padding-right', paddingRight, theme)}
+  ${({ theme, paddingBottom }) => handleResponsiveValues('padding-bottom', paddingBottom, theme)}
+  ${({ theme, paddingLeft }) => handleResponsiveValues('padding-left', paddingLeft, theme)}
+  ${({ theme, marginLeft }) => handleResponsiveValues('margin-left', marginLeft, theme)}
+  ${({ theme, marginRight }) => handleResponsiveValues('margin-right', marginRight, theme)}
+  ${({ theme, marginTop }) => handleResponsiveValues('margin-top', marginTop, theme)}
+  ${({ theme, marginBottom }) => handleResponsiveValues('margin-bottom', marginBottom, theme)}
+
+  // Responsive hiding
+  ${({ theme, hiddenS }) => (hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : undefined)}
+  ${({ theme, hiddenXS }) => (hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : undefined)}
+  
+
+  // Borders
+  border-radius: ${({ theme, hasRadius, borderRadius }) => (hasRadius ? theme.borderRadius : borderRadius)};
+  border-style: ${({ borderStyle }) => borderStyle};
+  border-width: ${({ borderWidth }) => borderWidth};
+  border-color: ${({ borderColor, theme }) => theme.colors[borderColor]};
+  border: ${({ theme, borderColor, borderStyle, borderWidth }) => {
+    // This condition prevents borderColor from override the border-color attribute when not passing borderStyle nor borderWidth
+    if (borderColor && !borderStyle && !borderWidth) {
+      return `1px solid ${theme.colors[borderColor]}`;
+    }
+
+    return undefined;
+  }};
+
+  // Shadows
+  box-shadow: ${({ theme, shadow }) => theme.shadows[shadow]};
+
+  // Handlers
+  pointer-events: ${({ pointerEvents }) => pointerEvents};
+  &:hover {
+    ${({ _hover, theme }) => (_hover ? _hover(theme) : undefined)}
+  }
+
+  // Display
+  display: ${({ display }) => display};
+
+  // Position
+  position: ${({ position }) => position};
+  left: ${({ left, theme }) => theme.spaces[left] || left};
+  right: ${({ right, theme }) => theme.spaces[right] || right};
+  top: ${({ top, theme }) => theme.spaces[top] || top};
+  bottom: ${({ bottom, theme }) => theme.spaces[bottom] || bottom};
+  z-index: ${({ zIndex }) => zIndex};
+  overflow: ${({ overflow }) => overflow};
+  cursor: ${({ cursor }) => cursor};
+
+  // Size
+  width: ${({ width, theme }) => theme.spaces[width] || width};
+  max-width: ${({ maxWidth, theme }) => theme.spaces[maxWidth] || maxWidth};
+  min-width: ${({ minWidth, theme }) => theme.spaces[minWidth] || minWidth};
+  height: ${({ height, theme }) => theme.spaces[height] || height};
+  max-height: ${({ maxHeight, theme }) => theme.spaces[maxHeight] || maxHeight};
+  min-height: ${({ minHeight, theme }) => theme.spaces[minHeight] || minHeight};
+
+  // Animation
+  transition: ${({ transition }) => transition};
+  transform: ${({ transform }) => transform};
+  animation: ${({ animation }) => animation};
+
+  //Flexbox children props
+  flex-shrink: ${({ shrink }) => shrink};
+  flex-grow: ${({ grow }) => grow};
+  flex-basis: ${({ basis }) => basis};
+  flex: ${({ flex }) => flex};
+
+  // Text
+  text-align: ${({ textAlign }) => textAlign};
+  text-transform: ${({ textTransform }) => textTransform};
+  line-height: ${({ lineHeight }) => lineHeight};
+
+  // Cursor
+  cursor: ${({ cursor }) => cursor};
+`;
+
+Box.defaultProps = boxDefaultProps;
+
+Box.propTypes = boxPropTypes;

package/src/Box/Box.stories.mdx

@@ -0,0 +1,57 @@
+<!--- Button.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Box } from './Box';
+import { Typography } from '../Typography';
+import { BoxProps } from './BoxProps';
+
+<Meta title="Design System/Technical Components/Box" component={Box} />
+
+# Box
+
+This is the doc of the `Box` component
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Box)
+
+## Imports
+
+```js
+import { Box } from '@strapi/design-system/Box';
+```
+
+## Usage
+
+The `Box` component allows creation of containers according to the guidelines of the Strapi design system (border-radius, shadows, background-color, padding, border, etc).
+
+<Canvas>
+  <Story name="base">
+    <Box padding={4} background="primary700" shadow="filterShadow" borderColor="danger600">
+      <Typography textColor="neutral0">Hello world</Typography>
+    </Box>
+  </Story>
+</Canvas>
+
+## Box with padding
+
+The `Box` component with padding added.
+
+<Canvas>
+  <Story name="responsive spaces">
+    <Box
+      padding={[11, 6, 1]}
+      background="primary700"
+      shadow="filterShadow"
+      hiddenXS
+      borderColor="danger600"
+      borderStyle="dotted"
+      borderWidth="2px"
+    >
+      <Typography textColor="neutral0">Hello world</Typography>
+    </Box>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={BoxProps} />

package/src/Box/BoxProps.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const BoxProps = (props) => <div {...props} />;
+
+export const boxDefaultProps = {
+  background: undefined,
+  borderColor: undefined,
+  color: undefined,
+  hiddenS: false,
+  hiddenXS: false,
+  padding: undefined,
+  paddingTop: undefined,
+  paddingRight: undefined,
+  paddingBottom: undefined,
+  paddingLeft: undefined,
+  hasRadius: false,
+  shadow: undefined,
+  children: null,
+  shrink: undefined,
+  grow: undefined,
+  basis: undefined,
+  flex: undefined,
+  _hover: () => undefined,
+};
+export const boxPropTypes = {
+  /**
+   * JavaScript hover handler
+   */
+  _hover: PropTypes.func,
+  /**
+   * Background color
+   */
+  background: PropTypes.string,
+  /**
+   * Flex basis
+   */
+  basis: PropTypes.oneOfType([PropTypes.string, PropTypes.string]),
+  /**
+   * Border color
+   */
+  borderColor: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  /**
+   * Text color
+   */
+  color: PropTypes.string,
+  /**
+   * Flex
+   */
+  flex: PropTypes.oneOfType([PropTypes.string, PropTypes.string]),
+  /**
+   * Flex grow
+   */
+  grow: PropTypes.oneOfType([PropTypes.string, PropTypes.string]),
+  /**
+   * If `true`, will add a border radius to the `Box`
+   */
+  hasRadius: PropTypes.bool,
+  /**
+   * Responsive hiding. If `true`, will the `Box` for tablet size screens.
+   */
+  hiddenS: PropTypes.bool,
+  /**
+   * Responsive hiding. If `true`, will the `Box` for mobile size screens.
+   */
+  hiddenXS: PropTypes.bool,
+  /**
+   * Padding. Supports responsive values
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /**
+   * Padding bottom. Supports responsive values
+   */
+  paddingBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /**
+   * Padding left. Supports responsive values
+   */
+  paddingLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /**
+   * Padding right. Supports responsive values
+   */
+  paddingRight: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /**
+   * Padding top. Supports responsive values
+   */
+  paddingTop: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /**
+   * Shadow name (see `theme.shadows`)
+   */
+  shadow: PropTypes.string,
+  /**
+   * Flex shrink
+   */
+  shrink: PropTypes.oneOfType([PropTypes.string, PropTypes.string]),
+};
+
+BoxProps.defaultProps = boxDefaultProps;
+BoxProps.propTypes = boxPropTypes;

package/src/Box/__tests__/Box.e2e.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Box', () => {
+  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-technical-components-box--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-technical-components-box--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Box/__tests__/Box.spec.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Box } from '../Box';
+import { lightTheme } from '../../themes';
+import { ThemeProvider } from 'styled-components';
+
+describe('Box', () => {
+  it.each(['color', 'background'])('retrieves the theme value corresponding to the %s props', (colorProp) => {
+    const props = { [colorProp]: 'primary500' };
+
+    render(
+      <ThemeProvider theme={lightTheme}>
+        <Box {...props}>Hello world</Box>
+      </ThemeProvider>,
+    );
+
+    const el = screen.getByText('Hello world');
+    expect(el).toHaveStyle(`${colorProp}: #7b79ff`);
+  });
+
+  it.each(['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'])(
+    'retrieves the theme value corresponding to the %s props',
+    (spacingProp) => {
+      const props = { [spacingProp]: 4 };
+
+      render(
+        <ThemeProvider theme={lightTheme}>
+          <Box {...props}>Hello world</Box>
+        </ThemeProvider>,
+      );
+
+      const el = screen.getByText('Hello world');
+      expect(el).toHaveStyle(`${spacingProp}: 16px`);
+    },
+  );
+});

package/src/Box/index.js

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

package/src/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ChevronRight from '@strapi/icons/ChevronRight';
+import { Typography } from '../Typography';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { VisuallyHidden } from '../VisuallyHidden';
+
+const CrumbWrapper = styled(Flex)`
+  svg {
+    height: ${10 / 16}rem;
+    width: ${10 / 16}rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+  :last-of-type ${Box} {
+    display: none;
+  }
+  :last-of-type ${Typography} {
+    color: ${({ theme }) => theme.colors.neutral800};
+    font-weight: ${({ theme }) => theme.fontWeights.bold};
+  }
+`;
+
+export const Crumb = ({ children }) => {
+  return (
+    <CrumbWrapper inline as="li">
+      <Typography variant="pi" textColor="neutral600">
+        {children}
+      </Typography>
+      <Box aria-hidden paddingLeft={3} paddingRight={3}>
+        <ChevronRight />
+      </Box>
+    </CrumbWrapper>
+  );
+};
+
+Crumb.displayName = 'Crumb';
+Crumb.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+const crumbType = PropTypes.shape({ type: PropTypes.oneOf([Crumb]) });
+
+export const Breadcrumbs = ({ children, label, ...props }) => (
+  <Flex {...props}>
+    <VisuallyHidden>{label}</VisuallyHidden>
+    <ol aria-hidden={true}>{children}</ol>
+  </Flex>
+);
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+Breadcrumbs.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(crumbType), crumbType]).isRequired,
+  label: PropTypes.string.isRequired,
+};

package/src/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -0,0 +1,47 @@
+<!--- Breadcrumbs.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Breadcrumbs, Crumb } from './Breadcrumbs';
+import { Stack } from '../Stack';
+import CollectionType from '@strapi/icons/CollectionType';
+
+<Meta title="Design System/Components/Breadcrumbs" component={Breadcrumbs} />
+
+# Breadcrumbs
+
+Breadcrumbs are a visual information that inform users of their navigation.
+
+**Best practices**
+
+- Use breadcrumbs whenever a long path to achieve an action is required.
+- Use breadcrumbs in modal's headers.
+- Using breadcrumbs in a page or a form is _not_ a consistent experience.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Breadcrumbs)
+
+## Imports
+
+```js
+import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
+```
+
+## Usage
+
+Breadcrumbs are visual information only and cannot be navigated. They are mostly part of modals' headers.
+
+<Canvas>
+  <Story name="base">
+    <Stack horizontal spacing={3}>
+      <CollectionType />
+      <Breadcrumbs label="Category model, name field">
+        <Crumb>Category</Crumb>
+        <Crumb>Name</Crumb>
+      </Breadcrumbs>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Breadcrumbs} />

package/src/Breadcrumbs/__tests__/Breadcrumbs.e2e.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Breadcrumbs', () => {
+  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-breadcrumbs--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-breadcrumbs--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Breadcrumbs/index.js

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

package/src/Button/Button.js

@@ -0,0 +1,138 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import styled, { keyframes } from 'styled-components';
+import Loader from '@strapi/icons/Loader';
+import { Typography } from '../Typography';
+import { Box } from '../Box';
+import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';
+import { VARIANTS, BUTTON_SIZES } from './constants';
+import { BaseButton } from '../BaseButton';
+
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`;
+
+const LoadingWrapper = styled.div`
+  animation: ${rotation} 2s infinite linear;
+  will-change: transform;
+`;
+
+const BoxFullHeight = styled(Box)`
+  height: 100%;
+`;
+
+// TODO: Check the L size button with Maeva
+export const ButtonWrapper = styled(BaseButton)`
+  align-items: center;
+  padding: ${({ theme, size }) => `${size === 'S' ? theme.spaces[2] : '10px'} ${theme.spaces[4]}`};
+  background: ${({ theme }) => theme.colors.buttonPrimary600};
+  border: 1px solid ${({ theme }) => theme.colors.buttonPrimary600};
+  ${Box} {
+    display: flex;
+    align-items: center;
+  }
+  ${Typography} {
+    color: ${({ theme }) => theme.colors.buttonNeutral0};
+  }
+  &[aria-disabled='true'] {
+    ${getDisabledStyle}
+    &:active {
+      ${getDisabledStyle}
+    }
+  }
+  &:hover {
+    ${getHoverStyle}
+  }
+  &:active {
+    ${getActiveStyle}
+  }
+  ${getVariantStyle}
+  ${({ fullWidth }) =>
+    fullWidth &&
+    `
+    display: inline-flex;
+    justify-content: center;
+    width: 100%;
+  `}
+`;
+
+export const Button = React.forwardRef(
+  ({ variant, startIcon, endIcon, disabled, children, onClick, size, loading, fullWidth, ...props }, ref) => {
+    const isDisabled = disabled || loading;
+
+    const handleClick = (e) => {
+      if (!isDisabled && onClick) {
+        onClick(e);
+      }
+    };
+
+    return (
+      <ButtonWrapper
+        ref={ref}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        size={size}
+        variant={variant}
+        onClick={handleClick}
+        fullWidth={fullWidth}
+        {...props}
+      >
+        {(startIcon || loading) && (
+          <BoxFullHeight aria-hidden={true} paddingRight={2}>
+            {loading ? (
+              <LoadingWrapper>
+                <Loader />
+              </LoadingWrapper>
+            ) : (
+              startIcon
+            )}
+          </BoxFullHeight>
+        )}
+
+        {size === 'S' ? (
+          <Typography variant="pi" fontWeight="bold">
+            {children}
+          </Typography>
+        ) : (
+          <Typography fontWeight="bold">{children}</Typography>
+        )}
+
+        {endIcon && (
+          <Box aria-hidden={true} paddingLeft={2}>
+            {endIcon}
+          </Box>
+        )}
+      </ButtonWrapper>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+Button.defaultProps = {
+  disabled: false,
+  endIcon: undefined,
+  fullWidth: false,
+  loading: false,
+  onClick: undefined,
+  size: 'S',
+  startIcon: undefined,
+  variant: 'default',
+};
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  endIcon: PropTypes.element,
+  fullWidth: PropTypes.bool,
+  loading: PropTypes.bool,
+  onClick: PropTypes.func,
+  size: PropTypes.oneOf(BUTTON_SIZES),
+  startIcon: PropTypes.element,
+  variant: PropTypes.oneOf(VARIANTS),
+};