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

package/src/TimePicker/index.js

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

package/src/ToggleCheckbox/ToggleCheckbox.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { sizes } from '../themes/sizes';
+import { inputFocusStyle } from '../themes/utils';
+import { Typography } from '../Typography';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { Box } from '../Box';
+import { Flex } from '../Flex';
+
+const Label = styled.label`
+  position: relative;
+  display: inline-block;
+  z-index: 0;
+  width: 100%;
+`;
+
+const ToggleCheckboxWrapper = styled(Box)`
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
+  // Masks the background of each value
+  overflow: hidden;
+  flex-wrap: wrap;
+
+  ${inputFocusStyle()}
+`;
+
+const ValueBox = styled(Flex).attrs({
+  hasRadius: true,
+})`
+  background-color: ${({ theme, checked, disabled }) => {
+    if (checked) {
+      return disabled ? theme.colors.neutral200 : theme.colors.neutral0;
+    }
+
+    return 'transparent';
+  }};
+  border: 1px solid
+    ${({ theme, checked, disabled }) => {
+      if (checked && checked !== null) {
+        return disabled ? theme.colors.neutral300 : theme.colors.neutral200;
+      }
+
+      return disabled ? theme.colors.neutral150 : theme.colors.neutral100;
+    }};
+  position: relative;
+  user-select: none;
+  z-index: 2;
+  flex: 1 1 50%;
+  /**
+    We declare the defined value because we want the height of the input when 
+    the values are in a row to be 40px. But defining a height on the label
+    would break the input when it wraps.
+  */
+  padding-top: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+  padding-bottom: ${({ size }) => `${size === 'S' ? '2px' : '6px'}`};
+`;
+
+/**
+ * visually hiding the input without SR-only helps Android SR to provide information with touch and haptic
+ */
+const Input = styled.input`
+  height: 100%;
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+`;
+
+export const ToggleCheckbox = React.forwardRef(
+  ({ size, onLabel, offLabel, children, checked, disabled, onChange, ...props }, ref) => {
+    const labelColor = 'neutral600';
+
+    let offCheckboxLabelColor = !checked && checked !== null ? 'danger700' : labelColor;
+    let onCheckboxLabelColor = checked ? 'primary600' : labelColor;
+
+    const handleChange = (e) => {
+      if (disabled) return;
+
+      onChange(e);
+    };
+
+    return (
+      <Label>
+        <VisuallyHidden>{children}</VisuallyHidden>
+
+        <ToggleCheckboxWrapper
+          hasRadius
+          disabled={disabled}
+          padding={1}
+          display="flex"
+          background={disabled ? 'neutral150' : 'neutral100'}
+          borderStyle="solid"
+          borderWidth="1px"
+          borderColor="neutral200"
+        >
+          <ValueBox
+            size={size}
+            paddingLeft={3}
+            paddingRight={3}
+            justifyContent="center"
+            alignItems="center"
+            aria-hidden={true}
+            checked={checked === null ? false : !checked}
+            disabled={disabled}
+          >
+            <Typography
+              variant="pi"
+              fontWeight="bold"
+              textTransform="uppercase"
+              textColor={disabled ? 'neutral700' : offCheckboxLabelColor}
+            >
+              {offLabel}
+            </Typography>
+          </ValueBox>
+
+          <ValueBox
+            size={size}
+            paddingLeft={3}
+            paddingRight={3}
+            justifyContent="center"
+            alignItems="center"
+            aria-hidden={true}
+            checked={checked === null ? false : checked}
+            disabled={disabled}
+          >
+            <Typography
+              variant="pi"
+              fontWeight="bold"
+              textTransform="uppercase"
+              textColor={disabled ? 'neutral700' : onCheckboxLabelColor}
+            >
+              {onLabel}
+            </Typography>
+          </ValueBox>
+
+          <Input
+            type="checkbox"
+            aria-disabled={disabled}
+            onChange={(e) => handleChange(e)}
+            ref={ref}
+            {...props}
+            checked={checked === null || !checked ? false : true}
+          />
+        </ToggleCheckboxWrapper>
+      </Label>
+    );
+  },
+);
+
+ToggleCheckbox.displayName = 'ToggleCheckbox';
+
+ToggleCheckbox.defaultProps = {
+  disabled: false,
+  checked: false,
+  onChange: undefined,
+  size: 'M',
+};
+
+ToggleCheckbox.propTypes = {
+  checked: PropTypes.bool,
+  children: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  offLabel: PropTypes.string.isRequired,
+  onChange: PropTypes.func,
+  onLabel: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+};

package/src/ToggleCheckbox/ToggleCheckbox.stories.mdx

