diff --git a/packages/design-system/src/stories/form/Checkbox/Checkbox.mdx b/packages/design-system/src/stories/form/Checkbox/Checkbox.mdx deleted file mode 100644 index f8095c74345..00000000000 --- a/packages/design-system/src/stories/form/Checkbox/Checkbox.mdx +++ /dev/null @@ -1,111 +0,0 @@ -import { Controls, Canvas, Meta, Story } from '@storybook/blocks'; -import { FigmaImage, Use } from '@talend/storybook-docs'; -import * as Stories from './Checkbox.stories'; -import { Status } from '../../Status.block'; - - - - -# Checkbox - -Checkbox should be used for item/option selection and only when more than one item can be selected at the same time. - -If there is only two options (on/off), consider using a SwitchToggle. If the user should select only one option among many, use Radio inputs instead. - -## Zoning - - - -## States - - - -### Default - - - - - -### Disabled - - - - - -### Read only - - - - - -### Multiple checkboxes - - - - - -### Controlled checkbox - - - - - -## Content - -Checkboxes appear as a list in UIs, it's therefore important to make their labels as parallel as possible without twisting the language too much. - -Aim for parallelism but not at the expense of comprehension. - - - -
    -
  • Use positive and active wording for checkbox labels.
    • -
  • - Aim for parallel checkbox labels to ease reading flow and help users make the right choices. - For example, use "Search profile, Delete profile, Create profile, Edit profile" and don't - use "Search in profile, Delete profiles, Create a new profile, Edit existing profile". -
    • -
  • Start each label with capital letter.
    • -
- - -
    -
  • - Don’t use vague or misleading labels that are difficult to understand by average users. -
    • -
  • Don’t use punctuations at the end of labels.
    • -
- - - -## Interactions - -- The label must always be clickable to check or uncheck. - -## Usage - -export const Template = args => { - const Component = Checkbox; - Component.displayName = 'Checkbox'; - return ; -}; - - - - - - - -## Accessibility - -Press Tab to focus on a checkbox. - -Press Tab or Shift + Tab to navigate between checkboxes. - -Press Space to toggle the checkbox between selected and not selected. diff --git a/packages/design-system/src/stories/form/Checkbox/Checkbox.stories.tsx b/packages/design-system/src/stories/form/Checkbox/Checkbox.stories.tsx deleted file mode 100644 index 2140a78f2ce..00000000000 --- a/packages/design-system/src/stories/form/Checkbox/Checkbox.stories.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { useState } from 'react'; -import { useForm } from 'react-hook-form'; - -import { - ButtonPrimary, - Checkbox, - Form, - InlineMessageInformation, - StackVertical, - UncontrolledCheckbox, -} from '@talend/design-system'; - -export default { - component: Checkbox, -}; - -export const CheckboxFillStates = () => ( - - - - - -); - -export const CheckboxFillStatesDisabled = () => ( - - - - - -); - -export const CheckboxFillStatesReadonly = () => ( - - - - - -); - -type Inputs = { - 'option-a'?: boolean; - 'option-b'?: boolean; - 'inline-option-a'?: boolean; - 'inline-option-b'?: boolean; - 'option-c'?: boolean; - 'option-d'?: boolean; - 'option-e'?: boolean; - 'option-f'?: boolean; -}; - -export const CheckboxReactHooksForm = () => { - const { register, handleSubmit } = useForm(); - const [formData, setFormData] = useState(); - - return ( -
- {formData && ( - - )} - - - - - - - - - - - - - - - - {/*@see https://github.com/react-hook-form/react-hook-form/issues/6690 */} - {/* Fixed in RHF v7 - new version is required to handle this usecase with "register({ disabled: true })" */} - - - - - {}}> - Submit - - - - ); -}; - -export const CheckboxControlled = () => { - const { register, watch } = useForm(); - const optionA = watch('option-a'); - return ( -
- - - - {}} - /> - - - {}}> - Submit - - -
- ); -}; diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx index ede264711de..7dfdd89c6de 100644 --- a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx +++ b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.mdx @@ -4,13 +4,7 @@ import { Form, ToggleSwitch } from '@talend/design-system'; import * as Stories from './ToggleSwitch.stories'; - + # ToggleSwitch diff --git a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx index d44fd7e61ad..935b2f365ea 100644 --- a/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx +++ b/packages/design-system/src/stories/form/ToggleSwitch/ToggleSwitch.stories.tsx @@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form'; export default { title: 'Form/Fields/ToggleSwitch', - component: Form.ToggleSwitch, + component: ToggleSwitch, }; export const ToggleSwitchStates = () => (