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

package/src/themes/colors.js

@@ -0,0 +1,46 @@
+export const colorTokenObject = {
+  color: {
+    alternative100: '#f6ecfc',
+    alternative200: '#e0c1f4',
+    alternative500: '#ac73e6',
+    alternative600: '#9736e8',
+    alternative700: '#8312d1',
+    danger100: '#fcecea',
+    danger200: '#f5c0b8',
+    danger500: '#ee5e52',
+    danger600: '#d02b20',
+    danger700: '#b72b1a',
+    neutral0: '#ffffff',
+    neutral100: '#f6f6f9',
+    neutral1000: '#181826',
+    neutral150: '#eaeaef',
+    neutral200: '#dcdce4',
+    neutral300: '#c0c0cf',
+    neutral400: '#a5a5ba',
+    neutral500: '#8e8ea9',
+    neutral600: '#666687',
+    neutral700: '#4a4a6a',
+    neutral800: '#32324d',
+    neutral900: '#212134',
+    primary100: '#f0f0ff',
+    primary200: '#d9d8ff',
+    primary500: '#7b79ff',
+    primary600: '#4945ff',
+    primary700: '#271fe0',
+    secondary100: '#eaf5ff',
+    secondary200: '#b8e1ff',
+    secondary500: '#66b7f1',
+    secondary600: '#0c75af',
+    secondary700: '#006096',
+    success100: '#eafbe7',
+    success200: '#c6f0c2',
+    success500: '#5cb176',
+    success600: '#328048',
+    success700: '#2f6846',
+    warning100: '#fdf4dc',
+    warning200: '#fae7b9',
+    warning500: '#f29d41',
+    warning600: '#d9822f',
+    warning700: '#be5d01',
+  },
+};

package/src/themes/common-theme.js

@@ -0,0 +1,19 @@
+import { sizes } from './sizes';
+
+export const commonTheme = {
+  sizes,
+  zIndices: [5, 10, 15, 20], // TBD
+  spaces: ['0px', '4px', '8px', '12px', '16px', '20px', '24px', '32px', '40px', '48px', '56px', '64px'],
+  borderRadius: '4px',
+  mediaQueries: {
+    tablet: `@media (max-width: ${1100 / 16}rem)`,
+    mobile: `@media (max-width: ${550 / 16}rem)`,
+  },
+  fontSizes: [`${11 / 16}rem`, `${12 / 16}rem`, `${14 / 16}rem`, '1rem', `${18 / 16}rem`, `${32 / 16}rem`],
+  lineHeights: [1.14, 1.22, 1.25, 1.33, 1.43, 1.45, 1.5],
+  fontWeights: {
+    regular: 400,
+    semiBold: 500,
+    bold: 600,
+  },
+};

package/src/themes/darkTheme/dark-colors.js

@@ -0,0 +1,49 @@
+export const darkColorTokenObject = {
+  color: {
+    alternative100: '#181826',
+    alternative200: '#4a4a6a',
+    alternative500: '#ac73e6',
+    alternative600: '#ac73e6',
+    alternative700: '#e0c1f4',
+    buttonNeutral0: '#ffffff',
+    buttonPrimary500: '#7b79ff',
+    buttonPrimary600: '#4945ff',
+    danger100: '#181826',
+    danger200: '#4a4a6a',
+    danger500: '#ee5e52',
+    danger600: '#ee5e52',
+    danger700: '#ee5e52',
+    neutral0: '#212134',
+    neutral100: '#181826',
+    neutral1000: '#ffffff',
+    neutral150: '#32324d',
+    neutral200: '#4a4a6a',
+    neutral300: '#666687',
+    neutral400: '#a5a5ba',
+    neutral500: '#c0c0cf',
+    neutral600: '#a5a5ba',
+    neutral700: '#eaeaef',
+    neutral800: '#ffffff',
+    neutral900: '#ffffff',
+    primary100: '#181826',
+    primary200: '#4a4a6a',
+    primary500: '#4945ff',
+    primary600: '#7b79ff',
+    primary700: '#7b79ff',
+    secondary100: '#181826',
+    secondary200: '#4a4a6a',
+    secondary500: '#66b7f1',
+    secondary600: '#66b7f1',
+    secondary700: '#b8e1ff',
+    success100: '#181826',
+    success200: '#4a4a6a',
+    success500: '#5cb176',
+    success600: '#5cb176',
+    success700: '#c6f0c2',
+    warning100: '#181826',
+    warning200: '#4a4a6a',
+    warning500: '#f29d41',
+    warning600: '#f29d41',
+    warning700: '#fae7b9',
+  },
+};

