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

package/src/SubNav/SubNav.stories.mdx

@@ -0,0 +1,234 @@
+<!--- SubNav.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Apps from '@strapi/icons/Apps';
+import Plus from '@strapi/icons/Plus';
+import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
+import { SubNav } from './SubNav';
+import { SubNavHeader } from './SubNavHeader';
+import { SubNavSection } from './SubNavSection';
+import { SubNavSections } from './SubNavSections';
+import { SubNavLink } from './SubNavLink';
+import { SubNavLinkSection } from './SubNavLinkSection';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { TextButton } from '../TextButton';
+
+<Meta title="Design System/Components/SubNav" component={SubNav} />
+
+# SubNav
+
+The Sub Navigation is available and displayed on predefined sections of the admin panel to access advanced options (i.e. Content Manager, Content-types Builder and Settings). Thanks to it the users can easily navigation from an entry or a page to another. The Sub Navigation cannot be collapsed.
+
+**Best practices**
+
+- It is not possible to have more than 2 navigation bars next to each others.
+- Each page has its own icon taken from the iconography library.
+- Do not use icons for headers.
+- Use sentence case for page names and all caps for header labels.
+- Each plugin should have its own new category and its own header.
+
+## Usage
+
+The Sub Navigation cannot be collapsed. A notification system can appear in the Sub Navigation, especially in the Settings section for the Application page.
+
+A Text Button component can be found at the bottom of a pages gathering in the Sub Navigation.
+
+## Hierarchy
+
+Related pages are gathered under specific headers within the Sub Navigation. These headers are helpful to understand the section hierarchy. Moreover, each page gets its very own icon to make it distinctive.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/SubNav)
+
+## Imports
+
+```js
+import {
+  SubNav,
+  SubNavHeader,
+  SubNavSection,
+  SubNavSections,
+  SubNavLink,
+  SubNavLinkSection,
+} from '@strapi/design-system/SubNav';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [search, setSearch] = useState('');
+      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',
+        },
+      ];
+      return (
+        <Flex>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Builder sub nav">
+              <SubNavHeader
+                searchable
+                value={search}
+                onClear={() => setSearch('')}
+                onChange={(e) => setSearch(e.target.value)}
+                label="Content-Type 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>
+                <Box paddingLeft={7} paddingBottom={3}>
+                  <TextButton startIcon={<Plus />}>Click on me</TextButton>
+                </Box>
+                <SubNavSection label="Single Type" collapsable badgeLabel={links.length.toString()}>
+                  <SubNavLinkSection label="Default">
+                    {links.map((link) => (
+                      <SubNavLink to={link.to} isSubSectionChild key={link.id}>
+                        {link.label}
+                      </SubNavLink>
+                    ))}
+                  </SubNavLinkSection>
+                </SubNavSection>
+                <Box paddingLeft={7}>
+                  <TextButton startIcon={<Plus />}>Click on me</TextButton>
+                </Box>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Settings sub nav">
+              <SubNavHeader label="Settings" />
+              <SubNavSections>
+                <SubNavLink to="/blabla" withBullet icon={<Apps />} className="active">
+                  Application
+                </SubNavLink>
+                <SubNavSection label="Global Settings">
+                  {links.map(
+                    (link) =>
+                      link.icon && (
+                        <SubNavLink to={link.to} active={link.active} icon={link.icon} key={link.id}>
+                          {link.label}
+                        </SubNavLink>
+                      ),
+                  )}
+                </SubNavSection>
+                <SubNavSection label="Permissions">
+                  {links.map(
+                    (link) =>
+                      link.icon && (
+                        <SubNavLink to={link.to} icon={link.icon} key={link.id}>
+                          {link.label}
+                        </SubNavLink>
+                      ),
+                  )}
+                </SubNavSection>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+          <Box padding={10} style={{ height: '100vh' }} background="neutral200">
+            <SubNav ariaLabel="Mixed sub nav">
+              <SubNavHeader label="Mixed" />
+              <SubNavSections>
+                <SubNavLink to="/blabla" withBullet icon={<Apps />}>
+                  Application
+                </SubNavLink>
+                <SubNavSection label="Global Settings">
+                  <SubNavLinkSection label="Sub section">
+                    {links.map((link) => (
+                      <SubNavLink to={link.to} active={link.active} icon={link.icon} isSubSectionChild key={link.id}>
+                        {link.label}
+                      </SubNavLink>
+                    ))}
+                  </SubNavLinkSection>
+                </SubNavSection>
+                <SubNavSection label="Permissions">
+                  {links.map((link) => (
+                    <SubNavLink to={link.to} icon={link.icon} key={link.id}>
+                      {link.label}
+                    </SubNavLink>
+                  ))}
+                </SubNavSection>
+              </SubNavSections>
+            </SubNav>
+          </Box>
+        </Flex>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Usage with other routing libraries
+
+To use the Strapi design system SubNavLink component with a routing library (e.g. react-router-dom), you'll need to pass the react-router-dom `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
+You'll now be able to pass all `NavLink` props.
+
+```jsx
+import { SubNavLink } from '@strapi/design-system/SubNavLink';
+import { NavLink } from 'react-router-dom';
+
+<SubNavLink as={NavLink} to="/home">
+  Home
+</SubNavLink>;
+```
+
+#### (⚠️ Only for Strapi Design System v1.0.0) NextJS usage
+
+For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
+
+```jsx
+import { SubNavLink } from '@strapi/design-system/SubNavLink';
+import NextLink from 'next/link';
+
+<NextLink href="/home" passHref>
+  <SubNavLink>Home</SubNavLink>
+</NextLink>;
+```
+
+## SubNav Props
+
+<ArgsTable of={SubNav} />
+
+## SubNavHeader Props
+
+<ArgsTable of={SubNavHeader} />
+
+## SubNavSection Props
+
+<ArgsTable of={SubNavSection} />
+
+## SubNavLinkSection Props
+
+<ArgsTable of={SubNavLinkSection} />
+
+## SubNavLink Props
+
+<ArgsTable of={SubNavLink} />

