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

package/src/BaseRadio/RadioGroup.js

@@ -1,36 +0,0 @@
-import React, { useLayoutEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { RadioContext } from './context';
-import { setTabIndexOnFirstItem } from '../helpers/setTabIndexOnFirstItem';
-
-export const RadioGroup = ({ children, labelledBy, onChange, value, size, name, ...props }) => {
-  const radioGroupRef = useRef(null);
-
-  useLayoutEffect(() => {
-    if (!value) {
-      setTabIndexOnFirstItem(radioGroupRef.current, `[name="${name}"]`);
-    }
-  }, [value]);
-
-  return (
-    <RadioContext.Provider value={{ onChange, selected: value, name, size }}>
-      <div ref={radioGroupRef} role="radiogroup" aria-labelledby={labelledBy} {...props}>
-        {children}
-      </div>
-    </RadioContext.Provider>
-  );
-};
-
-RadioGroup.defaultProps = {
-  value: '',
-  size: 'M',
-};
-
-RadioGroup.propTypes = {
-  children: PropTypes.node.isRequired,
-  labelledBy: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(['M', 'L']),
-  value: PropTypes.string,
-};

package/src/BaseRadio/__tests__/BaseRadio.e2e.js

@@ -1,90 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('BaseRadio', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto('/iframe.html?id=design-system-technical-components-baseradio--base&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      test('moves to the next element when pressing ArrowDown', async ({ page }) => {
-        await page.focus('text="Pizza"');
-        await page.keyboard.press('ArrowDown');
-
-        const secondBox = await page.$('#bagel');
-        if (secondBox) {
-          expect(await secondBox.isChecked()).toBe(true);
-        }
-      });
-
-      test('moves to the next element when pressing ArrowRight', async ({ page }) => {
-        await page.focus('text="Pizza"');
-        await page.keyboard.press('ArrowRight');
-
-        const secondBox = await page.$('#bagel');
-        if (secondBox) {
-          expect(await secondBox.isChecked()).toBe(true);
-        }
-      });
-
-      test('moves to the previous element when pressing ArrowUp', async ({ page }) => {
-        await page.focus('text="Bagel"');
-        await page.keyboard.press('ArrowUp');
-
-        const pizzaRadio = await page.$('#pizza');
-        if (pizzaRadio) {
-          expect(await pizzaRadio.isChecked()).toBe(true);
-        }
-      });
-
-      test('moves to the previous element when pressing ArrowLeft', async ({ page }) => {
-        await page.focus('text="Bagel"');
-        await page.keyboard.press('ArrowLeft');
-
-        const pizzaRadio = await page.$('#pizza');
-        if (pizzaRadio) {
-          expect(await pizzaRadio.isChecked()).toBe(true);
-        }
-      });
-
-      test.describe('disabled', () => {
-        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-baseradio--disabled&viewMode=story');
-          await injectAxe(page);
-          await checkA11y(page);
-        });
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test.describe('base', () => {
-      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-baseradio--base&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      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-baseradio--disabled&viewMode=story&theme=dark',
-        );
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/BaseRadio/context.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const RadioContext = createContext({ onChange: () => undefined, name: '', size: 'M' });

package/src/BaseRadio/index.js

@@ -1,2 +0,0 @@
-export * from './BaseRadio';
-export * from './RadioGroup';

package/src/BaseRadio/utils.js

@@ -1,30 +0,0 @@
-export const getRadioSize = ({ size }) => {
-  if (size === 'M') {
-    return '18px';
-  }
-
-  return '20px';
-};
-
-export const getSelectedRadioSize = ({ size }) => {
-  if (size === 'M') {
-    return '10px';
-  }
-
-  return '12px';
-};
-
-export const getSelectedRadioPosition = () => {
-  /**
-   * This is computed using:
-   * size = (radio height - radio selected height) / 2 - borderSize
-   * For S, it looks like
-   * size = (18 - 10) / 2 - 1
-   * size = 3
-   *
-   * For L, it looks like
-   * size = (20 - 12) / 2 -1
-   * size = 3
-   */
-  return '3px';
-};

package/src/Box/Box.js

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

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

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

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

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

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

package/src/Breadcrumbs/Breadcrumbs.js

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

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

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

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