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

package/src/Layout/HeaderLayout.js

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

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

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

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

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

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