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

package/src/Table/Table.stories.mdx

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

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

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

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

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

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

package/src/Tabs/TabGroup.js

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

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