package/src/themes/darkTheme/dark-shadows.js

@@ -0,0 +1,10 @@
+export const darkShadowTokenObject = {
+  shadow: {
+    filterShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+    focus:
+      'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+    focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+    popupShadow: '1px 1px 10px rgba(3, 3, 5, 0.35)',
+    tableShadow: '1px 1px 10px rgba(3, 3, 5, 0.2)',
+  },
+};

package/src/themes/darkTheme/index.js

@@ -0,0 +1,9 @@
+import { darkColorTokenObject } from './dark-colors';
+import { darkShadowTokenObject } from './dark-shadows';
+import { commonTheme } from '../common-theme';
+
+export const darkTheme = {
+  colors: darkColorTokenObject.color,
+  shadows: darkShadowTokenObject.shadow,
+  ...commonTheme,
+};

package/src/themes/extendTheme.js

@@ -0,0 +1,60 @@
+import { lightTheme } from './lightTheme';
+
+const generateError = (customMessage) => `
+${customMessage}
+
+The following is an example:
+
+
+import { lightTheme, extendTheme } from '@strapi/design-system/themes';
+
+const myCustomTheme = extendTheme(lightTheme, {
+    ${Object.keys(lightTheme)
+      .map((key) => `${key}: /* put the overrides for the ${key} key */,`)
+      .join('\n')}
+})
+`;
+
+const isObject = (item) => {
+  return item && typeof item === 'object' && !Array.isArray(item);
+};
+
+const mergeDeep = (target, overrides) => {
+  const output = { ...target };
+
+  if (isObject(target) && isObject(overrides)) {
+    Object.keys(overrides).forEach((key) => {
+      if (isObject(overrides[key])) {
+        if (target.hasOwnProperty(key)) {
+          output[key] = mergeDeep(target[key], overrides[key]);
+        } else {
+          output[key] = overrides[key];
+        }
+      } else {
+        output[key] = overrides[key];
+      }
+    });
+  }
+
+  return output;
+};
+
+export const extendTheme = (theme, overrides) => {
+  if (!isObject(theme)) {
+    const error = generateError(
+      'The first argument should be an object and corresponds to the theme you want to extend.',
+    );
+
+    throw new Error(error);
+  }
+
+  if (!isObject(overrides)) {
+    const error = generateError(
+      'The second argument should be an object and corresponds to the keys of the theme you want to override.',
+    );
+
+    throw new Error(error);
+  }
+
+  return mergeDeep(theme, overrides);
+};

package/src/themes/index.js

@@ -0,0 +1,4 @@
+export * from './lightTheme';
+export * from './darkTheme';
+export * from './extendTheme';
+export * from './utils';

package/src/themes/lightTheme/index.js

@@ -0,0 +1,9 @@
+import { lightColorTokenObject } from './light-colors';
+import { lightShadowTokenObject } from './light-shadows';
+import { commonTheme } from '../common-theme';
+
+export const lightTheme = {
+  colors: lightColorTokenObject.color,
+  shadows: lightShadowTokenObject.shadow,
+  ...commonTheme,
+};

package/src/themes/lightTheme/light-colors.js

