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

package/src/Layout/HeaderLayout.js

@@ -0,0 +1,170 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Typography } from '../Typography';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { useElementOnScreen } from '../helpers/useElementOnScreen';
+import { useResizeObserver } from '../helpers/useResizeObserver';
+
+const useHeaderSize = () => {
+  const baseHeaderLayoutRef = useRef(null);
+  const [headerSize, setHeaderSize] = useState(null);
+
+  const [containerRef, isVisible] = useElementOnScreen({
+    root: null,
+    rootMargin: '0px',
+    threshold: 0,
+  });
+
+  useResizeObserver(containerRef, () => {
+    if (containerRef.current) {
+      setHeaderSize(containerRef.current.getBoundingClientRect());
+    }
+  });
+
+  useEffect(() => {
+    if (baseHeaderLayoutRef.current) {
+      setHeaderSize(baseHeaderLayoutRef.current.getBoundingClientRect());
+    }
+  }, [baseHeaderLayoutRef]);
+
+  return {
+    containerRef,
+    isVisible,
+    baseHeaderLayoutRef,
+    headerSize,
+  };
+};
+
+export const HeaderLayout = (props) => {
+  const { containerRef, isVisible, baseHeaderLayoutRef, headerSize } = useHeaderSize();
+
+  return (
+    <>
+      <div style={{ height: headerSize?.height }} ref={containerRef}>
+        {isVisible && <BaseHeaderLayout ref={baseHeaderLayoutRef} {...props} />}
+      </div>
+      {!isVisible && <BaseHeaderLayout {...props} sticky width={headerSize?.width} />}
+    </>
+  );
+};
+
+HeaderLayout.displayName = 'HeaderLayout';
+
+const StickyBox = styled(Box)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: ${(props) => props.width}px;
+  z-index: 4;
+  box-shadow: ${({ theme }) => theme.shadows.tableShadow};
+`;
+
+export const BaseHeaderLayout = React.forwardRef(
+  ({ navigationAction, primaryAction, secondaryAction, subtitle, title, sticky, width, ...props }, ref) => {
+    const isSubtitleString = typeof subtitle === 'string';
+
+    if (sticky) {
+      return (
+        <StickyBox
+          paddingLeft={6}
+          paddingRight={6}
+          paddingTop={3}
+          paddingBottom={3}
+          background="neutral0"
+          width={width}
+          data-strapi-header-sticky
+        >
+          <Flex justifyContent="space-between">
+            <Flex>
+              {navigationAction && <Box paddingRight={3}>{navigationAction}</Box>}
+              <Box>
+                <Typography variant="beta" as="h1" {...props}>
+                  {title}
+                </Typography>
+                {isSubtitleString ? (
+                  <Typography variant="pi" textColor="neutral600">
+                    {subtitle}
+                  </Typography>
+                ) : (
+                  subtitle
+                )}
+              </Box>
+              {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}
+            </Flex>
+            <Flex>{primaryAction ? <Box paddingLeft={2}>{primaryAction}</Box> : undefined}</Flex>
+          </Flex>
+        </StickyBox>
+      );
+    }
+
+    return (
+      <Box
+        ref={ref}
+        paddingLeft={10}
+        paddingRight={10}
+        paddingBottom={8}
+        paddingTop={navigationAction ? 6 : 8}
+        background="neutral100"
+        data-strapi-header
+      >
+        {navigationAction ? <Box paddingBottom={2}>{navigationAction}</Box> : null}
+        <Flex justifyContent="space-between">
+          <Flex>
+            <Typography as="h1" variant="alpha" {...props}>
+              {title}
+            </Typography>
+            {secondaryAction ? <Box paddingLeft={4}>{secondaryAction}</Box> : null}
+          </Flex>
+          {primaryAction}
+        </Flex>
+        {isSubtitleString ? (
+          <Typography variant="epsilon" textColor="neutral600" as="p">
+            {subtitle}
+          </Typography>
+        ) : (
+          subtitle
+        )}
+      </Box>
+    );
+  },
+);
+
+BaseHeaderLayout.displayName = 'BaseHeaderLayout';
+
+BaseHeaderLayout.defaultProps = {
+  navigationAction: undefined,
+  primaryAction: undefined,
+  secondaryAction: undefined,
+  subtitle: undefined,
+  sticky: false,
+  width: undefined,
+};
+
+BaseHeaderLayout.propTypes = {
+  navigationAction: PropTypes.node,
+  primaryAction: PropTypes.node,
+  secondaryAction: PropTypes.node,
+  sticky: PropTypes.bool,
+  // TODO V2: Remove the string fallback
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: PropTypes.string.isRequired,
+  width: PropTypes.number,
+};
+
+HeaderLayout.defaultProps = {
+  navigationAction: undefined,
+  primaryAction: undefined,
+  secondaryAction: undefined,
+  subtitle: undefined,
+};
+
+HeaderLayout.propTypes = {
+  navigationAction: PropTypes.node,
+  primaryAction: PropTypes.node,
+  secondaryAction: PropTypes.node,
+  // TODO V2: Remove the string fallback
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  title: PropTypes.string.isRequired,
+};

package/src/Layout/HeaderLayout.stories.mdx

@@ -0,0 +1,175 @@
+<!--- HeaderLayout.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import ArrowLeft from '@strapi/icons/ArrowLeft';
+import Pencil from '@strapi/icons/Pencil';
+import Plus from '@strapi/icons/Plus';
+import { BaseHeaderLayout, HeaderLayout } from './HeaderLayout';
+import { ModalLayout } from '../ModalLayout';
+import { Link } from '../Link';
+import { Breadcrumbs, Crumb } from '../Breadcrumbs';
+import { Button } from '../Button';
+import { Box } from '../Box';
+import { VisuallyHidden } from '../VisuallyHidden';
+
+<Meta title="Design System/Components/HeaderLayout" component={HeaderLayout} />
+
+# BaseHeaderLayout
+
+Headers can be composed of a main title, a description and buttons. They are placed at the very top of a page.
+
+**Best practices**
+
+- Always use a header on top of a page.
+- Always add a title in the header.
+- The main container should be placed right below the Header.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Layout)
+
+## Imports
+
+```js
+import { BaseHeaderLayout, HeaderLayout } from '@strapi/design-system/Layout';
+```
+
+## Usage
+
+=======
+
+Headers are placed at the very top of each page. Descriptions and buttons are optional.
+
+<Canvas>
+  <Story name="base">
+    <Box background="neutral100">
+      <BaseHeaderLayout
+        navigationAction={
+          <Link startIcon={<ArrowLeft />} to="/">
+            Go back
+          </Link>
+        }
+        primaryAction={<Button startIcon={<Plus />}>Add an entry</Button>}
+        secondaryAction={
+          <Button variant="tertiary" startIcon={<Pencil />}>
+            Edit
+          </Button>
+        }
+        title="Restaurants"
+        subtitle="36 entries found"
+        as="h2"
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### HeaderLayout without nav action
+
+<Canvas>
+  <Story name="base without nav action">
+    <Box background="neutral100">
+      <BaseHeaderLayout
+        primaryAction={<Button startIcon={<Plus />}>Add an entry</Button>}
+        secondaryAction={
+          <Button variant="tertiary" startIcon={<Pencil />}>
+            Edit
+          </Button>
+        }
+        title="Other CT"
+        subtitle="36 entries found"
+        as="h2"
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### HeaderLayout with custom subtitle
+
+<Canvas>
+  <Story name="base with custom subtitle">
+    <Box background="neutral100">
+      <BaseHeaderLayout
+        title="Media Library"
+        subtitle={
+          <Breadcrumbs label="folders">
+            <Crumb>Animals</Crumb>
+            <Crumb>Cats</Crumb>
+          </Breadcrumbs>
+        }
+        as="h2"
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### HeaderLayout sticky
+
+<Canvas>
+  <Story name="sticky">
+    <Box background="neutral100">
+      <BaseHeaderLayout
+        sticky
+        navigationAction={
+          <Link startIcon={<ArrowLeft />} to="/">
+            <VisuallyHidden>Go back</VisuallyHidden>
+          </Link>
+        }
+        primaryAction={<Button startIcon={<Plus />}>Add an entry</Button>}
+        secondaryAction={
+          <Button variant="tertiary" startIcon={<Pencil />}>
+            Edit
+          </Button>
+        }
+        title="Restaurants"
+        subtitle="36 entries found"
+        as="h2"
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### HeaderLayout
+
+This header is combined with scroll.
+
+<Canvas>
+  <Story name="combined w/ scroll" parameters={{ layout: 'fullscreen' }}>
+    {() => {
+      const [isVisible, setIsVisible] = useState(false);
+      return (
+        <Box background="neutral100" style={{ height: 2000 }}>
+          <HeaderLayout
+            navigationAction={
+              <Link startIcon={<ArrowLeft />} to="/">
+                Go back
+              </Link>
+            }
+            primaryAction={
+              <Button startIcon={<Plus />} onClick={() => setIsVisible(true)}>
+                Add an entry
+              </Button>
+            }
+            secondaryAction={
+              <Button variant="tertiary" startIcon={<Pencil />}>
+                Edit
+              </Button>
+            }
+            title="Restaurants"
+            subtitle="36 entries found"
+            as="h2"
+          />
+          {isVisible && (
+            <ModalLayout onClose={() => setIsVisible(false)} labelledBy="subtitle">
+              <button onClick={() => setIsVisible(false)}>Close me</button>
+              <h2 id="subtitle">Here we are</h2>
+            </ModalLayout>
+          )}
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={HeaderLayout} />

package/src/Layout/Layout.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '../Box';
+
+const GridContainer = styled(Box)`
+  display: grid;
+  grid-template-columns: ${({ hasSideNav }) => (hasSideNav ? `auto 1fr` : '1fr')};
+`;
+
+const OverflowingItem = styled(Box)`
+  overflow-x: hidden;
+`;
+
+export const Layout = ({ sideNav, children }) => {
+  return (
+    <GridContainer hasSideNav={Boolean(sideNav)}>
+      {sideNav}
+      <OverflowingItem paddingBottom={10}>{children}</OverflowingItem>
+    </GridContainer>
+  );
+};
+
+Layout.defaultProps = {
+  sideNav: undefined,
+};
+
+Layout.propTypes = {
+  children: PropTypes.node.isRequired,
+  sideNav: PropTypes.node,
+};

package/src/Layout/Layout.stories.mdx

@@ -0,0 +1,240 @@
+<!--- Layout.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Apps from '@strapi/icons/Apps';
+import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
+import Plus from '@strapi/icons/Plus';
+import Pencil from '@strapi/icons/Pencil';
+import Trash from '@strapi/icons/Trash';
+import { SubNav, SubNavHeader, SubNavSection, SubNavSections, SubNavLink, SubNavLinkSection } from '../SubNav';
+import { Layout } from './Layout';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { HeaderLayout } from './HeaderLayout';
+import { ActionLayout } from './ActionLayout';
+import { ContentLayout } from './ContentLayout';
+import { Flex } from '../Flex';
+import { Table, Thead, Tbody, Tr, Td, Th, TFooter } from '../Table';
+import { Typography } from '../Typography';
+import { BaseCheckbox } from '../BaseCheckbox';
+import { IconButton } from '../IconButton';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { Tag } from '../Tag';
+import { Avatar } from '../Avatar';
+
+<Meta title="Design System/Components/Layout" component={Layout} />
+
+# Layout
+
+This is the doc of the `Layout` component
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Layout)
+
+## Imports
+
+```js
+import { Layout } from '@strapi/design-system/Layout';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base" parameters={{ layout: 'fullscreen' }}>
+    {() => {
+      const links = [
+        {
+          id: 1,
+          label: 'Addresses',
+          icon: <ExclamationMarkCircle />,
+          to: '/address',
+        },
+        {
+          id: 2,
+          label: 'Categories',
+          to: '/category',
+        },
+        {
+          id: 3,
+          label: 'Cities',
+          icon: <Apps />,
+          to: '/city',
+          active: true,
+        },
+        {
+          id: 4,
+          label: 'Countries',
+          to: '/country',
+        },
+      ];
+      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 background="neutral100">
+          <Layout
+            sideNav={
+              <SubNav ariaLabel="Builder sub nav">
+                <SubNavHeader
+                  searchable
+                  value={''}
+                  onClear={() => {}}
+                  onChange={() => {}}
+                  label="Builder"
+                  searchLabel="Search..."
+                />
+                <SubNavSections>
+                  <SubNavSection label="Collection Type" collapsable badgeLabel={links.length.toString()}>
+                    {links.map((link) => (
+                      <SubNavLink to={link.to} active={link.active} key={link.id}>
+                        {link.label}
+                      </SubNavLink>
+                    ))}
+                  </SubNavSection>
+                  <SubNavSection label="Single Type" collapsable badgeLabel={links.length.toString()}>
+                    <SubNavLinkSection label="Default">
+                      {links.map((link) => (
+                        <SubNavLink to={link.to} key={link.id}>
+                          {link.label}
+                        </SubNavLink>
+                      ))}
+                    </SubNavLinkSection>
+                  </SubNavSection>
+                </SubNavSections>
+              </SubNav>
+            }
+          >
+            <>
+              <HeaderLayout
+                primaryAction={<Button startIcon={<Plus />}>Add an entry</Button>}
+                secondaryAction={
+                  <Button variant="tertiary" startIcon={<Pencil />}>
+                    Edit
+                  </Button>
+                }
+                title="Other CT"
+                subtitle="36 entries found"
+                as="h2"
+              />
+              <ActionLayout
+                startActions={
+                  <>
+                    {Array(20)
+                      .fill(null)
+                      .map((_, index) => (
+                        <Box paddingTop={2} key={index}>
+                          <Tag key={index} icon={<Plus aria-hidden={true} />}>
+                            Hello world {index}
+                          </Tag>
+                        </Box>
+                      ))}
+                  </>
+                }
+                endActions={
+                  <>
+                    <Button size="M" variant="tertiary">
+                      Settings
+                    </Button>
+                    <Button size="M" variant="tertiary">
+                      Settings
+                    </Button>
+                  </>
+                }
+              />
+              <ContentLayout>
+                <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>More</Th>
+                      <Th>More</Th>
+                      <Th>More</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>
+                          <Typography textColor="neutral800">{entry.description}</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{entry.description}</Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{entry.description}</Typography>
+                        </Td>
+                        <Td>
+                          <Flex>
+                            <IconButton onClick={() => console.log('edit')} label="Edit" icon={<Pencil />} />
+                            <Box paddingLeft={1}>
+                              <IconButton onClick={() => console.log('edit')} label="Delete" icon={<Trash />} />
+                            </Box>
+                          </Flex>
+                        </Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              </ContentLayout>
+            </>
+          </Layout>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Layout} />

package/src/Layout/TwoColsLayout.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { Grid, GridItem } from '../Grid';
+
+export const TwoColsLayout = ({ startCol, endCol }) => {
+  return (
+    <Grid gap={4}>
+      <GridItem col={9} s={12}>
+        <Box hasRadius background="neutral0" shadow="tableShadow">
+          {startCol}
+        </Box>
+      </GridItem>
+      <GridItem col={3} s={12}>
+        <Box hasRadius background="neutral0" shadow="tableShadow">
+          {endCol}
+        </Box>
+      </GridItem>
+    </Grid>
+  );
+};
+
+TwoColsLayout.propTypes = {
+  endCol: PropTypes.node.isRequired,
+  startCol: PropTypes.node.isRequired,
+};

package/src/Layout/TwoColsLayout.stories.mdx

@@ -0,0 +1,46 @@
+<!--- TwoColsLayout.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { TwoColsLayout } from './TwoColsLayout';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Components/TwoColsLayout" component={TwoColsLayout} />
+
+# TwoColsLayout
+
+`TwoColsLayout` creates a responsive 2 column grid.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/TwoColsLayout)
+
+## Imports
+
+```js
+import { TwoColsLayout } from '@strapi/design-system/Layout';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    <Box padding={8} background="neutral100">
+      <TwoColsLayout
+        startCol={
+          <Box padding={4}>
+            <Typography>Hello world</Typography>
+          </Box>
+        }
+        endCol={
+          <Box padding={4}>
+            <Typography>Hello world</Typography>
+          </Box>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={TwoColsLayout} />