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

package/src/Radio/Radio.stories.mdx

@@ -1,66 +0,0 @@
-<!--- Radio.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Radio, RadioGroup } from './';
-import { Typography } from '../Typography';
-
-<Meta title="Design System/Components/Radio" component={Radio} />
-
-# Radio
-
-Radio buttons allow users to choose a single value from a range of options.
-
-**Best practices**
-
-- When a user picks an option, the previous one is automatically deselected.
-- Radio buttons should be used when there is at least two options.
-- Label of the Radio button should be concise and straightforward.
-- Use the Checkbox component if the user could select one or several values.
-- Start all Radio button labels with a capital letter.
-- There is no need to include Radio buttons in a Select component when only a single value can be selected.
-- Radio buttons should be used sparingly in the interface.
-- Radio buttons should be used only when it is not obvious enough that a choice is required.
-- Radio buttons should not be used in Table components.
-- Use Switch or Toggle component to make binary choices.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Radio)
-
-## Imports
-
-```js
-import { Radio, RadioGroup } from '@strapi/design-system/Radio';
-```
-
-## Usage
-
-Radio buttons allow users to choose a single value from a range of at least two options.
-
-<Canvas>
-  <Story name="base">
-    {() => {
-      const [selected, setSelected] = useState();
-      return (
-        <div>
-          <Typography variant="beta" id="trophy-champions">
-            Make a choice
-          </Typography>
-          <RadioGroup
-            labelledBy="trophy-champions"
-            onChange={(e) => setSelected(e.target.value)}
-            value={selected}
-            name="meal"
-          >
-            <Radio value="pizza">Pizza</Radio>
-            <Radio value="bagel">Bagel</Radio>
-          </RadioGroup>
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Radio} />

package/src/Radio/__tests__/Radio.e2e.js

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

package/src/Radio/__tests__/Radio.spec.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { RadioGroup, Radio } from '../';
-import { ThemeProvider } from '../../ThemeProvider';
-import { lightTheme } from '../../themes';
-
-describe('Radio/RadioGroup', () => {
-  it('selects a Radio button when a value is passed in to RadioGroup', () => {
-    const onChangeMock = jest.fn();
-    const { getByRole } = render(
-      <ThemeProvider theme={lightTheme}>
-        <p id="food">Food choices</p>
-        <RadioGroup labelledBy="food" onChange={onChangeMock} value="pizza" name="meal">
-          <Radio value="pizza">Pizza</Radio>
-          <Radio value="bagel">Bagel</Radio>
-        </RadioGroup>
-      </ThemeProvider>,
-    );
-
-    expect(getByRole('radio', { name: 'Bagel' })).not.toBeChecked();
-    expect(getByRole('radio', { name: 'Pizza' })).toBeChecked();
-  });
-
-  it('keeps all radio buttons unselected when value passed into RadioGroup is empty', () => {
-    const onChangeMock = jest.fn();
-    const { getByRole } = render(
-      <ThemeProvider theme={lightTheme}>
-        <p id="food">Food choices</p>
-        <RadioGroup labelledBy="food" onChange={onChangeMock} value="" name="meal">
-          <Radio value="pizza">Pizza</Radio>
-          <Radio value="bagel">Bagel</Radio>
-        </RadioGroup>
-      </ThemeProvider>,
-    );
-
-    expect(getByRole('radio', { name: 'Bagel' })).not.toBeChecked();
-    expect(getByRole('radio', { name: 'Pizza' })).not.toBeChecked();
-  });
-
-  it('calls onChange prop when Radio button is clicked', () => {
-    const onChangeMock = jest.fn();
-    const { getByRole } = render(
-      <ThemeProvider theme={lightTheme}>
-        <p id="food">Food choices</p>
-        <RadioGroup labelledBy="food" onChange={onChangeMock} value="" name="meal">
-          <Radio value="pizza">Pizza</Radio>
-          <Radio value="bagel">Bagel</Radio>
-        </RadioGroup>
-      </ThemeProvider>,
-    );
-
-    fireEvent.click(getByRole('radio', { name: 'Pizza' }));
-
-    expect(onChangeMock.mock.calls[0][0].target.value).toBe('pizza');
-  });
-});

package/src/Radio/index.js

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

package/src/RawTable/RawCell.js

@@ -1,182 +0,0 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-
-import { Box } from '../Box';
-import { getFocusableNodes, getFocusableNodesWithKeyboardNav } from '../helpers/getFocusableNodes';
-import { KeyboardKeys } from '../helpers/keyboardKeys';
-
-import { useTable } from './RawTableContext';
-
-export const RawTh = (props) => <RawTd {...props} as="th" />;
-
-export const RawTd = ({ coords, as, ...props }) => {
-  const tdRef = useRef(null);
-  const { rowIndex, colIndex, setTableValues } = useTable();
-  const [isActive, setIsActive] = useState(false);
-
-  /** @type {import("react").KeyboardEventHandler<HTMLTableCellElement> } */
-  const handleKeyDown = (e) => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-
-    /**
-     * If the cell does not have focusable children or if it has focusable children
-     * without keyboard navigation, we should not run the handler.
-     */
-    if (
-      focusableNodes.length === 0 ||
-      (focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length === 0)
-    ) {
-      return;
-      /**
-       * This allows cells that **only** have buttons in them to still be
-       * navigable with the keyboard arrow keys (left / right) as if they were grid cells.
-       *
-       * If there are nextNodes (next child node) then we stop the table's keyboard navigation
-       * handlers from happening.
-       */
-    } else if (focusableNodes.length > 1 && !Boolean(focusableNodes.find((node) => node.tagName !== 'BUTTON'))) {
-      e.preventDefault();
-      const focussedButtonIndex = focusableNodes.findIndex((node) => node === document.activeElement);
-      if (e.key === KeyboardKeys.RIGHT) {
-        const nextNode = focusableNodes[focussedButtonIndex + 1];
-        if (nextNode) {
-          e.stopPropagation();
-          nextNode.focus();
-        }
-      } else if (e.key === KeyboardKeys.LEFT) {
-        const nextNode = focusableNodes[focussedButtonIndex - 1];
-        if (nextNode) {
-          e.stopPropagation();
-          nextNode.focus();
-        }
-      }
-      return;
-    }
-
-    if (e.key === KeyboardKeys.ENTER && !isActive) {
-      setIsActive(true);
-      /**
-       * Cells should be "escapeable" with the escape key or enter key
-       */
-    } else if ((e.key === KeyboardKeys.ESCAPE || e.key === KeyboardKeys.ENTER) && isActive) {
-      setIsActive(false);
-      tdRef.current.focus();
-    } else if (isActive) {
-      /**
-       * This stops the table navigation from working
-       */
-      e.stopPropagation();
-    }
-  };
-
-  const isFocused = rowIndex === coords.row - 1 && colIndex === coords.col - 1;
-
-  /**
-   * Handles tabindex of the rendered cell element
-   */
-  useLayoutEffect(() => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-
-    /**
-     * We should focus the cell if there are no focussable children inside
-     * If there is only one focusable child and it has it's own keyboard navigation
-     * Or if there is more than one focusable child unless those children
-     * are exclusively buttons.
-     */
-    if (
-      focusableNodes.length === 0 ||
-      (focusableNodes.length === 1 && getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0) ||
-      (focusableNodes.length > 1 && Boolean(focusableNodes.find((node) => node.tagName !== 'BUTTON')))
-    ) {
-      tdRef.current.setAttribute('tabIndex', !isActive && isFocused ? 0 : -1);
-
-      focusableNodes.forEach((node, index) => {
-        node.setAttribute('tabIndex', isActive ? 0 : -1);
-        /**
-         * When a cell is active we want to focus the
-         * first focusable element simulating a focus trap
-         */
-        if (isActive && index === 0) {
-          node.focus();
-        }
-      });
-    } else {
-      focusableNodes.forEach((node) => {
-        node.setAttribute('tabIndex', isFocused ? 0 : -1);
-      });
-    }
-  }, [isActive, isFocused]);
-
-  /**
-   * This handles the case where you click on a focusable
-   * node that has it's own keyboard nav (e.g. Input)
-   */
-  useLayoutEffect(() => {
-    const focusableNodes = getFocusableNodes(tdRef.current, true);
-
-    const handleFocusableNodeFocus = () => {
-      /**
-       * If there's 1 or more focusable children and at least one has keyboard navigation
-       * or the children are exclusively button elements the cell should be using the "active" system
-       */
-      if (
-        focusableNodes.length >= 1 &&
-        (getFocusableNodesWithKeyboardNav(focusableNodes).length !== 0 ||
-          !Boolean(focusableNodes.find((node) => node.tagName !== 'BUTTON')))
-      ) {
-        setIsActive(true);
-      }
-      /**
-       * This function is wrapped in `useCallback` so we can safely
-       * assume that the reference will not change
-       */
-      setTableValues({ rowIndex: coords.row - 1, colIndex: coords.col - 1 });
-    };
-
-    focusableNodes.forEach((node) => {
-      node.addEventListener('focus', handleFocusableNodeFocus);
-    });
-
-    return () => {
-      const focusableNodes = getFocusableNodes(tdRef.current, true);
-      focusableNodes.forEach((node) => {
-        node.removeEventListener('focus', handleFocusableNodeFocus);
-      });
-    };
-  }, []);
-
-  return <Box as={as ? as : 'td'} ref={tdRef} onKeyDown={handleKeyDown} {...props} />;
-};
-
-RawTh.defaultProps = {
-  coords: {},
-};
-
-RawTh.propTypes = {
-  ['aria-colindex']: PropTypes.number.isRequired,
-  children: PropTypes.node,
-  /**
-   * Position of the cell in the table
-   */
-  coords: PropTypes.shape({
-    col: PropTypes.number,
-    row: PropTypes.number,
-  }),
-};
-
-RawTd.defaultProps = {
-  coords: {},
-};
-
-RawTd.propTypes = {
-  ['aria-colindex']: PropTypes.number.isRequired,
-  as: PropTypes.oneOf(['td', 'th']),
-  children: PropTypes.node,
-  /**
-   * Position of the cell in the table
-   */
-  coords: PropTypes.shape({
-    col: PropTypes.number,
-    row: PropTypes.number,
-  }),
-};