@@ -0,0 +1,49 @@
+export const lightColorTokenObject = {
+  color: {
+    alternative100: '#f6ecfc',
+    alternative200: '#e0c1f4',
+    alternative500: '#ac73e6',
+    alternative600: '#9736e8',
+    alternative700: '#8312d1',
+    buttonNeutral0: '#ffffff',
+    buttonPrimary500: '#7b79ff',
+    buttonPrimary600: '#4945ff',
+    danger100: '#fcecea',
+    danger200: '#f5c0b8',
+    danger500: '#ee5e52',
+    danger600: '#d02b20',
+    danger700: '#b72b1a',
+    neutral0: '#ffffff',
+    neutral100: '#f6f6f9',
+    neutral1000: '#181826',
+    neutral150: '#eaeaef',
+    neutral200: '#dcdce4',
+    neutral300: '#c0c0cf',
+    neutral400: '#a5a5ba',
+    neutral500: '#8e8ea9',
+    neutral600: '#666687',
+    neutral700: '#4a4a6a',
+    neutral800: '#32324d',
+    neutral900: '#212134',
+    primary100: '#f0f0ff',
+    primary200: '#d9d8ff',
+    primary500: '#7b79ff',
+    primary600: '#4945ff',
+    primary700: '#271fe0',
+    secondary100: '#eaf5ff',
+    secondary200: '#b8e1ff',
+    secondary500: '#66b7f1',
+    secondary600: '#0c75af',
+    secondary700: '#006096',
+    success100: '#eafbe7',
+    success200: '#c6f0c2',
+    success500: '#5cb176',
+    success600: '#328048',
+    success700: '#2f6846',
+    warning100: '#fdf4dc',
+    warning200: '#fae7b9',
+    warning500: '#f29d41',
+    warning600: '#d9822f',
+    warning700: '#be5d01',
+  },
+};

package/src/themes/lightTheme/light-shadows.js

@@ -0,0 +1,10 @@
+export const lightShadowTokenObject = {
+  shadow: {
+    filterShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+    focus:
+      'inset 2px 0px 0px rgb(39, 31, 224), inset 0px 2px 0px rgb(39, 31, 224), inset -2px 0px 0px rgb(39, 31, 224), inset 0px -2px 0px rgb(39, 31, 224)',
+    focusShadow: '0px 0px 6px rgba(76, 191, 255, 0.75)',
+    popupShadow: '0px 2px 15px rgba(33, 33, 52, 0.1)',
+    tableShadow: '0px 1px 4px rgba(33, 33, 52, 0.1)',
+  },
+};

package/src/themes/sizes.js

@@ -0,0 +1,10 @@
+export const sizes = {
+  input: {
+    S: `${32 / 16}rem`,
+    M: `${40 / 16}rem`,
+  },
+  accordions: {
+    S: `${48 / 16}rem`,
+    M: `${88 / 16}rem`,
+  },
+};

package/src/themes/utils.js

@@ -0,0 +1,50 @@
+export const getThemeSize = (type) => {
+  return ({ theme, size }) => theme.sizes[type][size];
+};
+
+export const inputFocusStyle =
+  (rootElement = '&') =>
+  ({ theme, hasError }) =>
+    `
+      outline: none;
+      box-shadow: 0;
+      transition-property: border-color, box-shadow, fill;
+      transition-duration: 0.2s;
+
+      ${rootElement}:focus-within {
+        border: 1px solid ${hasError ? theme.colors.danger600 : theme.colors.primary600};
+        box-shadow: ${hasError ? theme.colors.danger600 : theme.colors.primary600} 0px 0px 0px 2px;
+      }
+    `;
+
+export const buttonFocusStyle = ({ theme }) => `
+  position: relative;
+  outline: none;
+  
+  &:after {
+    transition-property: all;
+    transition-duration: 0.2s;
+    border-radius: 8px;
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: -4px;
+    right: -4px;
+    border: 2px solid transparent;
+  }
+
+  &:focus-visible {
+    outline: none;
+    &:after {
+      border-radius: 8px;
+      content: '';
+      position: absolute;
+      top: -5px;
+      bottom: -5px;
+      left: -5px;
+      right: -5px;
+      border: 2px solid ${theme.colors.primary600};
+    }
+  }
+`;

