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

package/src/Avatar/__tests__/Avatar.spec.js

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Avatar } from '../Avatar';
+import { ThemeProvider } from '../../ThemeProvider';
+import { lightTheme } from '../../themes';
+
+describe('Avatar', () => {
+  it('snapshots the component with preview (boolean)', () => {
+    const { container } = render(
+      <ThemeProvider theme={lightTheme}>
+        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
+      </ThemeProvider>,
+    );
+
+    fireEvent.mouseEnter(container.querySelector('img'));
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      .c3 {
+        border-radius: 50%;
+        object-fit: cover;
+        display: block;
+        position: relative;
+      }
+
+      .c1 {
+        position: relative;
+        width: 1.625rem;
+        height: 1.625rem;
+        z-index: 1;
+      }
+
+      .c0 {
+        border-radius: 50%;
+        object-fit: cover;
+        position: absolute;
+        -webkit-transform: translate(-19px,-100%);
+        -ms-transform: translate(-19px,-100%);
+        transform: translate(-19px,-100%);
+        margin-top: -4px;
+      }
+
+      .c2 {
+        z-index: 1;
+        border-radius: 30%;
+        position: absolute;
+        width: 1.625rem;
+        height: 1.625rem;
+        background: #ffffff;
+        opacity: 0.4;
+      }
+
+      <span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="c0"
+          height="64px"
+          src="https://avatars.githubusercontent.com/u/3874873?v=4"
+          width="64px"
+        />
+        <div
+          class="c1"
+        >
+          <div
+            class="c2"
+          />
+          <img
+            alt="marvin frachet"
+            class="c3"
+            height="26px"
+            src="https://avatars.githubusercontent.com/u/3874873?v=4"
+            width="26px"
+          />
+        </div>
+      </span>
+    `);
+  });
+
+  it('snapshots the component with preview (string)', () => {
+    const { container } = render(
+      <ThemeProvider theme={lightTheme}>
+        <Avatar
+          src="https://avatars.githubusercontent.com/u/3874873?v=4"
+          alt="marvin frachet"
+          preview="https://some-unknown-photo/x.png"
+        />
+      </ThemeProvider>,
+    );
+
+    fireEvent.mouseEnter(container.querySelector('img'));
+
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      .c3 {
+        border-radius: 50%;
+        object-fit: cover;
+        display: block;
+        position: relative;
+      }
+
+      .c1 {
+        position: relative;
+        width: 1.625rem;
+        height: 1.625rem;
+        z-index: 1;
+      }
+
+      .c0 {
+        border-radius: 50%;
+        object-fit: cover;
+        position: absolute;
+        -webkit-transform: translate(-19px,-100%);
+        -ms-transform: translate(-19px,-100%);
+        transform: translate(-19px,-100%);
+        margin-top: -4px;
+      }
+
+      .c2 {
+        z-index: 1;
+        border-radius: 30%;
+        position: absolute;
+        width: 1.625rem;
+        height: 1.625rem;
+        background: #ffffff;
+        opacity: 0.4;
+      }
+
+      <span>
+        <img
+          alt=""
+          aria-hidden="true"
+          class="c0"
+          height="64px"
+          src="https://some-unknown-photo/x.png"
+          width="64px"
+        />
+        <div
+          class="c1"
+        >
+          <div
+            class="c2"
+          />
+          <img
+            alt="marvin frachet"
+            class="c3"
+            height="26px"
+            src="https://avatars.githubusercontent.com/u/3874873?v=4"
+            width="26px"
+          />
+        </div>
+      </span>
+    `);
+  });
+});

package/src/Avatar/constants.js

@@ -0,0 +1,2 @@
+export const avatarSize = 26;
+export const previewSize = 64;

package/src/Avatar/index.js

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export * from './AvatarGroup';

package/src/Badge/Badge.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '../Flex';
+import { Typography } from '../Typography';
+
+export const Badge = ({ active, textColor, backgroundColor, children, minWidth, ...props }) => {
+  return (
+    <Flex
+      inline
+      alignItem="center"
+      justifyContent="center"
+      minWidth={minWidth}
+      padding={1}
+      background={active ? 'primary100' : backgroundColor}
+      hasRadius
+      {...props}
+    >
+      <Typography variant="sigma" textColor={active ? 'primary600' : textColor}>
+        {children}
+      </Typography>
+    </Flex>
+  );
+};
+
+Badge.defaultProps = {
+  active: false,
+  backgroundColor: 'neutral100',
+  minWidth: 5,
+  textColor: 'neutral600',
+};
+
+Badge.propTypes = {
+  /**
+   * If `true`, it changes the `backgroundColor` to `primary100` and the `textColor` to `primary600`
+   */
+  active: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  minWidth: PropTypes.number,
+  textColor: PropTypes.string,
+};

