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

package/src/Button/Button.stories.mdx

@@ -0,0 +1,216 @@
+<!--- Button.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Information from '@strapi/icons/Information';
+import Plus from '@strapi/icons/Plus';
+import Write from '@strapi/icons/Write';
+import { Button } from './Button';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+import { Stack } from '../Stack';
+
+<Meta title="Design System/Components/Button" component={Button} />
+
+# Button
+
+Buttons are a way to perform actions within a 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.
+
+**Best practices**
+
+- A 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-experiments/tree/main/packages/strapi-design-system/src/Button)
+
+## Imports
+
+```js
+import { Button } from '@strapi/design-system/Button';
+```
+
+## Usage
+
+The most common button component used in the interface (primary action). It can have different variants and meaning.
+
+<Canvas withSource="open">
+  <Story name="base" parameters={{ docs: { source: { code: '<Button>Default button</Button>' } } }}>
+    <Box paddingBottom={2}>
+      <Button variant="default">Default</Button>
+    </Box>
+  </Story>
+</Canvas>
+
+### Button sizes
+
+Main actions usually use a L button (top of a screen, footer of a modal, ...). For subsidiary action, a S button 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 withSource="open">
+  <Story
+    name="sizes"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Button size="S">Small</Button>
+<Button size="L">Large</Button>
+`,
+        },
+      },
+    }}
+  >
+    <Flex>
+      <Box paddingRight={1}>
+        <Button size="S">Small</Button>
+      </Box>
+      <Button size="L">Large</Button>
+    </Flex>
+  </Story>
+</Canvas>
+
+### Button variants
+
+Use the variant prop to change the visual style of the Button.
+You can set the value to `default`, `secondary`, `tertiary`, `success`, `danger`, `success-light`, or `danger-light`.
+
+<Canvas withSource="open">
+  <Story
+    name="variants"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Button variant='default'>Default</Button>
+<Button variant='secondary'>Secondary</Button>
+<Button variant='tertiary'>Tertiary</Button>
+...
+  `,
+        },
+      },
+    }}
+  >
+    <Stack spacing={2} horizontal>
+      {['default', 'secondary', 'tertiary', 'success', 'danger', 'success-light', 'danger-light', 'ghost'].map(
+        (variant) => (
+          <Button onClick={(e) => console.log(e)} variant={variant} key={variant}>
+            {variant}
+          </Button>
+        ),
+      )}
+    </Stack>
+  </Story>
+</Canvas>
+
+| State                | Description                                                                                                                                                                                                                         |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary button       | Use a Primary button to inform about the importance of an action. This is the strongest call to action. No more than one primary button should appear on a screen. Examples: Save, Finish, ...                                      |
+| Secondary button     | Use a Secondary button mostly next to a primary button. This action has to be less important or is less likely to be perform by a user. Examples: Edit model, Configure the view, ...                                               |
+| Tertiary button      | Use a Tertiary button when the action has a low impact or is the least likely to be perform by a user. Examples: Cancel, Close, ...                                                                                                 |
+| Success button       | Use a Success button for reassurance. Use it preferably to indicate a validation, a success, an end of a workflow, ... Examples: Confirm, Save, ...                                                                                 |
+| Danger button        | Use a Danger button to indicate a destructive action. They are most commonly found in confirmation modals. More generally the red color and danger style indicate an important action that could not be reversible. Example: Delete |
+| Success-light button | Use a Success-light button to indicate a lower emphasis style to a successful action.                                                                                                                                               |
+| Danger-light button  | Use a Danger-light button to indicate a lower emphasis style to a destructive action. Example: Delete this entry                                                                                                                    |
+
+### Button with icon
+
+A button 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 withSource="open">
+  <Story
+    name="icons"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Button startIcon={<Information />}>Information</Button>
+<Button variant='secondary' endIcon={<Write />}>Write content</Button>
+<Button variant='secondary' endIcon={<Write />}>Write content</Button>
+<Button startIcon={<Information />} loading>With a loader</Button>
+`,
+        },
+      },
+    }}
+  >
+    <Stack spacing={2} horizontal>
+      <Button startIcon={<Information />}>Information</Button>
+      <Button variant="secondary" endIcon={<Write />}>
+        Write content
+      </Button>
+      <Button startIcon={<Information />} loading>
+        With a loader
+      </Button>
+      <Button startIcon={<Plus />}>Woops</Button>
+    </Stack>
+  </Story>
+</Canvas>
+
+### Button disabled
+
+All action that cannot be performed yet.
+
+<Canvas withSource="open">
+  <Story
+    name="disabled"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Button disabled startIcon={<Information />}>Information</Button>
+`,
+        },
+      },
+    }}
+  >
+    <Box paddingRight={1}>
+      <Button disabled onClick={() => console.log('information')} startIcon={<Information />}>
+        Information
+      </Button>
+    </Box>
+  </Story>
+</Canvas>
+
+### Full width button
+
+All action that cannot be performed yet.
+
+<Canvas withSource="open">
+  <Story
+    name="fullWidth"
+    parameters={{
+      docs: {
+        source: {
+          code: `
+<Button fullWidth>Information</Button>
+`,
+        },
+      },
+    }}
+  >
+    <Box paddingRight={1}>
+      <Button
+        fullWidth
+        onClick={() => console.log('information')}
+        startIcon={<Information />}
+        endIcon={<Information />}
+      >
+        Information
+      </Button>
+    </Box>
+  </Story>
+</Canvas>
+
+## Accessibility
+
+- Button has role of button.
+- When Button has focus, `Space` or `Enter` activates it.
+
+## Props
+
+<ArgsTable of={Button} />

