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

package/src/v2/Breadcrumbs/__tests__/Breadcrumbs.spec.js

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from '../../../ThemeProvider';
-import { lightTheme } from '../../../themes';
-import { Breadcrumbs } from '../Breadcrumbs';
-import { Crumb } from '../Crumb';
-
-describe('Breadcrumb', () => {
-  it('should render only one crumb without any separator', async () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <Breadcrumbs>
-          <Crumb>First</Crumb>
-          {undefined && <Crumb>Second</Crumb>}
-        </Breadcrumbs>
-      </ThemeProvider>,
-    );
-
-    const crumbList = container.querySelectorAll('li');
-    // The divider is a span as well as the crumb text.
-    // In this case, only one crumb should be rendered without any divider
-    const spanList = container.querySelectorAll('span');
-
-    expect(crumbList.length).toEqual(1);
-    expect(spanList.length).toEqual(1);
-  });
-
-  it('should render two crumbs with only one separator', async () => {
-    const { container } = render(
-      <ThemeProvider theme={lightTheme}>
-        <Breadcrumbs>
-          <Crumb>First</Crumb>
-          <Crumb>Second</Crumb>
-        </Breadcrumbs>
-      </ThemeProvider>,
-    );
-
-    const crumbList = container.querySelectorAll('li');
-
-    // The divider is a span as well as the crumb text which means:
-    // 2 spans for the crumb texts + 1 for the divider
-    const spanList = container.querySelectorAll('span');
-
-    expect(crumbList.length).toEqual(2);
-    expect(spanList.length).toEqual(3);
-  });
-});

package/src/v2/Breadcrumbs/index.js

@@ -1,4 +0,0 @@
-export * from './Breadcrumbs';
-export * from './Crumb';
-export * from './CrumbLink';
-export * from './CrumbSimpleMenu';

package/src/v2/Link/Link.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import ExternalLink from '@strapi/icons/ExternalLink';
-import { Typography } from '../../Typography';
-import { Box } from '../../Box';
-import { buttonFocusStyle } from '../../themes/utils';
-import { BaseLink } from '../../BaseLink';
-
-const LinkWrapper = styled(BaseLink)`
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
-
-  svg path {
-    fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
-  }
-
-  svg {
-    font-size: ${10 / 16}rem;
-  }
-
-  &:hover,
-  &:active {
-    color: ${({ theme }) => theme.colors.primary800};
-  }
-
-  ${buttonFocusStyle};
-`;
-
-const IconWrapper = styled(Box)`
-  display: flex;
-`;
-
-export const Link = React.forwardRef(({ children, href, disabled, startIcon, endIcon, ...props }, ref) => {
-  return (
-    <LinkWrapper ref={ref} href={href} disabled={disabled} {...props}>
-      {startIcon && (
-        <IconWrapper as="span" aria-hidden={true} paddingRight={2}>
-          {startIcon}
-        </IconWrapper>
-      )}
-
-      <Typography textColor={disabled ? 'neutral600' : 'primary600'}>{children}</Typography>
-
-      {endIcon && (
-        <IconWrapper as="span" aria-hidden={true} paddingLeft={2}>
-          {endIcon}
-        </IconWrapper>
-      )}
-
-      {href && !endIcon && (
-        <IconWrapper as="span" aria-hidden={true} paddingLeft={2}>
-          <ExternalLink />
-        </IconWrapper>
-      )}
-    </LinkWrapper>
-  );
-});
-
-Link.displayName = 'Link';
-
-Link.defaultProps = {
-  as: undefined,
-  href: undefined,
-  disabled: false,
-  startIcon: undefined,
-  endIcon: undefined,
-};
-
-Link.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  endIcon: PropTypes.element,
-  href: PropTypes.string,
-  startIcon: PropTypes.element,
-};

package/src/v2/Link/Link.stories.mdx