package/src/Badge/Badge.stories.mdx

@@ -0,0 +1,57 @@
+<!--- Badge.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { Badge } from './Badge';
+import { Stack } from '../Stack';
+
+<Meta title="Design System/Components/Badge" component={Badge} />
+
+# Badge
+
+Badges are used to give a quick visual indication to the users.
+
+**Best practices**
+
+- Badge component should be filled only with numbers or a single word max.
+- Use them next to a label or a description.
+- Use the active state only with a label.
+- Use Tag component if the information given needs to be related to a performed action.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Badge)
+
+## Imports
+
+```js
+import { Badge } from '@strapi/design-system/Badge';
+```
+
+## Usage
+
+Badges are used to give a quick and short scannable information to the users. They are mostly filled with numbers or a single word.
+
+<Canvas>
+  <Story name="base">
+    <Stack spacing={2}>
+      <div>
+        <Badge>Doc</Badge>
+      </div>
+      <div>
+        <Badge>1</Badge>
+      </div>
+      <div>
+        <Badge>5</Badge>
+      </div>
+      <div>
+        <Badge>Video</Badge>
+      </div>
+      <div>
+        <Badge active>Image</Badge>
+      </div>
+    </Stack>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Badge} />

package/src/Badge/__tests__/Badge.e2e.js

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

package/src/Badge/index.js

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

package/src/BaseButton/BaseButton.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { buttonFocusStyle } from '../themes/utils';
+
+export const BaseButtonWrapper = styled.button`
+  display: flex;
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spaces[2]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+  svg {
+    height: ${({ theme }) => theme.spaces[3]};
+    width: ${({ theme }) => theme.spaces[3]};
+  }
+  svg {
+    > g,
+    path {
+      fill: ${({ theme }) => theme.colors.neutral0};
+    }
+  }
+  &[aria-disabled='true'] {
+    pointer-events: none;
+  }
+
+  ${buttonFocusStyle}
+`;
+
+export const BaseButton = React.forwardRef(({ disabled, children, ...props }, ref) => {
+  return (
+    <BaseButtonWrapper ref={ref} aria-disabled={disabled} type="button" disabled={disabled} {...props}>
+      {children}
+    </BaseButtonWrapper>
+  );
+});
+
+BaseButton.displayName = 'BaseButton';
+
+BaseButton.defaultProps = {
+  disabled: false,
+};
+BaseButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+};

package/src/BaseButton/BaseButton.stories.mdx

@@ -0,0 +1,32 @@
+<!--- BaseButton.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { BaseButton } from './BaseButton';
+import { Typography } from '../Typography';
+
+<Meta title="Design System/Technical Components/BaseButton" component={BaseButton} />
+
+## Imports
+
+```js
+import { BaseButton } from '@strapi/design-system/BaseButton';
+```
+
+# BaseButton
+
+The `BaseButton` component is the basis of the `Button` component.
+
+## Usage
+
+<Canvas withSource="open">
+  <Story name="base">
+    <BaseButton onClick={(e) => console.log(e)}>
+      <Typography>button</Typography>
+    </BaseButton>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={BaseButton} />

package/src/BaseButton/__tests__/BaseButton.e2e.js

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

package/src/BaseButton/index.js

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

