@thecb/components 10.12.6-beta.0 → 11.0.0-beta.0

package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -1,28 +1,111 @@
-import React, { useState, Fragment } from "react";
-import { boolean, text } from "@storybook/addon-knobs";
+import React, { useState } from "react";
 import ToggleSwitch from "./ToggleSwitch";
-import page from "../../../../.storybook/page";
+import { noop } from "../../../util/general";
 
-export const toggleSwitchDefault = () => {
-  const [isOn, onToggle] = useState(false);
+const meta = {
+  title: "Atoms/ToggleSwitch",
+  component: ToggleSwitch,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    isOn: false,
+    onToggle: noop,
+    disabled: false,
+    name: "switch",
+    label: "Autopay Enabled",
+    labelLeft: false,
+    dataQa: undefined
+  },
+  argTypes: {
+    isOn: {
+      description: "Whether the ToggleSwitch is in an on state",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    onToggle: {
+      description: "Function to execute when user interacts with switch",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    disabled: {
+      description: "Whether the ToggleSwitch is disabled",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    name: {
+      description: "Accessible name for ToggleSwitch element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    label: {
+      description: "Text to display next to ToggleSwitch",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    },
+    labelLeft: {
+      description: "Show the label on the left of the ToggleSwitch",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    dataQa: {
+      description: "data-qa value to use for E2E testing libraries",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+const StatefulToggle = ({ useDynamicLabel, ...args }) => {
+  const [toggleOn, setToggleOn] = useState(false);
+  const dynamicLabel = toggleOn ? "Autopay Enabled" : "Autopay Disabled";
+  const label = useDynamicLabel ? dynamicLabel : args.label;
 
-  const disabled = boolean("disabled", false, "props");
   return (
-    <Fragment>
-      <ToggleSwitch
-        name="toggle-switch"
-        label={text("label", "Toggle Switch Label", "props")}
-        isOn={isOn}
-        onToggle={() => onToggle(!isOn)}
-        disabled={disabled}
-      />
-    </Fragment>
+    <ToggleSwitch
+      {...args}
+      isOn={toggleOn}
+      onToggle={() => setToggleOn(!toggleOn)}
+      label={label}
+    />
   );
 };
 
-const story = page({
-  title: "Components|Atoms/ToggleSwitch",
-  Component: ToggleSwitch
-});
+export const BasicToggleSwitch = {};
+
+export const StatefulToggleSwitch = {
+  render: args => <StatefulToggle {...args} useDynamicLabel />
+};
+
+export const LeftLabelToggleSwitch = {
+  args: {
+    labelLeft: true,
+    label: "Set as Default"
+  },
+  render: args => <StatefulToggle {...args} />
+};
 
-export default story;
+export const DisabledToggleSwitch = {
+  args: {
+    label: "Receive SMS Alerts",
+    disabled: true
+  },
+  render: args => <StatefulToggle {...args} />
+};

package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js

@@ -17,13 +17,15 @@ const labelStyles = `
 `;
 
 const rightLabelStyles = `
-  ${labelStyles}
-  flex-direction: row;
+  > div {
+    flex-direction: row;
+  }
 `;
 
 const leftLabelStyles = `
-  ${labelStyles}
-  flex-direction: row-reverse;
+  > div {
+    flex-direction: row-reverse;
+  }
 `;
 
 export const fallbackValues = {
@@ -32,5 +34,6 @@ export const fallbackValues = {
   disabledBackgroundLight,
   white,
   rightLabelStyles,
-  leftLabelStyles
+  leftLabelStyles,
+  labelStyles
 };

package/src/components/atoms/typeahead-input/TypeaheadInput.mdx

@@ -0,0 +1,13 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TypeaheadInputStories from './TypeaheadInput.stories.js';
+
+<Meta of={TypeaheadInputStories} />
+
+<Title />
+
+TypeaheadInput is a wrapper for an uncontrolled input element that includes a visually hidden label and search icon.
+
+<Story />
+
+<Controls />

package/src/components/atoms/typeahead-input/TypeaheadInput.stories.js

@@ -0,0 +1,63 @@
+import TypeaheadInput from "./TypeaheadInput";
+import { fn } from "@storybook/test";
+
+const meta = {
+  title: "Atoms/TypeaheadInput",
+  component: TypeaheadInput,
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  tags: ["!autodocs"],
+  args: {
+    handleChange: undefined,
+    placeholder: undefined,
+    id: undefined,
+    labelText: undefined
+  },
+  argTypes: {
+    id: {
+      description: "Used to link `labelText` to the input element",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    placeholder: {
+      description: "Placeholder text for the input element",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    labelText: {
+      description: "Visually hidden label for the input",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    handleChange: {
+      description: "Callback function called when input value changes",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    handleChange: fn(),
+    placeholder: "Name…",
+    id: "search-input",
+    labelText: "Search"
+  }
+};

package/src/components/molecules/address-form/AddressForm.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as AddressFormStories from './AddressForm.stories.js';
+
+<Meta of={AddressFormStories} />
+
+<Title />
+
+Renders all the fields needed to collect a full address.
+
+- Uses the [StateProvinceDropdown](?path=/docs/atoms-stateprovincedropdown--docs) component connected with the value from [CountryDropdown](?path=/docs/atoms-countrydropdown--docs) to filter states/provinces.
+- Zip codes automatically formatted via [FormInput](?path=/docs/atoms-form-layouts-forminput--docs) `formatter` prop.
+- Optional "Save address to wallet" [Checkbox](?path=/docs/atoms-checkbox--docs) via the `showWalletCheckbox` prop.
+- Expands to fit the width of it's containing element
+
+<Story />
+
+<Controls />

package/src/components/molecules/address-form/AddressForm.stories.js

@@ -1,21 +1,224 @@
-import React from "react";
-import { connect } from "react-redux";
-
+import React, { useState } from "react";
 import AddressForm from "./AddressForm";
-import page from "../../../../.storybook/page";
-import * as AddressFormState from "./AddressForm.state";
-
-const story = page({
-  title: "Components|Molecules/AddressForm",
-  Component: AddressForm,
-  reducer: AddressFormState.reducer,
-  mapStateToProps: AddressFormState.mapStateToProps,
-  mapDispatchToProps: AddressFormState.mapDispatchToProps
-});
-export default story;
-
-const ConnectedForm = connect(
-  AddressFormState.mapStateToProps,
-  AddressFormState.mapDispatchToProps
-)(AddressForm);
-export const addressForm = () => <ConnectedForm />;
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import {
+  createFormState,
+  required,
+  onlyIntegers,
+  hasLength,
+  validateWhen,
+  matchesRegex
+} from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  street1: {
+    validators: [required()]
+  },
+  street2: {
+    validators: []
+  },
+  city: {
+    validators: [required()]
+  },
+  stateProvince: {
+    validators: [required()]
+  },
+  country: {
+    defaultValue: "US",
+    validators: [required()]
+  },
+  zip: {
+    validators: [
+      required(),
+      validateWhen(
+        validateWhen(hasLength(5, 5), hasLength(0, 5)),
+        matchesRegex("US"),
+        "country"
+      ),
+      validateWhen(
+        validateWhen(hasLength(9, 9), hasLength(6, 9)),
+        matchesRegex("US"),
+        "country"
+      )
+    ],
+    constraints: [
+      validateWhen(onlyIntegers(), matchesRegex("US"), "country"),
+      validateWhen(hasLength(0, 9), matchesRegex("US"), "country")
+    ]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <AddressForm {...props} />;
+
+const ConnectedAddressForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/AddressForm",
+  component: ConnectedAddressForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    variant: "default",
+    fields: undefined,
+    actions: undefined,
+    clearOnDismount: undefined,
+    showErrors: undefined,
+    handleSubmit: noop,
+    showWalletCheckbox: undefined,
+    saveToWallet: undefined,
+    walletCheckboxMarked: undefined,
+    dataQa: null
+  },
+  argTypes: {
+    actions: {
+      description:
+        "Field actions, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fields: {
+      description:
+        "Field data, usually generated with [redux-freeform](https://github.com/CityBaseInc/redux-freeform).",
+      control: { type: "object" },
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description:
+        "Show form field errors. Passed to the [FormInput](?path=/docs/atoms-form-layouts-forminput--docs), [CountryDropdown](?path=/docs/atoms-countrydropdown--docs), and [StateProvinceDropdown](?path=/docs/atoms-stateprovincedropdown--docs) fields.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    variant: {
+      description:
+        "Passed down to the `Box` component that wraps this component via the `FormContainer` component.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "default" }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on any of the text inputs (`onKeyDown`), and the `StateProvinceDropdown` field. The React event form the will be passed as a parameter.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showWalletCheckbox: {
+      description: "Shows the `Save address to wallet` checkbox if `true`.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    saveToWallet: {
+      description:
+        "Callback function for the `onChange` event of the `Save address to wallet` checkbox.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    walletCheckboxMarked: {
+      description:
+        "Sets the `Save address to wallet` checkbox to `checked` when true.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    dataQa: {
+      description:
+        "Value for the `data-qa` attribute on the `FormContainer` wrapping element.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedAddressForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedAddressForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedAddressForm {...args} />
+};
+
+const AddressFormWithWalletState = props => {
+  const [checked, setChecked] = useState(true);
+
+  return (
+    <ConnectedAddressForm
+      {...props}
+      showWalletCheckbox={props.showWalletCheckbox}
+      walletCheckboxMarked={checked}
+      saveToWallet={() => setChecked(!checked)}
+    />
+  );
+};
+
+export const WalletCheckbox = {
+  args: {
+    showWalletCheckbox: true
+  },
+  render: args => <AddressFormWithWalletState {...args} />
+};

package/src/components/molecules/banner/Banner.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as BannerStories from './Banner.stories.js';
+
+<Meta of={BannerStories} />
+
+<Title />
+
+Banner is a themeable component that renders a heading and sub-heading alongside an image. It supports custom padding and content spacing for both mobile and desktop, as well as minimum width and height values.
+
+## The `Image` Prop
+
+The `image` prop is required, and must be valid a React component, typically a component that renders an SVG.
+
+The Banner component forces a width of `176px` for SVG elements on mobile screens.
+
+---
+
+<div style={{ margin: "2em 0"}}>
+  <Story />
+</div>
+
+<Controls />

package/src/components/molecules/banner/Banner.stories.js

@@ -1,29 +1,125 @@
-import React, { useEffect, useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
 import Banner from "./Banner";
 import { WalletBannerIcon } from "../../atoms/icons";
 
-import page from "../../../../.storybook/page";
-
-const groupId = "props";
-export const banner = () => (
-  <Banner
-    heading={text("bannerHeading", "Banner Heading Text", groupId)}
-    subHeading={text("bannerSubheading", "Banner Description", groupId)}
-    image={WalletBannerIcon}
-    padding={text("padding", null, groupId)}
-    mobilePadding={text("mobilePadding", null, groupId)}
-    minWidth={text("minWidth", null, groupId)}
-    minHeight={text("minHeight", null, groupId)}
-    contentSpacing={text("contentSpacing", null, groupId)}
-    mobileContentSpacing={text("mobileContentSpacing", null, groupId)}
-  />
-);
-
-banner.storyName = "Welcome to Wallet Banner";
-
-const story = page({
-  title: "Components|Molecules/Banner",
-  Component: Banner
-});
-export default story;
+const meta = {
+  title: "Molecules/Banner",
+  component: Banner,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    heading: "This is a banner heading!",
+    subHeading: "Sub heading!",
+    image: WalletBannerIcon,
+    padding: "0.5rem 1.5rem",
+    mobilePadding: "0.5rem 1rem",
+    minWidth: "100%",
+    minHeight: "auto",
+    contentSpacing: "3rem",
+    mobileContentSpacing: "0.5rem"
+  },
+  argTypes: {
+    heading: {
+      description: "Banner heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    subHeading: {
+      description: "Banner sub-heading",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    image: {
+      description: "Image displayed on the right side of the banner",
+      table: {
+        type: { summary: "React Component" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    padding: {
+      description: "Padding around the banner content (desktop)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0.5rem 1.5rem" }
+      }
+    },
+    mobilePadding: {
+      description: "Padding around the banner content (mobile)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0.5rem 1rem" }
+      }
+    },
+    minWidth: {
+      description:
+        "Minimum width of the banner, must be a valid value for the `min-width` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "100%" }
+      }
+    },
+    minHeight: {
+      description:
+        "Minimum height of the banner, must be a valid value for the `min-height` property.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    contentSpacing: {
+      description:
+        "Space between the headers and image, must be a valid CSS measurement value with a unit",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3rem" }
+      }
+    },
+    mobileContentSpacing: {
+      description:
+        "Space between the headers and image (mobile), must be a valid CSS measurement value with a unit",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "0.5rem" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {};
+
+export const CustomPadding = {
+  args: {
+    padding: "2rem 4rem"
+  }
+};
+
+export const CustomSpacing = {
+  args: {
+    contentSpacing: "8rem"
+  }
+};
+
+export const MinWidth = {
+  args: {
+    minWidth: "1000px"
+  }
+};
+
+export const MinHeight = {
+  args: {
+    minHeight: "500px"
+  }
+};
+
+export const CustomImageComponent = {
+  args: {
+    image: () => "🎉"
+  }
+};

package/src/components/molecules/change-password-form/ChangePasswordForm.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ChangePasswordFormStories from './ChangePasswordForm.stories.js';
+
+<Meta of={ChangePasswordFormStories} />
+
+<Title />
+
+Renders a form for users to update their password. Built with [FormInput](?path=/docs/atoms-form-layouts-forminput--docs), and [PasswordRequirements](?path=/docs/atoms-passwordrequirements--docs).
+
+When the [`revenueManagement`](?path=/story/molecules-changepasswordform--revenue-management) prop is set to `true`, the form will include a user block with their full name & initials, and "Save" & "Cancel" buttons.
+
+<Story />
+
+<Controls />