refactor(stories): Rename story names

stories/0-Input.stories.tsx

@@ -0,0 +1,64 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import Input from "../src/form/input/Input";
+import StoryFragment from "./utils/StoryFragment";
+
+storiesOf("Input", module)
+  .add("Input", () => (
+    <Fragment>
+      <Input
+        name={"fullName"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+        placeholder={"Input"}
+      />
+
+      <br />
+
+      <Input
+        name={"fullName"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+        placeholder={"Disabled Input"}
+        isDisabled={true}
+      />
+    </Fragment>
+  ))
+  .add("Input with FormField", () => (
+    <StoryFragment>
+      <FormField labelledBy={"Full Name"} label={"Full Name"}>
+        <Input
+          name={"fullName"}
+          placeholder={"Input with FormField"}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+
+      <br />
+
+      <FormField
+        labelledBy={"Full Name"}
+        label={"Full Name"}
+        helperMessages={["You can include your middle name"]}>
+        <Input
+          name="fullName"
+          placeholder={"Input hasHelperMessage with FormField"}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+
+      <br />
+
+      <FormField
+        labelledBy={"Full Name"}
+        label={"Full Name"}
+        errorMessages={["Please enter a full name"]}>
+        <Input
+          name={"fullName"}
+          placeholder={"Input errorMessage with FormField"}
+          hasError={true}
+          onChange={(e) => console.log(e.currentTarget.value)}
+        />
+      </FormField>
+    </StoryFragment>
+  ));

stories/1-RadioInput.stories.tsx

@@ -0,0 +1,112 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import StateProvider from "./utils/StateProvider";
+
+import FormField from "../src/form/field/FormField";
+import RadioGroup from "../src/form/input/radio/group/RadioGroup";
+
+storiesOf("Radio Input", module).add("Radio Input", () => {
+  const initialState = {
+    firstInput: {
+      choices: [
+        {
+          content: "Large",
+          id: "Size, Large",
+          inputProps: {
+            htmlFor: "size-large",
+            value: "size-large",
+            name: "size"
+          }
+        },
+        {
+          content: "Medium",
+          id: "Size, Medium",
+          inputProps: {
+            htmlFor: "size-medium",
+            value: "size-medium",
+            name: "size"
+          }
+        },
+        {
+          content: "All of them",
+          id: "All of them",
+          isDisabled: true,
+          inputProps: {
+            htmlFor: "all-of-them",
+            value: "all-of-them",
+            name: "size"
+          }
+        }
+      ],
+      selectedItem: null
+    },
+    secondInput: {
+      choices: [
+        {
+          content: "Mac OSX",
+          id: "Mac OSX",
+          inputProps: {
+            htmlFor: "mac-osx",
+            value: "mac-osx",
+            name: "os"
+          }
+        },
+        {
+          content: "Windows",
+          id: "Windows",
+          inputProps: {
+            htmlFor: "windows",
+            value: "windows",
+            name: "os"
+          }
+        },
+        {
+          content: "Linux",
+          id: "Linux",
+          inputProps: {
+            htmlFor: "linux",
+            value: "linux",
+            name: "os"
+          }
+        }
+      ],
+      selectedItem: null
+    }
+  };
+
+  return (
+    <StateProvider initialState={initialState}>
+      {(state, setState) => (
+        <Fragment>
+          <FormField label={"Partially Disabled"}>
+            <RadioGroup
+              items={state.firstInput.choices}
+              selectedItem={state.firstInput.selectedItem}
+              onSelect={(item) =>
+                setState({
+                  ...state,
+                  firstInput: {...state.firstInput, selectedItem: item}
+                })
+              }
+            />
+          </FormField>
+
+          <FormField label={"Fully Disabled"}>
+            <RadioGroup
+              items={state.secondInput.choices}
+              selectedItem={state.secondInput.selectedItem}
+              isDisabled={true}
+              onSelect={(item) =>
+                setState({
+                  ...state,
+                  secondInput: {...state.secondInput, selectedItem: item}
+                })
+              }
+            />
+          </FormField>
+        </Fragment>
+      )}
+    </StateProvider>
+  );
+});

stories/5-Typeahead.stories.tsx → stories/11-Typeahead.stories.tsx

@@ -10,7 +10,7 @@ import TypeaheadSelect from "../src/select/typeahead/TypeaheadSelect";
 const simulateAPICall = (timeout = 1000) =>
   new Promise((resolve) => setTimeout(resolve, timeout));
 
-storiesOf("Typeahead", module).add("Typeahead States", () => {
+storiesOf("Typeahead", module).add("Typeahead", () => {
   const initialState = {
     options: [
       {

stories/10-Switch.stories.tsx → stories/17-Switch.stories.tsx

@@ -5,7 +5,7 @@ import Switch from "../src/switch/Switch";
 import StateProvider from "./utils/StateProvider";
 import StoryFragment from "./utils/StoryFragment";
 
-storiesOf("Switch", module).add("Switch States", () => {
+storiesOf("Switch", module).add("Switch", () => {
   const initialState = {
     isSwitchOn: true,
     isDisabled: false

stories/11-Toggle.stories.tsx → stories/18-Toggle.stories.tsx

@@ -6,7 +6,7 @@ import {initialState} from "./utils/constants/toggle/toggleStoryOptionConstants"
 import StateProvider from "./utils/StateProvider";
 
 storiesOf("Toggle", module)
-  .add("Toggle States", () => {
+  .add("Toggle", () => {
     return (
       <div style={{width: "500px"}}>
         <span>{"Switch Toggle - 2 Options"}</span>

stories/2-CheckboxInput.stories.tsx

@@ -0,0 +1,67 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import StateProvider from "./utils/StateProvider";
+
+import CheckboxInput from "../src/form/input/checkbox/CheckboxInput";
+
+storiesOf("Checkbox", module).add("Checkbox", () => {
+  const initialState = {
+    rememberMe: true,
+    termsAndConditions: false,
+    privacyPolicy: true
+  };
+
+  return (
+    <StateProvider initialState={initialState}>
+      {(state, setState) => (
+        <Fragment>
+          <CheckboxInput
+            onSelect={() => setState({...state, rememberMe: !state.rememberMe})}
+            isSelected={state.rememberMe}
+            item={{
+              id: "rememberMe",
+              content: "Remember Me",
+              inputProps: {
+                name: "rememberMe",
+                htmlFor: "rememberMe",
+                value: "yes"
+              }
+            }}
+          />
+
+          <CheckboxInput
+            onSelect={() =>
+              setState({...state, termsAndConditions: !state.termsAndConditions})
+            }
+            isSelected={state.termsAndConditions}
+            item={{
+              id: "termsAndConditions",
+              content: "Terms and Conditions",
+              inputProps: {
+                name: "termsAndConditions",
+                htmlFor: "termsAndConditions",
+                value: "yes"
+              }
+            }}
+          />
+
+          <CheckboxInput
+            onSelect={() => setState({...state, privacyPolicy: !state.privacyPolicy})}
+            isSelected={state.privacyPolicy}
+            isDisabled={true}
+            item={{
+              id: "privacyPolicy",
+              content: "Privacy Policy",
+              inputProps: {
+                name: "privacyPolicy",
+                htmlFor: "privacyPolicy",
+                value: "yes"
+              }
+            }}
+          />
+        </Fragment>
+      )}
+    </StateProvider>
+  );
+});

stories/3-PasswordInput.stories.tsx

@@ -0,0 +1,18 @@
+import React, {Fragment} from "react";
+import {storiesOf} from "@storybook/react";
+
+import FormField from "../src/form/field/FormField";
+import PasswordInput from "../src/form/password-input/PasswordInput";
+
+storiesOf("Password Input", module).add("Password Input", () => (
+  <Fragment>
+    <FormField label={"Password"}>
+      <PasswordInput
+        testid={"LoginForm.input"}
+        name={"password"}
+        placeholder={"Enter password"}
+        onChange={(e) => console.log(e.currentTarget.value)}
+      />
+    </FormField>
+  </Fragment>
+));