@thecb/components 10.12.6 → 11.0.0-beta.0

package/src/components/atoms/password-requirements/PasswordRequirements.stories.js

@@ -1,10 +1,9 @@
 import React from "react";
-import { boolean } from "@storybook/addon-knobs";
+import { Box, Cluster } from "../layouts";
+import { FormInput, FormContainer, FormInputColumn } from "../form-layouts";
 import PasswordRequirements from "./PasswordRequirements";
-import { FormInput } from "../form-layouts";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-import { connect } from "react-redux";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
 import {
   createFormState,
   required,
@@ -12,10 +11,11 @@ import {
   hasNumber,
   hasLowercaseLetter,
   hasUppercaseLetter,
-  hasSpecialCharacter
+  hasSpecialCharacter,
+  matchesField
 } from "redux-freeform";
 
-const formConfig = {
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   password: {
     validators: [
       required(),
@@ -25,51 +25,115 @@ const formConfig = {
       hasUppercaseLetter(),
       hasSpecialCharacter()
     ]
+  },
+  confirmPassword: {
+    validators: [required(), matchesField("password")]
   }
-};
+});
 
-const passwordForm = createFormState(formConfig);
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
 
-const passwordRequirementsWrapper = ({ fields, actions, showErrors }) => {
-  const passwordErrorMessages = {
-    [required.error]: "Password is required",
-    [hasLength.error]: "Password must have at least 8 characters",
-    [hasNumber.error]: "Password must contain at least one number",
-    [hasLowercaseLetter.error]:
-      "Password must contain at least one lowercase letter",
-    [hasUppercaseLetter.error]:
-      "Password must contain at least one uppercase letter",
-    [hasSpecialCharacter.error]:
-      "Password must contain at least one special character (!@#$%^&*.?)"
-  };
-  return (
-    <Box>
+const passwordErrorMessages = {
+  [required.error]: "Password field is required.",
+  [hasLength.error]: "Your password must have at least 8 characters",
+  [hasNumber.error]: "Your password must contain at least one number",
+  [hasLowercaseLetter.error]:
+    "Your password must contain at least one lowercase letter",
+  [hasUppercaseLetter.error]:
+    "Your password must contain at least one uppercase letter",
+  [hasSpecialCharacter.error]:
+    "Your password must contain at least one special character (!@#$%^&*.?)"
+};
+const confirmPasswordErrorMessages = {
+  [matchesField.error]: "Confirm password must match your password"
+};
+
+const FormWrapper = props => (
+  <FormContainer
+    role="form"
+    aria-label="Change password"
+    extraStyles={`padding: 0;`}
+  >
+    <FormInputColumn>
       <FormInput
-        labelTextWhenNoError="Type in password"
+        labelTextWhenNoError="Password"
         errorMessages={passwordErrorMessages}
-        field={fields.password}
-        fieldActions={actions.fields.password}
-        showErrors={showErrors}
+        type="password"
+        field={props.fields.password}
+        fieldActions={props.actions.fields.password}
+      />
+      <FormInput
+        labelTextWhenNoError="Confirm Password"
+        errorMessages={confirmPasswordErrorMessages}
+        type="password"
+        field={props.fields.confirmPassword}
+        fieldActions={props.actions.fields.confirmPassword}
       />
-      <PasswordRequirements password={fields.password} />
+    </FormInputColumn>
+    <Box padding={props.isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
+      <Cluster justify="center" align="center">
+        <PasswordRequirements
+          isMobile={props.isMobile}
+          password={props.fields.password}
+        />
+      </Cluster>
     </Box>
-  );
-};
+  </FormContainer>
+);
 
-const story = page({
-  title: "Components|Atoms/PasswordRequirements",
-  Component: PasswordRequirements,
-  reducer: passwordForm.reducer,
-  mapStateToProps: passwordForm.mapStateToProps,
-  mapDispatchToProps: passwordForm.mapDispatchToProps
-});
-export default story;
+const ConnectedPasswordRequirements = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
 
-const ConnectedForm = connect(
-  passwordForm.mapStateToProps,
-  passwordForm.mapDispatchToProps
-)(passwordRequirementsWrapper);
+export default {
+  title: "Atoms/PasswordRequirements",
+  component: ConnectedPasswordRequirements,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    password: undefined,
+    isMobile: false
+  },
+  argTypes: {
+    password: {
+      description: "A Redux Freeform field for a password",
+      table: {
+        type: { summary: "Redux Freeform field object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isMobile: {
+      description:
+        "Whether user is on a mobile device (typically screen size <768px)",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
 
-export const passwordRequirements = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+export const BasicPasswordRequirements = args => (
+  <ConnectedPasswordRequirements {...args} />
 );
+
+export const MobilePasswordRequirements = {
+  args: {
+    isMobile: true
+  },
+  render: args => <ConnectedPasswordRequirements {...args} />
+};

package/src/components/atoms/placeholder/Placeholder.mdx

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PlaceholderStories from './Placeholder.stories.js';
+
+<Meta of={PlaceholderStories} />
+
+<Title />
+
+The Placeholder component is a component that is used to occupy space that would normally contain some sort of data, like user accounts or payment methods. When the data is in an empty state, the Placeholder can be rendered to inform the user about what content would normally appear, and provide the user with an opportunity to take an action or visit a destination. If the action is unavailable, a Placeholder can be set to a disabled state.
+
+Placeholders come with two variants: default and large. The default variant uses only text and a generic plus icon, while the large variant displays text and an icon specific to the Placeholder's use. Currently large Placeholders are only used in NFE in the following varieties: accounts, properties, and payments. New types of large Placeholders can be added by updating the large icons function inside of the Placeholder component.
+
+The Placeholder uses flexbox styling and takes its width from its parent container.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -1,42 +1,170 @@
-import React from "react";
-import { boolean, text, select } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
-import page from "../../../../.storybook/page";
+import { Box } from "../layouts";
 
-const variantsLabel = "variant";
-const variants = {
-  default: "default",
-  large: "large"
+const meta = {
+  title: "Atoms/Placeholder",
+  component: Placeholder,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    text: "Add an Account",
+    action: undefined,
+    visible: true,
+    isLink: false,
+    destination: "/",
+    variant: undefined,
+    largeIcon: undefined,
+    isDisabled: false
+  },
+  argTypes: {
+    text: {
+      description: "Text to be displayed inside the Placeholder",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    action: {
+      description:
+        "Function to execute when clicking on Placeholder. Only used if isLink is false.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    visible: {
+      description: "Whether the Placeholder is visible",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    isLink: {
+      description:
+        "Whether the Placeholder links to a destination, instead of using an action",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    variant: {
+      description: "Variant of the Placeholder either `default` or `large`.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    largeIcon: {
+      description:
+        "Name of icon to use with 'large' Placeholder variant. One of 'accounts', 'properties', or 'payments'. If not provided and Placeholder variant is set to large, will default to 'accounts'."
+    },
+    table: {
+      type: { summary: "string" },
+      defaultValue: { summary: "accounts" }
+    },
+    destination: {
+      description:
+        "URL for Placeholder to navigate to if it is a link. Only used if isLink is true.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isDisabled: {
+      description: "Whether the Placeholder is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    }
+  }
 };
-const defaultValue = "default";
-const groupId = "props";
 
-const icons = {
-  accounts: "accounts",
-  properties: "properties",
-  payments: "payments"
+export default meta;
+
+export const DefaultPlaceholder = {
+  args: {
+    action: () => {},
+    variant: "default"
+  },
+  render: args => (
+    <Box minWidth="400px">
+      <Placeholder {...args} />
+    </Box>
+  )
+};
+
+export const LinkPlaceholder = {
+  args: {
+    text: "Add an Email Address",
+    variant: "default",
+    isLink: true,
+    destination: "/"
+  },
+  render: args => (
+    <Box minWidth="400px">
+      <Placeholder {...args} />
+    </Box>
+  )
+};
+
+export const LargePlaceholder = {
+  args: {
+    text: "Add or Edit Your Payment Methods",
+    variant: "large",
+    largeIcon: "payments",
+    action: () => {}
+  },
+  render: args => (
+    <Box minWidth="650px">
+      <Placeholder {...args} />
+    </Box>
+  )
 };
 
-const iconLabel = "largeIcon";
-
-const defaultIcon = "accounts";
-
-export const placeholder = () => (
-  <Placeholder
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    isLink={boolean("isLink", true, "props")}
-    destination={text("destination", "add-account", "props")}
-    text={text("text", "Add an Account", "props")}
-    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-    key="placeholder"
-    isDisabled={boolean("isDisabled", false, "props")}
-    action={() => console.log("placeholder action")}
-  />
-);
-
-const story = page({
-  title: "Components|Atoms/Placeholder",
-  Component: Placeholder
-});
-
-export default story;
+export const LargeLinkPlaceholder = {
+  args: {
+    text: "Add New Property",
+    variant: "large",
+    largeIcon: "properties",
+    isLink: true,
+    destination: "/"
+  },
+  render: args => (
+    <Box minWidth="650px">
+      <Placeholder {...args} />
+    </Box>
+  )
+};
+
+export const DisabledPlaceholder = {
+  args: {
+    text: "Edit Payment Information",
+    action: () => {},
+    variant: "default",
+    isDisabled: true,
+    destination: "/"
+  },
+  render: args => (
+    <Box minWidth="400px">
+      <Placeholder {...args} />
+    </Box>
+  )
+};
+
+export const DisabledLargePlaceholder = {
+  args: {
+    text: "Add More to Cart",
+    variant: "large",
+    isLink: true,
+    isDisabled: true,
+    destination: "/"
+  },
+  render: args => (
+    <Box minWidth="650px">
+      <Placeholder {...args} />
+    </Box>
+  )
+};

package/src/components/atoms/searchable-select/SearchableSelect.mdx

@@ -0,0 +1,44 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as SearchableSelectStories from './SearchableSelect.stories.js';
+
+<Meta of={SearchableSelectStories} />
+
+<Title />
+
+SearchableSelect creates a list of checkboxes from an array of options that is filterable through an input.
+
+## Notes
+
+- the `items` array will be sorted by the `name` property
+- a `SELECT_ALL` constant is also exported by SearchableSelect
+- if an item with a name matching `SELECT_ALL` is included in `items` it will be rendered to the top
+- filtering through the input is _always_ case-insensitive
+
+## Form Integration
+
+SearchableSelect requires a `fields` and `actions` prop. Both are objects that _can_ be generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).
+
+Unlike other similar form components where the specific `field` and `fieldActions` for one field are passed as props, SearchableSelect expect the `fields` and `fieldActions` from the entire form to be passed, with a field named `searchTerm`. Below are example values for each prop with the minimum properties needed for a FormSelect component.
+
+### fields
+
+```
+{
+  searchTerm: {
+    "rawValue": ""
+  }
+}
+```
+
+### actions
+
+```
+{
+  searchTerm: {
+    set: (value) => {...}
+  }
+}
+```
+
+`actions.searchTerm.set()` is used to to update the filter term in the input.

package/src/components/atoms/searchable-select/SearchableSelect.stories.js

@@ -1,10 +1,9 @@
-import React, { useState } from "react";
-import { connect } from "react-redux";
-import { text } from "@storybook/addon-knobs";
-import { createFormState } from "redux-freeform";
-
+import React from "react";
 import SearchableSelect, { SELECT_ALL } from "./SearchableSelect";
-import page from "../../../../.storybook/page";
+import { useState } from "react";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import { createFormState } from "redux-freeform";
 
 const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   searchTerm: {
@@ -12,51 +11,127 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   }
 });
 
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const selectAllItem = { name: SELECT_ALL, value: SELECT_ALL };
+
 const items = [
   { name: "Foo", value: "foo-value" },
   { name: "Baz", value: "baz-value" },
-  { name: SELECT_ALL, value: SELECT_ALL },
+  selectAllItem,
   { name: "Bar", value: "bar-value" }
 ];
 
 const FormWrapper = props => {
   const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
-  const selectValues = items => items.map(item => item.value);
 
-  const selectItem = selectedItem => {
-    if (selectValues(selectedItems).includes(selectedItem.value)) {
-      const fewerItems = selectedItems.filter(
-        item => item.value !== selectedItem.value
+  const selectItem = selection => {
+    if (selectedItems.find(l => l.value === selection.value)) {
+      const filtered = selectedItems.filter(
+        l => l.value !== selection.value && l.value !== SELECT_ALL
       );
-      setSelectedItems(fewerItems);
+      setSelectedItems(filtered);
+    } else {
+      if (selectedItems.length + 1 === items.length - 1) {
+        setSelectedItems([...selectedItems, selection, selectAllItem]);
+      } else {
+        setSelectedItems([...selectedItems, selection]);
+      }
+    }
+  };
+
+  const toggleSelectAllItems = selectAll => {
+    if (selectAll) {
+      setSelectedItems(items);
     } else {
-      const moreItems = selectedItems.concat(selectedItem);
-      setSelectedItems(moreItems);
+      setSelectedItems([]);
     }
   };
 
+  const allSelected = selectedItems.length === items.length ?? false;
+
   return (
     <SearchableSelect
+      {...props}
       autocompleteValue={props.autocompleteValue}
-      items={items}
+      items={props.items}
+      selectedItems={selectedItems}
+      selectItem={selectItem}
       fields={props.fields}
       actions={props.actions}
-      selectedItems={selectedItems}
-      selectItem={item => selectItem(item)}
+      allSelected={allSelected}
+      toggleSelectAllItems={toggleSelectAllItems}
     />
   );
 };
 
-const story = page({
-  title: "Components|Atoms/SearchableSelect",
-  Component: SearchableSelect,
-  reducer,
+const ConnectedSearchableSelect = connect(
   mapStateToProps,
   mapDispatchToProps
-});
+)(FormWrapper);
 
-export default story;
-const ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export const searchableSelect = () => (
-  <ConnectedForm autocompleteValue={text("autocompleteValue", null, "props")} />
-);
+export default {
+  title: "Atoms/SearchableSelect",
+  component: ConnectedSearchableSelect,
+  tags: ["!autodocs"],
+  parameters: {
+    controls: { expanded: true }
+  },
+  args: {
+    autocompleteValue: undefined,
+    items: items,
+    disabled: false,
+    themeValues: {},
+    placeholder: "Search agencies"
+  },
+  argTypes: {
+    fieldActions: { type: "object" },
+    field: { type: "object" },
+    selectedItems: {
+      description: "Array of objects representing the selected items.",
+      table: {
+        type: { summary: "array" }
+      }
+    },
+    selectItem: {
+      description:
+        "Function that will be called when a non-`SELECT_ALL` checkbox is changed.",
+      table: {
+        type: { summary: "array" }
+      }
+    },
+    allSelected: {
+      description:
+        "Whether all all items are selected or not. This affects what parameter `toggleSelectAllItems` is called with",
+      table: {
+        type: { summary: "boolean" }
+      }
+    },
+    toggleSelectAllItems: {
+      description:
+        "Function called when a checkbox with the name `SELECT_ALL` is changed.",
+      table: {
+        type: { summary: "function" }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedSearchableSelect {...args} />;
+
+export const Disabled = {
+  args: {
+    disabled: true
+  },
+  render: args => <ConnectedSearchableSelect {...args} />
+};

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as StateProvinceDropdownStories from './StateProvinceDropdown.stories.js';
+
+<Meta of={StateProvinceDropdownStories} />
+
+<Title />
+
+StateProvinceDropdown is a wrapper for [FormSelect](?path=/docs/atoms-formselect--docs) that adds a pre-defined array of states or provinces for options. The state/provinces loaded are determined by the `countryCode` prop. These options cannot be modified. A "placeholder" option is added to the top of the list with a value of "". The display name of the placeholder is determined by the country code.
+
+## 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 CountryDropdown 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.