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

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/webpack.config.js

@@ -0,0 +1,84 @@
+const fs = require('fs');
+const path = require('path');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const packageJSON = require('./package.json');
+const excludedFolders = require('../../tools/excludedFolders');
+
+const isV2Build = process.env.IS_V2 === 'true';
+
+const distPath = path.join(__dirname, 'dist');
+let outputPath = distPath;
+let entryFolder = path.join(__dirname, 'src');
+
+if (isV2Build) {
+  outputPath = path.join(distPath, 'v2');
+  entryFolder = path.join(__dirname, 'src', 'v2');
+}
+
+const fileNames = fs.readdirSync(path.resolve(entryFolder));
+const entry = fileNames
+  .filter((name) => !excludedFolders.includes(name))
+  .reduce((acc, curr) => {
+    if (curr.includes('.js')) {
+      acc[curr.replace('.js', '')] = path.resolve(entryFolder);
+    } else {
+      acc[curr] = path.resolve(entryFolder, curr);
+    }
+
+    return acc;
+  }, {});
+
+// Plugin section
+const analyzePlugins = [];
+
+if (process.env.BUNDLE_ANALYZE) {
+  analyzePlugins.push(new BundleAnalyzerPlugin());
+}
+
+const externalNodeModules = [];
+[...Object.keys(packageJSON.peerDependencies)].forEach((module) => {
+  externalNodeModules.push(new RegExp(`^${module}(/.+)?$`));
+});
+
+module.exports = {
+  entry,
+  mode: process.env.NODE_ENV,
+  devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : false,
+  output: {
+    filename: `[name].${process.env.NODE_ENV}.js`,
+    path: outputPath,
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    library: 'strapiDs',
+    umdNamedDefine: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: [/(node_modules)/],
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.(png|jpg|svg)$/i,
+        use: [
+          {
+            loader: 'url-loader',
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [].concat(analyzePlugins),
+  externals: externalNodeModules,
+  resolve: {
+    alias: {
+      '@strapi/icons': path.dirname(require.resolve('../strapi-icons/dist')),
+    },
+  },
+};