package/src/v2/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,45 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { Box } from '../../Box';
+import { Divider } from './Divider';
+import { Flex } from '../../Flex';
+
+const AlignedList = styled(Flex)`
+  // CrumbLinks do have padding-x, because they need to have a
+  // interaction effect, which mis-aligns the breadcrumbs on the left.
+  // This normalizes the behavior by moving the first item to left by
+  // the same amount it has inner padding
+  :first-child {
+    margin-left: ${({ theme }) => `calc(-1*${theme.spaces[2]})`};
+  }
+`;
+
+export const Breadcrumbs = ({ label, children, ...props }) => {
+  const childrenArray = Children.toArray(children);
+
+  return (
+    <Box aria-label={label} {...props}>
+      <AlignedList as="ol" horizontal>
+        {Children.map(childrenArray, (child, index) => {
+          const shouldDisplayDivider = childrenArray.length > 1 && index + 1 < childrenArray.length;
+
+          return (
+            <Flex inline as="li">
+              {child}
+              {shouldDisplayDivider && <Divider />}
+            </Flex>
+          );
+        })}
+      </AlignedList>
+    </Box>
+  );
+};
+
+Breadcrumbs.displayName = 'Breadcrumbs';
+
+Breadcrumbs.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  label: PropTypes.string.isRequired,
+};

package/src/v2/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -0,0 +1,129 @@
+<!--- Breadcrumbs.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Breadcrumbs } from './Breadcrumbs';
+import { Crumb } from './Crumb';
+import { CrumbLink } from './CrumbLink';
+import { CrumbSimpleMenu } from './CrumbSimpleMenu';
+import { MenuItem } from '../SimpleMenu';
+import { Stack } from '../../Stack';
+import CollectionType from '@strapi/icons/CollectionType';
+
+<Meta title="Design System/Components/v2/Breadcrumbs" component={Breadcrumbs} />
+
+# Breadcrumbs
+
+Breadcrumbs are a list of hierarchical links that inform users about their possible navigation path upwards.
+
+**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, CrumbLink, CrumbSimpleMenu } from '@strapi/design-system/v2/Breadcrumbs';
+import { MenuItem } from '@strapi/design-system/v2/SimpleMenu';
+```
+
+## Usage
+
+Breadcrumbs with CrumbLink are a list of link to help navigation.
+
+<Canvas>
+  <Story name="base">
+    <Stack spacing={3}>
+      <Breadcrumbs label="Folder navigatation" as="nav">
+        <CrumbLink href="/">Media Library</CrumbLink>
+        <Crumb isCurrent>Cats</Crumb>
+      </Breadcrumbs>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Usage
+
+Breadcrumbs with CrumbSimpleMenu displays a list of potential options or actions via a Popover component.
+
+<Canvas>
+  <Story name="with-menu">
+    <Stack horizontal spacing={3}>
+      <Breadcrumbs label="Folder navigatation" as="nav">
+        <CrumbLink href="/">Media Library</CrumbLink>
+        <CrumbSimpleMenu onOpen={() => {}} aria-label="See more ascendants folders" label="...">
+          <MenuItem to="/">Home</MenuItem>
+          <MenuItem to="/somewhere">Somewhere internal</MenuItem>
+        </CrumbSimpleMenu>
+        <Crumb isCurrent>Cats</Crumb>
+      </Breadcrumbs>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Without navigation
+
+Breadcrumbs with Crumb are visual information only and cannot be navigated. They are mostly part of modals' headers.
+
+<Canvas>
+  <Story name="without-nagivation">
+    <Stack horizontal spacing={3}>
+      <CollectionType />
+      <Breadcrumbs label="Category model, name field">
+        <Crumb>Category</Crumb>
+        <Crumb isCurrent>Name</Crumb>
+      </Breadcrumbs>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Single link
+
+<Canvas>
+  <Story name="single-link">
+    <Stack horizontal spacing={3}>
+      <Breadcrumbs label="Category model">
+        <Crumb>Category</Crumb>
+      </Breadcrumbs>
+    </Stack>
+  </Story>
+</Canvas>
+
+### Usage with other routing libraries
+
+To use the Link 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 { Breadcrumbs, CrumbLink } from '@strapi/design-system/Breadcrumbs';
+import { NavLink } from 'react-router-dom';
+
+<Breadcrumbs label="Folder navigatation" as="nav">
+  <CrumbLink as={NavLink} to="/">
+    Media Library
+  </CrumbLink>
+</Breadcrumbs>;
+```
+
+#### NextJS usage
+
+For NextJS, you'll need to wrap the `CrumbLink` with the `NextLink` component
+
+```jsx
+import { Breadcrumbs, CrumbLink } from '@strapi/design-system/Breadcrumbs';
+import NextLink from 'next/link';
+
+<Breadcrumbs label="Folder navigatation" as="nav">
+  <NextLink href="/home" passHref>
+    <CrumbLink>Media Library</CrumbLink>
+  </NextLink>
+</Breadcrumbs>;
+```
+
+## Props
+
+<ArgsTable of={Breadcrumbs} />

