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

package/src/MainNav/MainNav.stories.mdx

@@ -0,0 +1,197 @@
+<!--- MainNav.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Write from '@strapi/icons/Write';
+import Layer from '@strapi/icons/Layer';
+import Landscape from '@strapi/icons/Landscape';
+import Information from '@strapi/icons/Information';
+import Puzzle from '@strapi/icons/Puzzle';
+import ShoppingCart from '@strapi/icons/ShoppingCart';
+import Cog from '@strapi/icons/Cog';
+import { MainNav } from './MainNav';
+import { NavSection } from './NavSection';
+import { NavSections } from './NavSections';
+import { NavCondense } from './NavCondense';
+import { NavLink } from './NavLink';
+import { NavUser } from './NavUser';
+import { NavBrand } from './NavBrand';
+import { Box } from '../Box';
+import { Divider } from '../Divider';
+import strapiImage from './strapi-img.png';
+
+<Meta title="Design System/Components/MainNav" component={MainNav} />
+
+# MainNav
+
+The Main Navigation is consistenly available and displayed on all the different pages of the admin panel to access the different main sections. Thanks to it the users can easily navigation from a section to another. The Main Navigation can be whether collapsed or extended depending on the user's choice.
+
+**Best practices**
+
+- It is not possible to have more than 2 navigation bars next to each others.
+- Each section has its own icon and is associated with a Tooltip.
+- Do not use icons for headers
+- Use sentence case for section names and all caps for header labels.
+- Logo asset on the top-left of the Main Navigation can be customized.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/MainNav)
+
+## Imports
+
+```js
+import {
+  MainNav,
+  NavSection,
+  NavSections,
+  NavCondense,
+  NavBrand,
+  NavUser,
+  NavLink,
+} from '@strapi/design-system/MainNav';
+```
+
+## Usage
+
+The Main Navigation can be whether collapsed or extended depending on the user's choice with the Arrow icon at the bottom.
+
+The user profile can be accessed by clicking on the user name at the bottom of the Main Navigation, as much as the possibility to log out the admin panel.
+
+According to permissions, certain sections of the Main Navigation might not be visible nor accessible by specific users.
+
+## Hierarchy
+
+Related sections are gathered under specific headers within the Main Navigation. These headers are helpful to understand the global product hierarchy.
+
+Exception made for core plugins (i.e. Content Manager, Content-types Builder, Media Library) but a plugin should not take place in the Main Navigation. The Main Navigation remains are concise as possible to quickly reach the most important actions.
+
+### MainNav
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [condensed, setCondensed] = useState(false);
+      return (
+        <Box background="neutral100" padding={10} style={{ height: '100vh' }}>
+          <MainNav condensed={condensed}>
+            <NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
+            <Divider />
+            <NavSections>
+              <NavLink to="/cm" icon={<Write />} className="active">
+                Content-type-builder
+              </NavLink>
+              <NavSection label="Plugins">
+                <NavLink to="/builder" icon={<Layer />}>
+                  Builder
+                </NavLink>
+                <NavLink to="/content" icon={<Landscape />}>
+                  Media library
+                </NavLink>
+                <NavLink to="/content" icon={<Information />}>
+                  Documentation
+                </NavLink>
+              </NavSection>
+              <NavSection label="General">
+                <NavLink to="/builder" icon={<Puzzle />}>
+                  Plugins
+                </NavLink>
+                <NavLink to="/content" icon={<ShoppingCart />}>
+                  Marketplace
+                </NavLink>
+                <NavLink to="/content" icon={<Cog />}>
+                  Settings
+                </NavLink>
+              </NavSection>
+            </NavSections>
+            <NavUser src="https://avatars.githubusercontent.com/u/3874873?v=4" to="/somewhere-i-belong">
+              John Duff
+            </NavUser>
+            <NavCondense onClick={() => setCondensed((s) => !s)}>
+              {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
+            </NavCondense>
+          </MainNav>
+        </Box>
+      );
+    }}
+  </Story>
+  <Story name="notifications">
+    {() => {
+      const [condensed, setCondensed] = useState(false);
+      const numberOfNotifications = 2;
+      return (
+        <Box background="neutral100" padding={10} style={{ height: '100vh' }}>
+          <MainNav condensed={condensed}>
+            <NavBrand workplace="Workplace" title="Strapi Dashboard" icon={<img src={strapiImage} alt="" />} />
+            <Divider />
+            <NavSections>
+              <NavLink to="/cm" icon={<Write />} className="active">
+                Content
+              </NavLink>
+              <NavSection label="Plugins">
+                <NavLink to="/builder" icon={<Layer />}>
+                  Builder
+                </NavLink>
+                <NavLink to="/content" icon={<Landscape />}>
+                  Media library
+                </NavLink>
+                <NavLink to="/content" icon={<Information />}>
+                  Documentation
+                </NavLink>
+              </NavSection>
+              <NavSection label="General">
+                <NavLink to="/builder" icon={<Puzzle />}>
+                  Plugins
+                </NavLink>
+                <NavLink to="/content" badgeContent={'new'} icon={<ShoppingCart />} badgeAriaLabel="new content">
+                  Marketplace
+                </NavLink>
+                <NavLink
+                  to="/content"
+                  badgeContent={numberOfNotifications}
+                  icon={<Cog />}
+                  badgeAriaLabel={`${numberOfNotifications} notifications`}
+                >
+                  Settings
+                </NavLink>
+              </NavSection>
+            </NavSections>
+            <NavUser initials="MD">Michka des Ronronscelestes</NavUser>
+            <NavCondense onClick={() => setCondensed((s) => !s)}>
+              {condensed ? 'Expanded the navbar' : 'Collapse the navbar'}
+            </NavCondense>
+          </MainNav>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Usage with other routing libraries
+
+To use the Strapi design system NavLink/NavBrand 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 the react-router-dom `NavLink` props.
+
+```jsx
+import { NavLink } from '@strapi/design-system/NavLink';
+import { NavLink as RouterNavLink } from 'react-router-dom';
+
+<NavLink as={RouterNavLink} to="/home">
+  Home
+</NavLink>;
+```
+
+#### (⚠️ 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 { NavLink } from '@strapi/design-system/NavLink';
+import NextLink from 'next/link';
+
+<NextLink href="/home" passHref>
+  <NavLink>Home</NavLink>
+</NextLink>;
+```
+
+## Props
+
+<ArgsTable of={MainNav} />

package/src/MainNav/MainNavContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+
+export const MainNavContext = createContext();
+
+export const useMainNav = () => useContext(MainNavContext);

package/src/MainNav/NavBrand.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+import { useMainNav } from './MainNavContext';
+import { VisuallyHidden } from '../VisuallyHidden';
+
+const BrandIconWrapper = styled.div`
+  svg,
+  img {
+    border-radius: ${({ theme }) => theme.borderRadius};
+    object-fit: contain;
+    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+  }
+`;
+
+const NavLinkWrapper = styled(NavLink)`
+  text-decoration: unset;
+  color: inherit;
+`;
+
+export const NavBrand = ({ workplace, title, icon, to }) => {
+  const condensed = useMainNav();
+
+  if (condensed) {
+    return (
+      <Box paddingLeft={3} paddingRight={3} paddingTop={4} paddingBottom={4}>
+        <BrandIconWrapper condensed={true}>
+          <NavLink to={to}>
+            {icon}
+            <VisuallyHidden>
+              <span>{title}</span>
+              <span>{workplace}</span>
+            </VisuallyHidden>
+          </NavLink>
+        </BrandIconWrapper>
+      </Box>
+    );
+  }
+
+  return (
+    <Box paddingLeft={3} paddingRight={3} paddingTop={4} paddingBottom={4}>
+      <Flex>
+        <BrandIconWrapper as={NavLink} to={to} aria-hidden tabIndex={-1}>
+          {icon}
+        </BrandIconWrapper>
+
+        <Box paddingLeft={2}>
+          <Typography fontWeight="bold" textColor="neutral800" as="span">
+            <NavLinkWrapper to={to}>
+              {title}
+              <VisuallyHidden as="span">{workplace}</VisuallyHidden>
+            </NavLinkWrapper>
+          </Typography>
+          <Typography variant="pi" as="p" textColor="neutral600" aria-hidden>
+            {workplace}
+          </Typography>
+        </Box>
+      </Flex>
+    </Box>
+  );
+};
+
+NavBrand.defaultProps = {
+  to: '/',
+};
+NavBrand.propTypes = {
+  icon: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  to: PropTypes.string,
+  workplace: PropTypes.string.isRequired,
+};

package/src/MainNav/NavCondense.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ChevronRight from '@strapi/icons/ChevronRight';
+import ChevronLeft from '@strapi/icons/ChevronLeft';
+import { Icon } from '../Icon';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useMainNav } from './MainNavContext';
+
+const NavCondenseWrapper = styled.button`
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
+  right: ${({ theme, condensed }) => (condensed ? 0 : theme.spaces[5])};
+  transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
+  z-index: 2;
+  width: ${18 / 16}rem;
+  height: ${25 / 16}rem;
+
+  svg {
+    width: ${6 / 16}rem;
+    height: ${9 / 16}rem;
+  }
+`;
+
+export const NavCondense = ({ children, ...props }) => {
+  const condensed = useMainNav();
+
+  return (
+    <NavCondenseWrapper as="button" condensed={condensed} {...props}>
+      <Icon as={condensed ? ChevronRight : ChevronLeft} aria-hidden color="neutral600" />
+      <VisuallyHidden>{children}</VisuallyHidden>
+    </NavCondenseWrapper>
+  );
+};
+
+NavCondense.propTypes = {
+  children: PropTypes.string.isRequired,
+};

package/src/MainNav/NavLink.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { NavLink as RouterLink } from 'react-router-dom';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
+import { useMainNav } from './MainNavContext';
+import { Tooltip } from '../Tooltip';
+import { Badge } from '../Badge';
+
+const IconBox = styled(Box)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+const MainNavLinkWrapper = styled(RouterLink)`
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+
+  ${Typography} {
+    color: ${({ theme }) => theme.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.neutral100};
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.neutral700};
+    }
+
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  &.active {
+    background: ${({ theme }) => theme.colors.primary100};
+
+    svg path {
+      fill: ${({ theme }) => theme.colors.primary600};
+    }
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`;
+
+const MainNavRow = styled(Flex)`
+  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};
+`;
+
+const CustomBadge = styled(Badge)`
+  ${({ condensed }) =>
+    condensed &&
+    `
+	  position: absolute;
+    transform: translate(35%, -50%);
+    top: 0;
+    right: 0;
+  `}
+
+  ${Typography} {
+    //find a solution to remove !important
+    color: ${({ theme }) => theme.colors.neutral0} !important;
+    line-height: 0;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: ${({ theme }) => theme.spaces[6]};
+  height: ${({ theme }) => theme.spaces[5]};
+  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
+  border-radius: ${({ theme }) => theme.spaces[10]};
+  background: ${({ theme }) => theme.colors.primary600};
+`;
+
+export const NavLink = ({ children, icon, badgeContent, badgeAriaLabel, ...props }) => {
+  const condensed = useMainNav();
+
+  if (condensed) {
+    return (
+      <Tooltip position="right" label={children}>
+        <MainNavLinkWrapper {...props}>
+          <MainNavRow as="span">
+            <IconBox aria-hidden paddingRight={0} as="span">
+              {icon}
+            </IconBox>
+            {badgeContent && (
+              <CustomBadge condensed aria-label={badgeAriaLabel}>
+                {badgeContent}
+              </CustomBadge>
+            )}
+          </MainNavRow>
+        </MainNavLinkWrapper>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <MainNavLinkWrapper {...props}>
+      <MainNavRow as="span" justifyContent="space-between">
+        <Flex>
+          <IconBox aria-hidden paddingRight={3} as="span">
+            {icon}
+          </IconBox>
+          <Typography>{children}</Typography>
+        </Flex>
+        {badgeContent && (
+          <CustomBadge justifyContent="center" aria-label={badgeAriaLabel}>
+            {badgeContent}
+          </CustomBadge>
+        )}
+      </MainNavRow>
+    </MainNavLinkWrapper>
+  );
+};
+
+NavLink.displayName = 'NavLink';
+
+NavLink.defaultProps = {
+  badgeContent: undefined,
+  badgeAriaLabel: undefined,
+};
+
+NavLink.propTypes = {
+  badgeAriaLabel: PropTypes.string,
+  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  children: PropTypes.node.isRequired,
+  icon: PropTypes.node.isRequired,
+};

package/src/MainNav/NavSection.js

@@ -0,0 +1,53 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Stack } from '../Stack';
+import { useMainNav } from './MainNavContext';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { Divider } from '../Divider';
+
+export const NavSection = ({ label, children, ...props }) => {
+  const condensed = useMainNav();
+
+  if (condensed) {
+    return (
+      <Stack spacing={2}>
+        <Box paddingTop={1} paddingBottom={1} background="neutral0" hasRadius as="span">
+          <Divider />
+
+          <VisuallyHidden>
+            <span>{label}</span>
+          </VisuallyHidden>
+        </Box>
+
+        <Stack as="ul" spacing={2} {...props}>
+          {Children.map(children, (child, index) => {
+            return <li key={index}>{child}</li>;
+          })}
+        </Stack>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack spacing={2}>
+      <Box paddingTop={1} paddingBottom={1} background="neutral0" paddingRight={3} paddingLeft={3} hasRadius as="span">
+        <Typography variant="sigma" textColor="neutral600">
+          {label}
+        </Typography>
+      </Box>
+
+      <Stack as="ul" spacing={2} {...props}>
+        {Children.map(children, (child, index) => {
+          return <li key={index}>{child}</li>;
+        })}
+      </Stack>
+    </Stack>
+  );
+};
+
+NavSection.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+};

package/src/MainNav/NavSections.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 NavSections = ({ children, ...props }) => {
+  return (
+    <Box paddingLeft={3} paddingRight={2} paddingTop={3}>
+      <Stack as="ul" spacing={4} {...props}>
+        {Children.map(children, (child, index) => {
+          return <li key={index}>{child}</li>;
+        })}
+      </Stack>
+    </Box>
+  );
+};
+
+NavSections.propTypes = {
+  children: PropTypes.node.isRequired,
+};

package/src/MainNav/NavUser.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Avatar, Initials } from '../Avatar';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+import { Box } from '../Box';
+import { useMainNav } from './MainNavContext';
+import { VisuallyHidden } from '../VisuallyHidden';
+
+const NavUserBox = styled(Box)`
+  text-decoration: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+export const NavUser = React.forwardRef(({ src, children, initials, ...props }, ref) => {
+  const condensed = useMainNav();
+
+  return (
+    <NavUserBox paddingTop={3} paddingBottom={3} paddingLeft={5} paddingRight={5} {...props}>
+      <Flex as="button" justifyContent={condensed ? 'center' : undefined} ref={ref}>
+        {src ? <Avatar src={src} alt="" aria-hidden /> : <Initials>{initials}</Initials>}
+        {condensed ? (
+          <VisuallyHidden>
+            <span>{children}</span>
+          </VisuallyHidden>
+        ) : (
+          <Box width={`${130 / 16}rem`} paddingLeft={2} as="span">
+            <Typography ellipsis textColor="neutral600">
+              {children}
+            </Typography>
+          </Box>
+        )}
+      </Flex>
+    </NavUserBox>
+  );
+});
+
+NavUser.displayName = 'NavUser';
+
+NavUser.defaultProps = {
+  src: undefined,
+  initials: undefined,
+};
+
+NavUser.propTypes = {
+  children: PropTypes.node.isRequired,
+  initials: PropTypes.node,
+  src: PropTypes.string,
+};

package/src/MainNav/__tests__/MainNav.e2e.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('MainNav', () => {
+  test.describe('light mode', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-mainnav--base&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('triggers axe on the document', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-mainnav--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/MainNav/index.js

@@ -0,0 +1,7 @@
+export * from './MainNav';
+export * from './NavBrand';
+export * from './NavLink';
+export * from './NavSection';
+export * from './NavSections';
+export * from './NavUser';
+export * from './NavCondense';

package/src/ModalLayout/ModalBody.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+
+const ModalBodyWrapper = styled(Box)`
+  overflow: auto;
+  max-height: 60vh;
+`;
+
+export const ModalBody = (props) => {
+  return <ModalBodyWrapper padding={7} {...props} />;
+};

package/src/ModalLayout/ModalContext.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from 'react';
+
+export const ModalContext = createContext();
+export const useModal = () => useContext(ModalContext);

package/src/ModalLayout/ModalFooter.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+
+const ModalFooterWrapper = styled(Box)`
+  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+const ActionWrapper = styled(Flex)`
+  & > * + * {
+    margin-left: ${({ theme }) => theme.spaces[2]};
+  }
+`;
+
+export const ModalFooter = ({ startActions, endActions }) => {
+  return (
+    <ModalFooterWrapper paddingTop={4} paddingBottom={4} paddingLeft={5} paddingRight={5} background="neutral100">
+      <Flex justifyContent="space-between">
+        <ActionWrapper>{startActions}</ActionWrapper>
+        <ActionWrapper>{endActions}</ActionWrapper>
+      </Flex>
+    </ModalFooterWrapper>
+  );
+};
+
+ModalFooter.defaultProps = {
+  endActions: undefined,
+  startActions: undefined,
+};
+
+ModalFooter.propTypes = {
+  endActions: PropTypes.node,
+  startActions: PropTypes.node,
+};