toggle-button (#12817)

ui/components/ui/toggle-button/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import ToggleButton from '.';
+
+# Toggle Button
+
+Button that toggles state on or off. Wraps <a href="https://gdowens.github.io/react-toggle-button/" target="_blank">react-toggle-button</a>
+
+<Canvas>
+  <Story id="ui-components-ui-toggle-button-toggle-button-stories-js--default-story" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={ToggleButton} />

ui/components/ui/toggle-button/toggle-button.component.js

@@ -87,11 +87,29 @@ const ToggleButton = (props) => {
 };
 
 ToggleButton.propTypes = {
+  /**
+   * ToggleButton value
+   */
   value: PropTypes.bool,
+  /**
+   * The onChange handler of the ToggleButton
+   */
   onToggle: PropTypes.func,
+  /**
+   * Label text when toggle is off
+   */
   offLabel: PropTypes.string,
+  /**
+   * Label text when toggle is on
+   */
   onLabel: PropTypes.string,
+  /**
+   * Disables ToggleButton if true. Set to false as default
+   */
   disabled: PropTypes.bool,
+  /**
+   * Additional className to add to the ToggleButton
+   */
   className: PropTypes.string,
 };
 

ui/components/ui/toggle-button/toggle-button.stories.js

@@ -1,30 +1,38 @@
-import React, { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
-
+import React from 'react';
+import { useArgs } from '@storybook/client-api';
+import README from './README.mdx';
 import ToggleButton from './toggle-button.component';
 
 export default {
   title: 'Components/UI/ToggleButton',
   component: ToggleButton,
   id: __filename,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    value: { control: 'boolean' },
+    onToggle: { action: 'onToggle' },
+    offLabel: { control: 'text' },
+    onLabel: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
 };
 
-export const DefaultStory = () => {
-  const [checked, setChecked] = useState(false);
-  const handleOnToggle = (e) => {
-    action('onToggle')(e);
-    setChecked(!checked);
+export const DefaultStory = (args) => {
+  const [{ value }, updateArgs] = useArgs();
+  const handleOnToggle = () => {
+    updateArgs({ value: !value });
   };
-  return (
-    <ToggleButton
-      offLabel={text('offLabel', 'off')}
-      onLabel={text('onLabel', 'on')}
-      disabled={boolean('disabled', false)}
-      value={checked}
-      onToggle={handleOnToggle}
-    />
-  );
+  return <ToggleButton {...args} value={value} onToggle={handleOnToggle} />;
 };
 
 DefaultStory.storyName = 'Default';
+DefaultStory.args = {
+  value: false,
+  offLabel: 'off',
+  onLabel: 'on',
+  disabled: false,
+};