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

package/src/TimePicker/index.js

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

package/src/ToggleCheckbox/ToggleCheckbox.js

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

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

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

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

package/src/ToggleInput/ToggleInput.js

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

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

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

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