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

package/src/Tabs/Tabs.js

@@ -0,0 +1,227 @@
+import React, { Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useTabs } from './TabsContext';
+import { Typography } from '../Typography';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+import { useTabsFocus } from './useTabsFocus';
+import { DefaultTabsRow, DefaultTabButton, DefaultTabBox, SimpleTabBox } from './components';
+
+const TabButton = styled.button`
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+
+export const Tabs = ({ children, ...props }) => {
+  const { id, selectedTabIndex, selectTabIndex, label, variant, onTabChange } = useTabs();
+  const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
+
+  const childrenArray = Children.toArray(children).map((node, index) =>
+    cloneElement(node, {
+      id: `${id}-${index}`,
+      index,
+      selectedTabIndex,
+      onTabClick: () => selectTabIndex(index),
+      variant,
+    }),
+  );
+
+  const handleKeyDown = (e) => {
+    const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
+
+    if (hasAllChildrenDisabled) {
+      return;
+    }
+
+    switch (e.key) {
+      case KeyboardKeys.RIGHT: {
+        const nextWantedIndex = selectedTabIndex + 1;
+        const findNextIndex = (ref) => {
+          const isDisabled = childrenArray[ref].props.disabled;
+
+          if (!isDisabled) {
+            return ref;
+          }
+
+          if (ref === childrenArray.length - 1) {
+            return findNextIndex(0);
+          }
+
+          return findNextIndex(ref + 1);
+        };
+
+        const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
+
+        selectTabIndex(nextIndex);
+
+        break;
+      }
+
+      case KeyboardKeys.LEFT: {
+        const nextWantedIndex = selectedTabIndex - 1;
+        const findNextIndex = (ref) => {
+          const isDisabled = childrenArray[ref].props.disabled;
+
+          if (!isDisabled) {
+            return ref;
+          }
+
+          if (ref === 0) {
+            return findNextIndex(childrenArray.length - 1);
+          }
+
+          return findNextIndex(ref - 1);
+        };
+        const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
+
+        selectTabIndex(nextIndex);
+
+        break;
+      }
+
+      case KeyboardKeys.HOME: {
+        const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
+
+        selectTabIndex(nextIndex);
+
+        break;
+      }
+
+      case KeyboardKeys.END: {
+        const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
+        const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
+
+        if (firstNonDisabledChildren) {
+          selectTabIndex(firstNonDisabledChildren.index);
+        }
+
+        break;
+      }
+
+      default:
+        break;
+    }
+  };
+
+  if (variant === 'simple') {
+    return (
+      <div ref={tabsRef} role="tablist" aria-label={label} onKeyDown={handleKeyDown} {...props}>
+        {childrenArray}
+      </div>
+    );
+  }
+
+  return (
+    <DefaultTabsRow
+      ref={tabsRef}
+      role="tablist"
+      alignItems="flex-end"
+      aria-label={label}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {childrenArray}
+    </DefaultTabsRow>
+  );
+};
+
+Tabs.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const Tab = ({ disabled, id, children, variant, hasError, index, selectedTabIndex, onTabClick, ...props }) => {
+  const tabId = `${id}-tab`;
+  const tabPanelId = `${id}-tabpanel`;
+  const selected = index === selectedTabIndex;
+
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+
+    onTabClick();
+  };
+
+  if (variant === 'simple') {
+    let textColor;
+
+    if (hasError) {
+      textColor = 'danger600';
+    } else if (selected) {
+      textColor = 'primary600';
+    } else if (disabled) {
+      textColor = 'neutral600';
+    } else {
+      textColor = 'neutral600';
+    }
+
+    return (
+      <TabButton
+        id={tabId}
+        role="tab"
+        aria-controls={selected ? tabPanelId : undefined}
+        tabIndex={selected ? 0 : -1}
+        aria-selected={selected}
+        type="button"
+        onClick={handleClick}
+        aria-disabled={disabled}
+        {...props}
+      >
+        <SimpleTabBox padding={4} selected={selected} hasError={hasError}>
+          <Typography variant="sigma" textColor={textColor}>
+            {children}
+          </Typography>
+        </SimpleTabBox>
+      </TabButton>
+    );
+  }
+
+  if (hasError) {
+    console.warn('The "hasError" prop is only available for the "simple" variant.');
+  }
+
+  const showRightBorder = selectedTabIndex - 1 === index;
+
+  return (
+    <DefaultTabButton
+      id={tabId}
+      role="tab"
+      type="button"
+      aria-controls={selected ? tabPanelId : undefined}
+      tabIndex={selected ? 0 : -1}
+      aria-selected={selected}
+      onClick={handleClick}
+      aria-disabled={disabled}
+      showRightBorder={showRightBorder}
+      {...props}
+    >
+      <DefaultTabBox padding={selected ? 4 : 3} background={selected ? 'neutral0' : 'neutral100'} selected={selected}>
+        <Typography fontWeight="bold" textColor={selected ? 'primary700' : 'neutral600'}>
+          {children}
+        </Typography>
+      </DefaultTabBox>
+    </DefaultTabButton>
+  );
+};
+
+Tab.defaultProps = {
+  disabled: false,
+  hasError: false,
+  id: undefined,
+  index: undefined,
+  onTabClick: undefined,
+  selectedTabIndex: undefined,
+  variant: undefined,
+};
+
+Tab.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  hasError: PropTypes.bool,
+  id: PropTypes.string,
+  index: PropTypes.number,
+  onTabClick: PropTypes.func,
+  selectedTabIndex: PropTypes.number,
+  variant: PropTypes.oneOf(['simple']),
+};

package/src/Tabs/Tabs.stories.mdx

@@ -0,0 +1,211 @@
+<!--- Tabs.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Tabs, Tab } from './Tabs';
+import { TabGroup } from './TabGroup';
+import { TabPanels, TabPanel } from './TabPanels';
+import { Box } from '../Box';
+
+<Meta title="Design System/Components/Tabs" component={Tabs} />
+
+# Tabs
+
+Tabs are a set of related views within a same page. They help classify better the different levels of information for a same topic.
+
+**Best practices**
+
+- Tabs label should be concise. One word or two maximum is preferable.
+- Tabs navigation should follow a logical order: from Tab 1 to Tab 2 and then to Tab 3.
+- Avoid using more than 5 tabs to keep it easily scannable and readable.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Tabs)
+
+## Imports
+
+```js
+import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
+```
+
+## Usage
+
+Tabs allow to classify related content in different views within a same page.
+
+### Default Tabs
+
+Default Tabs mostly used in forms.
+
+<Canvas>
+  <Story name="base">
+    <Box padding={8} background="primary100">
+      <TabGroup label="Some stuff for the label" id="tabs" onTabChange={(selected) => console.log(selected)}>
+        <Tabs>
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+        </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              First panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Second panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Third panel
+            </Box>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </Box>
+  </Story>
+</Canvas>
+
+### Simple Tabs
+
+Simple Tabs are used in modals.
+
+<Canvas>
+  <Story name="simple">
+    <Box padding={8} background="neutral0">
+      <TabGroup label="Some stuff for the label" id="tabs" variant="simple">
+        <Tabs>
+          <Tab>First</Tab>
+          <Tab hasError>Second</Tab>
+          <Tab>Third</Tab>
+        </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              First panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Second panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Third panel
+            </Box>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </Box>
+  </Story>
+</Canvas>
+
+### Disabled Tabs
+
+Disabled Tabs are used in modals.
+
+<Canvas>
+  <Story name="disabled">
+    <Box padding={8} background="neutral0">
+      <TabGroup label="Some stuff for the label" id="tabs" variant="simple">
+        <Tabs>
+          <Tab disabled>First</Tab>
+          <Tab>Second</Tab>
+          <Tab disabled>Third</Tab>
+          <Tab>Fourth</Tab>
+          <Tab disabled>Fifth</Tab>
+          <Tab>Sixth</Tab>
+          <Tab disabled>Seventh</Tab>
+        </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              First panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Second panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Third panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Fourth panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Fifth panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Sixth panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Seventh panel
+            </Box>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </Box>
+  </Story>
+</Canvas>
+
+### Selected Tab
+
+Chose which tab is selected
+
+<Canvas>
+  <Story name="selected">
+    <Box padding={8} background="neutral0">
+      <TabGroup label="Some stuff for the label" id="tabs" variant="simple" initialSelectedTabIndex={1}>
+        <Tabs>
+          <Tab>First</Tab>
+          <Tab>Second</Tab>
+          <Tab>Third</Tab>
+        </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              First panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Second panel
+            </Box>
+          </TabPanel>
+          <TabPanel>
+            <Box color="neutral800" padding={4} background="neutral0">
+              Third panel
+            </Box>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </Box>
+  </Story>
+</Canvas>
+
+## TabGroup Props
+
+<ArgsTable of={TabGroup} />
+
+## Tabs Props
+
+<ArgsTable of={Tabs} />
+
+## Tab Props
+
+<ArgsTable of={Tab} />
+
+## TabPanel Props
+
+<ArgsTable of={TabPanel} />

package/src/Tabs/TabsContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const TabsContext = createContext();
+
+export const useTabs = () => useContext(TabsContext);

package/src/Tabs/__tests__/Tabs.e2e.js

@@ -0,0 +1,253 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('Tabs', () => {
+  test.describe('light mode', () => {
+    test.describe('default variant', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-tabs--base&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('verifies that only the first panel is visible at the beginning', async ({ page }) => {
+        const isFirstPanelVisible = await page.isVisible('text="First panel"');
+        expect(isFirstPanelVisible).toBeTruthy();
+
+        const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+        expect(isSecondPanelVisible).toBeFalsy();
+
+        const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+        expect(isThirdPanelVisible).toBeFalsy();
+      });
+
+      test.describe('Click interactions', () => {
+        test('shows only the first panel when clicking on it', async ({ page }) => {
+          await page.click('text="Second"');
+          await page.click('text="First"');
+
+          const isFirstPanelVisible = await page.isVisible('text="First panel"');
+          expect(isFirstPanelVisible).toBeTruthy();
+
+          const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+          expect(isSecondPanelVisible).toBeFalsy();
+
+          const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+          expect(isThirdPanelVisible).toBeFalsy();
+        });
+
+        test('shows only the second panel when clicking on it', async ({ page }) => {
+          await page.click('text="Second"');
+
+          const isFirstPanelVisible = await page.isVisible('text="First panel"');
+          expect(isFirstPanelVisible).toBeFalsy();
+
+          const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+          expect(isSecondPanelVisible).toBeTruthy();
+
+          const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+          expect(isThirdPanelVisible).toBeFalsy();
+        });
+
+        test('shows only the third panel when clicking on it', async ({ page }) => {
+          await page.click('text="Third"');
+
+          const isFirstPanelVisible = await page.isVisible('text="First panel"');
+          expect(isFirstPanelVisible).toBeFalsy();
+
+          const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+          expect(isSecondPanelVisible).toBeFalsy();
+
+          const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+          expect(isThirdPanelVisible).toBeTruthy();
+        });
+      });
+
+      test.describe('Keyboard interactions', () => {
+        test('moves to the next tab when pressing ArrowRight', async ({ page }) => {
+          await page.waitForSelector('#tabs-0-tab');
+
+          await page.focus('#tabs-0-tab');
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-1-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-2-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-0-tab')).toBeFocused();
+        });
+
+        test('moves to the previous tab when pressing ArrowLeft', async ({ page }) => {
+          await page.waitForSelector('#tabs-0-tab');
+
+          await page.focus('#tabs-0-tab');
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-2-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-1-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-0-tab')).toBeFocused();
+        });
+
+        test('moves to the first tab when pressing Home', async ({ page }) => {
+          await page.waitForSelector('#tabs-0-tab');
+
+          await page.focus('#tabs-0-tab');
+          await page.keyboard.press('ArrowLeft');
+          await page.keyboard.press('Home');
+
+          await expect(page.locator('#tabs-0-tab')).toBeFocused();
+        });
+
+        test('moves to the last tab when pressing End', async ({ page }) => {
+          await page.waitForSelector('#tabs-0-tab');
+
+          await page.focus('#tabs-0-tab');
+          await page.keyboard.press('End');
+
+          await expect(page.locator('#tabs-2-tab')).toBeFocused();
+        });
+      });
+    });
+
+    test.describe('simple variant', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-tabs--simple&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('Disabled tabs', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-tabs--disabled&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('verifies that only the first not visible panel is visible at the beginning', async ({ page }) => {
+        const isFirstPanelVisible = await page.isVisible('text="First panel"');
+        expect(isFirstPanelVisible).toBeFalsy();
+
+        const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+        expect(isSecondPanelVisible).toBeTruthy();
+
+        const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+        expect(isThirdPanelVisible).toBeFalsy();
+
+        const isFourthPanelVisible = await page.isVisible('text="Fourth panel"');
+        expect(isFourthPanelVisible).toBeFalsy();
+
+        const isFifthPanelVisible = await page.isVisible('text="Fifth panel"');
+        expect(isFifthPanelVisible).toBeFalsy();
+      });
+
+      test.describe('Keyboard interactions', () => {
+        test('moves to the next tab when pressing ArrowRight', async ({ page }) => {
+          await page.waitForSelector('#tabs-1-tab');
+
+          await page.focus('#tabs-1-tab');
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-3-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-5-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowRight');
+          await expect(page.locator('#tabs-1-tab')).toBeFocused();
+        });
+
+        test('moves to the previous tab when pressing ArrowLeft', async ({ page }) => {
+          await page.waitForSelector('#tabs-1-tab');
+
+          await page.focus('#tabs-1-tab');
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-5-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-3-tab')).toBeFocused();
+
+          await page.keyboard.press('ArrowLeft');
+          await expect(page.locator('#tabs-1-tab')).toBeFocused();
+        });
+
+        test('moves to the first tab when pressing Home', async ({ page }) => {
+          await page.waitForSelector('#tabs-1-tab');
+
+          await page.focus('#tabs-1-tab');
+          await page.keyboard.press('ArrowLeft');
+          await page.keyboard.press('Home');
+
+          await expect(page.locator('#tabs-1-tab')).toBeFocused();
+        });
+
+        test('moves to the last tab when pressing End', async ({ page }) => {
+          await page.waitForSelector('#tabs-1-tab');
+
+          await page.focus('#tabs-1-tab');
+          await page.keyboard.press('End');
+
+          await expect(page.locator('#tabs-5-tab')).toBeFocused();
+        });
+      });
+    });
+
+    test.describe('Initial selected tabs', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-tabs--selected&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('verifies that only the first not visible panel is visible at the beginning', async ({ page }) => {
+        const isFirstPanelVisible = await page.isVisible('text="First panel"');
+        expect(isFirstPanelVisible).toBeFalsy();
+
+        const isSecondPanelVisible = await page.isVisible('text="Second panel"');
+        expect(isSecondPanelVisible).toBeTruthy();
+
+        const isThirdPanelVisible = await page.isVisible('text="Third panel"');
+        expect(isThirdPanelVisible).toBeFalsy();
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('default tabs A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-tabs--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('simple tabs A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-tabs--simple&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('disabled tabs A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-tabs--disabled&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});