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

package/src/components/molecules/login-form/LoginForm.stories.js

@@ -0,0 +1,120 @@
+import React from "react";
+import LoginForm from "./LoginForm";
+import { Box } from "../../atoms/layouts";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import {
+  createFormState,
+  required,
+  hasLength,
+  isProbablyEmail
+} from "redux-freeform";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const formConfig = {
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  password: {
+    validators: [required()]
+  }
+};
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState(
+  formConfig
+);
+
+const store = createStore(
+  reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => (
+  <Box minWidth="600px">
+    <LoginForm {...props} />
+  </Box>
+);
+
+const ConnectedLoginForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/LoginForm",
+  component: ConnectedLoginForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    clearOnDismount: undefined,
+    fields: undefined,
+    actions: undefined,
+    handleSubmit: noop,
+    showErrors: 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 }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedLoginForm {...args} />;
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedLoginForm {...args} />
+};
+
+export const HandleSubmit = {
+  args: {
+    handleSubmit: fn()
+  },
+  render: args => <ConnectedLoginForm {...args} />
+};

package/src/components/molecules/modal/Modal.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ModalStories from './Modal.stories.js';
+
+<Meta of={ModalStories} />
+
+<Title />
+
+The Modal component is used to display modal popups to users. It uses the react-aria-modal package under the hood to ensure proper accessibility.
+
+The modal comes in two versions: v1 and v2. Version 1 is currently the most used version of the modal across our applications. In 2024, a refactored and redesigned version of the modal was built. This version, in addition to changing the design of the modal, fixed some longstanding issues with focus trapping and modals without buttons. All new implementations of modals should use v2, and the plan is to eventually transition all existing implementations of v1 modals to v2 modals.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+  <Story />
+</div>

package/src/components/molecules/modal/Modal.stories.js