@@ -1,113 +0,0 @@
-<!--- Link.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Link } from './Link';
-import { Stack } from '../../Stack';
-import Strapi from '@strapi/icons/Strapi';
-
-<Meta title="Design System/Components/v2/Link" component={Link} />
-
-# Link
-
-Links are used to send users to another page or an anchor. They are used for external navigation.
-
-**Best practices**
-
-- Use TextButton component if an action needs to be triggered within the admin panel (ex: Opening a modal ).
-- Clicking on a Link most of the time opens a new tab.
-- Links should always be used with an icon. If it is an external link, use the ExternalLink icon accordingly.
-- Links text should be concise and describe their purpose. Users need to know exactly what they are about to do.
-- Use capital letters.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/v2/Link)
-
-## Imports
-
-```js
-import { Link } from '@strapi/design-system/v2/Link';
-```
-
-## Usage
-
-Links are used for external navigation. Moreover, they should be associated with an icon to indicate its external navigation purpose.
-
-### Base
-
-The simplest representation of the Link component.
-
-<Canvas>
-  <Story name="base">
-    <Stack spacing={5}>
-      <Link isExternal href="https://strapi.io/">
-        External link
-      </Link>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Disabled link
-
-Depending on the permissions a user have or the status of an action, a link can be unreachable or unavailable yet.
-
-<Canvas>
-  <Story name="disabled">
-    <Stack spacing={5}>
-      <Link isExternal href="https://strapi.io/" disabled>
-        Disabled link
-      </Link>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Start & end icons
-
-Display icons on the left or right side.
-
-<Canvas>
-  <Story name="icons">
-    <Stack spacing={5}>
-      <div>
-        <Link isExternal href="https://strapi.io/" startIcon={<Strapi />}>
-          Strapi
-        </Link>
-      </div>
-      <div>
-        <Link isExternal href="https://strapi.io/" endIcon={<Strapi />}>
-          Strapi
-        </Link>
-      </div>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Usage with other routing libraries
-
-To use the Link component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
-You'll now be able to pass all `NavLink` props.
-
-```jsx
-import { Link } from '@strapi/design-system/Link';
-import { NavLink } from 'react-router-dom';
-
-<Link as={NavLink} to="/home">
-  Home
-</Link>;
-```
-
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `Link` with the `NextLink` component
-
-```jsx
-import { Link } from '@strapi/design-system/Link';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <Link>Home</Link>
-</NextLink>;
-```
-
-## Props
-
-<ArgsTable of={Link} />

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

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

package/src/v2/Link/index.js

@@ -1 +0,0 @@
-export * from './Link';

package/src/v2/LinkButton/LinkButton.js

@@ -1,105 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Typography } from '../../Typography';
-import { Box } from '../../Box';
-import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from '../../Button/utils';
-import { VARIANTS, BUTTON_SIZES } from '../../Button/constants';
-import { BaseButtonWrapper } from '../../BaseButton';
-import { BaseLink } from '../../BaseLink';
-
-const LinkWrapper = styled(BaseButtonWrapper)`
-  padding: ${({ theme, size }) => `${size === 'S' ? theme.spaces[2] : '10px'} ${theme.spaces[4]}`};
-  background: ${({ theme }) => theme.colors.buttonPrimary600};
-  border: 1px solid ${({ theme }) => theme.colors.buttonPrimary600};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  ${Box} {
-    display: flex;
-    align-items: center;
-  }
-  ${Typography} {
-    color: ${({ theme }) => theme.colors.buttonNeutral0};
-  }
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-    &:active {
-      ${getDisabledStyle}
-    }
-  }
-  &:hover {
-    ${getHoverStyle}
-  }
-  &:active {
-    ${getActiveStyle}
-  }
-  ${getVariantStyle}
-
-  /**
-    Link specific properties
-  */
-  display: inline-flex;
-  text-decoration: none;
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
-`;
-
-export const LinkButton = React.forwardRef(
-  ({ variant, startIcon, endIcon, disabled, children, size, as, ...props }, ref) => {
-    return (
-      <LinkWrapper ref={ref} aria-disabled={disabled} size={size} variant={variant} {...props} as={as || BaseLink}>
-        {startIcon && (
-          <Box aria-hidden={true} paddingRight={2}>
-            {startIcon}
-          </Box>
-        )}
-
-        {size === 'S' ? (
-          <Typography variant="pi" fontWeight="bold">
-            {children}
-          </Typography>
-        ) : (
-          <Typography fontWeight="bold">{children}</Typography>
-        )}
-
-        {endIcon && (
-          <Box aria-hidden={true} paddingLeft={2}>
-            {endIcon}
-          </Box>
-        )}
-      </LinkWrapper>
-    );
-  },
-);
-
-LinkButton.displayName = 'LinkButton';
-
-LinkButton.defaultProps = {
-  as: BaseLink,
-  disabled: false,
-  startIcon: undefined,
-  endIcon: undefined,
-  size: 'S',
-  variant: 'default',
-  onClick: undefined,
-  href: undefined,
-  to: undefined,
-};
-LinkButton.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  endIcon: PropTypes.element,
-  href: (props) => {
-    if (!props.disabled && !props.to && !props.href) {
-      return new Error('href must be defined');
-    }
-  },
-  onClick: PropTypes.func,
-  size: PropTypes.oneOf(BUTTON_SIZES),
-  startIcon: PropTypes.element,
-  to: (props) => {
-    if (!props.disabled && !props.href && !props.to) {
-      return new Error('to must be defined');
-    }
-  },
-  variant: PropTypes.oneOf(VARIANTS),
-};

package/src/v2/LinkButton/LinkButton.stories.mdx

