docs: updated togglebox and toggleboxgroup stories

Removed wrapping helper component to improve code snippets.

packages/toggleBox/stories/ToggleBox.stories.tsx

@@ -1,29 +1,30 @@
 import * as React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { Story, Meta } from "@storybook/react";
 import { ToggleBox } from "../index";
-import ToggleBoxStoryHelper from "./helpers/ToggleBoxStoryHelper";
 import { ToggleBoxProps } from "../components/ToggleBox";
 
 export default {
  title: "Forms/ToggleBox",
  component: ToggleBox
 } as Meta;
 
-const Template: StoryFn<ToggleBoxProps> = args => (
- <ToggleBoxStoryHelper>
- {({ isActive, changeHandler }) => (
- <ToggleBox
- id="default"
- isActive={isActive}
- onChange={changeHandler}
- {...args}
- >
- Default
- </ToggleBox>
- )}
- </ToggleBoxStoryHelper>
-);
+const Template = args => {
+ const [isActive, setIsActive] = React.useState<boolean>(false);
 
-export const Default = {
- render: Template
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setIsActive(e.target.checked);
+ };
+
+ return (
+ <ToggleBox
+ id="default"
+ isActive={isActive}
+ onChange={handleChange}
+ {...args}
+ >
+ Default
+ </ToggleBox>
+ );
 };
+
+export const Default = Template;

packages/toggleBox/stories/ToggleBoxGroup.stories.tsx

@@ -1,8 +1,6 @@
 import * as React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { ToggleBox, ToggleBoxGroup } from "../index";
-import ToggleBoxGroupStoryHelper from "./helpers/ToggleBoxGroupStoryHelper";
-import { ToggleBoxGroupProps } from "../components/ToggleBoxGroup";
 import { spacingSizeValues } from "../../storybookHelpers/controlConstants";
 
 const directions = {
@@ -11,6 +9,7 @@ const directions = {
  columnReverse: "column-reverse",
  rowReverse: "row-reverse"
 };
+
 export default {
  title: "Forms/ToggleBoxGroup",
  component: ToggleBoxGroup,
@@ -30,48 +29,44 @@ export default {
  }
 } as Meta;
 
-const Template: StoryFn<ToggleBoxGroupProps> = args => (
- <ToggleBoxGroupStoryHelper>
- {({ changeHandler, selectedItems }) => (
- <ToggleBoxGroup
- onChange={changeHandler}
- selectedItems={selectedItems}
- id="default"
- {...args}
- >
- <ToggleBox id="exosphere" value="exosphere">
- Exosphere
- </ToggleBox>
- <ToggleBox id="thermosphere" value="thermosphere">
- Thermosphere
- </ToggleBox>
- <ToggleBox id="mesosphere" value="mesosphere">
- Mesosphere
- </ToggleBox>
- </ToggleBoxGroup>
- )}
- </ToggleBoxGroupStoryHelper>
-);
+const Template = args => {
+ const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
+
+ function handleChange(value: string[]) {
+ setSelectedItems(value);
+ }
 
-export const Default = {
- render: Template
+ return (
+ <ToggleBoxGroup
+ onChange={handleChange}
+ selectedItems={selectedItems}
+ id="default"
+ {...args}
+ >
+ <ToggleBox id="exosphere" value="exosphere">
+ Exosphere
+ </ToggleBox>
+ <ToggleBox id="thermosphere" value="thermosphere">
+ Thermosphere
+ </ToggleBox>
+ <ToggleBox id="mesosphere" value="mesosphere">
+ Mesosphere
+ </ToggleBox>
+ </ToggleBoxGroup>
+ );
 };
 
-export const WithLabel = {
- render: Template,
+export const Default = Template;
 
- args: {
- id: "withLabel",
-  label: "Atmosphere Layer"
- }
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+ id: "withLabel",
+ label: "Atmosphere Layer"
 };
 
-export const MultiSelectWithSelectedItems = {
- render: Template,
-
- args: {
- id: "multiselect",
- multiSelect: true,
- selectedItems: ["exosphere", "thermosphere"]
- }
+export const MultiSelectWithSelectedItems = Template.bind({});
+MultiSelectWithSelectedItems.args = {
+ id: "multiselect",
+ multiSelect: true,
+ selectedItems: ["exosphere", "thermosphere"]
 };