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

package/src/Table/Table.stories.mdx

@@ -0,0 +1,330 @@
+<!--- Table.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Pencil from '@strapi/icons/Pencil';
+import Trash from '@strapi/icons/Trash';
+import CarretDown from '@strapi/icons/CarretDown';
+import Plus from '@strapi/icons/Plus';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { BaseCheckbox } from '../BaseCheckbox';
+import { Table } from './Table';
+import { Thead } from './Thead';
+import { Tbody } from './Tbody';
+import { Tr } from './Tr';
+import { Td, Th } from './Cell';
+import { Typography } from '../Typography';
+import { Avatar } from '../Avatar';
+import { IconButton } from '../IconButton';
+import { TFooter } from './TFooter';
+
+<Meta title="Design System/Components/Table" component={Table} />
+
+# Table
+
+Tables are used to gather and display similar types of data together. They are composed of a header, rows, and columns. Several type of data can be included within tables such as: plain text, Select, Avatars, Icon Buttons, ...
+
+**Best practices**
+
+- If there are any, Icon Buttons should be placed at the very right of a row.
+- Tables should be placed in a page’s main content area.
+- Column titles use a all caps style.
+- Narrowing a column of data is not possible.
+- Some columns can be sorted by clicking on their label.
+- If content is truncated, a tooltip should be available at hover to display the full text.
+- Checkboxes (i.e. a bulk action) are optional.
+- If the Table is empty, make sure to use the EmptyStateLayout component to fill it.
+- Tables can be associated with a Search bar and/or a filter button.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Table)
+
+## Imports
+
+```js
+import { Table, Thead, Tbody, Tr, Td, Th } from '@strapi/design-system/Table';
+```
+
+## Usage
+
+Tables are used to gather and display similar types of data together. In the Content section, a reorganization of the columns is possible. Moreover, Columns can be sorted.
+
+### Default Table
+
+The default Table.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const ROW_COUNT = 6;
+      const COL_COUNT = 10;
+      const entry = {
+        cover: 'https://avatars.githubusercontent.com/u/3874873?v=4',
+        description: 'Chez Léon is a human sized Parisian',
+        category: 'French cuisine',
+        contact: 'Leon Lafrite',
+      };
+      const entries = [];
+      for (let i = 0; i < 5; i++) {
+        entries.push({ ...entry, id: i });
+      }
+      return (
+        <Box padding={8} background="neutral100">
+          <Table
+            colCount={COL_COUNT}
+            rowCount={ROW_COUNT}
+            footer={<TFooter icon={<Plus />}>Add another field to this collection type</TFooter>}
+          >
+            <Thead>
+              <Tr>
+                <Th>
+                  <BaseCheckbox aria-label="Select all entries" />
+                </Th>
+                <Th>
+                  <Typography variant="sigma">ID</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Cover</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Description</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Categories</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Contact</Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>Actions</VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {entries.map((entry) => (
+                <Tr key={entry.id}>
+                  <Td>
+                    <BaseCheckbox aria-label={`Select ${entry.contact}`} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.id}</Typography>
+                  </Td>
+                  <Td>
+                    <Avatar src={entry.cover} alt={entry.contact} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.description}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.category}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.contact}</Typography>
+                  </Td>
+                  <Td>
+                    <Flex>
+                      <IconButton onClick={() => console.log('edit')} label="Edit" noBorder icon={<Pencil />} />
+                      <Box paddingLeft={1}>
+                        <IconButton onClick={() => console.log('delete')} label="Delete" noBorder icon={<Trash />} />
+                      </Box>
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Default Table without footer
+
+The default Table.
+
+<Canvas>
+  <Story name="base without footer">
+    {() => {
+      const ROW_COUNT = 6;
+      const COL_COUNT = 10;
+      const entry = {
+        cover: 'https://avatars.githubusercontent.com/u/3874873?v=4',
+        description: 'Chez Léon is a human sized Parisian',
+        category: 'French cuisine',
+        contact: 'Leon Lafrite',
+      };
+      const entries = [];
+      for (let i = 0; i < 5; i++) {
+        entries.push({ ...entry, id: i });
+      }
+      return (
+        <Box padding={8} background="neutral100">
+          <Table colCount={COL_COUNT} rowCount={ROW_COUNT}>
+            <Thead>
+              <Tr>
+                <Th>
+                  <BaseCheckbox aria-label="Select all entries" />
+                </Th>
+                <Th>
+                  <Typography variant="sigma">ID</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Cover</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Description</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Categories</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Contact</Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>Actions</VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {entries.map((entry) => (
+                <Tr key={entry.id}>
+                  <Td>
+                    <BaseCheckbox aria-label={`Select ${entry.contact}`} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.id}</Typography>
+                  </Td>
+                  <Td>
+                    <Avatar src={entry.cover} alt={entry.contact} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.description}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.category}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.contact}</Typography>
+                  </Td>
+                  <Td>
+                    <Flex>
+                      <IconButton onClick={() => console.log('edit')} label="Edit" noBorder icon={<Pencil />} />
+                      <Box paddingLeft={1}>
+                        <IconButton onClick={() => console.log('delete')} label="Delete" noBorder icon={<Trash />} />
+                      </Box>
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Table with actions
+
+Table with actions.
+
+<Canvas>
+  <Story name="with th actions">
+    {() => {
+      const ROW_COUNT = 6;
+      const COL_COUNT = 10;
+      const entry = {
+        cover: 'https://avatars.githubusercontent.com/u/3874873?v=4',
+        description: 'Chez Léon is a human sized Parisian',
+        category: 'French cuisine',
+        contact: 'Leon Lafrite',
+      };
+      const entries = [];
+      for (let i = 0; i < 5; i++) {
+        entries.push({ ...entry, id: i });
+      }
+      return (
+        <Box padding={8} background="neutral100">
+          <Table
+            colCount={COL_COUNT}
+            rowCount={ROW_COUNT}
+            footer={<TFooter icon={<Plus />}>Add another field to this collection type</TFooter>}
+          >
+            <Thead>
+              <Tr>
+                <Th>
+                  <BaseCheckbox aria-label="Select all entries" />
+                </Th>
+                <Th action={<IconButton label="Sort on ID" icon={<CarretDown />} noBorder />}>
+                  <Typography variant="sigma">ID</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Cover</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Description</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Categories</Typography>
+                </Th>
+                <Th>
+                  <Typography variant="sigma">Contact</Typography>
+                </Th>
+                <Th>
+                  <VisuallyHidden>Actions</VisuallyHidden>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {entries.map((entry) => (
+                <Tr key={entry.id}>
+                  <Td>
+                    <BaseCheckbox aria-label={`Select ${entry.contact}`} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.id}</Typography>
+                  </Td>
+                  <Td>
+                    <Avatar src={entry.cover} alt={entry.contact} />
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.description}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.category}</Typography>
+                  </Td>
+                  <Td>
+                    <Typography textColor="neutral800">{entry.contact}</Typography>
+                  </Td>
+                  <Td>
+                    <Flex>
+                      <IconButton onClick={() => console.log('edit')} label="Edit" noBorder icon={<Pencil />} />
+                      <Box paddingLeft={1}>
+                        <IconButton onClick={() => console.log('delete')} label="Delete" noBorder icon={<Trash />} />
+                      </Box>
+                    </Flex>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Table Props
+
+The Table component wraps all its children in the (Box)[https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base] component, so you can pass all Box props to change its style.
+
+<ArgsTable of={Table} />
+
+## Th Props
+
+<ArgsTable of={Th} />
+
+## TFooter Props
+
+<ArgsTable of={TFooter} />

package/src/Table/Tbody.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import { RawTbody } from '../RawTable/RawTbody';
+
+const TbodyWrapper = styled(RawTbody)`
+  & tr:last-of-type {
+    border-bottom: none;
+  }
+`;
+
+export const Tbody = (props) => {
+  return <TbodyWrapper {...props} />;
+};

package/src/Table/Thead.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+import { RawThead } from '../RawTable/RawThead';
+
+const TheadWrapper = styled(RawThead)`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+export const Thead = (props) => {
+  return <TheadWrapper {...props} />;
+};

package/src/Table/Tr.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { RawTr } from '../RawTable/RawTr';
+
+const TrWrapper = styled(RawTr)`
+  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
+
+  & td,
+  & th {
+    padding: ${({ theme }) => theme.spaces[4]};
+  }
+
+  & td:first-of-type,
+  & th:first-of-type {
+    padding: 0 ${({ theme }) => theme.spaces[1]};
+  }
+
+  // Resetting padding values and fixing a height
+  th {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: ${56 / 16}rem;
+  }
+`;
+
+export const Tr = (props) => {
+  return <TrWrapper {...props} />;
+};

package/src/Table/__tests__/Table.e2e.js

@@ -0,0 +1,41 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Table', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-table--base&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('with actions', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-table--with-th-actions&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-table--base&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('with actions', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-table--with-th-actions&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+});

package/src/Table/index.js

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './Tbody';
+export * from './Thead';
+export * from './Tr';
+export * from './Cell';
+export * from './TFooter';

package/src/Tabs/TabGroup.js

@@ -0,0 +1,46 @@
+import React, { forwardRef, Children, useState, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { TabsContext } from './TabsContext';
+import { useId } from '../helpers/useId';
+
+export const TabGroup = forwardRef(({ id, initialSelectedTabIndex, label, onTabChange, variant, ...props }, ref) => {
+  const tabsId = useId('tabgroup', id);
+  const Tabs = Children.toArray(props.children).find((node) => node.type.displayName === 'Tabs');
+  let firstSelectedTab = initialSelectedTabIndex || 0;
+
+  if (Tabs && initialSelectedTabIndex === undefined) {
+    firstSelectedTab = Tabs.props.children.findIndex((node) => !node.props.disabled);
+  }
+
+  const [selectedTabIndex, setSelectedTabIndex] = useState(firstSelectedTab === -1 ? 0 : firstSelectedTab);
+
+  useImperativeHandle(ref, () => ({
+    _handlers: { setSelectedTabIndex },
+  }));
+
+  return (
+    <TabsContext.Provider
+      value={{ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant, onTabChange }}
+    >
+      <div {...props} />
+    </TabsContext.Provider>
+  );
+});
+
+TabGroup.displayName = 'TabGroup';
+
+TabGroup.defaultProps = {
+  id: undefined,
+  initialSelectedTabIndex: undefined,
+  onTabChange: () => {},
+  variant: undefined,
+};
+
+TabGroup.propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string,
+  initialSelectedTabIndex: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  onTabChange: PropTypes.func,
+  variant: PropTypes.oneOf(['simple']),
+};

package/src/Tabs/TabPanels.js

@@ -0,0 +1,32 @@
+import React, { Children, cloneElement } from 'react';
+import PropTypes from 'prop-types';
+import { useTabs } from './TabsContext';
+
+export const TabPanels = ({ children, ...props }) => {
+  const { id, selectedTabIndex } = useTabs();
+
+  const childrenArray = Children.toArray(children)
+    .map((node, index) => cloneElement(node, { id: `${id}-${index}` }))
+    .filter((_, index) => index === selectedTabIndex);
+
+  return <div {...props}>{childrenArray}</div>;
+};
+
+TabPanels.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const TabPanel = ({ id, ...props }) => {
+  const tabId = `${id}-tab`;
+  const tabPanelId = `${id}-tabpanel`;
+
+  return <div id={tabPanelId} role="tabpanel" tabIndex={0} aria-labelledby={tabId} {...props} />;
+};
+
+TabPanel.defaultProps = {
+  id: undefined,
+};
+
+TabPanel.propTypes = {
+  id: PropTypes.string,
+};