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

package/src/BaseCheckbox/BaseCheckbox.js

@@ -1,133 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-import { Box } from '../Box';
-import { getCheckboxSize } from './utils';
-
-import checkmarkIcon from './assets/checkmark.svg';
-import checkmarkIconDisabled from './assets/checkmark-black.svg';
-
-const CheckboxInput = styled.input`
-  margin: 0;
-  height: ${getCheckboxSize};
-  min-width: ${getCheckboxSize};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  -webkit-appearance: none;
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  cursor: pointer;
-
-  &:checked {
-    background-color: ${({ theme }) => theme.colors.primary600};
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    &:after {
-      content: '';
-      display: block;
-      position: relative;
-      background: url(${checkmarkIcon}) no-repeat no-repeat center center;
-      width: 10px;
-      height: 10px;
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
-
-    &:disabled:after {
-      background: url(${checkmarkIconDisabled}) no-repeat no-repeat center center;
-    }
-  }
-
-  &:disabled {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-    border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  }
-
-  &:indeterminate {
-    background-color: ${({ theme }) => theme.colors.primary600};
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    &:after {
-      content: '';
-      display: block;
-      position: relative;
-      color: white;
-      height: 2px;
-      width: 10px;
-      background-color: ${({ theme }) => theme.colors.neutral0};
-      left: 50%;
-      top: 50%;
-      transform: translateX(-50%) translateY(-50%);
-    }
-
-    &:disabled {
-      background-color: ${({ theme }) => theme.colors.neutral200};
-      border: 1px solid ${({ theme }) => theme.colors.neutral300};
-      &:after {
-        background-color: ${({ theme }) => theme.colors.neutral500};
-      }
-    }
-  }
-`;
-
-export const BaseCheckbox = ({ indeterminate, size, name, value, onValueChange, ...inputProps }) => {
-  const checkboxRef = useRef();
-
-  useEffect(() => {
-    if (checkboxRef.current && indeterminate) {
-      checkboxRef.current.indeterminate = indeterminate;
-    } else {
-      checkboxRef.current.indeterminate = false;
-    }
-  }, [indeterminate]);
-
-  const handleValueChange = () => {
-    onValueChange(!value);
-  };
-
-  return (
-    <Box>
-      <CheckboxInput
-        size={size}
-        checked={value}
-        onChange={handleValueChange}
-        type="checkbox"
-        ref={checkboxRef}
-        name={name}
-        {...inputProps}
-      />
-    </Box>
-  );
-};
-
-BaseCheckbox.displayName = 'BaseCheckbox';
-
-BaseCheckbox.defaultProps = {
-  indeterminate: false,
-  name: null,
-  onValueChange: () => {},
-  size: 'M',
-  value: false,
-};
-
-BaseCheckbox.propTypes = {
-  /**
-   * If `true`, display the indeterminate state.
-   */
-  indeterminate: PropTypes.bool,
-  /**
-   * `Checkbox` input name
-   */
-  name: PropTypes.string,
-  /**
-   * The callback invoked when click on the `Checkbox`
-   * `(value: Bool) => {}`
-   */
-  onValueChange: PropTypes.func,
-  /**
-   * Set the size of the checkbox
-   */
-  size: PropTypes.oneOf(['M', 'L']),
-  value: PropTypes.bool,
-};

package/src/BaseCheckbox/BaseCheckbox.stories.mdx

