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

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

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

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

package/src/v2/Link/Link.js

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

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

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

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

package/src/v2/LinkButton/LinkButton.js

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

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

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

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

package/src/v2/MainNav/MainNav.js

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