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

package/src/Radio/Radio.stories.mdx

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

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

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

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

package/src/RawTable/RawCell.js

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

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