@@ -1,107 +0,0 @@
-<!--- Button.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { BaseCheckbox } from './BaseCheckbox';
-
-<Meta title="Design System/Technical Components/BaseCheckbox" component={BaseCheckbox} />
-
-## Imports
-
-```js
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
-```
-
-# BaseCheckbox
-
-The `BaseCheckbox` component is the basis of the `Checkbox` component.
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [val, setValue] = useState(false);
-      return (
-        <BaseCheckbox
-          aria-label="Simple checkbox"
-          name="default"
-          onValueChange={(value) => setValue(value)}
-          value={val}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Indeterminate
-
-The `BaseCheckbox` can have an indeterminate state.
-
-<Canvas>
-  <Story name="indeterminate">
-    {() => {
-      const [checkedItems, setCheckedItems] = useState([true, false]);
-      const allChecked = checkedItems.every(Boolean);
-      const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
-      return (
-        <ul>
-          <li>
-            <BaseCheckbox
-              id="parent"
-              name="parent"
-              indeterminate={isIndeterminate}
-              onValueChange={(value) => setCheckedItems([value, value])}
-              value={allChecked}
-            />
-            <label htmlFor="parent">Parent</label>
-          </li>
-          <li>
-            <ul>
-              <li>
-                <BaseCheckbox
-                  id="child1"
-                  name="child1"
-                  onValueChange={(value) => setCheckedItems([value, checkedItems[1]])}
-                  value={checkedItems[0]}
-                />
-                <label htmlFor="child1">Child 1</label>
-              </li>
-              <li>
-                <BaseCheckbox
-                  id="child2"
-                  name="child2"
-                  onValueChange={(value) => setCheckedItems([checkedItems[0], value])}
-                  value={checkedItems[1]}
-                />
-                <label htmlFor="child2">Child 2</label>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Disabled
-
-The `BaseCheckbox` can be disabled.
-
-<Canvas>
-  <Story name="disabled">
-    {() => {
-      return (
-        <>
-          <BaseCheckbox name="disabled-unchecked" disabled aria-label="First checkbox" />
-          <BaseCheckbox name="disabled-indeterminate" disabled indeterminate aria-label="Second checkbox" />
-          <BaseCheckbox name="disabled-checked" disabled value={true} aria-label="Last checkbox" />
-        </>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={BaseCheckbox} />

package/src/BaseCheckbox/__tests__/BaseCheckbox.e2e.js

@@ -1,94 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('BaseCheckbox', () => {
-  test.describe('light 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-basecheckbox--base&viewMode=story');
-        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-basecheckbox--disabled&viewMode=story');
-        await injectAxe(page);
-
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('intermediate', () => {
-      test.beforeEach(async ({ page }) => {
-        // This is the URL of the Storybook Iframe
-        await page.goto(
-          '/iframe.html?id=design-system-technical-components-basecheckbox--indeterminate&viewMode=story',
-        );
-        await injectAxe(page);
-      });
-
-      test('triggers axe on the document', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      test('moves to the next element when pressing tab and select when pressing the spacebar', async ({
-        page,
-        browserName,
-      }) => {
-        test.skip(browserName === 'webkit', 'Still working on it');
-        await page.focus('text="Child 1"');
-        await page.keyboard.press('Tab');
-        await page.keyboard.press(' ');
-
-        const secondBox = await page.$('#child2');
-        if (secondBox) {
-          expect(await secondBox.isChecked()).toBe(true);
-        }
-      });
-
-      test('select the parent element when all child are selected', async ({ page, browserName }) => {
-        test.skip(browserName === 'webkit', 'Still working on it');
-        await page.focus('text="Child 1"');
-        await page.keyboard.press('Tab');
-        await page.keyboard.press(' ');
-
-        const secondBox = await page.$('#parent');
-        if (secondBox) {
-          expect(await secondBox.isChecked()).toBe(true);
-        }
-      });
-    });
-  });
-
-  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-basecheckbox--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-basecheckbox--disabled&viewMode=story&theme=dark',
-        );
-        await injectAxe(page);
-
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/BaseCheckbox/assets/checkmark-black.svg

@@ -1,6 +0,0 @@
-<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M8.55323 0.396973C8.63135 0.316355 8.76051 0.315811 8.83931 0.395768L9.86256 1.43407C9.93893 1.51157 9.93935 1.6359 9.86349 1.7139L4.06401 7.67724C3.9859 7.75755 3.85707 7.75805 3.77834 7.67834L0.13866 3.99333C0.0617798 3.91549 0.0617102 3.79032 0.138504 3.7124L1.16213 2.67372C1.24038 2.59432 1.36843 2.59422 1.4468 2.67348L3.92174 5.17647L8.55323 0.396973Z"
-    fill="#8E8EA9"
-  />
-</svg>

package/src/BaseCheckbox/assets/checkmark.svg

@@ -1,6 +0,0 @@
-<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M8.55323 0.396973C8.63135 0.316355 8.76051 0.315811 8.83931 0.395768L9.86256 1.43407C9.93893 1.51157 9.93935 1.6359 9.86349 1.7139L4.06401 7.67724C3.9859 7.75755 3.85707 7.75805 3.77834 7.67834L0.13866 3.99333C0.0617798 3.91549 0.0617102 3.79032 0.138504 3.7124L1.16213 2.67372C1.24038 2.59432 1.36843 2.59422 1.4468 2.67348L3.92174 5.17647L8.55323 0.396973Z"
-    fill="white"
-  />
-</svg>

package/src/BaseCheckbox/index.js

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

package/src/BaseCheckbox/utils.js

@@ -1,7 +0,0 @@
-export const getCheckboxSize = ({ size }) => {
-  if (size === 'M') {
-    return '18px';
-  }
-
-  return '20px';
-};

package/src/BaseLink/BaseLink.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-
-const A = styled.a`
-  cursor: pointer;
-`;
-
-export const BaseLink = React.forwardRef(({ href, rel, target, disabled, isExternal, ...props }, ref) => {
-  return (
-    <A
-      ref={ref}
-      target={isExternal ? '_blank' : target}
-      rel={isExternal ? rel : undefined}
-      href={disabled ? '#' : href}
-      disabled={disabled}
-      {...props}
-    />
-  );
-});
-
-BaseLink.displayName = 'BaseLink';
-
-BaseLink.defaultProps = {
-  disabled: false,
-  href: undefined,
-  isExternal: false,
-  rel: 'noreferrer noopener',
-  target: '_self',
-};
-
-BaseLink.propTypes = {
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  isExternal: PropTypes.bool,
-  rel: PropTypes.string,
-  target: PropTypes.string,
-};

package/src/BaseLink/BaseLink.stories.mdx

@@ -1,34 +0,0 @@
-<!--- BaseLink.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { BaseLink } from './BaseLink';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Technical Components/BaseLink" component={BaseLink} />
-
-# BaseLink
-
-BaseLink allow users to navigate to a different location. This is a very basic implementation of the native HTML anchor `<a />` element.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/BaseLink)
-
-## Imports
-
-```js
-import { BaseLink } from '@strapi/design-system/BaseLink';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    <BaseLink href="https://strapi.io" isExternal>
-      <Typography>Base link</Typography>
-    </BaseLink>
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={BaseLink} />

package/src/BaseLink/__tests__/BaseLink.e2e.js

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

package/src/BaseLink/__tests__/BaseLink.spec.js

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { BaseLink } from '../BaseLink';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-describe('BaseLink', () => {
-  it('snapshots the component', () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <BaseLink />
-      </ThemeProvider>,
-    );
-
-    expect(container.firstChild).toMatchInlineSnapshot(`
-      .c0 {
-        cursor: pointer;
-      }
-
-      <a
-        class="c0"
-        target="_self"
-      />
-    `);
-  });
-});

package/src/BaseLink/index.js

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

package/src/BaseRadio/BaseRadio.js

@@ -1,69 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { RadioContext } from './context';
-import { getRadioSize, getSelectedRadioSize, getSelectedRadioPosition } from './utils';
-
-const RadioInput = styled.input`
-  margin: 0;
-  padding: 0;
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  border: 1px solid ${({ theme }) => theme.colors.primary600};
-  border-radius: 50%;
-  height: ${getRadioSize};
-  width: ${getRadioSize};
-  -webkit-appearance: none;
-
-  &:after {
-    border-radius: 50%;
-    content: '';
-    position: relative;
-    z-index: 1;
-    display: block;
-    height: ${getSelectedRadioSize};
-    width: ${getSelectedRadioSize};
-    left: ${getSelectedRadioPosition};
-    top: ${getSelectedRadioPosition};
-  }
-
-  &:checked:after {
-    background: ${({ theme }) => theme.colors.primary600};
-  }
-
-  &:disabled {
-    border: 1px solid ${({ theme }) => theme.colors.carbon300};
-    background: ${({ theme }) => theme.colors.neutral200};
-  }
-`;
-
-export const BaseRadio = React.forwardRef(({ value, disabled, ...props }, ref) => {
-  const { onChange, selected, name, size } = useContext(RadioContext);
-  const isSelected = selected === value;
-
-  return (
-    <RadioInput
-      ref={ref}
-      type="radio"
-      name={name}
-      value={value}
-      tabIndex={isSelected ? 0 : -1}
-      aria-checked={isSelected}
-      checked={isSelected}
-      disabled={disabled}
-      size={size}
-      onChange={onChange}
-      {...props}
-    />
-  );
-});
-
-BaseRadio.displayName = 'Radio';
-
-BaseRadio.defaultProps = {
-  disabled: false,
-};
-
-BaseRadio.propTypes = {
-  disabled: PropTypes.bool,
-  value: PropTypes.string.isRequired,
-};

package/src/BaseRadio/BaseRadio.stories.mdx

@@ -1,110 +0,0 @@
-<!--- Radio.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
-import { BaseRadio } from './BaseRadio';
-import { RadioGroup } from './RadioGroup';
-import { Typography } from '../Typography';
-import { useTheme } from '../ThemeProvider';
-
-<Meta title="Design System/Technical Components/BaseRadio" component={BaseRadio} />
-
-## Imports
-
-```js
-import { BaseRadio } from '@strapi/design-system/BaseRadio';
-```
-
-# BaseRadio
-
-The `BaseRadio` component is the basis of the `Radio` component.
-
-## Usage
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const {
-        colors: { neutral800 },
-      } = useTheme();
-      const [selected, setSelected] = useState();
-      return (
-        <div>
-          <Typography variant="beta" textColor="neutral800" id="trophy-champions">
-            Make a choice
-          </Typography>
-          <RadioGroup
-            labelledBy="trophy-champions"
-            onChange={(e) => setSelected(e.target.value)}
-            value={selected}
-            name="prefered-meal"
-          >
-            <div>
-              <label style={{ color: neutral800 }} htmlFor="pizza">
-                Pizza
-              </label>
-              <BaseRadio value="pizza" id="pizza" />
-            </div>
-            <div>
-              <label style={{ color: neutral800 }} htmlFor="bagel">
-                Bagel
-              </label>
-              <BaseRadio value="bagel" id="bagel" />
-            </div>
-          </RadioGroup>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Disabled
-
-The BaseButton can be disabled.
-
-<Canvas>
-  <Story name="disabled">
-    {() => {
-      const {
-        colors: { neutral800 },
-      } = useTheme();
-      const [selected, setSelected] = useState();
-      return (
-        <div>
-          <Typography variant="beta" id="trophy-champions">
-            Trophy champion
-          </Typography>
-          <RadioGroup
-            labelledBy="trophy-champions"
-            onChange={(e) => setSelected(e.target.value)}
-            value={selected}
-            name="prefered-meal"
-          >
-            <div>
-              <label style={{ color: neutral800 }} htmlFor="first">
-                Mario
-              </label>
-              <BaseRadio value="first" id="first" />
-            </div>
-            <div>
-              <label style={{ color: neutral800 }} htmlFor="second">
-                Luigi
-              </label>
-              <BaseRadio value="second" id="second" disabled={true} />
-            </div>
-            <div>
-              <label style={{ color: neutral800 }} htmlFor="third">
-                Wario
-              </label>
-              <BaseRadio value="third" id="third" />
-            </div>
-          </RadioGroup>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={BaseRadio} />