package/src/SubNav/SubNavHeader.js

@@ -0,0 +1,122 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Search from '@strapi/icons/Search';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
+import { IconButton } from '../IconButton';
+import { Box } from '../Box';
+import { Divider } from '../Divider';
+import { Searchbar, SearchForm } from '../Searchbar';
+import { useId } from '../helpers/useId';
+import { usePrevious } from '../helpers/usePrevious';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+
+const CustomDivider = styled(Divider)`
+  width: ${24 / 16}rem;
+  background-color: ${({ theme }) => theme.colors.neutral200};
+`;
+
+export const SubNavHeader = ({ as, label, searchLabel, searchable, onChange, value, onClear, onSubmit, id }) => {
+  const [isSearchOpen, setSearchOpen] = useState(false);
+  const previousSearchOpenValue = usePrevious(isSearchOpen);
+  const clearButtonId = useId('subnav-searchbar-clear', id);
+  const searchRef = useRef();
+  const searchButtonRef = useRef();
+
+  useEffect(() => {
+    if (isSearchOpen && searchRef.current) {
+      searchRef.current.focus();
+    }
+    if (previousSearchOpenValue && !isSearchOpen && searchButtonRef.current) {
+      searchButtonRef.current.focus();
+    }
+  }, [isSearchOpen]);
+
+  const toggleSearch = () => {
+    setSearchOpen((isOpen) => !isOpen);
+  };
+
+  const handleClear = (e) => {
+    onClear(e);
+    searchRef.current.focus();
+  };
+
+  const handleBlur = (e) => {
+    if (e.relatedTarget?.id !== clearButtonId) {
+      setSearchOpen(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === KeyboardKeys.ESCAPE) {
+      setSearchOpen(false);
+    }
+  };
+
+  if (isSearchOpen) {
+    return (
+      <Box paddingLeft={4} paddingTop={5} paddingBottom={2} paddingRight={4}>
+        <SearchForm>
+          <Searchbar
+            name="searchbar"
+            value={value}
+            onChange={onChange}
+            placeholder="e.g: strapi-plugin-abcd"
+            onKeyDown={handleKeyDown}
+            ref={searchRef}
+            onBlur={handleBlur}
+            onClear={handleClear}
+            onSubmit={onSubmit}
+            clearLabel="Clear"
+            size="S"
+          >
+            {searchLabel}
+          </Searchbar>
+        </SearchForm>
+        <Box paddingLeft={2} paddingTop={4}>
+          <CustomDivider />
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box paddingLeft={6} paddingTop={6} paddingBottom={2} paddingRight={4}>
+      <Flex justifyContent="space-between" alignItems="flex-start">
+        <Typography variant="beta" as={as}>
+          {label}
+        </Typography>
+        {searchable && (
+          <IconButton ref={searchButtonRef} onClick={toggleSearch} label={searchLabel} icon={<Search />} />
+        )}
+      </Flex>
+      <Box paddingTop={4}>
+        <CustomDivider />
+      </Box>
+    </Box>
+  );
+};
+
+SubNavHeader.defaultProps = {
+  as: 'h2',
+  searchable: false,
+  onChange: () => {},
+  onClear: () => {},
+  onSubmit: () => {},
+  value: '',
+  searchLabel: '',
+  id: undefined,
+};
+
+SubNavHeader.propTypes = {
+  as: PropTypes.string,
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onClear: PropTypes.func,
+  onSubmit: PropTypes.func,
+  searchLabel: PropTypes.string,
+  searchable: PropTypes.bool,
+  value: PropTypes.string,
+};

package/src/SubNav/SubNavLink.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Dot from '@strapi/icons/Dot';
+import { NavLink } from 'react-router-dom';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+
+const SubNavLinkWrapper = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  color: ${({ theme }) => theme.colors.neutral800};
+  svg > * {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+
+  &.active {
+    ${({ theme }) => {
+      return `
+      background-color: ${theme.colors.primary100};
+      border-right: 2px solid ${theme.colors.primary600};
+      svg > * {
+        fill: ${theme.colors.primary700};
+      }
+      ${Typography} {
+        color: ${theme.colors.primary700};
+        font-weight: 500;
+      }
+      `;
+    }}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const CustomBullet = styled(Dot)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
+  }
+`;
+const IconWrapper = styled.div`
+  svg {
+    height: ${12 / 16}rem;
+    width: ${12 / 16}rem;
+  }
+`;
+
+export const SubNavLink = ({ children, icon, withBullet, isSubSectionChild, ...props }) => {
+  return (
+    <SubNavLinkWrapper
+      as={NavLink}
+      icon={icon}
+      background="neutral100"
+      paddingLeft={isSubSectionChild ? 9 : 7}
+      paddingBottom={2}
+      paddingTop={2}
+      {...props}
+    >
+      <Flex>
+        {icon ? <IconWrapper>{icon}</IconWrapper> : <CustomBullet />}
+        <Box paddingLeft={2}>
+          <Typography as="span">{children}</Typography>
+        </Box>
+      </Flex>
+      {withBullet && (
+        <Box as={Flex} paddingRight={4}>
+          <CustomBullet $active={true} />
+        </Box>
+      )}
+    </SubNavLinkWrapper>
+  );
+};
+
+SubNavLink.displayName = 'SubNavLink';
+SubNavLink.defaultProps = {
+  icon: null,
+  isSubSectionChild: false,
+  withBullet: false,
+};
+SubNavLink.propTypes = {
+  children: PropTypes.node,
+  icon: PropTypes.element,
+  isSubSectionChild: PropTypes.bool,
+  link: PropTypes.element,
+  withBullet: PropTypes.bool,
+};

package/src/SubNav/SubNavLinkSection.js

@@ -0,0 +1,75 @@
+import React, { Children, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import CarretDown from '@strapi/icons/CarretDown';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
+import { useId } from '../helpers/useId';
+
+const SubNavLinkSectionWrapper = styled(Box)`
+  svg {
+    height: ${4 / 16}rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral700};
+    }
+  }
+`;
+const SubNavLinkSectionButton = styled.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`;
+const DropDownIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  width: ${12 / 16}rem;
+  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
+`;
+
+export const SubNavLinkSection = ({ label, children, id }) => {
+  const [isOpen, setOpenLinks] = useState(true);
+  const listId = useId('subnav-list', id);
+
+  const handleClick = () => {
+    setOpenLinks((prev) => !prev);
+  };
+
+  return (
+    <Box>
+      <SubNavLinkSectionWrapper paddingLeft={7} paddingTop={2} paddingBottom={2} paddingRight={4}>
+        <Flex justifyContent="space-between">
+          <SubNavLinkSectionButton onClick={handleClick} aria-expanded={isOpen} aria-controls={listId}>
+            <DropDownIconWrapper rotated={isOpen}>
+              <CarretDown aria-hidden />
+            </DropDownIconWrapper>
+            <Box paddingLeft={2}>
+              <Typography as="span" fontWeight="semiBold" textColor="neutral800">
+                {label}
+              </Typography>
+            </Box>
+          </SubNavLinkSectionButton>
+        </Flex>
+      </SubNavLinkSectionWrapper>
+      {isOpen && (
+        <ul id={listId}>
+          {Children.map(children, (child, index) => {
+            return <li key={index}>{child}</li>;
+          })}
+        </ul>
+      )}
+    </Box>
+  );
+};
+
+SubNavLinkSection.defaultProps = {
+  id: undefined,
+};
+
+SubNavLinkSection.propTypes = {
+  children: PropTypes.node,
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+};

package/src/SubNav/SubNavSection.js

@@ -0,0 +1,75 @@
+import React, { Children, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Badge } from '../Badge';
+import { SubNavSectionLabel } from './SubNavSectionLabel';
+import { useId } from '../helpers/useId';
+import { Stack } from '../Stack';
+
+const SubNavSectionWrapper = styled(Box)`
+  svg {
+    height: ${4 / 16}rem;
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+`;
+
+export const SubNavSection = ({ collapsable, label, badgeLabel, children, id }) => {
+  const [isOpen, setOpenLinks] = useState(true);
+  const listId = useId('subnav-list', id);
+
+  const handleClick = () => {
+    setOpenLinks((prev) => !prev);
+  };
+
+  return (
+    <Stack spacing={1}>
+      <SubNavSectionWrapper paddingLeft={6} paddingTop={1} paddingBottom={1} paddingRight={4}>
+        <Box position="relative" paddingRight={badgeLabel ? 6 : 0}>
+          <SubNavSectionLabel
+            onClick={handleClick}
+            ariaExpanded={isOpen}
+            ariaControls={listId}
+            collapsable={collapsable}
+            label={label}
+          />
+          {badgeLabel && (
+            <Badge
+              backgroundColor="neutral150"
+              textColor="neutral600"
+              position="absolute"
+              right={0}
+              top="50%"
+              transform="translateY(-50%)"
+            >
+              {badgeLabel}
+            </Badge>
+          )}
+        </Box>
+      </SubNavSectionWrapper>
+      {(!collapsable || isOpen) && (
+        <ol id={listId}>
+          {Children.map(children, (child, index) => {
+            return <li key={index}>{child}</li>;
+          })}
+        </ol>
+      )}
+    </Stack>
+  );
+};
+
+SubNavSection.defaultProps = {
+  badgeLabel: null,
+  collapsable: false,
+  id: undefined,
+};
+
+SubNavSection.propTypes = {
+  badgeLabel: PropTypes.string,
+  children: PropTypes.node,
+  collapsable: PropTypes.bool,
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+};

package/src/SubNav/SubNavSectionLabel.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import CarretDown from '@strapi/icons/CarretDown';
+import { Typography } from '../Typography';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+
+const SubNavSectionLabelWrapper = styled(Flex)`
+  border: none;
+  padding: 0;
+  background: transparent;
+`;
+const DropDownIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
+`;
+
+export const SubNavSectionLabel = ({ collapsable, label, onClick, ariaExpanded, ariaControls }) => {
+  if (collapsable) {
+    return (
+      <SubNavSectionLabelWrapper
+        as="button"
+        onClick={onClick}
+        aria-expanded={ariaExpanded}
+        aria-controls={ariaControls}
+        textAlign="left"
+      >
+        <Box paddingRight={1}>
+          <Typography variant="sigma" textColor="neutral600">
+            {label}
+          </Typography>
+        </Box>
+        {collapsable && (
+          <DropDownIconWrapper rotated={ariaExpanded}>
+            <CarretDown aria-hidden />
+          </DropDownIconWrapper>
+        )}
+      </SubNavSectionLabelWrapper>
+    );
+  }
+
+  return (
+    <SubNavSectionLabelWrapper>
+      <Box paddingRight={1}>
+        <Typography variant="sigma" textColor="neutral600">
+          {label}
+        </Typography>
+      </Box>
+    </SubNavSectionLabelWrapper>
+  );
+};
+
+SubNavSectionLabel.defaultProps = {
+  ariaControls: null,
+  ariaExpanded: null,
+  collapsable: false,
+  onClick: () => {},
+};
+SubNavSectionLabel.propTypes = {
+  ariaControls: PropTypes.string,
+  ariaExpanded: PropTypes.bool,
+  collapsable: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+};

package/src/SubNav/SubNavSections.js

@@ -0,0 +1,20 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import { Stack } from '../Stack';
+import { Box } from '../Box';
+
+export const SubNavSections = ({ children, ...props }) => {
+  return (
+    <Box paddingTop={2} paddingBottom={4}>
+      <Stack as="ol" spacing={2} {...props}>
+        {Children.map(children, (child, index) => {
+          return <li key={index}>{child}</li>;
+        })}
+      </Stack>
+    </Box>
+  );
+};
+
+SubNavSections.propTypes = {
+  children: PropTypes.node.isRequired,
+};