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

package/src/CarouselInput/Carousel.js

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

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

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

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

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

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

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

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

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

package/src/Checkbox/Checkbox.js

@@ -1,63 +0,0 @@
-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]),
-};