@thecb/components 10.12.6 → 11.0.0

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

@@ -1,139 +1,353 @@
-import React, { useEffect, useState } from "react";
-import { text, boolean } from "@storybook/addon-knobs";
+import React, { useState, useEffect } from "react";
 import Modal from "./Modal";
-import page from "../../../../.storybook/page";
-
-import Text from "../../atoms/text";
-import { noop } from "../../../util/general";
+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";
-import { Center } from "../../atoms/layouts";
 
-const groupId = "props";
+const meta = {
+  title: "Molecules/Modal",
+  component: Modal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    version: "v1",
+    hideModal: fn(),
+    continueAction: fn(),
+    isContinueActionDisabled: 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 }
+      }
+    },
+    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 const modalV1 = () => (
-  <Modal
-    version="v1"
-    ModalLink={() => (
-      <Text
-        onClick={noop}
-        color={"#347BB2"}
-        fontSize="18px"
-        lineHeight="2rem"
-        extraStyles={`cursor: pointer;`}
-      >
-        Modal Link
-      </Text>
-    )}
-    blurUnderlay={boolean("blurUnderlay", true, groupId)}
-    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
-    continueAction={noop}
-    continueButtonText={text("continueButtonText", "Continue", groupId)}
-    defaultWrapper={boolean("defaultWrapper", true, groupId)}
-    hideModal={noop}
-    maxHeight={text("maxHeight", "", groupId)}
-    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
-    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
-    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
-    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
-    modalOpen={boolean("modalOpen", true, groupId)}
-    noBorder={boolean("noBorder", true, groupId)}
-    noButtons={boolean("noButtons", false, groupId)}
-    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
-    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
-    useDangerButton={boolean("useDangerButton", false, groupId)}
-  />
-);
+export default meta;
 
-modalV1.storyName = "Standard Modal (V1)";
+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);
 
-export const modalV2 = () => (
-  <Modal
-    version="v2"
-    ModalLink={() => (
-      <Text
-        onClick={noop}
-        color={"#347BB2"}
-        fontSize="18px"
-        lineHeight="2rem"
-        extraStyles={`cursor: pointer;`}
-      >
-        Modal Link
-      </Text>
-    )}
-    blurUnderlay={boolean("blurUnderlay", true, groupId)}
-    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
-    continueAction={noop}
-    continueButtonText={text("continueButtonText", "Continue", groupId)}
-    continueURL={text("continueURL", "", groupId)}
-    defaultWrapper={boolean("defaultWrapper", true, groupId)}
-    hideModal={noop}
-    maxHeight={text("maxHeight", "", groupId)}
-    modalBodyBg={text("modalBodyBg", "", groupId)}
-    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
-    modalHeaderBg={text("modalHeaderBg", "", groupId)}
-    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
-    modalOpen={boolean("modalOpen", true, groupId)}
-    noButtons={boolean("noButtons", false, groupId)}
-    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
-    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
-    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
-    useDangerButton={boolean("useDangerButton", false, groupId)}
-  />
-);
+    return (
+      <Stack childGap="3rem">
+        <Box>
+          <ButtonWithAction
+            action={() => setModalOpen(true)}
+            text="Open Modal"
+          />
+        </Box>
+        <Modal
+          {...args}
+          modalOpen={modalOpen}
+          hideModal={() => setModalOpen(false)}
+          cancelAction={() => setModalOpen(false)}
+        />
+      </Stack>
+    );
+  }
+};
 
-modalV2.storyName = "Standard Modal (V2)";
+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);
 
-export const modalWithoutButtons = () => {
-  const [isModalOpen, setIsModalOpen] = useState(true);
-  useEffect(() => {
-    setTimeout(() => {
-      // some async action or timer closes the modal instead
-      setIsModalOpen(false);
-    }, 3000);
-  }, []);
-  return (
-    <Modal
-      version="v1"
-      ModalLink={() => (
-        <Text
-          tabIndex={0}
-          onClick={noop}
-          color={"#347BB2"}
-          fontSize="18px"
-          lineHeight="2rem"
-          extraStyles={`cursor: pointer;`}
-        >
-          Modal Link
-        </Text>
-      )}
-      hideModal={noop}
-      continueAction={noop}
-      modalOpen={isModalOpen}
-      modalHeaderText={text(
-        "modalHeaderText",
-        "Modal Without Buttons",
-        groupId
-      )}
-      modalBodyText={
-        <Center tabIndex={0}>
-          <Spinner size="100" />
-        </Center>
-      }
-      modalHeaderBg={text("modalHeaderBg", "white", groupId)}
-      modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
-      defaultWrapper={boolean("defaultWrapper", true, groupId)}
-      noButtons={boolean("noButtons", true, groupId)}
-      maxHeight={text("maxHeight", "", groupId)}
-      blurUnderlay={boolean("blurUnderlay", false, groupId)}
-    />
-  );
+    return (
+      <Stack childGap="3rem">
+        <Box>
+          <ButtonWithAction
+            action={() => setModalOpen(true)}
+            text="Open Modal"
+          />
+        </Box>
+        <Modal
+          {...args}
+          modalOpen={modalOpen}
+          hideModal={() => setModalOpen(false)}
+          cancelAction={() => setModalOpen(false)}
+        />
+      </Stack>
+    );
+  }
 };
 
-modalWithoutButtons.storyName = "Modal (V1) Without Buttons";
-
-const story = page({
-  title: "Components|Molecules/Modal",
-  Component: Modal
-});
+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 default story;
+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/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>