@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

package/src/components/atoms/display-card/DisplayCard.stories.js

@@ -1,165 +1,24 @@
-import DisplayCard from "./DisplayCard";
 import React from "react";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Atoms/DisplayCard",
-  component: DisplayCard,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    title: "Display Card",
-    item: "Item text",
-    buttonText: undefined,
-    buttonAction: undefined,
-    url: undefined,
-    link: false,
-    helpText: undefined,
-    hasPopover: false,
-    popoverTriggerText: "",
-    popoverContent: "",
-    popoverExtraStyles: undefined,
-    popoverTextExtraStyles: undefined
-  },
-  argTypes: {
-    title: {
-      description: "Text that appears above the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    item: {
-      description: "Text that appears in the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonText: {
-      description: "Text for the button or link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonAction: {
-      description: "Callback function for the button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    url: {
-      description: "URL for the link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    link: {
-      description:
-        "Whether or not to display a link, uses the `url` and `buttonText` props",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    helpText: {
-      description:
-        "Text rendered to the right of the `item` text and styled as italic.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    hasPopover: {
-      description: "Whether or not to render Popover component",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    popoverTriggerText: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverContent: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverExtraStyles: {
-      description: "Styles for the Box that wraps the Popover content.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    popoverTextExtraStyles: {
-      description: "Prop passed to the Popover component, but is not used.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithLink = {
-  args: {
-    buttonText: "Link",
-    url: "https://example.com",
-    link: true
-  },
-  render: args => <DisplayCard {...args} />
-};
+import { text, boolean } from "@storybook/addon-knobs";
 
-export const WithButtonAction = {
-  args: {
-    buttonText: "Button",
-    buttonAction: fn()
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithHelpText = {
-  parameters: {
-    layout: "padded"
-  },
-  args: {
-    helpText: "Help!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopover = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopoverAndExtraStyles = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!",
-    popoverExtraStyles: "padding: 4px 8px"
-  },
-  render: args => <DisplayCard {...args} />
-};
+import DisplayCard from "./DisplayCard";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Atoms/DisplayCard",
+  Component: DisplayCard
+});
+export default story;
+
+export const displayCard = () => (
+  <DisplayCard
+    title={text("title", "Title", "props")}
+    buttonText={text("buttonText", "Lorem", "props")}
+    url={text("url", "http://google.com", "props")}
+    link={boolean("link", false, "props")}
+    buttonAction={text("buttonAction", () => {}, "props")}
+    item={text("item", "Foo", "props")}
+  >
+    {text("children", "Lorem Ipsum", "props")}
+  </DisplayCard>
+);

package/src/components/atoms/dropdown/Dropdown.stories.js

@@ -1,82 +1,6 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import Dropdown from "./Dropdown";
-import { fn } from "@storybook/test";
-import React from "react";
-
-const meta = {
-  title: "Atoms/Dropdown",
-  component: Dropdown,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    placeholder: "Placeholder",
-    options: [],
-    value: "",
-    isOpen: false,
-    isError: false,
-    onSelect: fn(),
-    disabledValues: [],
-    onClick: fn(),
-    themeValues: {},
-    maxHeight: "400px",
-    widthFitOptions: false,
-    disabled: false,
-    hasTitles: false,
-    autoEraseTypeAhead: true,
-    ariaLabelledby: "label-id",
-    ariaDescribedby: "desc-id",
-    autocompleteValue: "",
-    smoothScroll: true,
-    ariaInvalid: false,
-    isRequired: false
-  },
-  argTypes: {
-    autoEraseTypeAhead: {
-      description: "Clears type ahead inputs after 20s",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    autocompleteValue: {
-      description:
-        "Sets the autoComplete attribute and name attribute on the underlying input element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    hasTitles: {
-      description:
-        "Adds the selected value and option values as HTML `title` attributes to their respective elements",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    smoothScroll: {
-      description:
-        "Smoothly animate to the selected option when the menu is opened by a mouse click",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: true }
-      }
-    },
-    widthFitOptions: {
-      description:
-        "Sets the width of the wrapping element to fit-content instead of 100%",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    }
-  }
-};
-
-export default meta;
+import page from "../../../../.storybook/page";
 
 const options = [
   { text: "Please select an option", value: "" },
@@ -87,7 +11,7 @@ const options = [
 
 const disabledValues = ["DISABLED_OPTION"];
 
-const DropdownWithHooks = props => {
+export const dropdown = () => {
   const [isOpen, setOpen] = useState(false);
   const [value, setValue] = useState(null);
   const [isError, setError] = useState(false);
@@ -102,7 +26,6 @@ const DropdownWithHooks = props => {
 
   return (
     <Dropdown
-      {...props}
       placeholder={options[0].text}
       options={options}
       disabledValues={disabledValues}
@@ -110,19 +33,15 @@ const DropdownWithHooks = props => {
       isOpen={isOpen}
       isError={isError}
       onSelect={setValue}
-      onClick={() => !props.disabled && setOpen(!isOpen)}
-      disabled={props.disabled}
+      onClick={() => setOpen(!isOpen)}
     />
   );
 };
 
-export const Basic = {
-  render: args => <DropdownWithHooks {...args} />
-};
+const story = page({
+  title: "Components|Atoms/Dropdown",
+  Component: Dropdown,
+  height: "500px"
+});
 
-export const Disabled = {
-  args: {
-    disabled: true
-  },
-  render: args => <DropdownWithHooks {...args} />
-};
+export default story;

package/src/components/atoms/form-layouts/FormInput.stories.js

@@ -1,219 +1,33 @@
-import React, { useState } from "react";
+import React from "react";
+import { text } from "@storybook/addon-knobs";
 import FormInput from "./FormInput";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
-import { createFormState, required } from "redux-freeform";
-import Modal from "../../molecules/modal";
-import { moneyFormat } from "../../../util/formats";
-
-const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  example: {
-    validators: [required()]
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
+const data = {
+  fieldOne: {
+    rawValue: "Form Input One"
   }
-});
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-const errorMessages = {
-  [required.error]: "This is required!"
-};
-
-const FormWrapper = props => (
-  <FormInput
-    {...props}
-    field={props.fields.example}
-    fieldActions={props.actions.fields.example}
-  />
-);
-
-const ConnectedFormInput = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Atoms/form-layouts/FormInput",
-  component: ConnectedFormInput,
-  tags: ["!autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  args: {
-    type: "text",
-    labelTextWhenNoError: "",
-    errorMessages: errorMessages,
-    isNum: false,
-    isEmail: false,
-    helperModal: undefined,
-    showErrors: undefined,
-    formatter: null,
-    decorator: undefined,
-    themeValues: {},
-    background: undefined,
-    customHeight: undefined,
-    autocompleteValue: "",
-    extraStyles: undefined,
-    removeFromValue: undefined,
-    dataQa: "form-input-qa",
-    isRequired: false
-  },
-  argTypes: {
-    extraStyles: { type: "string" },
-    fieldActions: { type: "object" },
-    field: { type: "object" },
-    background: {
-      description:
-        "sets the value for `background: url(${background})` _only_ if the `formatter` prop is _not_ set",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    isNum: {
-      description: "sets the input's inputMode attribute to `numeric`",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    isEmail: {
-      description: "sets the input's inputMode attribute to `email`",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    isRequired: {
-      description: "adds the `required` attribute to the input element",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    customHeight: {
-      description: "sets a height to the input",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "48px" }
-      }
-    },
-    helperModal: {
-      description: "a function that returns a modal",
-      table: {
-        type: { summary: "object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    removeFromValue: {
-      description:
-        "regex pattern for characters to in the user inputted value before passing it to `fieldActions.set()`",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    extraStyles: {
-      description: "styles applied to the underlying input element",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedFormInput {...args} />;
-
-export const WithDecorator = {
-  args: {
-    decorator: "Decorator!"
-  },
-  render: args => <ConnectedFormInput {...args} />
 };
-
-export const IsEmail = {
-  args: {
-    isEmail: true
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-export const IsNum = {
-  args: {
-    isNum: true
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-export const WithLabel = {
-  args: {
-    labelTextWhenNoError: "Label"
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-export const WithCustomHeight = {
-  args: {
-    customHeight: "100px"
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-export const Required = {
-  args: {
-    isRequired: true
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-export const WithFormatter = {
-  args: {
-    labelTextWhenNoError: "Price",
-    formatter: moneyFormat
-  },
-  render: args => <ConnectedFormInput {...args} />
-};
-
-const InputWithModal = props => {
-  const [isOpen, toggleOpen] = useState(false);
-
+export const formInputs = () => {
   return (
-    <ConnectedFormInput
-      {...props}
-      helperModal={() => (
-        <Modal
-          modalOpen={isOpen}
-          hideModal={() => toggleOpen(false)}
-          showModal={() => toggleOpen(true)}
-          modalHeaderText="Modal title!"
-          modalBodyText="Modal text!"
-          defaultWrapper={false}
-          onlyCloseButton={true}
-          initialFocusSelector=""
-        >
-          <div onClick={() => toggleOpen(true)} role="button">
-            Help!
-          </div>
-        </Modal>
-      )}
-    />
+    <Box padding="1rem">
+      <FormInput
+        labelTextWhenNoError={text(
+          "labelTextWhenNoError",
+          "Label Text When No Error",
+          "props"
+        )}
+        type="text"
+        labelTextVariant={text("labelTextVariant", "pS", "props")}
+        errorLabelTextVariant={text("errorLabelTextVariant", "pS", "props")}
+        field={data.fieldOne}
+      />
+    </Box>
   );
 };
 
-export const WithHelperModal = {
-  argTypes: {
-    helperModal: { type: "function" }
-  },
-  render: args => <InputWithModal {...args} />
-};
+const story = page({
+  title: "Components|Atoms/FormInput",
+  Component: FormInput
+});
+export default story;

package/src/components/atoms/form-select/FormSelect.stories.js

@@ -1,76 +1,50 @@
 import React from "react";
-import FormSelect from "./FormSelect";
-import { connect, Provider } from "react-redux";
-import { createStore } from "redux";
+import { connect } from "react-redux";
+import { text } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
 
+import FormSelect from "./FormSelect";
+import page from "../../../../.storybook/page";
+
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  example: {
+  thing: {
     validators: [required()]
   }
 });
-
-const store = createStore(
-  reducer,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
 const errorMessages = {
-  [required.error]: "You must choose an option!"
+  [required.error]: "thing is required"
 };
-
 const options = [
-  { value: "", text: "Choose an option" },
+  { value: "", text: "choose name" },
   { value: "foo", text: "foo" },
   { value: "bar", text: "bar" },
   { value: "baz", text: "baz" },
   { value: "disabled", text: "disabled" }
 ];
 
+const story = page({
+  title: "Components|Atoms/FormSelect",
+  Component: FormSelect,
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps,
+  height: "500px"
+});
+
 const FormWrapper = props => (
   <FormSelect
-    {...props}
-    field={props.fields.example}
-    fieldActions={props.actions.fields.example}
+    autocompleteValue={props.autocompleteValue}
+    labelTextWhenNoError="Form Select"
+    errorMessages={errorMessages}
+    options={options}
+    field={props.fields.thing}
+    fieldActions={props.actions.fields.thing}
+    disabledValues={["disabled"]}
   />
 );
 
-const ConnectedFormSelect = connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(FormWrapper);
-
-export default {
-  title: "Atoms/FormSelect",
-  component: ConnectedFormSelect,
-  tags: ["!autodocs"],
-  args: {
-    labelTextWhenNoError: "Form Select Example",
-    errorMessages: errorMessages,
-    options: options,
-    showErrors: false,
-    onChange: null,
-    dropdownMaxHeight: "600px",
-    disabledValues: ["disabled"],
-    disabled: false,
-    hasTitles: false,
-    autocompleteValue: "",
-    smoothScroll: true,
-    dataQa: "form-select-qa",
-    widthFitOptions: false,
-    isRequired: false
-  },
-  argTypes: {
-    fieldActions: { type: "object" },
-    field: { type: "object" }
-  },
-  decorators: [
-    Story => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
-};
-
-export const Basic = args => <ConnectedFormSelect {...args} />;
+export default story;
+const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
+export const formSelect = () => (
+  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
+);