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

package/src/v2/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/v2/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/v2/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>;
+```
+
+#### 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/v2/MainNav/MainNavContext.js

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

package/src/v2/MainNav/NavBrand.js

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

package/src/v2/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/v2/MainNav/NavLink.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Box } from '../../Box';
+import { Flex } from '../../Flex';
+import { Typography } from '../../Typography';
+import { useMainNav } from './MainNavContext';
+import { Tooltip } from '../../Tooltip';
+import { Badge } from '../../Badge';
+import { BaseLink } from '../../BaseLink';
+
+const IconBox = styled(Box)`
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+
+const MainNavLinkWrapper = styled(BaseLink)`
+  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 = React.forwardRef(({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
+  const condensed = useMainNav();
+
+  if (condensed) {
+    return (
+      <MainNavLinkWrapper ref={ref} {...props}>
+        <Tooltip position="right" label={children}>
+          <MainNavRow as="span" justifyContent="center">
+            <IconBox aria-hidden paddingRight={0} as="span">
+              {icon}
+            </IconBox>
+            {badgeContent && (
+              <CustomBadge condensed aria-label={badgeAriaLabel}>
+                {badgeContent}
+              </CustomBadge>
+            )}
+          </MainNavRow>
+        </Tooltip>
+      </MainNavLinkWrapper>
+    );
+  }
+
+  return (
+    <MainNavLinkWrapper ref={ref} {...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.string.isRequired,
+  icon: PropTypes.node.isRequired,
+};

package/src/v2/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/v2/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/v2/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/v2/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-v2-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-v2-mainnav--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/v2/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/v2/Pagination/Pagination.js

@@ -0,0 +1,37 @@
+import React, { Children } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Flex } from '../../Flex';
+import { PaginationContext } from './PaginationContext';
+
+const PaginationWrapper = styled.nav``;
+const PaginationList = styled(Flex)`
+  & > * + * {
+    margin-left: ${({ theme }) => theme.spaces[1]};
+  }
+`;
+
+export const Pagination = ({ children, label, activePage, pageCount }) => {
+  return (
+    <PaginationContext.Provider value={{ activePage, pageCount }}>
+      <PaginationWrapper aria-label={label}>
+        <PaginationList as="ul">
+          {Children.map(children, (child, index) => {
+            return <li key={index}>{child}</li>;
+          })}
+        </PaginationList>
+      </PaginationWrapper>
+    </PaginationContext.Provider>
+  );
+};
+
+Pagination.defaultProps = {
+  label: 'pagination',
+};
+
+Pagination.propTypes = {
+  activePage: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string,
+  pageCount: PropTypes.number.isRequired,
+};