@thecb/components 12.0.0-beta.0 → 12.0.0-beta.2

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

@@ -0,0 +1,224 @@
+import React, { useState } from "react";
+import AddressForm from "./AddressForm";
+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

@@ -0,0 +1,125 @@
+import Banner from "./Banner";
+import { WalletBannerIcon } from "../../atoms/icons";
+
+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 />

package/src/components/molecules/change-password-form/ChangePasswordForm.stories.js

@@ -0,0 +1,206 @@
+import React from "react";
+import ChangePasswordForm from "./ChangePasswordForm";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import {
+  createFormState,
+  required,
+  hasLength,
+  hasNumber,
+  hasLowercaseLetter,
+  hasUppercaseLetter,
+  hasSpecialCharacter,
+  matchesField
+} from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  currentPassword: {
+    validators: [required()]
+  },
+  newPassword: {
+    validators: [
+      required(),
+      hasLength(8, 100),
+      hasNumber(),
+      hasLowercaseLetter(),
+      hasUppercaseLetter(),
+      hasSpecialCharacter()
+    ]
+  },
+  confirmNewPassword: {
+    validators: [required(), matchesField("newPassword")]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => <ChangePasswordForm {...props} />;
+
+const ConnectedChangePasswordForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/ChangePasswordForm",
+  component: ConnectedChangePasswordForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    handleSubmit: noop,
+    showErrors: undefined,
+    isMobile: undefined,
+    revenueManagement: undefined,
+    closeForm: undefined,
+    firstName: undefined,
+    lastName: undefined
+  },
+  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 }
+      }
+    },
+    clearOnDismount: {
+      description:
+        "If `true`, `actions.form.clear()` will be called when the component unmounts.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    handleSubmit: {
+      description:
+        "Function called when the `Enter` key is pressed on any of the text inputs (`onKeyDown`). The React event form the will be passed as a parameter.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    isMobile: {
+      description:
+        "Reduces the padding of the `PasswordRequirements` component for mobile desvices (typically screen size <768px).",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showErrors: {
+      description:
+        "Passed to the [FormInput](?path=/docs/atoms-form-layouts-forminput--docs) fields.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    revenueManagement: {
+      description:
+        "Renders the user's name from the `firstName` and `lastName` props, and `Cancel` & `Save` buttons. The `Save` button uses the `handleSubmit` prop as it's action.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    closeForm: {
+      description:
+        "Action for the `Cancel` button for the `revenueManagement` version of the form",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    firstName: {
+      description:
+        "First name of the user, used only with `revenueManagement` set to `true.`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    lastName: {
+      description:
+        "Last name of the user, used only with `revenueManagement` set to `true.`",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedChangePasswordForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const IsMobile = {
+  args: {
+    isMobile: true
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};
+
+export const RevenueManagement = {
+  args: {
+    revenueManagement: true,
+    firstName: "Cole",
+    lastName: "Slaw",
+    closeForm: fn(),
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedChangePasswordForm {...args} />
+};

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -37,7 +37,7 @@ const CollapsibleSection = ({
   const numChildren = typeof children === "Array" ? children.length : 1;
   const label =
     name !== "" ? name : !customTitle ? title : "collapsible section";
-  const id = `${label?.replaceAll(" ", "-")?.toLowerCase()}-${index}`;
+  const id = `${label?.replaceAll?.(" ", "-")?.toLowerCase()}-${index}`;
 
   const wrapper = {
     open: {

package/src/components/molecules/collapsible-section/CollapsibleSection.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as CollapsibleSectionStories from './CollapsibleSection.stories.js';
+
+<Meta of={CollapsibleSectionStories} />
+
+<Title />
+
+The CollapsibleSection component behaves like a typical accordion, expanding and collapsing respectively when triggered by user interaction. It also includes [accessibility attributes for accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+  <Story />
+</div>