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

package/src/Card/Card.stories.mdx

@@ -1,202 +0,0 @@
-<!--- Card.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import Pencil from '@strapi/icons/Pencil';
-import { Box } from '../Box';
-import { Card } from './Card';
-import { CardContent } from './CardContent';
-import { CardAsset } from './CardAsset';
-import { CardBadge } from './CardBadge';
-import { CardTitle, CardSubtitle } from './CardTitle';
-import { CardBody } from './CardBody';
-import { CardHeader } from './CardHeader';
-import { CardAction } from './CardAction';
-import { CardCheckbox } from './CardCheckbox';
-import { CardTimer } from './CardTimer';
-import { IconButton } from '../IconButton';
-import { KeyboardNavigable } from '../KeyboardNavigable';
-// Story assets
-import firstImgPath from './story-assets/first.jpg';
-
-<Meta title="Design System/Components/Card" component={Card} />
-
-# Card
-
-Cards are used to gather a set of information that needs to stand out from the rest of the page.
-
-**Best practices**
-
-- Content within the Card is mostly optional. Pick up what is needed.
-- Content can be added to the Card. Keep in mind that spacings are important in a Card component.
-- Main text is truncated at the end of the first line.
-- Prioritize content within the Card so users know exactly what are the main information.
-- If Call-to-Actions are used, they should be placed at the bottom of the Card.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Card)
-
-## Imports
-
-```js
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardCheckbox,
-  CardAction,
-  CardAsset,
-  CardTimer,
-  CardContent,
-  CardBadge,
-  CardTitle,
-  CardSubtitle,
-} from '@strapi/design-system/Card';
-```
-
-## Usage
-
-Cards are used to gather a set of related information.
-
-<Canvas>
-  <Story name="base">
-    <Card style={{ width: '240px' }} id="first">
-      <CardHeader>
-        <CardCheckbox value={true} />
-        <CardAction position="end">
-          <IconButton label="Edit the thing" icon={<Pencil />} />
-        </CardAction>
-        <CardAsset src={firstImgPath} />
-        <CardTimer>05:39</CardTimer>
-      </CardHeader>
-      <CardBody>
-        <CardContent>
-          <CardTitle>File name fezof hzoeah fohzeofhozaehfohzeoafhzoaehfohzaeo fhozahf ozaehfoa</CardTitle>
-          <CardSubtitle>PNG - 400✕400</CardSubtitle>
-        </CardContent>
-        <CardBadge>Doc</CardBadge>
-      </CardBody>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card without asset action
-
-Cards can be used without actions by removing the `CardAction` block.
-
-<Canvas>
-  <Story name="without asset action">
-    <Card style={{ width: '240px' }} id="second">
-      <CardHeader>
-        <CardCheckbox value={true} />
-        <CardAsset src={firstImgPath} />
-        <CardTimer>05:39</CardTimer>
-      </CardHeader>
-      <CardBody>
-        <CardContent>
-          <CardTitle>File name</CardTitle>
-          <CardSubtitle>PNG - 400✕400</CardSubtitle>
-        </CardContent>
-        <CardBadge>Doc</CardBadge>
-      </CardBody>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card with asset icon
-
-The image asset can be replaced by an icon.
-
-<Canvas>
-  <Story name="with asset icon">
-    <Card style={{ width: '240px' }} id="second">
-      <CardHeader>
-        <CardCheckbox value={true} />
-        <CardAsset>
-          <Pencil aria-label="Just a picture" />
-        </CardAsset>
-        <CardTimer>05:39</CardTimer>
-      </CardHeader>
-      <CardBody>
-        <CardContent>
-          <CardTitle>File name</CardTitle>
-          <CardSubtitle>PNG - 400✕400</CardSubtitle>
-        </CardContent>
-        <CardBadge>Doc</CardBadge>
-      </CardBody>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card without asset action nor timer
-
-The `CardTimer` can be removed as well as the `CardAction` block.
-
-<Canvas>
-  <Story name="without asset action nor timer">
-    <Card style={{ width: '240px' }} id="third">
-      <CardHeader>
-        <CardCheckbox value={true} />
-        <CardAsset src={firstImgPath} />
-      </CardHeader>
-      <CardBody>
-        <CardContent>
-          <CardTitle>File name</CardTitle>
-          <CardSubtitle>PNG - 400✕400</CardSubtitle>
-        </CardContent>
-        <CardBadge>Doc</CardBadge>
-      </CardBody>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card without asset
-
-If no `CardHeader` is present, the card will display a version with the body only.
-
-<Canvas>
-  <Story name="without asset">
-    <Card style={{ width: '240px' }} id="fourth">
-      <CardBody>
-        <Box padding={2} background="primary100">
-          <Pencil />
-        </Box>
-        <CardContent paddingLeft={2}>
-          <CardTitle>File name</CardTitle>
-          <CardSubtitle>PNG - 400✕400</CardSubtitle>
-        </CardContent>
-        <CardBadge>Doc</CardBadge>
-      </CardBody>
-    </Card>
-  </Story>
-</Canvas>
-
-## Card keyboard navigable
-
-You wrap the Card in a `KeyboardNavigable` block to ensure it can be scanned using the keyboard.
-
-<Canvas>
-  <Story name="keyboard navigable">
-    <KeyboardNavigable tagName="article">
-      {['first', 'second', 'third', 'fourth'].map((id) => (
-        <Card style={{ width: '240px' }} id={id} key={id}>
-          <CardBody>
-            <Box padding={2} background="primary100">
-              <Pencil />
-            </Box>
-            <CardContent paddingLeft={2}>
-              <CardTitle>File name</CardTitle>
-              <CardSubtitle>PNG - 400✕400</CardSubtitle>
-            </CardContent>
-            <CardBadge>Doc</CardBadge>
-          </CardBody>
-        </Card>
-      ))}
-    </KeyboardNavigable>
-  </Story>
-</Canvas>
-
-## Props
-
-The Card, CardBody, CardHeader, and CardContent components wraps all their children in the (Box)[https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-technical-components-box--base] component, so you can pass all Box props to change their style.
-
-<ArgsTable of={Card} />

