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

package/src/Tabs/Tabs.js

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

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

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

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

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