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

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Dot from '@strapi/icons/Dot';
+import { Box } from '../../Box';
+import { Typography } from '../../Typography';
+import { Flex } from '../../Flex';
+import { BaseLink } from '../../BaseLink';
+
+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 = React.forwardRef(({ children, icon, withBullet, as, isSubSectionChild, ...props }, ref) => {
+  return (
+    <SubNavLinkWrapper
+      as={as}
+      icon={icon}
+      background="neutral100"
+      paddingLeft={isSubSectionChild ? 9 : 7}
+      paddingBottom={2}
+      paddingTop={2}
+      ref={ref}
+      {...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 = {
+  as: BaseLink,
+  icon: null,
+  isSubSectionChild: false,
+  withBullet: false,
+};
+SubNavLink.propTypes = {
+  as: PropTypes.elementType,
+  children: PropTypes.node,
+  icon: PropTypes.element,
+  isSubSectionChild: PropTypes.bool,
+  link: PropTypes.element,
+  withBullet: PropTypes.bool,
+};

package/src/v2/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/v2/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 { Stack } from '../../Stack';
+import { SubNavSectionLabel } from './SubNavSectionLabel';
+import { useId } from '../../helpers/useId';
+
+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={2} paddingBottom={2} 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/v2/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/v2/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,
+};

package/src/v2/SubNav/__tests__/SubNav.e2e.js

@@ -0,0 +1,23 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('SubNav', () => {
+  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-subnav--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-subnav--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/v2/SubNav/index.js

@@ -0,0 +1,6 @@
+export * from './SubNav';
+export * from './SubNavHeader';
+export * from './SubNavLink';
+export * from './SubNavLinkSection';
+export * from './SubNavSection';
+export * from './SubNavSections';

package/src/v2/index.js

@@ -0,0 +1,7 @@
+export * from './Breadcrumbs';
+export * from './Link';
+export * from './LinkButton';
+export * from './MainNav';
+export * from './Pagination';
+export * from './SimpleMenu';
+export * from './SubNav';

package/test-bundler.js

@@ -0,0 +1,35 @@
+import IntlPolyfill from 'intl';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+import 'intl/locale-data/jsonp/en';
+import 'jest-styled-components';
+
+beforeAll(() => {
+  if (global.Intl) {
+    Intl.NumberFormat = IntlPolyfill.NumberFormat;
+    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
+  } else {
+    global.Intl = IntlPolyfill;
+  }
+
+  global.ResizeObserver = ResizeObserver;
+
+  global.IntersectionObserver = () => ({
+    observe: () => {},
+    disconnect: () => {},
+  });
+
+  global.matchMedia = () => ({
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  });
+});

package/tests/check-exports.spec.js

@@ -0,0 +1,36 @@
+const fs = require('fs-extra');
+const { resolve } = require('path');
+
+// List of files we want to ignore when running the equality check
+const FILES_NAMES_TO_IGNORE = ['.DS_Store'];
+
+// List of files we want to include in the index.js file
+const FILES_TO_KEEP = ['themes'];
+
+describe('Check components are all exported correctly (index.js)', () => {
+  it('should generate the exports correctly', async () => {
+    const dest = resolve(__dirname, '..', 'src', 'index.js');
+    const buffer = await fs.readFile(dest);
+    const content = buffer.toString();
+    const exportedComponents = content
+      .split(';')
+      .map((c) => c.trim())
+      .filter((c) => c)
+      .map((c) => {
+        return c.substring(c.indexOf('/') + 1, c.lastIndexOf("'"));
+      })
+      .sort();
+
+    const dirs = await fs.readdir(resolve(__dirname, '..', 'src'));
+    const components = dirs.filter((file) => {
+      const isComponent = file.charAt(0) === file.charAt(0).toUpperCase() || file === 'v2';
+
+      return isComponent;
+    });
+    const expected = [...FILES_TO_KEEP, ...components]
+      .filter((fileName) => !FILES_NAMES_TO_IGNORE.includes(fileName))
+      .sort();
+
+    expect(exportedComponents).toEqual(expected);
+  });
+});

package/vite.config.js

@@ -0,0 +1,35 @@
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import glob from 'tiny-glob';
+
+export default glob('./src/**/!(*.spec|*.e2e).{js,svg}').then(async (paths) => {
+  return defineConfig({
+    esbuild: {
+      loader: 'jsx',
+      include: /src\/.*\.jsx?$/,
+      exclude: [],
+    },
+    build: {
+      target: 'es2020',
+      lib: {
+        entry: {},
+        formats: ['cjs', 'es'],
+        fileName: (format) => {
+          return `[name].${format === 'es' ? 'js' : format}`;
+        },
+      },
+      rollupOptions: {
+        input: [resolve(__dirname, './src/index.js'), ...paths.map((path) => `./${path}`)],
+        // make sure to externalize deps that shouldn't be bundled
+        // into your library
+        external: (id) => !id.startsWith('.') && !id.startsWith('/'),
+        output: {
+          dir: 'dist',
+          preserveModules: true,
+        },
+      },
+    },
+    plugins: [react()],
+  });
+});