@thecb/components 10.12.1 → 10.12.3-beta.0

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

@@ -1,6 +1,82 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import Dropdown from "./Dropdown";
-import page from "../../../../.storybook/page";
+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;
 
 const options = [
   { text: "Please select an option", value: "" },
@@ -11,7 +87,7 @@ const options = [
 
 const disabledValues = ["DISABLED_OPTION"];
 
-export const dropdown = () => {
+const DropdownWithHooks = props => {
   const [isOpen, setOpen] = useState(false);
   const [value, setValue] = useState(null);
   const [isError, setError] = useState(false);
@@ -26,6 +102,7 @@ export const dropdown = () => {
 
   return (
     <Dropdown
+      {...props}
       placeholder={options[0].text}
       options={options}
       disabledValues={disabledValues}
@@ -33,15 +110,19 @@ export const dropdown = () => {
       isOpen={isOpen}
       isError={isError}
       onSelect={setValue}
-      onClick={() => setOpen(!isOpen)}
+      onClick={() => !props.disabled && setOpen(!isOpen)}
+      disabled={props.disabled}
     />
   );
 };
 
-const story = page({
-  title: "Components|Atoms/Dropdown",
-  Component: Dropdown,
-  height: "500px"
-});
+export const Basic = {
+  render: args => <DropdownWithHooks {...args} />
+};
 
-export default story;
+export const Disabled = {
+  args: {
+    disabled: true
+  },
+  render: args => <DropdownWithHooks {...args} />
+};

package/src/components/atoms/form-layouts/FormInput.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormInputStories from './FormInput.stories.js';
+
+<Meta of={FormInputStories} />
+
+<Title />
+
+FormInput is a wrapper for `<input/>` elements that adds extra functionality. It is meant to be used in forms. The underlying component is an `input` element, unless the formatter prop is set, then it will be a [formatted-input](https://www.npmjs.com/package/formatted-input) component. Additional props are passed down to the underlying element.
+
+## Form Integration
+
+FormInput requires a `field` and `fieldActions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a FormInput component.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED"
+  ],
+  "hasErrors": true
+}
+```
+
+### fieldActions
+
+```
+{
+  set: (value) => {...}
+}
+```
+
+`fieldActions.set()` is called when an option is selected in the underlying Dropdown component, unless a function is defined for the `onChange` prop.
+
+<Controls />

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

@@ -1,33 +1,219 @@
-import React from "react";
-import { text } from "@storybook/addon-knobs";
+import React, { useState } from "react";
 import FormInput from "./FormInput";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-const data = {
-  fieldOne: {
-    rawValue: "Form Input One"
+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()]
   }
+});
+
+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 formInputs = () => {
+
+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);
+
   return (
-    <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>
+    <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>
+      )}
+    />
   );
 };
 
-const story = page({
-  title: "Components|Atoms/FormInput",
-  Component: FormInput
-});
-export default story;
+export const WithHelperModal = {
+  argTypes: {
+    helperModal: { type: "function" }
+  },
+  render: args => <InputWithModal {...args} />
+};

package/src/components/atoms/form-select/FormSelect.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormSelectStories from './FormSelect.stories.js';
+
+<Meta of={FormSelectStories} />
+
+<Title />
+
+FormSelect is a wrapper for the [Dropdown component](?path=/docs/atoms-dropdown--docs) meant to be used in forms.
+
+It controls the open state of the menu (including closing on mouse clicks outside of the component). It also renders an accesible label and error messages.
+
+FormSelect can be used with [redux-freeform](https://github.com/CityBaseInc/redux-freeform) to connect the form to Redux state.
+
+<Story />
+
+## Form Integration
+
+FormSelect requires a `field` and `fieldActions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform). Below are example values for each prop with the minimum properties needed for a FormSelect component.
+
+### field
+
+```
+{
+  "dirty": false,
+  "rawValue": "",
+  "errors": [
+    "error/REQUIRED"
+  ],
+  "hasErrors": true
+}
+```
+
+### fieldActions
+
+```
+{
+  set: (value) => {...}
+}
+```
+
+`fieldActions.set()` is called when an option is selected in the underlying Dropdown component, unless a function is defined for the `onChange` prop.

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

@@ -1,50 +1,76 @@
 import React from "react";
-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";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState, required } from "redux-freeform";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
-  thing: {
+  example: {
     validators: [required()]
   }
 });
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
 const errorMessages = {
-  [required.error]: "thing is required"
+  [required.error]: "You must choose an option!"
 };
+
 const options = [
-  { value: "", text: "choose name" },
+  { value: "", text: "Choose an option" },
   { 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
-    autocompleteValue={props.autocompleteValue}
-    labelTextWhenNoError="Form Select"
-    errorMessages={errorMessages}
-    options={options}
-    field={props.fields.thing}
-    fieldActions={props.actions.fields.thing}
-    disabledValues={["disabled"]}
+    {...props}
+    field={props.fields.example}
+    fieldActions={props.actions.fields.example}
   />
 );
 
-export default story;
-const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const formSelect = () => (
-  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
-);
+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} />;

package/src/components/atoms/formatted-address/FormattedAddress.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as FormattedAddressStories from './FormattedAddress.stories.js';
+
+<Meta of={FormattedAddressStories} />
+
+<Title />
+
+FormattedAddress is a composition of Box and Text components to help create consistent formatting of addresses. The outer padding and text color are themeable.
+
+<Story />
+
+<Controls />