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

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

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

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

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

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

package/src/BaseCheckbox/utils.js

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

package/src/BaseLink/BaseLink.js

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

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

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

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

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

package/src/BaseRadio/BaseRadio.js

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

@@ -0,0 +1,110 @@
+<!--- 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} />

package/src/BaseRadio/RadioGroup.js

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

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

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

package/src/BaseRadio/index.js

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

package/src/BaseRadio/utils.js

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