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

package/src/Layout/__tests__/GridLayout.e2e.js

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

package/src/Layout/__tests__/HeaderLayout.e2e.js

@@ -0,0 +1,83 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('HeaderLayout', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-headerlayout--base&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('base without nav action', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-headerlayout--base-without-nav-action&args=&viewMode=story',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('sticky', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-headerlayout--sticky&args=&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('combined w/ scroll', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-headerlayout--combined-w-scroll&args=&viewMode=story',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+
+      test('displays the sticky header when scrolling down', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-headerlayout--combined-w-scroll&args=&viewMode=story',
+        );
+
+        await expect(page.locator('[data-strapi-header]')).toBeVisible();
+
+        await page.evaluate(() => window.scrollTo(0, 400));
+
+        await expect(page.locator('[data-strapi-header-sticky]')).toBeVisible();
+
+        const headerLayout = await page.$$('[data-strapi-header]');
+        expect(headerLayout.length).toBe(0);
+      });
+
+      test('displays the sticky header when scrolling back up', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-headerlayout--combined-w-scroll&args=&viewMode=story',
+        );
+        await page.evaluate(() => window.scrollTo(0, 400));
+        await expect(page.locator('[data-strapi-header-sticky]')).toBeVisible();
+
+        await page.evaluate(() => window.scrollTo(0, 0));
+
+        await expect(page.locator('[data-strapi-header]')).toBeVisible();
+
+        const headerLayout = await page.$$('[data-strapi-header-sticky]');
+        expect(headerLayout.length).toBe(0);
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-headerlayout--base&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+});

package/src/Layout/__tests__/Layout.e2e.js

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

package/src/Layout/__tests__/TwoColsLayout.e2e.js

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

package/src/Layout/index.js

@@ -0,0 +1,6 @@
+export * from './Layout';
+export * from './ActionLayout';
+export * from './ContentLayout';
+export * from './HeaderLayout';
+export * from './TwoColsLayout';
+export * from './GridLayout';

package/src/Link/Link.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import { NavLink } from 'react-router-dom';
+import { Typography } from '../Typography';
+import { Box } from '../Box';
+import { buttonFocusStyle } from '../themes/utils';
+
+const LinkWrapper = styled.a`
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
+  color: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
+
+  svg path {
+    transition: fill 150ms ease-out;
+    fill: currentColor;
+  }
+
+  svg {
+    font-size: ${10 / 16}rem;
+  }
+
+  ${Typography} {
+    transition: color 150ms ease-out;
+    color: currentColor;
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary500};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.primary700};
+  }
+
+  ${buttonFocusStyle};
+`;
+
+const IconWrapper = styled(Box)`
+  display: flex;
+`;
+
+export const Link = ({ href, to, children, disabled, startIcon, endIcon, ...props }) => {
+  const target = href ? '_blank' : undefined;
+  const rel = href ? 'noreferrer noopener' : undefined;
+
+  return (
+    <LinkWrapper
+      as={to && !disabled ? NavLink : 'a'}
+      target={target}
+      rel={rel}
+      to={disabled ? undefined : to}
+      href={disabled ? '#' : href}
+      disabled={disabled}
+      {...props}
+    >
+      {startIcon && (
+        <IconWrapper as="span" aria-hidden={true} paddingRight={2}>
+          {startIcon}
+        </IconWrapper>
+      )}
+      <Typography>{children}</Typography>
+
+      {endIcon && !href && (
+        <IconWrapper as="span" aria-hidden={true} paddingLeft={2}>
+          {endIcon}
+        </IconWrapper>
+      )}
+
+      {href && (
+        <IconWrapper as="span" aria-hidden={true} paddingLeft={2}>
+          <ExternalLink />
+        </IconWrapper>
+      )}
+    </LinkWrapper>
+  );
+};
+
+Link.displayName = 'Link';
+
+Link.defaultProps = {
+  href: undefined,
+  to: undefined,
+  disabled: false,
+};
+
+Link.propTypes = {
+  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');
+    }
+  },
+  startIcon: PropTypes.element,
+  to: (props) => {
+    if (!props.disabled && !props.href && !props.to) {
+      return new Error('to must be defined');
+    }
+  },
+};

package/src/Link/Link.stories.mdx

@@ -0,0 +1,57 @@
+<!--- Link.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import ChevronRight from '@strapi/icons/ChevronRight';
+import ArrowLeft from '@strapi/icons/ArrowLeft';
+import { Link } from './Link';
+import { Stack } from '../Stack';
+
+# Link
+
+Links are a way to navigate to different pages whether internal or external.
+
+Best practices
+
+- A link should have a relevant and clear label.
+- Be positioned in consistent locations in the interface.
+- Add an icon next to the link to emphasize the required action.
+
+<Meta title="Design System/Components/Link" component={Link} />
+
+    @@ -39,32 +40,75 @@ The simplest representation of the Link component.
+
+<Canvas>
+  <Story name="base">
+    <Stack spacing={5}>
+      <div>
+        <Link href="https://strapi.io/" isExternal>
+          External link
+        </Link>
+      </div>
+      <div>
+        <Link to="/somewhere-internal" startIcon={<ArrowLeft />}>
+          Internal link
+        </Link>
+      </div>
+      <div>
+        <Link isExternal href="http://strapi.io" disabled>
+          External disabled link
+        </Link>
+      </div>
+      <div>
+        <Link to="/somewhere-internal" disabled startIcon={<ArrowLeft />} endIcon={<ChevronRight />}>
+          Internal disabled link
+        </Link>
+      </div>
+    </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.
+
+## Props
+
+<ArgsTable of={Link} />

package/src/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-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-link--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Link/index.js

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

package/src/LinkButton/LinkButton.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+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';
+
+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, href, to, ...props }, ref) => {
+    const target = href ? '_blank' : undefined;
+    const rel = href ? 'noreferrer noopener' : undefined;
+
+    return (
+      <LinkWrapper
+        ref={ref}
+        aria-disabled={disabled}
+        size={size}
+        variant={variant}
+        target={target}
+        rel={rel}
+        to={disabled ? undefined : to}
+        href={disabled ? '#' : href}
+        {...props}
+        as={to && !disabled ? NavLink : 'a'}
+      >
+        {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 = {
+  disabled: false,
+  startIcon: undefined,
+  endIcon: undefined,
+  size: 'S',
+  variant: 'default',
+  onClick: undefined,
+  href: undefined,
+  to: undefined,
+};
+LinkButton.propTypes = {
+  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/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/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/LinkButton)
+
+## Imports
+
+```js
+import { LinkButton } from '@strapi/design-system/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" 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>;
+```
+
+#### (⚠️ Only for Strapi Design System v1.0.0) 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} />