@@ -1,153 +0,0 @@
-<!--- LinkButton.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import Information from '@strapi/icons/Information';
-import Write from '@strapi/icons/Write';
-import { LinkButton } from './LinkButton';
-import { Box } from '../../Box';
-import { Flex } from '../../Flex';
-
-<Meta title="Design System/Components/v2/LinkButton" component={LinkButton} />
-
-# LinkButton
-
-LinkButtons are a way to perform actions that links to a different page component that will stay within one page. They help interact with its content via a single click. According to their style, specific labels and icons, they help understand the most important actions to take.
-
-The difference with the `Button` component will be that the action of the LinkButton redirects to a different page.
-The difference with the `Link` is the style.
-
-Best practices
-
-- A link button should have a relevant and clear label.
-- Be positioned in consistent locations in the interface.
-- If there are no primary action on a screen yet, this might be the one to look for.
-- Prefer to have not more than two buttons side to side.
-- To navigate to another page in your browser (use Link component instead).
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/v2/LinkButton)
-
-## Imports
-
-```js
-import { LinkButton } from '@strapi/design-system/v2/LinkButton';
-```
-
-## Usage
-
-The most common LinkButton component used in the interface (primary action). It can have different variants and meaning.
-
-Use the `to` parameter to redirect using the router's routes, `href` parameter for an external url.
-
-<Canvas>
-  <Story name="base">
-    <Box paddingBottom={2}>
-      <LinkButton variant="default" isExternal href="https://strapi.io/">
-        Default
-      </LinkButton>
-    </Box>
-  </Story>
-</Canvas>
-
-### LinkButton sizes
-
-Main actions usually use a L LinkButton (top of a screen, footer of a modal, ...). For subsidiary action, a S LinkButton suits more (filters, configure the view, ...).
-
-Use the size prop to change the size of the button. You can set the value to S or L.
-
-<Canvas>
-  <Story name="sizes">
-    <Flex>
-      <Box paddingRight={1}>
-        <LinkButton size="S" to="/">
-          Small
-        </LinkButton>
-      </Box>
-      <LinkButton size="L" to="/">
-        Large
-      </LinkButton>
-    </Flex>
-  </Story>
-</Canvas>
-
-### LinkButton variants
-
-Use the variant prop to change the visual style of the LinkButton. You can set the value to default, secondary, tertiary, success, danger, success-light, or danger-light.
-
-<Canvas>
-  <Story name="variants">
-    <Flex>
-      {['default', 'secondary', 'tertiary', 'success', 'danger', 'success-light', 'danger-light'].map((variant) => (
-        <Box key={variant} paddingRight={2}>
-          <LinkButton variant={variant} to="/">
-            {variant}
-          </LinkButton>
-        </Box>
-      ))}
-    </Flex>
-  </Story>
-</Canvas>
-
-### LinkButton with icon
-
-A LinkButton can be associated with an icon to give more impact. You can add start and end icons to the Button component using the startIcon and endIcon props respectively.
-
-<Canvas>
-  <Story name="icons">
-    <Flex>
-      <Box paddingRight={1}>
-        <LinkButton startIcon={<Information />} to="/">
-          Information
-        </LinkButton>
-      </Box>
-      <LinkButton variant="secondary" endIcon={<Write />} to="/">
-        Write content
-      </LinkButton>
-    </Flex>
-  </Story>
-</Canvas>
-
-### LinkButton disabled
-
-For all actions that cannot be performed yet, you can use the disabled state.
-
-<Canvas>
-  <Story name="disabled">
-    <Box paddingRight={1}>
-      <LinkButton disabled to="/" startIcon={<Information />}>
-        Information
-      </LinkButton>
-    </Box>
-  </Story>
-</Canvas>
-
-### Usage with other routing libraries
-
-To use the LinkButton component with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
-You'll now be able to pass all `NavLink` props.
-
-```jsx
-import { LinkButton } from '@strapi/design-system/LinkButton';
-import { NavLink } from 'react-router-dom';
-
-<LinkButton as={NavLink} to="/home">
-  Home
-</LinkButton>;
-```
-
-#### NextJS usage
-
-For NextJS, you'll need to wrap the `LinkButton` with the `NextLink` component
-
-```jsx
-import { LinkButton } from '@strapi/design-system/LinkButton';
-import NextLink from 'next/link';
-
-<NextLink href="/home" passHref>
-  <LinkButton>Home</LinkButton>
-</NextLink>;
-```
-
-## Props
-
-<ArgsTable of={LinkButton} />

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

@@ -1,89 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('LinkButton', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--base&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('sizes', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--sizes&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('variants', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--variants&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('icons', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--icons&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--disabled&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--base&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('sizes', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--sizes&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('variants', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--variants&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('icons', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--icons&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-v2-linkbutton--disabled&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/v2/LinkButton/index.js

@@ -1 +0,0 @@
-export * from './LinkButton';

package/src/v2/MainNav/MainNav.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Grid } from '../../Grid';
-import { MainNavContext } from './MainNavContext';
-
-const MainNavWrapper = styled(Grid)`
-  width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
-  background: ${({ theme }) => theme.colors.neutral0};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  z-index: 2;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-
-export const MainNav = ({ condensed, ...props }) => {
-  return (
-    <MainNavContext.Provider value={condensed}>
-      <MainNavWrapper as="nav" condensed={condensed} {...props} />
-    </MainNavContext.Provider>
-  );
-};
-
-MainNav.defaultProps = {
-  condensed: false,
-};
-
-MainNav.propTypes = {
-  condensed: PropTypes.bool,
-};