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

package/src/TextInput/TextInput.stories.mdx

@@ -0,0 +1,228 @@
+<!--- TextInput.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Information from '@strapi/icons/Information';
+import { TextInput } from './TextInput';
+import { Box } from '../Box';
+import { Tooltip } from '../Tooltip';
+
+<Meta title="Design System/Components/TextInput" component={TextInput} />
+
+# TextInput
+
+TextInputs are inputs that allow users to add or edit text. They support several text formats including numbers.
+
+**Best practices**
+
+- Icons are always on the right side within the input (writing area) itself, never on the left side.
+- Labels should be clear and concise. A few words only and without punctuation.
+- Use description line as a help to give more details about the required action.
+- Unless users need a lot of space to write their content, the input should take 1 column space instead of two.
+- Make sure to use the placeholder feature whenever clarification are helpful on how to use the input.
+- Make sure to use to define the input as required whenever it is absolutely mandatory.
+- If a single line is not enough for the amount of text required, use TextArea component.
+- The error message will replace the description line. The two of them cannot be on top of each other.
+- The error message can be customized, make sure to write actionable information within it to help resolve an issue.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/TextInput)
+
+## Imports
+
+```js
+import { TextInput } from '@strapi/design-system/TextInput';
+```
+
+## Usage
+
+TextInputs are always found in forms. They give users the possibility to add or edit text.
+
+### TextInput Base
+
+In addition of plain text, TextInputs can also include a placeholder and a description line.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [content, setContent] = useState('');
+      return (
+        <Box padding={10}>
+          <TextInput
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={content.length > 5 ? 'Content is too long' : undefined}
+            onChange={(e) => setContent(e.target.value)}
+            value={content}
+            labelAction={
+              <Tooltip description="Content of the tooltip">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          />
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Disabled TextInput
+
+Depending on the permissions a user have or the status of an action, a TextInput can be unreachable or unavailable yet.
+
+<Canvas>
+  <Story name="disabled">
+    <Box padding={10}>
+      <TextInput
+        placeholder="This is a content placeholder"
+        label="Content"
+        name="content"
+        hint="Description line"
+        onChange={() => {}}
+        value={'Disabled ontent'}
+        disabled
+        labelAction={
+          <Tooltip description="Content of the tooltip">
+            <button
+              aria-label="Information about the email"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+            >
+              <Information aria-hidden={true} />
+            </button>
+          </Tooltip>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### TextInput size S
+
+TODO
+
+<Canvas>
+  <Story name="size S">
+    <Box padding={10}>
+      <TextInput
+        placeholder="This is a content placeholder"
+        label="Content"
+        name="content"
+        hint="Description line"
+        onChange={() => {}}
+        value={'size S input'}
+        size="S"
+        labelAction={
+          <Tooltip description="Content of the tooltip">
+            <button
+              aria-label="Information about the email"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+            >
+              <Information aria-hidden={true} />
+            </button>
+          </Tooltip>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### TextInput with error
+
+TextInputs can display error. The error message is customizable and replaced the description line below the writing area.
+
+<Canvas>
+  <Story name="with error">
+    <Box padding={10}>
+      <TextInput
+        placeholder="This is a content placeholder"
+        label="Content"
+        name="content"
+        hint="Description line"
+        error={'Content is too long'}
+        onChange={() => {}}
+        value={'content'}
+        labelAction={
+          <Tooltip description="Content of the tooltip">
+            <button
+              aria-label="Information about the email"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+            >
+              <Information aria-hidden={true} />
+            </button>
+          </Tooltip>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### Password TextInput
+
+Password TextInputs 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.
+
+<Canvas>
+  <Story name="password">
+    <Box padding={10}>
+      <TextInput
+        placeholder="This is a password placeholder"
+        type="password"
+        label="Password"
+        name="password"
+        hint="Description line"
+        onChange={() => {}}
+        value={'content'}
+        labelAction={
+          <Tooltip description="Content of the tooltip">
+            <button
+              aria-label="Information about the email"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+            >
+              <Information aria-hidden={true} />
+            </button>
+          </Tooltip>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+### TextInput without label
+
+TextInputs can be used without a label.
+
+<Canvas>
+  <Story name="withoutLabel">
+    <Box padding={10}>
+      <TextInput
+        placeholder="This is a password placeholder"
+        type="password"
+        aria-label="Password"
+        name="password"
+        hint="Description line"
+        onChange={() => {}}
+        value={'content'}
+        labelAction={
+          <Tooltip description="Content of the tooltip">
+            <button
+              aria-label="Information about the email"
+              style={{ border: 'none', padding: 0, background: 'transparent' }}
+            >
+              <Information aria-hidden={true} />
+            </button>
+          </Tooltip>
+        }
+      />
+    </Box>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={TextInput} />

package/src/TextInput/__tests__/TextInput.e2e.js

@@ -0,0 +1,73 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('TextInput', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-textinput--base&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('password', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-textinput--password&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-textinput--disabled&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-textinput--with-error&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-textinput--base&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('password', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-textinput--password&viewMode=story&theme=dark');
+        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-textinput--disabled&viewMode=story&theme=dark');
+        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-textinput--with-error&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+  });
+});

package/src/TextInput/index.js

@@ -0,0 +1 @@
+export * from './TextInput';

package/src/Textarea/Textarea.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, FieldLabel, FieldHint, FieldError } from '../Field';
+import { TextareaInput } from './TextareaInput';
+import { Stack } from '../Stack';
+import { Flex } from '../Flex';
+import styled from 'styled-components';
+import { useId } from '../helpers/useId';
+
+const TextareaWrapper = styled.div`
+  & textarea {
+    // TODO: remove when we'll have fonts in the theme
+    height: ${80 / 16}rem;
+    line-height: ${20 / 16}rem;
+  }
+
+  & textarea::placeholder {
+    font-weight: 400;
+    font-size: ${14 / 16}rem;
+    line-height: 1.43;
+    color: ${({ theme }) => theme.colors.neutral500};
+    opacity: 1;
+  }
+`;
+
+export const Textarea = React.forwardRef(
+  ({ name, hint, error, label, children, labelAction, id, required, ...props }, ref) => {
+    const generatedId = useId('textarea', id);
+
+    return (
+      <TextareaWrapper>
+        <Field name={name} hint={hint} error={error} id={generatedId}>
+          <Stack spacing={1}>
+            {label && (
+              <Flex>
+                <FieldLabel required={required} action={labelAction}>
+                  {label}
+                </FieldLabel>
+              </Flex>
+            )}
+            <TextareaInput ref={ref} as="textarea" value={children} {...props} />
+            <FieldHint />
+            <FieldError />
+          </Stack>
+        </Field>
+      </TextareaWrapper>
+    );
+  },
+);
+
+Textarea.displayName = 'Textarea';
+
+Textarea.defaultProps = {
+  'aria-label': undefined,
+  label: undefined,
+  labelAction: undefined,
+  error: undefined,
+  hint: undefined,
+  id: undefined,
+  children: '',
+  required: false,
+};
+
+Textarea.propTypes = {
+  'aria-label': PropTypes.string,
+  children: PropTypes.string,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelAction: PropTypes.element,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+};

package/src/Textarea/Textarea.stories.mdx

@@ -0,0 +1,105 @@
+<!--- Textarea.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import Information from '@strapi/icons/Information';
+import { Textarea } from './Textarea';
+import { Tooltip } from '../Tooltip';
+import { Box } from '../Box';
+
+<Meta title="Design System/Components/Textarea" component={Textarea} />
+
+# Textarea
+
+TextAreas are inputs that allow users to add or edit text. They support long text formats.
+
+**Best practices**
+
+- Icons are always on the right side within the input (writing area) itself, never on the left side.
+- Labels should be clear and concise. A few words only and without punctuation.
+- Use description line as a help to give more details about the required action.
+- Make sure to use the placeholder feature whenever clarification are helpful on how to use the input.
+- Make sure to use to define the input as required whenever it is absolutely mandatory.
+- The error message will replace the description line. The two of them cannot be on top of each other.
+- The error message can be customized, make sure to write actionable information within it to help resolve an issue.
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/Textarea)
+
+## Imports
+
+```js
+import { Textarea } from '@strapi/design-system/Textarea';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [content, setContent] = useState('');
+      return (
+        <Box padding={10}>
+          <Textarea
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            error={content.length < 5 ? 'Content is too short' : undefined}
+            onChange={(e) => setContent(e.target.value)}
+            labelAction={
+              <Tooltip description="Content of the tooltip" position="right">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          >
+            {content}
+          </Textarea>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Disabled state
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [content, setContent] = useState('');
+      return (
+        <Box padding={10}>
+          <Textarea
+            placeholder="This is a content placeholder"
+            label="Content"
+            name="content"
+            hint="Description line"
+            disabled
+            onChange={(e) => setContent(e.target.value)}
+            labelAction={
+              <Tooltip description="Content of the tooltip" position="right">
+                <button
+                  aria-label="Information about the email"
+                  style={{ border: 'none', padding: 0, background: 'transparent' }}
+                >
+                  <Information aria-hidden={true} />
+                </button>
+              </Tooltip>
+            }
+          >
+            {content}
+          </Textarea>
+        </Box>
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Textarea} />

package/src/Textarea/TextareaInput.js

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { useField } from '../Field';
+import { inputFocusStyle } from '../themes/utils';
+
+const TextareaWrapper = styled.div`
+  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  border-radius: ${({ theme }) => theme.borderRadius};
+
+  padding-left: ${({ theme, hasLeftAction }) => (hasLeftAction ? 0 : theme.spaces[4])};
+  padding-right: ${({ theme, hasRightAction }) => (hasRightAction ? 0 : theme.spaces[4])};
+  padding-top: ${({ theme }) => `${theme.spaces[3]}`};
+  padding-bottom: ${({ theme }) => `${theme.spaces[3]}`};
+
+  background: ${({ theme, disabled }) => (disabled ? theme.colors.neutral150 : theme.colors.neutral0)};
+  ${inputFocusStyle()}
+`;
+
+const Textarea = styled.textarea`
+  display: block;
+  width: 100%;
+  font-weight: 400;
+  font-size: ${14 / 16}rem;
+  border: none;
+  color: ${({ theme, disabled }) => (disabled ? theme.colors.neutral600 : theme.colors.neutral800)};
+  resize: none;
+  background: inherit;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.colors.neutral500};
+    opacity: 1;
+  }
+
+  &:focus-within {
+    outline: none;
+  }
+`;
+
+export const TextareaInput = forwardRef(({ disabled, ...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);
+
+  return (
+    <TextareaWrapper hasError={hasError} disabled={disabled}>
+      <Textarea
+        id={id}
+        name={name}
+        ref={ref}
+        aria-describedby={ariaDescription}
+        aria-invalid={hasError}
+        disabled={disabled}
+        hasError={hasError}
+        {...props}
+      />
+    </TextareaWrapper>
+  );
+});
+
+TextareaInput.displayName = 'TextareaInput';
+
+TextareaInput.defaultProps = {
+  disabled: false,
+};
+
+TextareaInput.propTypes = {
+  disabled: PropTypes.bool,
+};

package/src/Textarea/__tests__/Textarea.e2e.js

@@ -0,0 +1,37 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test } from '@playwright/test';
+
+test.describe.parallel('Textarea', () => {
+  test.describe('light mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-textarea--base&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('disabled A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-textarea--base&viewMode=story');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-textarea--disabled&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+
+    test('disabled A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-textarea--disabled&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});

package/src/Textarea/index.js

@@ -0,0 +1 @@
+export * from './Textarea';