checkbox storybook (#12757)

ui/components/ui/check-box/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import CheckBox from '.';
+
+# Checkbox
+
+A small interactive box that can be toggled by the user to indicate an affirmative or negative choice.
+
+<Canvas>
+  <Story id="ui-components-ui-check-box-check-box-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={CheckBox} />

ui/components/ui/check-box/check-box.component.js

@@ -58,13 +58,34 @@ const CheckBox = ({
 };
 
 CheckBox.propTypes = {
+  /**
+   * Add custom classname css
+   */
   className: PropTypes.string,
+  /**
+   * Check if checkbox disabled or not
+   */
   disabled: PropTypes.bool,
+  /**
+   * Checkbox ID
+   */
   id: PropTypes.string,
+  /**
+   * Click handler
+   */
   onClick: PropTypes.func,
+  /**
+   * Check if the checkbox are checked or not
+   */
   checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false])
     .isRequired,
+  /**
+   * Show title
+   */
   title: PropTypes.string,
+  /**
+   * Data test ID for checkbox Component
+   */
   dataTestId: PropTypes.string,
 };
 

ui/components/ui/check-box/check-box.stories.js

@@ -1,17 +1,11 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import README from './README.mdx';
 import CheckBox, {
   CHECKED,
   INDETERMINATE,
   UNCHECKED,
 } from './check-box.component';
 
-export default {
-  title: 'Check Box',
-  id: __filename,
-};
-
 const checkboxOptions = {
   [CHECKED]: CHECKED,
   [INDETERMINATE]: INDETERMINATE,
@@ -20,11 +14,36 @@ const checkboxOptions = {
   False: false,
 };
 
-export const primaryType = () => (
-  <CheckBox
-    checked={select('checked state', checkboxOptions, UNCHECKED)}
-    disabled={boolean('Disabled', false)}
-    id={text('ID', 'checkboxId')}
-    onClick={action('checkbox clicked')}
-  />
+export default {
+  title: 'Components/UI/Check Box',
+  id: __filename,
+  component: CheckBox,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    className: { control: 'text' },
+    disabled: { control: 'boolean' },
+    id: { control: 'text' },
+    onClick: { action: 'clicked' },
+    checked: {
+      options: ['CHECKED', 'INDETERMINATE', 'UNCHECKED', 'True', 'False'],
+      control: 'select',
+    },
+    title: { control: 'text' },
+    dataTestId: { control: 'text' },
+  },
+};
+
+export const DefaultStory = (args) => (
+  <CheckBox {...args} checked={checkboxOptions[args.checked]} />
 );
+
+DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  checked: UNCHECKED,
+  disabled: false,
+  id: 'checkboxID',
+};