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

package/src/Field/Field.stories.mdx

@@ -1,237 +0,0 @@
-<!--- Field.stories.mdx --->
-
-import { useState } from 'react';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import Earth from '@strapi/icons/Earth';
-import Password from '@strapi/icons/Password';
-import Information from '@strapi/icons/Information';
-import { FieldLabel } from './FieldLabel';
-import { FieldHint } from './FieldHint';
-import { FieldError } from './FieldError';
-import { FieldInput } from './FieldInput';
-import { Field } from './Field';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-import { Stack } from '../Stack';
-import { Tooltip } from '../Tooltip';
-import { FieldAction } from './FieldAction';
-import { Link } from '../Link';
-import { Icon } from '../Icon';
-
-<Meta title="Design System/Components/Field" component={Field} />
-
-# Field
-
-Fields are inputs that allow users to add or edit text. They support several text formats including numbers.
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Field)
-
-## Imports
-
-```js
-import { Field, FieldLabel, FieldHint, FieldError, FieldInput, FieldAction } from '@strapi/design-system/Field';
-```
-
-## Base
-
-The simplest representation of the Field components, no description, no error, no noise.
-
-<Canvas>
-  <Story name="base">
-    <Field name="email">
-      <Stack spacing={1}>
-        <FieldLabel>Email</FieldLabel>
-        <FieldInput type="text" placeholder="Placeholder" value={''} onChange={() => {}} />
-      </Stack>
-    </Field>
-  </Story>
-</Canvas>
-
-## With description
-
-A Field with a description allows to add a small hint of advanced information.
-
-<Canvas>
-  <Story name="with description">
-    <Field name="email" hint="Description line">
-      <Stack spacing={1}>
-        <FieldLabel required>Email</FieldLabel>
-        <FieldInput type="text" placeholder="Placeholder" value={''} onChange={() => {}} />
-        <FieldHint />
-      </Stack>
-    </Field>
-  </Story>
-</Canvas>
-
-## With error
-
-An example of the Field components with an error.
-
-<Canvas>
-  <Story name="with error">
-    <Field name="password" error={'Password is too short'}>
-      <Stack spacing={1}>
-        <FieldLabel>Password</FieldLabel>
-        <FieldInput type="password" placeholder="Placeholder" value={''} onChange={() => {}} />
-        <FieldHint />
-        <FieldError />
-      </Stack>
-    </Field>
-  </Story>
-</Canvas>
-
-## With label action
-
-An example of the Field components with a label action.
-
-<Canvas>
-  <Story name="with label-action">
-    <Field name="password">
-      <Stack spacing={1}>
-        <FieldLabel required action={<Earth />}>
-          Password
-        </FieldLabel>
-        <FieldInput type="password" placeholder="Placeholder" value={''} onChange={() => {}} />
-        <FieldHint />
-        <FieldError />
-      </Stack>
-    </Field>
-  </Story>
-</Canvas>
-
-## Disabled field
-
-Depending on the permissions a user have or the status of an action, a Field can be unreachable or unavailable yet.
-
-<Canvas>
-  <Story name="disabled">
-    <Field name="password" hint="Description line">
-      <Stack spacing={1}>
-        <FieldLabel>Password</FieldLabel>
-        <FieldInput placeholder="Placeholder" value={'Hello world'} disabled={true} onChange={() => {}} />
-        <FieldHint />
-        <FieldError />
-      </Stack>
-    </Field>
-  </Story>
-</Canvas>
-
-## Password with description and error
-
-Password fields are specific. They offer the possibility to have unreadable content. By clicking on the eye icon on the right side, it is possible to actually read the password.
-
-## Most complex input
-
-This is the most complex input that can be built with the Field components.
-
-<Canvas>
-  <Story name="most complex input">
-    {() => {
-      const [email, setEmail] = useState('');
-      return (
-        <Box padding={8}>
-          <Field name="password" hint="Description line" error={email.length > 5 ? 'Email is too short' : undefined}>
-            <Stack spacing={1}>
-              <Flex>
-                <FieldLabel>Password</FieldLabel>
-                <Box paddingLeft={2}>
-                  <Tooltip description="Content of the tooltip">
-                    <button
-                      aria-label="Information about the email"
-                      style={{ border: 'none', padding: 0, background: 'transparent' }}
-                    >
-                      <Icon as={Information} color="neutral800" aria-hidden={true} />
-                    </button>
-                  </Tooltip>
-                </Box>
-                <Flex width="100%" justifyContent="flex-end">
-                  <Link isExternal href="#">
-                    Details
-                  </Link>
-                </Flex>
-              </Flex>
-              <FieldInput
-                placeholder="example@domain.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                startAction={
-                  <FieldAction label="Show password">
-                    <Password />
-                  </FieldAction>
-                }
-                endAction={
-                  <FieldAction label="Show password">
-                    <Password />
-                  </FieldAction>
-                }
-              />
-              <FieldHint />
-              <FieldError />
-            </Stack>
-          </Field>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Most complex S size input
-
-This is the most complex input that can be built with the Field components.
-
-<Canvas>
-  <Story name="most complex s size input">
-    {() => {
-      const [email, setEmail] = useState('');
-      return (
-        <Box padding={8}>
-          <Field name="password" hint="Description line" error={email.length > 5 ? 'Email is too short' : undefined}>
-            <Stack spacing={1}>
-              <Flex>
-                <FieldLabel>Password</FieldLabel>
-                <Box paddingLeft={2}>
-                  <Tooltip description="Content of the tooltip">
-                    <button
-                      aria-label="Information about the email"
-                      style={{ border: 'none', padding: 0, background: 'transparent' }}
-                    >
-                      <Icon as={Information} color="neutral800" aria-hidden={true} />
-                    </button>
-                  </Tooltip>
-                </Box>
-                <Flex width="100%" justifyContent="flex-end">
-                  <Link isExternal href="#">
-                    Details
-                  </Link>
-                </Flex>
-              </Flex>
-              <FieldInput
-                placeholder="example@domain.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                size="S"
-                startAction={
-                  <FieldAction label="Show password">
-                    <Password />
-                  </FieldAction>
-                }
-                endAction={
-                  <FieldAction label="Show password">
-                    <Password />
-                  </FieldAction>
-                }
-              />
-              <FieldHint />
-              <FieldError />
-            </Stack>
-          </Field>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={Field} />

package/src/Field/FieldAction.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const FieldActionWrapper = styled.button`
-  border: none;
-  background: transparent;
-  // TODO: Make sure to use the theme when it's ready
-  font-size: 1.6rem;
-  width: auto;
-  padding: 0;
-  display: flex;
-  align-items: center;
-`;
-
-export const FieldAction = ({ label, children, ...props }) => (
-  <FieldActionWrapper aria-label={label} type="button" {...props}>
-    {children}
-  </FieldActionWrapper>
-);
-
-FieldAction.propTypes = {
-  children: PropTypes.node.isRequired,
-  label: PropTypes.string.isRequired,
-};

package/src/Field/FieldContext.js

@@ -1,4 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const FieldContext = createContext({ error: undefined, hint: undefined, name: '', id: '' });
-export const useField = () => useContext(FieldContext);

package/src/Field/FieldError.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { useField } from './FieldContext';
-import { Typography } from '../Typography';
-
-export const FieldError = () => {
-  const { id, error } = useField();
-
-  if (!error || typeof error !== 'string') {
-    return null;
-  }
-
-  return (
-    <Typography variant="pi" as="p" id={`${id}-error`} textColor="danger600" data-strapi-field-error>
-      {error}
-    </Typography>
-  );
-};

package/src/Field/FieldHint.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import { useField } from './FieldContext';
-import { Typography } from '../Typography';
-
-export const FieldHint = () => {
-  const { id, hint, error } = useField();
-
-  if (!hint || error) {
-    return null;
-  }
-
-  return (
-    <Typography variant="pi" as="p" id={`${id}-hint`} textColor="neutral600">
-      {hint}
-    </Typography>
-  );
-};

package/src/Field/FieldInput.js

@@ -1,129 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { sizes } from '../themes/sizes';
-import { inputFocusStyle } from '../themes/utils';
-import { useField } from './FieldContext';
-import { Flex } from '../Flex';
-import { Box } from '../Box';
-
-// padding-[top|bottom] must ensure, the input matches the height of getThemeSize('input')
-const PADDING_Y = {
-  S: 6.5,
-  M: 10.5,
-};
-
-const Input = styled.input`
-  border: none;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  padding-bottom: ${({ size }) => `${PADDING_Y[size] / 16}rem`};
-  padding-left: ${({ theme, hasLeftAction }) => (hasLeftAction ? 0 : theme.spaces[4])};
-  padding-right: ${({ theme, hasRightAction }) => (hasRightAction ? 0 : theme.spaces[4])};
-  padding-top: ${({ size }) => `${PADDING_Y[size] / 16}rem`};
-  cursor: ${(props) => (props['aria-disabled'] ? 'not-allowed' : undefined)};
-
-  color: ${({ theme }) => theme.colors.neutral800};
-  font-weight: 400;
-  // TODO: Make sure to use the theme when it's ready
-  font-size: ${14 / 16}rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-    opacity: 1;
-  }
-
-  &[aria-disabled='true'] {
-    color: inherit;
-  }
-
-  //focus managed by InputWrapper
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-`;
-
-export const InputWrapper = styled(Flex)`
-  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  ${inputFocusStyle()}
-
-  ${({ theme, disabled }) =>
-    disabled
-      ? `
-    color: ${theme.colors.neutral600};
-    background: ${theme.colors.neutral150};
-  
-  `
-      : undefined}
-`;
-
-export const FieldInput = forwardRef(({ endAction, startAction, disabled, onChange, size, ...props }, ref) => {
-  const { id, error, hint, name } = useField();
-
-  let ariaDescription;
-
-  if (error) {
-    ariaDescription = `${id}-error`;
-  } else if (hint) {
-    ariaDescription = `${id}-hint`;
-  }
-
-  const hasError = Boolean(error);
-
-  const handleChange = (e) => {
-    if (!disabled) {
-      onChange(e);
-    }
-  };
-
-  return (
-    <InputWrapper size={size} justifyContent="space-between" hasError={hasError} disabled={disabled}>
-      {startAction && (
-        <Box paddingLeft={3} paddingRight={2}>
-          {startAction}
-        </Box>
-      )}
-      <Input
-        id={id}
-        name={name}
-        ref={ref}
-        aria-describedby={ariaDescription}
-        aria-invalid={hasError}
-        aria-disabled={disabled}
-        hasLeftAction={Boolean(startAction)}
-        hasRightAction={Boolean(endAction)}
-        onChange={handleChange}
-        size={size}
-        {...props}
-      />
-      {endAction && (
-        <Box paddingLeft={2} paddingRight={3}>
-          {endAction}
-        </Box>
-      )}
-    </InputWrapper>
-  );
-});
-
-FieldInput.displayName = 'FieldInput';
-
-FieldInput.defaultProps = {
-  disabled: false,
-  endAction: undefined,
-  size: 'M',
-  startAction: undefined,
-  onChange: () => {},
-};
-
-FieldInput.propTypes = {
-  disabled: PropTypes.bool,
-  endAction: PropTypes.element,
-  onChange: PropTypes.func,
-  size: PropTypes.oneOf(Object.keys(sizes.input)),
-  startAction: PropTypes.element,
-};

package/src/Field/FieldLabel.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { Flex } from '../Flex';
-import { useField } from './FieldContext';
-import { Typography } from '../Typography';
-
-const TypographyAsterisk = styled(Typography)`
-  line-height: 0;
-`;
-
-const Action = styled(Flex)`
-  line-height: 0;
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-
-export const FieldLabel = ({ children, required, action, ...props }) => {
-  const { id } = useField();
-
-  return (
-    <Typography
-      variant="pi"
-      textColor="neutral800"
-      htmlFor={id}
-      fontWeight="bold"
-      as="label"
-      required={required}
-      {...props}
-    >
-      <Flex alignItems="center">
-        {children}
-        {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
-        {action && <Action marginLeft={1}>{action}</Action>}
-      </Flex>
-    </Typography>
-  );
-};
-
-FieldLabel.defaultProps = {
-  required: false,
-  action: undefined,
-};
-FieldLabel.propTypes = {
-  action: PropTypes.element,
-  children: PropTypes.node.isRequired,
-  required: PropTypes.bool,
-};

package/src/Field/__tests__/Field.e2e.js

@@ -1,61 +0,0 @@
-import { injectAxe, checkA11y } from 'axe-playwright';
-
-import { test } from '@playwright/test';
-
-test.describe.parallel('Field', () => {
-  test.describe('light mode', () => {
-    test.describe('base', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-field--base&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('with description', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-field--with-description&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('with error', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-field--with-error&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('disabled', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-field--disabled&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-
-    test.describe('most complex input', () => {
-      test('triggers axe on the document', async ({ page }) => {
-        await page.goto('/iframe.html?id=design-system-components-field--most-complex-input&viewMode=story');
-        await injectAxe(page);
-        await checkA11y(page);
-      });
-    });
-  });
-
-  test.describe('dark mode', () => {
-    test('complex input A11y', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-field--most-complex-input&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-
-    test('disabled A11y', async ({ page }) => {
-      await page.goto('/iframe.html?id=design-system-components-field--disabled&viewMode=story&theme=dark');
-      await injectAxe(page);
-      await checkA11y(page);
-    });
-  });
-});

package/src/Field/index.js

@@ -1,7 +0,0 @@
-export * from './Field';
-export * from './FieldLabel';
-export * from './FieldInput';
-export * from './FieldHint';
-export * from './FieldError';
-export * from './FieldContext';
-export * from './FieldAction';

package/src/Flex/Flex.js

@@ -1,26 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '../Box';
-import handleResponsiveValues from '../helpers/handleResponsiveValues';
-import { flexDefaultProps, flexPropTypes } from './FlexProps';
-
-/**
- * Prevents these attributes from being spread on the DOM node
- */
-const transientProps = {
-  direction: true,
-};
-
-export const Flex = styled(Box).withConfig({
-  shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
-})`
-  align-items: ${({ alignItems }) => alignItems};
-  display: ${({ inline }) => (inline ? 'inline-flex' : 'flex')};
-  flex-direction: ${({ direction }) => direction};
-  flex-shrink: ${({ shrink }) => shrink};
-  flex-wrap: ${({ wrap }) => wrap};
-  ${({ gap, theme }) => handleResponsiveValues('gap', gap, theme)}};
-  justify-content: ${({ justifyContent }) => justifyContent};
-`;
-
-Flex.defaultProps = flexDefaultProps;
-Flex.propTypes = flexPropTypes;

package/src/Flex/Flex.stories.mdx

@@ -1,45 +0,0 @@
-<!--- Flex.stories.mdx --->
-
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Flex } from './Flex';
-import { Typography } from '../Typography';
-import { Box } from '../Box';
-import { FlexProps } from './FlexProps';
-
-<Meta title="Design System/Technical Components/Flex" component={Flex} />
-
-# Flex
-
-This is the doc of the `Flex` component
-
-[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Flex)
-
-## Imports
-
-```js
-import { Flex } from '@strapi/design-system/Flex';
-```
-
-## Usage
-
-A Flex Flex
-
-<Canvas>
-  <Story name="base">
-    <Flex>
-      <Box background="primary600" padding={1} hasRadius>
-        <Typography textColor="neutral0">Hello</Typography>
-      </Box>
-      <Box background="success600" padding={1} hasRadius>
-        <Typography textColor="neutral0">World</Typography>
-      </Box>
-    </Flex>
-  </Story>
-</Canvas>
-
-## Props
-
-The Flex 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={FlexProps} />

package/src/Flex/FlexProps.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export const FlexProps = (props) => <div {...props} />;
-
-export const flexDefaultProps = {
-  alignItems: 'center',
-  basis: undefined,
-  direction: 'row',
-  gap: undefined,
-  inline: false,
-  justifyContent: undefined,
-  reverse: false,
-  wrap: undefined,
-};
-export const flexPropTypes = {
-  alignItems: PropTypes.string,
-  basis: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  direction: PropTypes.string,
-  /**
-   * Supports responsive values
-   */
-  gap: PropTypes.oneOfType([
-    PropTypes.shape({
-      desktop: PropTypes.number,
-      mobile: PropTypes.number,
-      tablet: PropTypes.number,
-    }),
-    PropTypes.number,
-    PropTypes.arrayOf(PropTypes.number),
-    PropTypes.string,
-  ]),
-  inline: PropTypes.bool,
-  justifyContent: PropTypes.string,
-  reverse: PropTypes.bool,
-  shrink: PropTypes.number,
-  wrap: PropTypes.string,
-};
-
-FlexProps.defaultProps = flexDefaultProps;
-FlexProps.propTypes = flexPropTypes;

package/src/Flex/__tests__/Flex.e2e.js

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