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

package/src/Card/Card.stories.mdx

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

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

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

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

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

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

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

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

package/src/Card/CardHeader.js

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

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

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

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

@@ -0,0 +1,10 @@
+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';