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

package/src/Button/Button.js

@@ -1,138 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-import styled, { keyframes } from 'styled-components';
-import Loader from '@strapi/icons/Loader';
-import { Typography } from '../Typography';
-import { Box } from '../Box';
-import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';
-import { VARIANTS, BUTTON_SIZES } from './constants';
-import { BaseButton } from '../BaseButton';
-
-const rotation = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-
-const LoadingWrapper = styled.div`
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-
-const BoxFullHeight = styled(Box)`
-  height: 100%;
-`;
-
-// TODO: Check the L size button with Maeva
-export const ButtonWrapper = styled(BaseButton)`
-  align-items: center;
-  padding: ${({ theme, size }) => `${size === 'S' ? theme.spaces[2] : '10px'} ${theme.spaces[4]}`};
-  background: ${({ theme }) => theme.colors.buttonPrimary600};
-  border: 1px solid ${({ theme }) => theme.colors.buttonPrimary600};
-  ${Box} {
-    display: flex;
-    align-items: center;
-  }
-  ${Typography} {
-    color: ${({ theme }) => theme.colors.buttonNeutral0};
-  }
-  &[aria-disabled='true'] {
-    ${getDisabledStyle}
-    &:active {
-      ${getDisabledStyle}
-    }
-  }
-  &:hover {
-    ${getHoverStyle}
-  }
-  &:active {
-    ${getActiveStyle}
-  }
-  ${getVariantStyle}
-  ${({ fullWidth }) =>
-    fullWidth &&
-    `
-    display: inline-flex;
-    justify-content: center;
-    width: 100%;
-  `}
-`;
-
-export const Button = React.forwardRef(
-  ({ variant, startIcon, endIcon, disabled, children, onClick, size, loading, fullWidth, ...props }, ref) => {
-    const isDisabled = disabled || loading;
-
-    const handleClick = (e) => {
-      if (!isDisabled && onClick) {
-        onClick(e);
-      }
-    };
-
-    return (
-      <ButtonWrapper
-        ref={ref}
-        aria-disabled={isDisabled}
-        disabled={isDisabled}
-        size={size}
-        variant={variant}
-        onClick={handleClick}
-        fullWidth={fullWidth}
-        {...props}
-      >
-        {(startIcon || loading) && (
-          <BoxFullHeight aria-hidden={true} paddingRight={2}>
-            {loading ? (
-              <LoadingWrapper>
-                <Loader />
-              </LoadingWrapper>
-            ) : (
-              startIcon
-            )}
-          </BoxFullHeight>
-        )}
-
-        {size === 'S' ? (
-          <Typography variant="pi" fontWeight="bold">
-            {children}
-          </Typography>
-        ) : (
-          <Typography fontWeight="bold">{children}</Typography>
-        )}
-
-        {endIcon && (
-          <Box aria-hidden={true} paddingLeft={2}>
-            {endIcon}
-          </Box>
-        )}
-      </ButtonWrapper>
-    );
-  },
-);
-
-Button.displayName = 'Button';
-
-Button.defaultProps = {
-  disabled: false,
-  endIcon: undefined,
-  fullWidth: false,
-  loading: false,
-  onClick: undefined,
-  size: 'S',
-  startIcon: undefined,
-  variant: 'default',
-};
-Button.propTypes = {
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  endIcon: PropTypes.element,
-  fullWidth: PropTypes.bool,
-  loading: PropTypes.bool,
-  onClick: PropTypes.func,
-  size: PropTypes.oneOf(BUTTON_SIZES),
-  startIcon: PropTypes.element,
-  variant: PropTypes.oneOf(VARIANTS),
-};

package/src/Button/Button.stories.mdx

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

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

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

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

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

package/src/Button/utils.js

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

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