package/src/RawTable/RawTable.js

@@ -1,123 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import { RawTableContext } from './RawTableContext';
-import { KeyboardKeys } from '../helpers/keyboardKeys';
-import { focusFocusable } from './focusFocusable';
-
-export const RawTable = ({ colCount, rowCount, jumpStep, initialCol, initialRow, ...props }) => {
-  const tableRef = useRef(null);
-  const mountedRef = useRef(false);
-  /**
-   * Rows will always have n+1 line because of the <tr><th></th></tr> elements
-   */
-  const [rowIndex, setRowIndex] = useState(initialRow);
-  const [colIndex, setColIndex] = useState(initialCol);
-
-  const setTableValues = useCallback(({ colIndex, rowIndex }) => {
-    setColIndex(colIndex);
-    setRowIndex(rowIndex);
-  }, []);
-
-  useEffect(() => {
-    if (mountedRef.current) {
-      focusFocusable(tableRef.current);
-    }
-
-    if (!mountedRef.current) {
-      mountedRef.current = true;
-    }
-  }, [colIndex, rowIndex]);
-
-  const handleKeyDown = (e) => {
-    switch (e.key) {
-      case KeyboardKeys.RIGHT: {
-        e.preventDefault();
-        setColIndex((prevColIndex) => (prevColIndex < colCount - 1 ? prevColIndex + 1 : prevColIndex));
-
-        break;
-      }
-
-      case KeyboardKeys.LEFT: {
-        e.preventDefault();
-        setColIndex((prevColIndex) => (prevColIndex > 0 ? prevColIndex - 1 : prevColIndex));
-
-        break;
-      }
-
-      case KeyboardKeys.UP: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => (prevRowIndex > 0 ? prevRowIndex - 1 : prevRowIndex));
-
-        break;
-      }
-
-      case KeyboardKeys.DOWN: {
-        e.preventDefault();
-        setRowIndex((prevRowIndex) => (prevRowIndex < rowCount - 1 ? prevRowIndex + 1 : prevRowIndex));
-
-        break;
-      }
-
-      case KeyboardKeys.HOME: {
-        e.preventDefault();
-        if (e.ctrlKey) {
-          setRowIndex(0);
-        }
-
-        setColIndex(0);
-
-        break;
-      }
-
-      case KeyboardKeys.END: {
-        e.preventDefault();
-        if (e.ctrlKey) {
-          setRowIndex(rowCount - 1);
-        }
-
-        setColIndex(colCount - 1);
-
-        break;
-      }
-
-      case KeyboardKeys.PAGE_DOWN: {
-        e.preventDefault();
-
-        setRowIndex((prevRowIndex) => (prevRowIndex + jumpStep < rowCount ? prevRowIndex + jumpStep : rowCount - 1));
-
-        break;
-      }
-
-      case KeyboardKeys.PAGE_UP: {
-        e.preventDefault();
-
-        setRowIndex((prevRowIndex) => (prevRowIndex - jumpStep > 0 ? prevRowIndex - jumpStep : 0));
-
-        break;
-      }
-
-      default:
-        break;
-    }
-  };
-
-  return (
-    <RawTableContext.Provider value={{ rowIndex, colIndex, setTableValues }}>
-      <table ref={tableRef} aria-rowcount={rowCount} aria-colcount={colCount} onKeyDown={handleKeyDown} {...props} />
-    </RawTableContext.Provider>
-  );
-};
-
-RawTable.defaultProps = {
-  jumpStep: 3,
-  initialCol: 0,
-  initialRow: 0,
-};
-
-RawTable.propTypes = {
-  colCount: PropTypes.number.isRequired,
-  initialCol: PropTypes.number,
-  initialRow: PropTypes.number,
-  jumpStep: PropTypes.number,
-  rowCount: PropTypes.number.isRequired,
-};