change stories and guidelines

stories/Checkbox/checkbox.guideline.mdx

@@ -15,40 +15,37 @@ import * as CheckboxStories from './checkbox.stories';
 
 # Checkbox
 
-Checkboxes are used to select one or multiple options in a list.
-
-## Size & style
-
-### Style
-
-### Padding
+Checkboxes are used to select one or more options in a list.
 
 ## Usage
 
-<Canvas of={CheckboxStories.DefaultCheckbox} layout="fullscreen" />
+A tick/check indicates that the element is selected. \
+Unlike the radio element it is possible to select more than one option.
+
+<Canvas of={CheckboxStories.ChoiceCheckbox} layout="fullscreen" />
 
 ## State Variations
 
-### Checked State
+### Indeterminate State
+
+Apart from checked and unchecked, checkboxes can be in a third state : indeterminate. \
+When a checkbox has sub-options checkboxes, this state indicates that some of the sub-options are checked. \
+Clicking on the main checkbox select or unselect all the sub-options boxes.
 
-<Canvas of={CheckboxStories.CheckedCheckbox} layout="fullscreen" />
+<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />
 
 ### Disabled state
 
+Checkboxes can be disabled, making it impossible to change the box state. \
+A not-allowed cursor inform the user about the unavaibility of the action.
+
 <Canvas
   of={CheckboxStories.DisabledCheckboxes}
 
 layout="fullscreen"
 />
 
-### Indeterminate State
-
-Apart from checked and unchecked, checkboxes can have a third state : indeterminate.
-When a checkbox has children checkboxes, this state indicates that some of the children boxes are checked.
-
-<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />
-
 ### Playground
 
-<Canvas of={CheckboxStories.DefaultCheckbox} layout="fullscreen" />
-<Controls of={CheckboxStories.DefaultCheckbox} />
+<Canvas of={CheckboxStories.Playground} layout="fullscreen" />
+<Controls of={CheckboxStories.Playground} />

stories/Checkbox/checkbox.stories.tsx

@@ -11,20 +11,28 @@ type CheckboxStory = StoryObj<typeof Checkbox>;
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Inputs/Checkbox',
   component: Checkbox,
-  decorators: [
-    (story) => (
-      <Wrapper style={{ minHeight: '5vh', padding: '2rem' }}>{story()}</Wrapper>
-    ),
-  ],
   args: {
-    label: 'interrested ?',
+    label: 'interested ?',
     onChange: action('Checkbox clicked'),
   },
 };
 
 export default meta;
 
-export const DefaultCheckbox: CheckboxStory = {};
+export const Playground: CheckboxStory = {};
+
+export const ChoiceCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <>
+        What are you interested in ?
+        <Checkbox label="Sport" />
+        <Checkbox label="Music" />
+        <Checkbox label="Drawing" />
+      </>
+    );
+  },
+};
 
 export const IndeterminateCheckbox: StoryObj<
   ComponentProps<typeof Checkbox> & { 'data-cy': string }
@@ -121,9 +129,7 @@ export const IndeterminateUseCase = {
       <Box width="500px" height="200px">
         <Table columns={columns} data={data} defaultSortingKey={'health'}>
           <Table.MultiSelectableContent
-            onMultiSelectionChanged={(rows) => {
-              console.log('Table.MultiSelectableContent selected row', rows);
-            }}
+            onMultiSelectionChanged={action('Selection changed')}
           />
         </Table>
       </Box>