@@ -0,0 +1,96 @@
+<!--- ToggleCheckbox.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+
+import { Grid, GridItem } from '../Grid';
+
+import { ToggleCheckbox } from './ToggleCheckbox';
+
+<Meta title="Design System/Components/ToggleCheckbox" component={ToggleCheckbox} />
+
+# ToggleCheckbox
+
+Toggles are used to switch between two different states. They are mostly used to switch between "On" and "Off" states. It is a binary choice.
+
+**Best practices**
+
+- One tap should be enough to change the state.
+- The state labels should only have a single word and be clear.
+- When in a Table component, prefer the usage of a Switch component.
+- Add a description line to give further information.
+  [View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/ToggleCheckbox)
+
+## Imports
+
+```js
+import { ToggleCheckbox } from '@strapi/design-system/ToggleCheckbox';
+```
+
+## Usage
+
+Use a toggle whenever the users need to turn something on or off in a form. A toggle can be disabled.
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <Grid gap={3} gridCols={12}>
+          <GridItem col={3}>
+            <ToggleCheckbox
+              onLabel="True"
+              offLabel="False"
+              checked={checked}
+              onChange={() => setChecked((prev) => !prev)}
+            >
+              The field is required?
+            </ToggleCheckbox>
+          </GridItem>
+        </Grid>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### ToggleCheckbox size S
+
+The deactivated state is one of the two available states for a Toggle.
+
+<Canvas>
+  <Story name="size S">
+    <ToggleCheckbox size="S" onLabel="True" offLabel="False" checked={false} onChange={() => {}}>
+      The field is required?
+    </ToggleCheckbox>
+  </Story>
+</Canvas>
+
+### Null value
+
+<Canvas>
+  <Story name="null-value">
+    {() => {
+      const [checked, setChecked] = useState(null);
+      return (
+        <ToggleCheckbox onLabel="True" offLabel="False" checked={checked} onChange={() => setChecked((prev) => !prev)}>
+          The field is required?
+        </ToggleCheckbox>
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Disabled Toggle
+
+<Canvas>
+  <Story name="disabled">
+    <ToggleCheckbox disabled onLabel="True" offLabel="False" checked={true} onChange={() => {}}>
+      The field is required?
+    </ToggleCheckbox>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={ToggleCheckbox} />

package/src/ToggleCheckbox/__tests__/ToggleCheckbox.e2e.js

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

package/src/ToggleCheckbox/index.js

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

package/src/ToggleInput/ToggleInput.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { sizes } from '../themes/sizes';
+import { useId } from '../helpers/useId';
+import { Field, FieldHint, FieldError, FieldLabel } from '../Field';
+import { Stack } from '../Stack';
+import { Flex } from '../Flex';
+import { TextButton } from '../TextButton';
+import { ToggleCheckbox } from '../ToggleCheckbox';
+
+const FieldWrapper = styled(Field)`
+  max-width: 320px;
+`;
+
+const ClearButton = styled(TextButton)`
+  align-self: flex-end;
+  margin-left: auto;
+`;
+
+export const ToggleInput = ({
+  disabled,
+  size,
+  error,
+  hint,
+  label,
+  name,
+  labelAction,
+  required,
+  id,
+  onClear,
+  clearLabel,
+  checked,
+  ...props
+}) => {
+  const generatedId = useId('toggleinput', id);
+
+  return (
+    <FieldWrapper name={name} hint={hint} error={error} id={generatedId}>
+      <Stack spacing={1}>
+        <Flex>
+          <FieldLabel required={required} action={labelAction}>
+            {label}
+          </FieldLabel>
+          {clearLabel && onClear && checked !== null && !disabled && (
+            <ClearButton onClick={onClear}>{clearLabel}</ClearButton>
+          )}
+        </Flex>
+        <ToggleCheckbox id={generatedId} size={size} name={name} checked={checked} disabled={disabled} {...props}>
+          {label}
+        </ToggleCheckbox>
+        <FieldHint />
+        <FieldError />
+      </Stack>
+    </FieldWrapper>
+  );
+};
+
+ToggleInput.displayName = 'ToggleInput';
+
+ToggleInput.defaultProps = {
+  checked: false,
+  clearLabel: undefined,
+  disabled: false,
+  error: undefined,
+  hint: undefined,
+  id: undefined,
+  label: '',
+  labelAction: undefined,
+  name: '',
+  onClear: undefined,
+  required: false,
+  size: 'M',
+};
+
+ToggleInput.propTypes = {
+  checked: PropTypes.bool,
+  clearLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  error: PropTypes.string,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  id: PropTypes.string,
+  label: PropTypes.string,
+  labelAction: PropTypes.node,
+  name: PropTypes.string,
+  onClear: PropTypes.func,
+  required: PropTypes.bool,
+  size: PropTypes.oneOf(Object.keys(sizes.input)),
+};

package/src/ToggleInput/ToggleInput.stories.mdx

@@ -0,0 +1,171 @@
+<!--- ToggleInput.stories.mdx --->
+
+import { useState } from 'react';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { ArgsTable } from '@storybook/addon-docs';
+import { ToggleInput } from './ToggleInput';
+import { Tooltip } from '../Tooltip';
+import Information from '@strapi/icons/Information';
+
+<Meta title="Design System/Components/ToggleInput" component={ToggleInput} />
+
+# ToggleInput
+
+This is the doc of the `ToggleInput` component
+
+[View source](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/ToggleInput)
+
+## Imports
+
+```js
+import { ToggleInput } from '@strapi/design-system/ToggleInput';
+```
+
+## Usage
+
+<Canvas>
+  <Story name="base">
+    {() => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <ToggleInput
+          hint="Enable provider"
+          label="Enabled"
+          name="enable-provider"
+          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>
+          }
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Error handling
+
+<Canvas>
+  <Story name="error">
+    {() => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <ToggleInput
+          hint="Enable provider"
+          error="this field is required"
+          label="Label"
+          name="enable-provider"
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Size S
+
+<Canvas>
+  <Story name="size S">
+    {() => {
+      const [checked, setChecked] = useState(false);
+      return (
+        <ToggleInput
+          size="S"
+          hint="Enable provider"
+          label="Label"
+          name="enable-provider"
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Null value
+
+<Canvas>
+  <Story name="null-value">
+    {() => {
+      const [checked, setChecked] = useState(null);
+      return (
+        <ToggleInput
+          hint="Enable provider"
+          label="Label"
+          name="enable-provider"
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+          clearLabel="clear"
+          onClear={() => setChecked(null)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Clear value
+
+<Canvas>
+  <Story name="clear-value">
+    {() => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <ToggleInput
+          hint="Enable provider"
+          label="Label"
+          name="enable-provider"
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+          clearLabel="clear"
+          onClear={() => setChecked(null)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Disabled
+
+<Canvas>
+  <Story name="disabled">
+    {() => {
+      const [checked, setChecked] = useState(true);
+      return (
+        <ToggleInput
+          disabled
+          hint="Enable provider"
+          label="Label"
+          name="enable-provider"
+          onLabel="True"
+          offLabel="False"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+          clearLabel="clear"
+          onClear={() => setChecked(null)}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={ToggleInput} />

package/src/ToggleInput/__tests__/ToggleInput.e2e.js

@@ -0,0 +1,109 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+test.describe.parallel('ToggleInput', () => {
+  test.describe('light mode', () => {
+    test.describe('base', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-toggleinput--base&args=&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('input error', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-toggleinput--error&args=&viewMode=story');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('null value', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-toggleinput--null-value&args=&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-toggleinput--base&args=&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('input error', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-toggleinput--error&args=&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('null value', () => {
+      test('triggers axe on the document', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-toggleinput--null-value&args=&viewMode=story&theme=dark',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+      });
+    });
+
+    test.describe('toggle behavior', () => {
+      test('toggle value', async ({ page }) => {
+        await page.goto('/iframe.html?id=design-system-components-toggleinput--base&args=&viewMode=story&theme=dark');
+        await injectAxe(page);
+        await checkA11y(page);
+
+        expect(await page.isChecked('#toggleinput-1')).toBeTruthy();
+        await page.click('label');
+        expect(await page.isChecked('#toggleinput-1')).toBeFalsy();
+        await page.click('label');
+        expect(await page.isChecked('#toggleinput-1')).toBeTruthy();
+      });
+
+      test('change value from null', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-toggleinput--null-value&args=&viewMode=story&theme=dark',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+
+        expect(await page.isChecked('#toggleinput-1')).toBeFalsy();
+        await page.click('label');
+        expect(await page.isChecked('#toggleinput-1')).toBeTruthy();
+      });
+
+      test('change value to true after clearing truthy value', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-toggleinput--clear-value&args=&viewMode=story&theme=dark',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+
+        expect(await page.isChecked('#toggleinput-1')).toBeTruthy();
+        await page.click('button >> text=clear');
+        expect(await page.isChecked('#toggleinput-1')).toBeFalsy();
+        await page.click('label');
+        expect(await page.isChecked('#toggleinput-1')).toBeTruthy();
+      });
+
+      test('clear value is not present, if the field is disabled', async ({ page }) => {
+        await page.goto(
+          '/iframe.html?id=design-system-components-toggleinput--disabled&args=&viewMode=story&theme=dark',
+        );
+        await injectAxe(page);
+        await checkA11y(page);
+
+        expect(await page.$$('text=clear')).toHaveLength(0);
+      });
+    });
+  });
+});

package/src/ToggleInput/index.js

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