package/src/Button/__tests__/Button.e2e.js

@@ -0,0 +1,89 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Button', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-button--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-button--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-button--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-button--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-button--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-button--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-button--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-button--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-button--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-button--disabled&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+});

package/src/Button/__tests__/utils.spec.js

@@ -0,0 +1,19 @@
+import { getVariantColorName } from '../utils';
+
+describe('utils', () => {
+  describe('getVariantsColorName', () => {
+    it('should return primary for the default and secondary', () => {
+      expect(getVariantColorName('default')).toEqual('primary');
+      expect(getVariantColorName('secondary')).toEqual('primary');
+    });
+
+    it('should return the right color name for light variants', () => {
+      expect(getVariantColorName('success-light')).toEqual('success');
+      expect(getVariantColorName('danger-light')).toEqual('danger');
+    });
+
+    it('should return primary by default', () => {
+      expect(getVariantColorName('unknown')).toEqual('primary');
+    });
+  });
+});

package/src/Button/constants.js

@@ -0,0 +1,12 @@
+export const SUCCESS_LIGHT = 'success-light';
+export const DANGER_LIGHT = 'danger-light';
+export const DEFAULT = 'default';
+export const TERTIARY = 'tertiary';
+export const SECONDARY = 'secondary';
+export const DANGER = 'danger';
+export const SUCCESS = 'success';
+export const GHOST = 'ghost';
+
+export const LIGHT_VARIANTS = [SUCCESS_LIGHT, DANGER_LIGHT];
+export const VARIANTS = [DEFAULT, TERTIARY, SECONDARY, DANGER, SUCCESS, GHOST, ...LIGHT_VARIANTS];
+export const BUTTON_SIZES = ['S', 'L'];

package/src/Button/index.js

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

package/src/Button/utils.js

