feat: continuing with updates

.storybook/preview-head.html

@@ -20,7 +20,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 42px;
+    padding: 48px;
   }
 
   body #root {

.storybook/preview.jsx

@@ -80,6 +80,7 @@ export const parameters = {
       order: ["Welcome", "Components", "Inputs", "Features", "Platform", "Errors", "Playground", "*", "Deprecated"],
     },
   },
+
   parameters: {
     docs: {
       source: {

src/components/AboutPlatform/AboutPlatform.stories.jsx

@@ -3,6 +3,13 @@ import AboutPlatform from "./AboutPlatform";
 export default {
   title: "Platform/AboutPlatform",
   component: AboutPlatform,
+  parameters: {
+    docs: {
+      description: {
+        component: "Modal that displays key metadata about the platform.",
+      },
+    },
+  },
   argTypes: {
     isFlowApp: { control: "boolean", defaultValue: false },
     organization: { control: "text", defaultValue: "IBM" },

src/components/AutoSuggest/AutoSuggest.stories.jsx

@@ -1,5 +1,4 @@
 import { action } from "@storybook/addon-actions";
-import { text } from "@storybook/addon-knobs";
 import TextInput from "../TextInput";
 import AutoSuggest from "./AutoSuggest";
 
@@ -21,6 +20,13 @@ const animals = [
 export default {
   title: "Inputs/AutoSuggest",
   component: AutoSuggest,
+  parameters: {
+    docs: {
+      description: {
+        component: "An enhanced TextInput that supports selecting from a provided list of options.",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ maxWidth: "25rem", minHeight: "20rem" }}>

src/components/Avatar/Avatar.stories.jsx

@@ -3,6 +3,13 @@ import Avatar from "./Avatar";
 export default {
   title: "Components/Avatar",
   components: Avatar,
+  parameters: {
+    docs: {
+      description: {
+        component: "A image component to display a user's profile image with a fallback user icon.",
+      },
+    },
+  },
   argTypes: {
     className: {
       description: "Pass custom class",

src/components/CheckboxList/CheckboxList.stories.jsx

@@ -11,6 +11,13 @@ const animals = [
 export default {
   title: "Inputs/CheckboxList",
   component: CheckboxList,
+  parameters: {
+    docs: {
+      description: {
+        component: "Manage checkbox inputs with optional label, helper and tooltip text",
+      },
+    },
+  },
   argTypes: {
     options: {
       type: "array",

src/components/ComboBox/ComboBox.stories.jsx

@@ -4,6 +4,13 @@ import ComboBox from "./index";
 export default {
   title: "Inputs/ComboBox",
   component: ComboBox,
+  parameters: {
+    docs: {
+      description: {
+        component: "Enhanced combobox that default filters options on type by default",
+      },
+    },
+  },
   argTypes: { onChange: { action: "clicked" } },
 };
 

src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.stories.jsx

@@ -5,6 +5,13 @@ import MultiSelect from "./ComboBoxMultiSelect";
 export default {
   title: "Inputs/ComboBoxMultiSelect",
   component: MultiSelect,
+  parameters: {
+    docs: {
+      description: {
+        component: "Enhanced multiselect that allows multiple options to be selected with filtering",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ maxWidth: "25rem", padding: "1rem" }}>

src/components/ComposedModal/ComposedModal.jsx

@@ -13,7 +13,13 @@ ComposedModal.propTypes = {
    */
   appElement: PropTypes.string,
   /**
-   * Render inside the body of the modal
+   * Function-as-a-child pattern to render content within modal
+   * Recieves an object with the following props:
+   * handleShouldCloseModal,
+   * forceCloseModal,
+   * resetInitialState,
+   * setShouldConfirmModalClose,
+   * shouldConfirmModalClose
    */
   children: PropTypes.func,
   composedModalProps: PropTypes.object,

src/components/ComposedModal/ComposedModal.stories.jsx

@@ -3,26 +3,35 @@ import TextInput from "../TextInput";
 import { Button, ModalBody, ModalFooter } from "@carbon/react";
 import ComposedModal from "./index";
 import ModalForm from "../ModalForm/ModalForm";
+import RadioGroup from "../RadioGroup";
 
 export default {
   title: "Components/ComposedModal",
   component: ComposedModal,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A pre-built modal that has built in state management, modal header, exposed trigger component, confirm modal, and renders content with function-as-a-child pattern.",
+      },
+    },
+  },
 };
 
 function Component1(props) {
   return (
     <ModalForm title="Testing some text here">
       <ModalBody>
         <TextInput
-          label="Lorem"
-          tooltipContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id pellentesque risus, in dapibus odio. Etiam massa orci, porttitor in neque quis, iaculis aliquam elit. Ut et laoreet mi, ac mattis ipsum. Proin congue consequat purus. Vestibulum eget neque vel est ullamcorper commodo nec a nulla"
+          label="test"
+          tooltipContent="testing testingtestingtestingtestingtesting testing testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtesting"
           id="testing"
           onChange={() => {}}
           placeholder="This is an input"
         />
         <TextInput
-          label="Ipsum"
-          tooltipContent="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id pellentesque risus, in dapibus odio. Etiam massa orci, porttitor in neque quis, iaculis aliquam elit. Ut et laoreet mi, ac mattis ipsum. Proin congue consequat purus. Vestibulum eget neque vel est ullamcorper commodo nec a nulla"
+          label="test"
+          tooltipContent="testing testingtestingtestingtestingtesting testing testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesting testingtestingtestingtestingtesting"
           id="testing2"
           onChange={() => {}}
           placeholder="This is another input"
@@ -59,7 +68,7 @@ function Component2(props) {
   );
 }
 
-export const Default = (args) => {
+export const Default = () => {
   return (
     <ComposedModal
       appElement="#root"
@@ -74,9 +83,79 @@ export const Default = (args) => {
         subtitle: "Even more info here",
       }}
       modalTrigger={({ openModal }) => <Button onClick={openModal}>Open modal composed</Button>}
-      {...args}
     >
       {({ closeModal }) => <Component1 closeModal={closeModal} />}
     </ComposedModal>
   );
 };
+
+export const InitiallyOpen = () => {
+  return (
+    <ComposedModal
+      isOpen
+      appElement="#root"
+      composedModalProps={{ selectorPrimaryFocus: 'input[id="testing"]' }}
+      confirmModalProps={{
+        title: "Close Create Component?",
+        children: <div>Your current progress will not be saved.</div>,
+      }}
+      modalHeaderProps={{
+        subTitle: "Create a new component for IBM Services Engineering",
+        title: "Create Component",
+      }}
+      modalTrigger={({ openModal }) => <Button onClick={openModal}>Open modal flow</Button>}
+    >
+      {({ closeModal, setShouldConfirmModalClose }) => (
+        <Component2 closeModal={closeModal} setShouldConfirmModalClose={setShouldConfirmModalClose} />
+      )}
+    </ComposedModal>
+  );
+};
+
+InitiallyOpen.story = {
+  name: "Initially open",
+};
+
+export const Size = () => {
+  const [size, setSize] = React.useState("");
+  return (
+    <div>
+      <div style={{ marginBottom: "1rem" }}>
+        <RadioGroup
+          id="testSize"
+          //defaultSelected={"md"}
+          labelText={"Size"}
+          onChange={(value) => setSize(value)}
+          options={[
+            { labelText: "xs", value: "xs" },
+            { labelText: "sm", value: "sm" },
+            { labelText: "md", value: "md" },
+            { labelText: "lg", value: "lg" },
+          ]}
+          orientation="horizontal"
+        />
+      </div>
+      <ComposedModal
+        size={size}
+        appElement="#root"
+        composedModalProps={{ selectorPrimaryFocus: 'input[id="testing"]' }}
+        confirmModalProps={{
+          title: "Close Composed Modal?",
+          children: <div>You will need to start from the first component</div>,
+        }}
+        modalHeaderProps={{
+          title: "Composed Modal",
+          label: "Single child as a function",
+          subtitle: "Even more info here",
+        }}
+        modalTrigger={({ openModal }) => <Button onClick={openModal}>Open modal composed</Button>}
+      >
+        {({ closeModal }) => <Component1 closeModal={closeModal} />}
+      </ComposedModal>
+    </div>
+  );
+};
+
+Size.story = {
+  name: "Size",
+};

src/components/ConfirmModal/ConfirmModal.stories.jsx

@@ -6,6 +6,19 @@ import ConfirmModal from "./ConfirmModal";
 export default {
   title: "Components/ConfirmModal",
   component: ConfirmModal,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A pre-built confirm modal that has built in state management, modal header, exposed trigger and renders children.",
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      control: "text",
+    },
+  },
 };
 
 function ExternallyControlled() {
@@ -36,21 +49,22 @@ function ExternallyControlled() {
   );
 }
 
-export const Default = () => {
+export const Default = (args) => {
   return (
     <ConfirmModal
       affirmativeAction={action("confirm modal affirmative action")}
       appElement="#root"
       label="do things"
       title="Yeah?"
       modalTrigger={({ openModal }) => <Button onClick={openModal}>Open confirm modal</Button>}
+      {...args}
     >
-      <div>stuff here</div>
+      <div>Welcome to the World Wide Web</div>
     </ConfirmModal>
   );
 };
 
-export const InitiallyOpen = () => {
+export const InitiallyOpen = (args) => {
   return (
     <ConfirmModal
       affirmativeAction={action("confirm modal affirmative action")}
@@ -59,6 +73,7 @@ export const InitiallyOpen = () => {
       title="Huh?"
       isOpen
       modalTrigger={({ openModal }) => <Button onClick={openModal}>Open confirm modal</Button>}
+      {...args}
     />
   );
 };

src/components/Creatable/Creatable.stories.jsx

@@ -5,6 +5,13 @@ import Creatable from "./Creatable";
 export default {
   title: "Inputs/Creatable",
   component: Creatable,
+  parameters: {
+    docs: {
+      description: {
+        component: "An input to create values or key/value pairs.",
+      },
+    },
+  },
   decorators: [
     (Story) => (
       <div style={{ maxWidth: "25rem", padding: "1rem" }}>

src/components/DataDrivenInput/DataDrivenInput.stories.jsx

@@ -5,6 +5,13 @@ import DataDrivenInput from "./index";
 export default {
   title: "Inputs/DataDrivenInput",
   component: DataDrivenInput,
+  parameters: {
+    docs: {
+      description: {
+        component: "A dynamic input driven via data. Used for data driven forms.",
+      },
+    },
+  },
 };
 
 const input = {

src/components/DateInput/DateInput.stories.jsx

@@ -5,6 +5,13 @@ import DateInput from "./DateInput";
 export default {
   title: "Inputs/DateInput",
   component: DateInput,
+  parameters: {
+    docs: {
+      description: {
+        component: "Enhanced date input with support for tooltip text",
+      },
+    },
+  },
 };
 
 export const Default = (args) => {

src/components/DecisionButtons/DecisionButtons.stories.jsx

@@ -1,12 +1,20 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
 import { text } from "@storybook/addon-knobs";
+import { Button } from "@carbon/react";
 import { Help, ThumbsUp, ThumbsDown } from "@carbon/react/icons";
 import DecisionButtons from "./DecisionButtons";
 
 export default {
   title: "Inputs/DecisionButtons",
   component: DecisionButtons,
+  parameters: {
+    docs: {
+      description: {
+        component: "A button-like radio experience for selecting between a descrete set of options UI",
+      },
+    },
+  },
 };
 
 const items1 = [
@@ -35,7 +43,9 @@ function ExternallyControlledDecisionButtons(args) {
         items={items1}
         {...args}
       />
-      <button onClick={handleClear}>Clear selection</button>
+      <Button size="sm" kind="tertiary" onClick={handleClear} style={{ marginTop: "1rem" }}>
+        Clear selection
+      </Button>
     </>
   );
 }

src/components/DelayedRender/DelayedRender.stories.jsx

@@ -11,6 +11,14 @@ export default {
       defaultValue: 300,
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Component that is used to delay the rendering of the children. It is useful for avoiding waterfall spinners on load for resources that are dynamically loaded but usually resolve quickly",
+      },
+    },
+  },
 };
 
 export const Default = (args) => {