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

package/src/v2/SubNav/SubNavHeader.js

@@ -1,122 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/src/v2/index.js

@@ -1,7 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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()],
-  });
-});