package/src/BaseCheckbox/BaseCheckbox.js

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { getCheckboxSize } from './utils';
+import checkmarkIcon from './assets/checkmark.svg';
+import checkmarkIconDisabled from './assets/checkmark-black.svg';
+
+const CheckboxInput = styled.input`
+  margin: 0;
+  height: ${getCheckboxSize};
+  min-width: ${getCheckboxSize};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  border: 1px solid ${({ theme }) => theme.colors.neutral300};
+  -webkit-appearance: none;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  cursor: pointer;
+
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.primary600};
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      background: url(${checkmarkIcon}) no-repeat no-repeat center center;
+      width: 10px;
+      height: 10px;
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled:after {
+      background: url(${checkmarkIconDisabled}) no-repeat no-repeat center center;
+    }
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.neutral200};
+    border: 1px solid ${({ theme }) => theme.colors.neutral300};
+  }
+
+  &:indeterminate {
+    background-color: ${({ theme }) => theme.colors.primary600};
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
+
+    &:after {
+      content: '';
+      display: block;
+      position: relative;
+      color: white;
+      height: 2px;
+      width: 10px;
+      background-color: ${({ theme }) => theme.colors.neutral0};
+      left: 50%;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+
+    &:disabled {
+      background-color: ${({ theme }) => theme.colors.neutral200};
+      border: 1px solid ${({ theme }) => theme.colors.neutral300};
+      &:after {
+        background-color: ${({ theme }) => theme.colors.neutral500};
+      }
+    }
+  }
+`;
+
+export const BaseCheckbox = ({ indeterminate, size, name, value, onValueChange, ...inputProps }) => {
+  const checkboxRef = useRef();
+
+  useEffect(() => {
+    if (checkboxRef.current && indeterminate) {
+      checkboxRef.current.indeterminate = indeterminate;
+    } else {
+      checkboxRef.current.indeterminate = false;
+    }
+  }, [indeterminate]);
+
+  const handleValueChange = () => {
+    onValueChange(!value);
+  };
+
+  return (
+    <CheckboxInput
+      size={size}
+      checked={value}
+      onChange={handleValueChange}
+      type="checkbox"
+      ref={checkboxRef}
+      name={name}
+      {...inputProps}
+    />
+  );
+};
+
+BaseCheckbox.displayName = 'BaseCheckbox';
+
+BaseCheckbox.defaultProps = {
+  indeterminate: false,
+  name: null,
+  onValueChange: () => {},
+  size: 'M',
+  value: false,
+};
+
+BaseCheckbox.propTypes = {
+  /**
+   * If `true`, display the indeterminate state.
+   */
+  indeterminate: PropTypes.bool,
+  /**
+   * `Checkbox` input name
+   */
+  name: PropTypes.string,
+  /**
+   * The callback invoked when click on the `Checkbox`
+   * `(value: Bool) => {}`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * Set the size of the checkbox
+   */
+  size: PropTypes.oneOf(['M', 'L']),
+  value: PropTypes.bool,
+};

package/src/BaseCheckbox/BaseCheckbox.stories.mdx

@@ -0,0 +1,107 @@
+<!--- Button.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { BaseCheckbox } from './BaseCheckbox';
+
+<Meta title="Design System/Technical Components/BaseCheckbox" component={BaseCheckbox} />
+
+## Imports
+
+```js
+import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
+```
+
+# BaseCheckbox
+
+The `BaseCheckbox` component is the basis of the `Checkbox` component.
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [val, setValue] = useState(false);
+      return (
+        <BaseCheckbox
+          aria-label="Simple checkbox"
+          name="default"
+          onValueChange={(value) => setValue(value)}
+          value={val}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Indeterminate
+
+The `BaseCheckbox` can have an indeterminate state.
+
+<Canvas>
+  <Story name="indeterminate">
+    {() => {
+      const [checkedItems, setCheckedItems] = React.useState([true, false]);
+      const allChecked = checkedItems.every(Boolean);
+      const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+      return (
+        <ul>
+          <li>
+            <BaseCheckbox
+              id="parent"
+              name="parent"
+              indeterminate={isIndeterminate}
+              onValueChange={(value) => setCheckedItems([value, value])}
+              value={allChecked}
+            />
+            <label htmlFor="parent">Parent</label>
+          </li>
+          <li>
+            <ul>
+              <li>
+                <BaseCheckbox
+                  id="child1"
+                  name="child1"
+                  onValueChange={(value) => setCheckedItems([value, checkedItems[1]])}
+                  value={checkedItems[0]}
+                />
+                <label htmlFor="child1">Child 1</label>
+              </li>
+              <li>
+                <BaseCheckbox
+                  id="child2"
+                  name="child2"
+                  onValueChange={(value) => setCheckedItems([checkedItems[0], value])}
+                  value={checkedItems[1]}
+                />
+                <label htmlFor="child2">Child 2</label>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Disabled
+
+The `BaseCheckbox` can be disabled.
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      return (
+        <>
+          <BaseCheckbox name="disabled-unchecked" disabled aria-label="First checkbox" />
+          <BaseCheckbox name="disabled-indeterminate" disabled indeterminate aria-label="Second checkbox" />
+          <BaseCheckbox name="disabled-checked" disabled value={true} aria-label="Last checkbox" />
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={BaseCheckbox} />