package/src/v2/Breadcrumbs/Crumb.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Box } from '../../Box';
+import { Typography } from '../../Typography';
+
+export const Crumb = ({ children, isCurrent, ...props }) => (
+  <Box paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
+    <Typography
+      variant="pi"
+      textColor="neutral800"
+      fontWeight={isCurrent ? 'bold' : 'normal'}
+      aria-current={isCurrent}
+      {...props}
+    >
+      {children}
+    </Typography>
+  </Box>
+);
+
+Crumb.displayName = 'Crumb';
+
+Crumb.defaultProps = {
+  isCurrent: false,
+};
+
+Crumb.propTypes = {
+  children: PropTypes.node.isRequired,
+  isCurrent: PropTypes.bool,
+};

package/src/v2/Breadcrumbs/CrumbLink.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+
+import { BaseLink } from '../../BaseLink';
+
+const StyledLink = styled(BaseLink)`
+  border-radius: ${({ theme }) => theme.borderRadius};
+  color: ${({ theme }) => theme.colors.neutral600};
+  font-size: ${({ theme }) => theme.fontSizes[1]};
+  line-height: ${({ theme }) => theme.lineHeights[4]};
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
+  text-decoration: none;
+
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    color: ${({ theme }) => theme.colors.neutral700};
+  }
+`;
+
+export const CrumbLink = ({ children, ...props }) => <StyledLink {...props}>{children}</StyledLink>;
+
+CrumbLink.displayName = 'CrumbLink';
+
+CrumbLink.defaultProps = {
+  to: undefined,
+};
+
+CrumbLink.propTypes = {
+  children: PropTypes.node.isRequired,
+  to: PropTypes.string,
+};

package/src/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { Button } from '../../Button';
+import { SimpleMenu } from '../SimpleMenu';
+
+import CarretDown from '@strapi/icons/CarretDown';
+
+const StyledButton = styled(Button)`
+  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
+
+  :hover,
+  :focus {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+  }
+`;
+
+export const CrumbSimpleMenu = ({ children, ...props }) => (
+  <SimpleMenu noBorder icon={<CarretDown />} as={StyledButton} size="S" {...props}>
+    {children}
+  </SimpleMenu>
+);
+
+CrumbSimpleMenu.displayName = 'CrumbSimpleMenu';
+
+CrumbSimpleMenu.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};

package/src/v2/Breadcrumbs/Divider.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { Box } from '../../Box';
+import { Typography } from '../../Typography';
+
+export const Divider = () => {
+  return (
+    <Box aria-hidden paddingLeft={1} paddingRight={1}>
+      <Typography variant="pi" textColor="neutral500">
+        /
+      </Typography>
+    </Box>
+  );
+};
+
+Divider.displayName = 'Divider';

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

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