@@ -0,0 +1,362 @@
+import React, { useState, useEffect } from "react";
+import Modal from "./Modal";
+import { fn } from "@storybook/test";
+import { Stack, Box, Center } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action/ButtonWithAction";
+import Spinner from "../../atoms/spinner/Spinner";
+
+const meta = {
+  title: "Molecules/Modal",
+  component: Modal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    version: "v1",
+    hideModal: fn(),
+    continueAction: fn(),
+    isContinueActionDisabled: false,
+    isCloseActionDisabled: false,
+    modalOpen: false,
+    cancelButtonText: "Cancel",
+    continueButtonText: "Continue",
+    closeButtonText: "Close",
+    modalHeaderText: "Basic v1 Modal",
+    modalBodyText: "Modal body text",
+    modalHeaderBg: "white",
+    modalBodyBg: "#F6F6F9",
+    defaultWrapper: true,
+    noBorder: true,
+    noButtons: false,
+    maxHeight: undefined,
+    blurUnderlay: true,
+    onlyCloseButton: false,
+    onlyContinueButton: false,
+    useDangerButton: false,
+    continueURL: "",
+    showCloseIconButton: false,
+    underlayClickExits: true,
+    customWidth: undefined,
+    isLoading: false,
+    buttonExtraStyles: "",
+    cancelButtonVariant: "secondary",
+    continueButtonVariant: "primary"
+  },
+  argTypes: {
+    version: {
+      description:
+        "The version (v1/v2) of the Modal. V1 is the most used version in most applications, but all new implementations should use the redesigned v2 version.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: `v1` }
+      }
+    },
+    hideModal: {
+      description: "Function that hides the modal",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    continueAction: {
+      description: "Function that fires when user clicks the continue button",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    modalOpen: {
+      description: "Whether the modal is open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    cancelButtonText: {
+      description: "Text on the cancel button",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    continueButtonText: {
+      description: "Text on the continue button",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    modalHeaderText: {
+      description: "A basic v1 modal",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    modalBodyText: {
+      description: "Text in the modal body",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    modalHeaderBg: {
+      description: "Background color of the modal header",
+      table: {
+        type: { summary: "object" },
+        defaultValue: { summary: `undefined` }
+      }
+    },
+    modalBodyBg: {
+      description: "Background color of the modal body",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "#F6F6F9" }
+      }
+    },
+    defaultWrapper: {
+      description:
+        "Whether to use a Paragraph component to wrap the body text, or a regular div",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    noBorder: {
+      description: "Whether the modal has a border",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    noButtons: {
+      description:
+        "Whether the modal has buttons. Use true for auto-closing modals.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    maxHeight: {
+      description: "Max height for the modal",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    blurUnderlay: {
+      description:
+        "Whether the underlay behind the modal should be blurred when the modal is open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    onlyCloseButton: {
+      description: "Whether the modal should have only a close button",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    isCloseActionDisabled: {
+      description:
+        "Whether the close button should be disabled, only used when `onlyCloseButton` is `true`",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    onlyContinueButton: {
+      description: "Whether the modal should have only a continue button",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    useDangerButton: {
+      description:
+        "Whether the modal should use the 'danger' button variant for the continue button",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    continueURL: {
+      description:
+        "URL destination to use if continue button is a ButtonWithLink (v2 only)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    showCloseIconButton: {
+      description:
+        "Whether to show the close icon button in the modal (v2 only)",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    underlayClickExits: {
+      description:
+        "Whether clicking the underlay behind the modal closes the modal",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    customWidth: {
+      description: "Custom width value for the modal",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    },
+    isLoading: {
+      description: "Whether to show loading spinner on modal buttons",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    buttonExtraStyles: {
+      description:
+        "Extra styles to apply to modal buttons. Applies to all buttons.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    cancelButtonVariant: {
+      description: "Button variant for cancel button (v2 only)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "secondary" }
+      }
+    },
+    continueButtonVariant: {
+      description: "Button variant for continue button (v2 only)",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "primary" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicV1Modal = {
+  args: {
+    version: "v1",
+    modalHeaderText: "Payment Method in Use",
+    modalBodyText:
+      "To remove this payment method, you must first turn off autopay payments scheduled with it. Go to your Account Details page to turn off autopay for these payments.",
+    continueButtonText: "Go to Account Details"
+  },
+  render: args => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+      <Stack childGap="3rem">
+        <Box>
+          <ButtonWithAction
+            action={() => setModalOpen(true)}
+            text="Open Modal"
+          />
+        </Box>
+        <Modal
+          {...args}
+          modalOpen={modalOpen}
+          hideModal={() => setModalOpen(false)}
+          cancelAction={() => setModalOpen(false)}
+        />
+      </Stack>
+    );
+  }
+};
+
+export const BasicV2Modal = {
+  args: {
+    version: "v2",
+    showCloseIconButton: true,
+    modalHeaderText: "Total out of balance",
+    modalBodyText:
+      "Your total is out of balance. If you continue you will closeout out of balance. There is no undoing this action.",
+    cancelButtonText: "Edit totals",
+    continueButtonText: "Continue Closeout",
+    useDangerButton: true
+  },
+  render: args => {
+    const [modalOpen, setModalOpen] = useState(false);
+
+    return (
+      <Stack childGap="3rem">
+        <Box>
+          <ButtonWithAction
+            action={() => setModalOpen(true)}
+            text="Open Modal"
+          />
+        </Box>
+        <Modal
+          {...args}
+          modalOpen={modalOpen}
+          hideModal={() => setModalOpen(false)}
+          cancelAction={() => setModalOpen(false)}
+        />
+      </Stack>
+    );
+  }
+};
+
+export const ModalWithoutButtons = {
+  args: {
+    version: "v2",
+    noButtons: true,
+    blurUnderlay: false,
+    modalHeaderText: "Invoice #12375934 No Longer Valid",
+    modalBodyText:
+      "The invoice has expired. Please go back to check your balance."
+  },
+  render: args => {
+    const [isModalOpen, setIsModalOpen] = useState(true);
+    useEffect(() => {
+      setTimeout(() => {
+        // some async action or timer closes the modal instead
+        setIsModalOpen(false);
+      }, 3000);
+    }, []);
+    return <Modal {...args} modalOpen={isModalOpen} />;
+  }
+};
+
+export const LoadingModal = {
+  args: {
+    version: "v2",
+    noButtons: true,
+    blurUnderlay: false,
+    modalHeaderText: "Retrieving Invoice #12375934"
+  },
+  render: args => {
+    const [isModalOpen, setIsModalOpen] = useState(true);
+    useEffect(() => {
+      setTimeout(() => {
+        // some async action or timer closes the modal instead
+        setIsModalOpen(false);
+      }, 10000);
+    }, []);
+    return (
+      <Modal
+        {...args}
+        modalOpen={isModalOpen}
+        modalBodyText={
+          <Center tabIndex={0}>
+            <Spinner size="100" />
+          </Center>
+        }
+      />
+    );
+  }
+};

package/src/components/molecules/modal/ModalControlV1.js

@@ -25,6 +25,7 @@ const Modal = ({
   onExit = hideModal,
   continueAction,
   isContinueActionDisabled = false,
+  isCloseActionDisabled = false,
   cancelAction,
   modalOpen,
   modalHeaderText,
@@ -206,10 +207,12 @@ const Modal = ({
                         ) : (
                           <Box padding="0.5rem">
                             <ButtonWithAction
+                              tabIndex="0"
                               action={hideModal}
                               variant="primary"
                               text={closeButtonText}
                               dataQa={closeButtonText}
+                              disabled={isCloseActionDisabled}
                               extraStyles={buttonExtraStyles}
                               className="modal-close-button"
                               role="button"

package/src/components/molecules/modal/ModalControlV2.js

@@ -42,6 +42,7 @@ const Modal = ({
   cancelButtonVariant = "secondary",
   children = [],
   closeButtonText = "Close",
+  closeButtonVariant = "primary",
   continueAction = noop,
   continueButtonText = "Continue",
   continueButtonVariant = "primary",
@@ -202,6 +203,7 @@ const Modal = ({
                       <CloseButton
                         buttonExtraStyles={buttonExtraStyles}
                         closeButtonText={closeButtonText}
+                        closeButtonVariant={closeButtonVariant}
                         hideModal={hideModal}
                         isMobile={isMobile}
                         key="close"

package/src/components/molecules/modal/__private__/CloseButton.js

@@ -9,6 +9,7 @@ import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction
 export const CloseButton = ({
   buttonExtraStyles = "",
   closeButtonText = "",
+  closeButtonVariant = "primary",
   hideModal = noop,
   isMobile = false
 }) => {
@@ -26,7 +27,7 @@ export const CloseButton = ({
       role="button"
       text={closeButtonText}
       textExtraStyles={`${fontSize}`}
-      variant="primary"
+      variant={closeButtonVariant}
     />
   );
 };

package/src/components/molecules/module/Module.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ModuleStories from './Module.stories.js';
+
+<Meta of={ModuleStories} />
+
+<Title />
+
+The Module is a component that is used to wrap content in a box with a preset box-shadow value. The component can take heading text to display above the child content, or just child content.
+
+If title text is supplied via the `heading` prop, current guidelines require use of the `as` and `fontSize` props to specify the HTML element and font size of the title text. Previous (now deprecated) versions of the Module relied on the `variant` prop to specify the element and font size of title text. For purposes of backwards compatability, that method is still supported, but all new use cases should try to use `as` and `fontSize` instead of `variant`.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>