package/src/Card/CardAction.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-import { Stack } from '../Stack';
-
-export const CardAction = styled(Stack).attrs({
-  horizontal: true,
-  spacing: 2,
-})`
-  position: absolute;
-  top: ${({ theme }) => theme.spaces[3]};
-  right: ${({ position, theme }) => (position === 'end' ? theme.spaces[3] : undefined)};
-  left: ${({ position, theme }) => (position === 'start' ? theme.spaces[3] : undefined)};
-`;

package/src/Card/CardAsset.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Flex } from '../Flex';
-
-const CardAssetImg = styled.img`
-  // inline flows is based on typography and displays an extra white space below the image
-  // switch to block is required in order to make the img stick the bottom of the container
-  // addition infos: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image
-  margin: 0;
-  padding: 0;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-`;
-
-const CardAssetSizes = {
-  S: 88,
-  M: 164,
-};
-
-const CardAssetWrapper = styled.div`
-  display: flex;
-  justify-content: center;
-  height: ${({ size }) => CardAssetSizes[size] / 16}rem;
-  width: 100%;
-  background: repeating-conic-gradient(${({ theme }) => theme.colors.neutral100} 0% 25%, transparent 0% 50%) 50% / 20px
-    20px;
-  border-top-left-radius: ${({ theme }) => theme.borderRadius};
-  border-top-right-radius: ${({ theme }) => theme.borderRadius};
-`;
-
-export const CardAsset = ({ size, children, ...props }) => {
-  return (
-    <CardAssetWrapper size={size}>
-      {children ? <Flex>{children}</Flex> : <CardAssetImg {...props} aria-hidden />}
-    </CardAssetWrapper>
-  );
-};
-
-CardAsset.defaultProps = {
-  children: undefined,
-  size: 'M',
-};
-
-CardAsset.propTypes = {
-  children: PropTypes.node,
-  size: PropTypes.oneOf(['S', 'M']),
-};

package/src/Card/CardBadge.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Badge } from '../Badge';
-
-const CardBadgeWrapper = styled.div`
-  margin-left: auto;
-  flex-shrink: 0;
-`;
-
-const BadgePosition = styled(Badge)`
-  margin-left: ${({ theme }) => theme.spaces[1]};
-`;
-
-export const CardBadge = (props) => (
-  <CardBadgeWrapper>
-    <BadgePosition {...props} />
-  </CardBadgeWrapper>
-);

package/src/Card/CardBody.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-
-export const CardBody = (props) => {
-  return (
-    <Box paddingLeft={3} paddingRight={3} paddingTop={2} paddingBottom={2}>
-      <Flex {...props} alignItems="flex-start" />
-    </Box>
-  );
-};

package/src/Card/CardCheckbox.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { CardAction } from './CardAction';
-import { BaseCheckbox } from '../BaseCheckbox';
-import { useCard } from './CardContext';
-
-export const CardCheckbox = (props) => {
-  const { id } = useCard();
-
-  return (
-    <CardAction position="start">
-      <BaseCheckbox aria-labelledby={`${id}-title`} {...props} />
-    </CardAction>
-  );
-};

package/src/Card/CardContent.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import styled from 'styled-components';
-
-const BreakBox = styled(Box)`
-  word-break: break-all;
-`;
-
-export const CardContent = ({ children, ...props }) => {
-  return <BreakBox {...props}>{children}</BreakBox>;
-};
-
-CardContent.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Card/CardContext.js

@@ -1,5 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const CardContext = createContext();
-
-export const useCard = () => useContext(CardContext);

