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

package/src/CarouselInput/Carousel.js

@@ -0,0 +1,138 @@
+import React, { Children, cloneElement, useRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import ChevronRight from '@strapi/icons/ChevronRight';
+import ChevronLeft from '@strapi/icons/ChevronLeft';
+import { Icon } from '../Icon';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
+import { Flex } from '../Flex';
+import { Tooltip } from '../Tooltip';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+
+const CarouselGrid = styled(Box)`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: 'startAction slides endAction';
+`;
+
+const CarouselSlides = styled(Box)`
+  grid-area: slides;
+`;
+
+const CarouselAction = styled.button`
+  grid-area: ${({ area }) => area};
+
+  &:focus svg path,
+  &:hover svg path {
+    fill: ${({ theme }) => theme.colors.neutral900};
+  }
+`;
+
+export const Carousel = ({
+  actions,
+  children,
+  label,
+  nextLabel,
+  onNext,
+  onPrevious,
+  previousLabel,
+  secondaryLabel,
+  selectedSlide,
+  ...props
+}) => {
+  const prevActionRef = useRef(null);
+  const nextActionRef = useRef(null);
+
+  const childrenArray = Children.toArray(children).map((node, index) =>
+    cloneElement(node, { selected: index === selectedSlide }),
+  );
+
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case KeyboardKeys.RIGHT: {
+        e.preventDefault();
+        nextActionRef.current.focus();
+        onNext();
+        break;
+      }
+
+      case KeyboardKeys.LEFT: {
+        e.preventDefault();
+        prevActionRef.current.focus();
+        onPrevious();
+        break;
+      }
+
+      default:
+        break;
+    }
+  };
+
+  const hasChildren = childrenArray.length > 1;
+
+  return (
+    <Box {...props} onKeyDown={handleKeyDown}>
+      <Box padding={2} borderColor="neutral200" hasRadius background="neutral100">
+        <CarouselGrid as="section" aria-roledescription="carousel" aria-label={label} position="relative">
+          {hasChildren && (
+            <CarouselAction
+              onClick={onPrevious}
+              area="startAction"
+              ref={prevActionRef}
+              aria-label={previousLabel}
+              type="button"
+            >
+              <Icon as={ChevronLeft} aria-hidden={true} width="6px" height="10px" color="neutral600" />
+            </CarouselAction>
+          )}
+
+          {hasChildren && (
+            <CarouselAction onClick={onNext} area="endAction" ref={nextActionRef} aria-label={nextLabel} type="button">
+              <Icon as={ChevronRight} aria-hidden={true} width="6px" height="10px" color="neutral600" />
+            </CarouselAction>
+          )}
+
+          <CarouselSlides aria-live="polite" paddingLeft={2} paddingRight={2} width="100%" overflow="hidden">
+            {childrenArray}
+          </CarouselSlides>
+          {actions}
+        </CarouselGrid>
+        {secondaryLabel && (
+          <Box paddingTop={2} paddingLeft={4} paddingRight={4}>
+            <Tooltip label={secondaryLabel}>
+              <Flex justifyContent="center">
+                <Typography variant="pi" textColor="neutral600" ellipsis>
+                  {secondaryLabel}
+                </Typography>
+              </Flex>
+            </Tooltip>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+Carousel.defaultProps = {
+  actions: undefined,
+  error: undefined,
+  hint: undefined,
+  required: false,
+  secondaryLabel: undefined,
+};
+
+Carousel.propTypes = {
+  actions: PropTypes.node,
+  children: PropTypes.node.isRequired,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  label: PropTypes.string.isRequired,
+  nextLabel: PropTypes.string.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onPrevious: PropTypes.func.isRequired,
+  previousLabel: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  secondaryLabel: PropTypes.string,
+  selectedSlide: PropTypes.number.isRequired,
+};

package/src/CarouselInput/Carousel.stories.mdx

@@ -0,0 +1,149 @@
+<!--- CarouselInput.stories.mdx --->
+
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { useState } from 'react';
+import Pencil from '@strapi/icons/Pencil';
+import Play from '@strapi/icons/Play';
+import Trash from '@strapi/icons/Trash';
+import Plus from '@strapi/icons/Plus';
+import { CarouselInput } from './CarouselInput';
+import { CarouselSlide } from './CarouselSlide';
+import { CarouselImage } from './CarouselImage';
+import { CarouselActions } from './CarouselActions';
+import { IconButton } from '../IconButton';
+import firstPathImg from './story-assets/first.jpg';
+
+<Meta title="Design System/Components/CarouselInput" component={CarouselInput} />
+
+# CarouselInput
+
+Carousels are slideshow components for navigating through a set of assets.
+
+**Best practices**
+
+- Carousels should be mostly used in forms.
+- Carousels can also be used to display only one asset.
+- The end of a CarouselInput label should indicate the amount of included assets.
+- A set of actions is possible via Icon Buttons within a CarouselInput.
+- Carousels should at least give the possibility to remove an asset from it.
+- Carousels don't have any caption but can have a description line.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/CarouselInput)
+
+## Imports
+
+```js
+import { CarouselInput, CarouselSlide, CarouselImage, CarouselActions } from '@strapi/design-system/CarouselInput';
+```
+
+## Usage
+
+A CarouselInput is mostly used in forms. Thanks to their navigational arrows they allow to easily switch from an asset to another. It has an infinite loop. A set of actions is possible via Icon Buttons within a CarouselInput.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [selectedIndex, setSelectedIndex] = useState(0);
+      const handleNext = () => {
+        setSelectedIndex((current) => (current < 2 ? current + 1 : 0));
+      };
+      const handlePrevious = () => {
+        setSelectedIndex((current) => (current > 0 ? current - 1 : 2));
+      };
+      return (
+        <CarouselInput
+          label={`Carousel of numbers (${selectedIndex + 1}/3)`}
+          selectedSlide={selectedIndex}
+          secondaryLabel="/packages/strapi-design-system/src/Carousel/story-assets/first.jpg"
+          previousLabel="Previous slide"
+          nextLabel="Next slide"
+          onNext={handleNext}
+          onPrevious={handlePrevious}
+          hint="Description line"
+          actions={
+            <CarouselActions>
+              <IconButton onClick={() => console.log('edit')} label="Edit" id="edit" icon={<Pencil />} />
+              <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
+              <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
+              <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
+            </CarouselActions>
+          }
+          style={{ width: '242px' }}
+        >
+          <CarouselSlide label="1 of 3 slides">
+            <CarouselImage src={firstPathImg} alt="First" />
+          </CarouselSlide>
+          <CarouselSlide label="2 of 3 slides">
+            <CarouselImage src={firstPathImg} alt="second" />
+          </CarouselSlide>
+          <CarouselSlide label="3 of 3 slides">
+            <CarouselImage src={firstPathImg} alt="third" />
+          </CarouselSlide>
+        </CarouselInput>
+      );
+    }}
+  </Story>
+  <Story name="one slide only">
+    {() => {
+      return (
+        <CarouselInput
+          label={`Carousel of numbers 1/1)`}
+          selectedSlide={0}
+          previousLabel="Previous slide"
+          nextLabel="Next slide"
+          onNext={() => {}}
+          onPrevious={() => {}}
+          hint="Description line"
+          actions={
+            <CarouselActions>
+              <IconButton onClick={() => console.log('edit')} label="Edit" id="edit" icon={<Pencil />} />
+              <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
+              <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
+              <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
+            </CarouselActions>
+          }
+          style={{ width: '242px' }}
+        >
+          <CarouselSlide label="1 of 1 slides">
+            <CarouselImage src={firstPathImg} alt="First" />
+          </CarouselSlide>
+        </CarouselInput>
+      );
+    }}
+  </Story>
+  <Story name="broken-asset">
+    {() => {
+      return (
+        <CarouselInput
+          label={`Carousel of numbers 1/1)`}
+          selectedSlide={0}
+          previousLabel="Previous slide"
+          nextLabel="Next slide"
+          onNext={() => {}}
+          onPrevious={() => {}}
+          hint="Description line"
+          actions={
+            <CarouselActions>
+              <IconButton onClick={() => console.log('edit')} label="Edit" id="edit" icon={<Pencil />} />
+              <IconButton onClick={() => console.log('Create')} label="Create" icon={<Plus />} />
+              <IconButton onClick={() => console.log('Delete')} label="Delete" icon={<Trash />} />
+              <IconButton onClick={() => console.log('Publish')} label="Publish" icon={<Play />} />
+            </CarouselActions>
+          }
+          style={{ width: '242px' }}
+        >
+          <CarouselSlide label="1 of 1 slides">
+            <CarouselImage src={'asdf'} alt="my image" />
+          </CarouselSlide>
+        </CarouselInput>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+The CarouselInput component wraps all its 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 its style.
+
+<ArgsTable of={CarouselInput} />

package/src/CarouselInput/CarouselActions.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Stack } from '../Stack';
+
+export const CarouselActions = (props) => (
+  <Stack justifyContent="center" horizontal spacing={1} position="absolute" width="100%" bottom={1} {...props} />
+);

package/src/CarouselInput/CarouselImage.js

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '../Box';
+import styled from 'styled-components';
+import { Tooltip } from '../Tooltip';
+import { ellipsisStyle } from '../Typography/utils';
+
+const StyledImage = styled(Box)`
+  height: 100%;
+  ${ellipsisStyle({ ellipsis: true })}
+`;
+
+export const CarouselImage = (props) => {
+  const [isError, setIsError] = useState(false);
+
+  const handleImageError = () => {
+    setIsError(true);
+  };
+
+  if (isError) {
+    return (
+      <Tooltip description={props.alt ?? ''}>
+        <StyledImage as="img" {...props} />
+      </Tooltip>
+    );
+  }
+
+  return <StyledImage as="img" {...props} onError={handleImageError} />;
+};
+
+CarouselImage.defaultProps = {
+  src: undefined,
+  alt: undefined,
+};
+
+CarouselImage.propTypes = {
+  alt: PropTypes.string,
+  src: PropTypes.string,
+};

package/src/CarouselInput/CarouselInput.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Carousel } from './Carousel';
+import { Field, FieldLabel, FieldHint, FieldError } from '../Field';
+import { Stack } from '../Stack';
+import { useId } from '../helpers/useId';
+
+export const CarouselInput = ({
+  actions,
+  children,
+  error,
+  hint,
+  label,
+  labelAction,
+  nextLabel,
+  onNext,
+  onPrevious,
+  previousLabel,
+  required,
+  secondaryLabel,
+  selectedSlide,
+  id,
+  ...props
+}) => {
+  const generatedId = useId('carouselinput', id);
+
+  return (
+    <Field hint={hint} error={error} id={generatedId}>
+      <Stack spacing={1}>
+        {label && (
+          <FieldLabel required={required} action={labelAction}>
+            {label}
+          </FieldLabel>
+        )}
+        <Carousel
+          actions={actions}
+          label={label}
+          nextLabel={nextLabel}
+          onNext={onNext}
+          onPrevious={onPrevious}
+          previousLabel={previousLabel}
+          secondaryLabel={secondaryLabel}
+          selectedSlide={selectedSlide}
+          id={generatedId}
+          {...props}
+        >
+          {children}
+        </Carousel>
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </Field>
+  );
+};
+
+CarouselInput.defaultProps = {
+  actions: undefined,
+  error: undefined,
+  hint: undefined,
+  id: undefined,
+  required: false,
+  secondaryLabel: undefined,
+};
+
+CarouselInput.propTypes = {
+  actions: PropTypes.node,
+  children: PropTypes.node.isRequired,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  labelAction: PropTypes.element,
+  nextLabel: PropTypes.string.isRequired,
+  onNext: PropTypes.func.isRequired,
+  onPrevious: PropTypes.func.isRequired,
+  previousLabel: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  secondaryLabel: PropTypes.string,
+  selectedSlide: PropTypes.number.isRequired,
+};

package/src/CarouselInput/CarouselSlide.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Flex } from '../Flex';
+import styled from 'styled-components';
+
+const CarouselSlideWrapper = styled(Flex)`
+  display: ${({ selected }) => (selected ? 'flex' : 'none')};
+`;
+
+export const CarouselSlide = ({ label, children, selected, ...props }) => (
+  <CarouselSlideWrapper
+    selected={selected}
+    role="group"
+    aria-roledescription="slide"
+    aria-label={label}
+    justifyContent="center"
+    height="124px"
+    {...props}
+  >
+    {children}
+  </CarouselSlideWrapper>
+);
+
+CarouselSlide.defaultProps = {
+  selected: false,
+};
+
+CarouselSlide.propTypes = {
+  children: PropTypes.node.isRequired,
+  label: PropTypes.string.isRequired,
+  selected: PropTypes.bool,
+};

package/src/CarouselInput/__tests__/CarouselImage.e2e.js

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('CarouselImage', () => {
+  test('a tooltip should appear with the alt text if the src fails to load', async ({ page }) => {
+    await page.goto('/iframe.html?id=design-system-components-carouselinput--broken-asset&viewMode=story');
+
+    const imageElement = page.locator('img');
+
+    expect(imageElement).toBeTruthy();
+
+    await imageElement.hover().then(() => {
+      expect(page.locator('my image')).toBeTruthy();
+    });
+  });
+});

package/src/CarouselInput/__tests__/CarouselInput.e2e.js

@@ -0,0 +1,48 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('CarouselInput', () => {
+  test.describe('light mode', () => {
+    test.beforeEach(async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-carouselinput--base&viewMode=story');
+      await injectAxe(page);
+    });
+
+    test('triggers axe on the document', async ({ page }) => {
+      await checkA11y(page);
+    });
+
+    test.describe('keyboard interactions', () => {
+      test('focuses the next button when pressing arrow right when the focus is inside the carousel', async ({
+        page,
+      }) => {
+        await page.focus('#edit');
+        await page.keyboard.press('ArrowRight');
+
+        expect(await page.$('text="Carousel of numbers (2/3)"')).toBeTruthy();
+        await expect(page.locator('[aria-label="Next slide"]')).toBeFocused();
+      });
+
+      test('focuses the previous button when pressing arrow right when the focus is inside the carousel', async ({
+        page,
+      }) => {
+        await page.focus('#edit');
+        await page.keyboard.press('ArrowLeft');
+
+        expect(await page.$('text="Carousel of numbers (3/3)"')).toBeTruthy();
+        await expect(page.locator('[aria-label="Previous slide"]')).toBeFocused();
+      });
+    });
+  });
+
+  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-carouselinput--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/CarouselInput/index.js

@@ -0,0 +1,5 @@
+export * from './Carousel';
+export * from './CarouselInput';
+export * from './CarouselActions';
+export * from './CarouselImage';
+export * from './CarouselSlide';

package/src/Checkbox/Checkbox.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { BaseCheckbox } from '../BaseCheckbox';
+import { Stack } from '../Stack';
+import { Field, FieldHint, FieldError, useField } from '../Field';
+import { Box } from '../Box';
+import { useId } from '../helpers/useId';
+import { Typography } from '../Typography';
+
+const CheckboxLabel = styled(Typography)`
+  display: flex;
+  align-items: flex-start;
+  * {
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  }
+`;
+
+const CheckboxTick = (props) => {
+  const { id } = useField();
+
+  return <BaseCheckbox id={id} {...props} />;
+};
+
+export const Checkbox = ({ children, disabled, id, hint, error, ...props }) => {
+  const generatedId = useId('checkbox', id);
+
+  let ariaDescription;
+
+  if (error) {
+    ariaDescription = `${generatedId}-error`;
+  } else if (hint) {
+    ariaDescription = `${generatedId}-hint`;
+  }
+
+  return (
+    <Field id={generatedId} hint={hint} error={error}>
+      <Stack spacing={1}>
+        <CheckboxLabel as="label" textColor="neutral800" disabled={disabled}>
+          <CheckboxTick disabled={disabled} aria-describedby={ariaDescription} {...props} />
+          <Box paddingLeft={2}>{children}</Box>
+        </CheckboxLabel>
+
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </Field>
+  );
+};
+
+Checkbox.defaultProps = {
+  disabled: false,
+  id: undefined,
+  error: undefined,
+  hint: undefined,
+};
+Checkbox.propTypes = {
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};