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

package/src/Avatar/Avatar.js

@@ -1,110 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { avatarSize, previewSize } from './constants';
-import { Typography } from '../Typography';
-import { Flex } from '../Flex';
-
-const AvatarImg = styled.img`
-  border-radius: 50%;
-  object-fit: cover;
-  display: block;
-  position: relative;
-`;
-
-const AvatarImgWrapper = styled.div`
-  position: relative;
-  width: ${avatarSize / 16}rem;
-  height: ${avatarSize / 16}rem;
-  z-index: ${({ hovering }) => (hovering ? 1 : undefined)};
-`;
-
-const PreviewContainer = styled.img`
-  border-radius: 50%;
-  object-fit: cover;
-  position: absolute;
-  transform: translate(-${(previewSize - avatarSize) / 2}px, -100%);
-  margin-top: -${({ theme }) => theme.spaces[1]};
-`;
-
-const Overlay = styled.div`
-  z-index: 1;
-  border-radius: 30%;
-  position: absolute;
-  width: ${avatarSize / 16}rem;
-  height: ${avatarSize / 16}rem;
-  background: ${({ theme }) => theme.colors.neutral0};
-  opacity: 0.4;
-`;
-
-export const Avatar = ({ src, alt, preview }) => {
-  const [previewVisible, setPreviewVisible] = useState(false);
-
-  return (
-    <span>
-      {preview && previewVisible ? (
-        <PreviewContainer
-          aria-hidden
-          alt=""
-          width={`${previewSize}px`}
-          height={`${previewSize}px`}
-          src={preview === true ? src : preview}
-        />
-      ) : null}
-
-      <AvatarImgWrapper
-        hovering={preview && previewVisible}
-        onMouseEnter={() => setPreviewVisible(true)}
-        onMouseLeave={() => setPreviewVisible(false)}
-      >
-        {preview && previewVisible ? <Overlay /> : null}
-        <AvatarImg src={src} alt={alt} width={`${avatarSize}px`} height={`${avatarSize}px`} />
-      </AvatarImgWrapper>
-    </span>
-  );
-};
-
-const InitialsWrapper = styled(Flex)`
-  span {
-    line-height: 0;
-  }
-`;
-
-export const Initials = ({ children }) => {
-  return (
-    <InitialsWrapper
-      borderRadius="50%"
-      width={`${avatarSize}px`}
-      height={`${avatarSize}px`}
-      background="primary600"
-      justifyContent="center"
-    >
-      <Typography fontWeight="bold" textColor="buttonNeutral0" fontSize={0} textTransform="uppercase">
-        {children}
-      </Typography>
-    </InitialsWrapper>
-  );
-};
-
-Initials.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-Avatar.defaultProps = {
-  preview: undefined,
-};
-
-Avatar.propTypes = {
-  /**
-   * Alternative text
-   */
-  alt: PropTypes.string.isRequired,
-  /**
-   * Image src of the image preview (displayed on `Avatar` hover).
-   */
-  preview: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /**
-   * Image src of the `Avatar`
-   */
-  src: PropTypes.string.isRequired,
-};

package/src/Avatar/Avatar.stories.mdx

@@ -1,67 +0,0 @@
-<!--- Avatar.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Avatar, Initials } from './Avatar';
-import { AvatarGroup } from './AvatarGroup';
-import { Box } from '../Box';
-
-<Meta title="Design System/Components/Avatar" component={Avatar} />
-
-# Avatar
-
-Avatars are used to show a thumbnail of an asset or an individual.
-
-**Best practices**
-
-- Use the thumbnail preview feature only when the avatar might not be enough.
-- Use avatar in small areas such as tables.
-- In a form we should rather use the Card component.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Avatar)
-
-## Imports
-
-```js
-import { Avatar, AvatarGroup } from '@strapi/design-system/Avatar';
-```
-
-## Usage
-
-The avatar has a feature to display a preview of its thumbnail.
-
-<Canvas>
-  <Story name="base">
-    <Box padding={11}>
-      <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
-    </Box>
-  </Story>
-</Canvas>
-
-## Group
-
-<Canvas>
-  <Story name="group">
-    <Box padding={11}>
-      <AvatarGroup>
-        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
-        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
-        <Avatar src="https://avatars.githubusercontent.com/u/3874873?v=4" alt="marvin frachet" preview />
-      </AvatarGroup>
-    </Box>
-  </Story>
-</Canvas>
-
-## Basic initials
-
-<Canvas>
-  <Story name="initials">
-    <Box padding={11}>
-      <Initials>MF</Initials>
-    </Box>
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Avatar} />

package/src/Avatar/AvatarGroup.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { Flex } from '../Flex';
-import { avatarSize } from './constants';
-
-export const AvatarGroup = styled(Flex)`
-  & > * + * {
-    margin-left: -${avatarSize / 2}px;
-  }
-`;

package/src/Avatar/__tests__/Avatar.e2e.js

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

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

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

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

package/src/Avatar/index.js

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

package/src/Badge/Badge.js

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

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

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

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

package/src/BaseButton/BaseButton.js

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

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

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

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