From 87e854887f77c170591be48f7b10598ef5e3a0e8 Mon Sep 17 00:00:00 2001 From: Steven VAIDIE Date: Fri, 11 Sep 2020 12:30:29 +0200 Subject: [PATCH] RAC-225: add usage on checkbox page from notion --- akeneo-design-system/Introduction.stories.mdx | 2 +- .../components/Checkbox/Checkbox.stories.mdx | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/akeneo-design-system/Introduction.stories.mdx b/akeneo-design-system/Introduction.stories.mdx index f2a8952aac95..9ca3dcc6100c 100644 --- a/akeneo-design-system/Introduction.stories.mdx +++ b/akeneo-design-system/Introduction.stories.mdx @@ -109,7 +109,7 @@ import { linkTo } from '@storybook/addon-links'; # Welcome to Storybook -Storybook helps you build UI components in isolation from your app's business logic, data, and context.s +Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. Browse example stories now by navigating to them in the sidebar. diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx b/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx index 16b1dbafc96b..3772a5f1a239 100644 --- a/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx +++ b/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx @@ -19,6 +19,23 @@ import { Checkbox } from "./Checkbox.tsx"; # Checkbox +## Usage +The checkboxes are applied when users can select all, several, or none of the options from a given list. + +### Checkbox states +The checkbox control allows three states: selected, unselected, and undetermined. The undetermined state comes into play when the checkbox contains a sublist of selections, some of which are selected, and others aren't. + +Users must be able to check the box by clicking directly on the box or by clicking on its label. + +### Content +#### Title + +If necessary, a header can accompany a set of checkboxes to provide more context or clarity. + +#### Labels + +Always use clear and concise labels for the checkboxes. The labels appears on the right of the checkboxes. + ## Playground Use this playground to test the checkbox component