docs: updated togglebox and toggleboxgroup stories (#989)

Removed wrapping helper component to improve code snippets.

packages/toggleBox/stories/ToggleBox.stories.tsx

@@ -1,28 +1,31 @@
 import * as React from "react";
 import { StoryFn, 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: StoryFn<ToggleBoxProps> = args => {
+ const [isActive, setIsActive] = React.useState<boolean>(false);
+
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setIsActive(e.target.checked);
+ };
+
+ return (
+ <ToggleBox
+ id="default"
+ isActive={isActive}
+ onChange={handleChange}
+ {...args}
+ >
+ Default
+ </ToggleBox>
+ );
+};
 
 export const Default = {
  render: Template

packages/toggleBox/stories/ToggleBoxGroup.stories.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 import { StoryFn, Meta } from "@storybook/react";
 import { ToggleBox, ToggleBoxGroup } from "../index";
-import ToggleBoxGroupStoryHelper from "./helpers/ToggleBoxGroupStoryHelper";
-import { ToggleBoxGroupProps } from "../components/ToggleBoxGroup";
 import { spacingSizeValues } from "../../storybookHelpers/controlConstants";
+import { ToggleBoxGroupProps } from "../components/ToggleBoxGroup";
 
 const directions = {
  column: "column",
  row: "row",
  columnReverse: "column-reverse",
  rowReverse: "row-reverse"
 };
+
 export default {
  title: "Forms/ToggleBoxGroup",
  component: ToggleBoxGroup,
@@ -30,28 +30,32 @@ 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: StoryFn<ToggleBoxGroupProps> = args => {
+ const [selectedItems, setSelectedItems] = React.useState<string[]>([]);
+
+ function handleChange(value: string[]) {
+ setSelectedItems(value);
+ }
+
+ 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 Default = {
  render: Template