@@ -0,0 +1,170 @@
+import { Typography } from '../Typography';
+import {
+  LIGHT_VARIANTS,
+  VARIANTS,
+  SECONDARY,
+  TERTIARY,
+  DEFAULT,
+  GHOST,
+  DANGER,
+  SUCCESS,
+  DANGER_LIGHT,
+  SUCCESS_LIGHT,
+} from './constants';
+
+export const getVariantColorName = (variant) => {
+  if (LIGHT_VARIANTS.includes(variant)) {
+    return variant.substring(0, variant.lastIndexOf('-'));
+  }
+  if (variant === TERTIARY) {
+    return 'neutral';
+  }
+  if ([DEFAULT, SECONDARY].includes(variant) || !VARIANTS.includes(variant)) {
+    return 'primary';
+  }
+
+  return variant;
+};
+
+export const getDisabledStyle = ({ theme }) => {
+  return `
+    border: 1px solid ${theme.colors.neutral200};
+    background: ${theme.colors.neutral150};
+    ${Typography} {
+      color: ${theme.colors.neutral600};
+    }
+    svg {
+      > g, path {
+        fill: ${theme.colors.neutral600};
+      }
+    }
+  `;
+};
+
+export const getHoverStyle = ({ theme, variant }) => {
+  if ([...LIGHT_VARIANTS, SECONDARY].includes(variant)) {
+    return `
+      background-color: ${theme.colors.neutral0};
+    `;
+  }
+  if (variant === TERTIARY) {
+    return `
+      background-color: ${theme.colors.neutral100};
+    `;
+  }
+
+  if (variant === GHOST) {
+    return `
+      background-color: ${theme.colors.neutral100};
+    `;
+  }
+
+  if (variant === DEFAULT) {
+    return `
+      border: 1px solid ${theme.colors.buttonPrimary500};
+      background: ${theme.colors.buttonPrimary500};
+    `;
+  }
+
+  return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}500`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}500`]};
+  `;
+};
+
+export const getActiveStyle = ({ theme, variant }) => {
+  if ([...LIGHT_VARIANTS, SECONDARY].includes(variant)) {
+    return `
+      background-color: ${theme.colors.neutral0};
+      border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+      ${Typography} {
+        color: ${theme.colors[`${getVariantColorName(variant)}600`]};
+      }
+      svg {
+        > g, path {
+          fill: ${theme.colors[`${getVariantColorName(variant)}600`]};
+        }
+      }
+    `;
+  }
+  if (variant === TERTIARY) {
+    return `
+      background-color: ${theme.colors.neutral150};
+    `;
+  }
+
+  return `
+    border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+    background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+  `;
+};
+
+export const getVariantStyle = ({ theme, variant }) => {
+  switch (variant) {
+    case DANGER_LIGHT:
+    case SUCCESS_LIGHT:
+    case SECONDARY: {
+      return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}200`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}100`]};
+          ${Typography} {
+            color: ${theme.colors[`${getVariantColorName(variant)}700`]};
+          }
+          svg {
+            > g, path {
+              fill: ${theme.colors[`${getVariantColorName(variant)}700`]};
+            }
+          }
+        `;
+    }
+    case TERTIARY: {
+      return `
+          border: 1px solid ${theme.colors.neutral200};
+          background: ${theme.colors.neutral0};
+          ${Typography} {
+            color: ${theme.colors.neutral800};
+          }
+          svg {
+            > g, path {
+              fill: ${theme.colors.neutral800};
+            }
+          }
+        `;
+    }
+    case GHOST: {
+      return `
+        border: 1px solid transparent;
+        background: transparent;
+
+        ${Typography} {
+          color: ${theme.colors.neutral800};
+        }
+
+        svg {
+          > g, path {
+            fill: ${theme.colors.neutral500};
+          }
+        }
+      `;
+    }
+    case SUCCESS:
+    case DANGER: {
+      return `
+          border: 1px solid ${theme.colors[`${getVariantColorName(variant)}600`]};
+          background: ${theme.colors[`${getVariantColorName(variant)}600`]};
+          ${Typography} {
+            color: ${theme.colors.neutral0};
+          }
+        `;
+    }
+    default: {
+      return `
+          svg {
+            > g, path {
+              fill: ${theme.colors.buttonNeutral0};
+            }
+          }
+        `;
+    }
+  }
+};

package/src/Card/Card.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import { CardContext } from './CardContext';
+import { useId } from '../helpers/useId';
+
+export const Card = ({ id, ...props }) => {
+  const generatedId = useId('card', id);
+
+  return (
+    <CardContext.Provider value={{ id: generatedId }}>
+      <Box
+        id={id}
+        tabIndex={0}
+        hasRadius
+        background="neutral0"
+        borderStyle="solid"
+        borderWidth="1px"
+        borderColor="neutral150"
+        shadow="tableShadow"
+        as="article"
+        aria-labelledby={`${generatedId}-title`}
+        {...props}
+      />
+    </CardContext.Provider>
+  );
+};
+
+Card.defaultProps = {
+  id: undefined,
+};
+
+Card.propTypes = {
+  id: PropTypes.string,
+};