@strapi/design-system 1.3.0-beta.0 → 1.3.0-beta.2

package/src/themes/colors.js

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

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

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

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

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

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

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

package/src/themes/lightTheme/index.js

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

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

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

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

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

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

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

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

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

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

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

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