package/src/Card/CardHeader.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Flex } from '../Flex';
-
-const CardHeaderWrapper = styled(Flex)`
-  position: relative;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-
-export const CardHeader = (props) => {
-  return <CardHeaderWrapper justifyContent="center" {...props} />;
-};

package/src/Card/CardTimer.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-
-const CardTimerWrapper = styled(Box)`
-  position: absolute;
-  bottom: ${({ theme }) => theme.spaces[1]};
-  right: ${({ theme }) => theme.spaces[1]};
-`;
-
-export const CardTimer = ({ children, ...props }) => (
-  <CardTimerWrapper padding={1} background="neutral800" color="neutral0" as="time" hasRadius {...props}>
-    <Typography variant="pi" textColor="neutral0">
-      {children}
-    </Typography>
-  </CardTimerWrapper>
-);
-
-CardTimer.propTypes = {
-  children: PropTypes.node.isRequired,
-};

package/src/Card/CardTitle.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Typography } from '../Typography';
-import { useCard } from './CardContext';
-
-export const CardTitle = (props) => {
-  const { id } = useCard();
-  return <Typography variant="pi" id={`${id}-title`} textColor="neutral800" fontWeight="bold" as="div" {...props} />;
-};
-
-export const CardSubtitle = (props) => {
-  return <Typography variant="pi" {...props} textColor="neutral600" as="div" />;
-};

package/src/Card/__tests__/Card.e2e.js

@@ -1,164 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test, expect } from '@playwright/test';
-
-test.describe.parallel('Card', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--base&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset action', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--without-asset-action&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset action nor timer', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--without-asset-action-nor-timer&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--without-asset&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('keyboard navigable', () => {
-      test.beforeEach(async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--keyboard-navigable&viewMode=story');
-        await injectAxe(page);
-      });
-
-      test('check a11y', async ({ page }) => {
-        await checkA11y(page);
-      });
-
-      test('moves to the next element when pressing ArrowDown', async ({ page }) => {
-        await page.focus('#first');
-
-        await page.keyboard.press('ArrowDown');
-        await expect(page.locator('#second')).toBeFocused();
-
-        await page.keyboard.press('ArrowDown');
-        await expect(page.locator('#third')).toBeFocused();
-
-        await page.keyboard.press('ArrowDown');
-        await expect(page.locator('#fourth')).toBeFocused();
-
-        await page.keyboard.press('ArrowDown');
-        await expect(page.locator('#first')).toBeFocused();
-      });
-
-      test('moves to the next element when pressing ArrowRight', async ({ page }) => {
-        await page.focus('#first');
-
-        await page.keyboard.press('ArrowRight');
-        await expect(page.locator('#second')).toBeFocused();
-
-        await page.keyboard.press('ArrowRight');
-        await expect(page.locator('#third')).toBeFocused();
-
-        await page.keyboard.press('ArrowRight');
-        await expect(page.locator('#fourth')).toBeFocused();
-
-        await page.keyboard.press('ArrowRight');
-        await expect(page.locator('#first')).toBeFocused();
-      });
-
-      test('moves to the previous element when pressing ArrowUp', async ({ page }) => {
-        await page.focus('#fourth');
-
-        await page.keyboard.press('ArrowUp');
-        await expect(page.locator('#third')).toBeFocused();
-
-        await page.keyboard.press('ArrowUp');
-        await expect(page.locator('#second')).toBeFocused();
-
-        await page.keyboard.press('ArrowUp');
-        await expect(page.locator('#first')).toBeFocused();
-
-        await page.keyboard.press('ArrowUp');
-        await expect(page.locator('#fourth')).toBeFocused();
-      });
-
-      test('moves to the previous element when pressing ArrowLeft', async ({ page }) => {
-        await page.focus('#fourth');
-
-        await page.keyboard.press('ArrowLeft');
-        await expect(page.locator('#third')).toBeFocused();
-
-        await page.keyboard.press('ArrowLeft');
-        await expect(page.locator('#second')).toBeFocused();
-
-        await page.keyboard.press('ArrowLeft');
-        await expect(page.locator('#first')).toBeFocused();
-
-        await page.keyboard.press('ArrowLeft');
-        await expect(page.locator('#fourth')).toBeFocused();
-      });
-
-      test('moves to the last element when pressing End', async ({ page }) => {
-        await page.focus('#first');
-        await page.keyboard.press('End');
-        await expect(page.locator('#fourth')).toBeFocused();
-      });
-
-      test('moves to the first element when pressing Home', async ({ page }) => {
-        await page.focus('#fourth');
-        await page.keyboard.press('Home');
-        await expect(page.locator('#first')).toBeFocused();
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--base&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset action', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto(
-          '/iframe.html?id=design-system-components-card--without-asset-action&viewMode=story&theme=dark',
-        );
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset action nor timer', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto(
-          '/iframe.html?id=design-system-components-card--without-asset-action-nor-timer&viewMode=story&theme=dark',
-        );
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('without asset', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-card--without-asset&viewMode=story&theme=dark');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-});

package/src/Card/index.js

@@ -1,10 +0,0 @@
-export * from './Card';
-export * from './CardAction';
-export * from './CardAsset';
-export * from './CardBadge';
-export * from './CardBody';
-export * from './CardCheckbox';
-export * from './CardContent';
-export * from './CardHeader';
-export * from './CardTimer';
-export * from './CardTitle';