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

package/src/TextInput/TextInput.stories.mdx

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

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

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

package/src/Textarea/Textarea.js

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

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

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

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

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