@strapi/design-system 1.2.6 → 1.3.0-beta.0

package/src/Field/Field.stories.mdx

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

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

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

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

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

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

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

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

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

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

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

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

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