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

package/src/components/molecules/hero-image/HeroImage.theme.js

@@ -0,0 +1,109 @@
+import {
+  MATISSE_BLUE,
+  ROYAL_BLUE_VIVID,
+  WHITE
+} from "../../../constants/colors";
+import { FONT_SIZE } from "../../../constants/style_constants";
+
+// Colors
+const heroPrimaryColor = ROYAL_BLUE_VIVID;
+const heroTextColor = WHITE;
+
+// Font Sizes
+const headingFontSize = {
+  v1: {
+    mobile: "3.00rem",
+    desktop: "3.50rem"
+  },
+  v2: {
+    mobile: "2.50rem",
+    desktop: "3.50rem"
+  }
+};
+const subheadingFontSize = {
+  v1: {
+    mobile: "2.00rem",
+    desktop: "2.50rem"
+  }
+};
+
+const descriptionFontSize = {
+  v1: {
+    mobile: FONT_SIZE.MD,
+    desktop: FONT_SIZE.XL
+  },
+  v2: {
+    mobile: FONT_SIZE.LG,
+    desktop: FONT_SIZE.XL
+  }
+};
+
+// Line Heights
+const headingLineHeight = {
+  v1: {
+    mobile: 1.25,
+    desktop: 1.15
+  },
+  v2: {
+    mobile: 1.25,
+    desktop: 1.15
+  }
+};
+
+const subheadingLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.15
+  }
+};
+
+const descriptionLineHeight = {
+  v1: {
+    mobile: 1.5,
+    desktop: 1.5
+  },
+  v2: {
+    mobile: 1.5,
+    desktop: 1.5
+  }
+};
+
+// Alignment
+const textAlign = {
+  v1: {
+    mobile: "left",
+    desktop: "left"
+  },
+  v2: {
+    mobile: "left",
+    desktop: "center"
+  }
+};
+
+const justifyContent = {
+  v1: {
+    mobile: "flex-start",
+    desktop: "flex-start"
+  },
+  v2: {
+    mobile: "flex-start",
+    desktop: "center"
+  }
+};
+
+export const fallbackValues = {
+  // Colors
+  heroPrimaryColor,
+  heroTextColor,
+  // Font sizes
+  headingFontSize,
+  descriptionFontSize,
+  subheadingFontSize,
+  // Line heights
+  headingLineHeight,
+  subheadingLineHeight,
+  descriptionLineHeight,
+  // Alignment
+  textAlign,
+  justifyContent
+};

package/src/components/molecules/hero-image/index.js

@@ -0,0 +1,3 @@
+import HeroImage from "./HeroImage";
+
+export default HeroImage;

package/src/components/molecules/idle-modal/IdleModal.js

@@ -0,0 +1,101 @@
+import React from "react";
+import Modal from "../modal";
+import { Box, Motion, Stack } from "../../atoms/layouts";
+import Paragraph from "../../atoms/paragraph";
+
+const IdleModal = ({
+  modalOpen,
+  toggleModal,
+  timeLeftToLogout = 0,
+  totalLogoutTime = 30,
+  logout,
+  cancelLogout,
+  useCheckoutContent
+}) => {
+  const percent =
+    (totalLogoutTime - timeLeftToLogout) * (100 / totalLogoutTime);
+  const transition = {
+    ease: "easeInOut",
+    duration: totalLogoutTime
+  };
+  const variants = {
+    enter: {
+      x: "-100%",
+      backgroundColor: "#317D4F"
+    },
+    animate: {
+      x: ["-100%", `${percent}%`],
+      backgroundColor: ["#317D4F", "#93A441", "#F4CB32", "#E36E43", "#D11053"],
+      times: [0, 0.4, 0.5, 0.6, 0.8],
+      transition
+    }
+  };
+
+  const continueText = useCheckoutContent ? "Continue" : "Stay Logged In";
+
+  const cancelText = useCheckoutContent ? "End Session" : "Log Off";
+
+  const paragraphText = useCheckoutContent
+    ? `Are you still there? Your payment will be cancelled in ${timeLeftToLogout} seconds.`
+    : `Are you still there? For your security, you will be logged out in ${timeLeftToLogout} seconds.`;
+
+  const modalBody = (
+    <Box padding="0">
+      <Stack>
+        <Paragraph>{paragraphText}</Paragraph>
+        <Motion>
+          <Box
+            padding="0 0 1px 0"
+            minHeight="10px"
+            width="100%"
+            borderRadius="6px"
+            extraStyles="position: relative; overflow: hidden;"
+          >
+            <Motion
+              padding="0 0 1px 0"
+              height="10px"
+              width="100%"
+              borderRadius="6px"
+              extraStyles="position: absolute;"
+              variants={variants}
+              initial="enter"
+              animate={modalOpen ? "animate" : "enter"}
+              exit="enter"
+            />
+          </Box>
+        </Motion>
+      </Stack>
+    </Box>
+  );
+  const modalExtraProps = {
+    modalHeaderText: "Your session is about to expire!",
+    modalBodyText: modalBody,
+    continueButtonText: continueText,
+    cancelButtonText: cancelText,
+    continueAction: () => {
+      cancelLogout();
+      toggleModal(false);
+    },
+    cancelAction: () => {
+      logout();
+      toggleModal(false);
+    }
+  };
+  return (
+    <Modal
+      showModal={() => toggleModal(true)}
+      hideModal={() => {
+        cancelLogout();
+        toggleModal(false);
+      }}
+      modalOpen={modalOpen}
+      defaultWrapper={false}
+      underlayClickExits={false}
+      {...modalExtraProps}
+    >
+      <Box padding="0" />
+    </Modal>
+  );
+};
+
+export default IdleModal;

package/src/components/molecules/idle-modal/IdleModal.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as IdleModalStories from './IdleModal.stories.js';
+
+<Meta of={IdleModalStories} />
+
+<Title />
+
+The IdleModal is a molecule used to display an animated progress bar and a message informing a user that they will shortly be logged out of an application due to idleness. The modal is a "dumb" component that requires the countdown timer be managed in the parent component. CB Components has a useful react hook contained in the `idleTimerUtils.js` file that NFE uses to help manage the running of the IdleModal.
+
+For detecting user inactivity, an application can either implement its own mouse/keyboard event tracking, or rely on a third party package like react-idle-timer. An implementation example is available in the component's story file.
+
+As of August 2024, all three of the applications (NFE, RevM, POS) to use the IdleModal use customized versions that live within the application code. A backlog ticket has been created to unify all existing implementations to the CB Components standard.
+
+<Controls />
+
+<Story />

package/src/components/molecules/idle-modal/IdleModal.stories.js

@@ -0,0 +1,180 @@
+import React, { useState } from "react";
+import IdleModal from "./IdleModal";
+import { fn } from "@storybook/test";
+import { ButtonWithAction } from "../../atoms";
+import { Box, Stack } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import useLogoutTimers from "../../../util/idleTimerUtils";
+
+export default {
+  title: "Molecules/IdleModal",
+  component: IdleModal,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    modalOpen: undefined,
+    toggleModal: fn(),
+    timeLeftToLogout: 0,
+    totalLogoutTime: 30,
+    logout: fn(),
+    cancelLogout: fn(),
+    useCheckoutContent: undefined
+  },
+  argTypes: {
+    modalOpen: {
+      description: "Whether the modal is open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    toggleModal: {
+      description: "Function to toggle the modal open or closed",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    timeLeftToLogout: {
+      description:
+        "Amount of time remaining before logout function is called. Should be supplied by parent component using setInterval or other mechanism to decrement a counter.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0 }
+      }
+    },
+    totalLogoutTime: {
+      description:
+        "Total amount of time before logout function is called. Used with timeLeftToLogout in order to animate the progress bar.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 30 }
+      }
+    },
+    logout: {
+      description:
+        "Function to run when timer reaches zero. Typically a redux action dispatcher, but can be a wrapping function that handles the logout sequence itself.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    cancelLogout: {
+      description:
+        "Function to run if user closes or cancels modal early. Typically a redux action dispatcher, but can be a wrapping function.",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    useCheckoutContent: {
+      description:
+        "Whether text of modal should reference checkout experience / user's payment.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+const IdleModalComponent = args => {
+  const { totalLogoutTime, ...rest } = args;
+  const [modalOpen, setModalOpen] = useState(false);
+  const [logoutTriggered, setLogoutTriggered] = useState(false);
+  const [cancelLogoutTriggered, setCancelLogoutTriggered] = useState(false);
+  const [timeLeftToLogout, setTimeLeftToLogout] = useState(totalLogoutTime);
+  const [logoutTimerOn, setLogoutTimerOn] = useState(false);
+
+  const runIdleModal = () => {
+    setLogoutTriggered(false);
+    setCancelLogoutTriggered(false);
+    setModalOpen(true);
+    setLogoutTimerOn(true);
+  };
+
+  const resetLogoutTimer = () => {
+    clearInterval(logoutTimers.interval);
+    clearTimeout(logoutTimers.timer);
+    setTimeLeftToLogout(totalLogoutTime);
+  };
+
+  const handleLogout = () => {
+    setModalOpen(false);
+    setLogoutTriggered(true);
+    setLogoutTimerOn(false);
+    resetLogoutTimer();
+  };
+
+  const handleCancelLogout = () => {
+    setModalOpen(false);
+    setCancelLogoutTriggered(true);
+    setLogoutTimerOn(false);
+    resetLogoutTimer();
+  };
+
+  const logoutTimers = useLogoutTimers({
+    logoutTimerOn,
+    action: handleLogout,
+    timeLeftToLogout,
+    handleSetTimeLeft: setTimeLeftToLogout,
+    initialTimeLeftToLogout: totalLogoutTime
+  });
+
+  let userStatus = "is logged in";
+
+  if (logoutTriggered) {
+    userStatus = "has logged out";
+  }
+  if (cancelLogoutTriggered) {
+    userStatus = "has cancelled log out";
+  }
+
+  return (
+    <Box>
+      <Stack childGap="10rem">
+        <Box>
+          <Text>{`User Status: ${userStatus}`}</Text>
+        </Box>
+        <Box>
+          <ButtonWithAction
+            action={() => runIdleModal()}
+            text="Trigger Idle Modal"
+          />
+        </Box>
+        <Box>
+          <IdleModal
+            {...rest}
+            totalLogoutTime={totalLogoutTime}
+            timeLeftToLogout={timeLeftToLogout}
+            modalOpen={modalOpen}
+            toggleModal={() => setModalOpen(!modalOpen)}
+            logout={() => handleLogout()}
+            cancelLogout={() => handleCancelLogout()}
+          />
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export const BasicIdleModal = {
+  render: args => IdleModalComponent(args)
+};
+
+export const CheckoutIdleModal = {
+  args: {
+    useCheckoutContent: true
+  },
+  render: args => IdleModalComponent(args)
+};
+
+export const LengthyIdleModal = {
+  args: {
+    totalLogoutTime: 300
+  },
+  render: args => IdleModalComponent(args)
+};

package/src/components/molecules/idle-modal/index.d.ts

@@ -0,0 +1,16 @@
+import React, { HTMLAttributes } from "react";
+import Expand from "../../../util/expand";
+import { ReduxAction } from "../../../types/common";
+
+export interface IdleModalProps {
+  modalOpen: boolean;
+  toggleModal: (modalOpen: boolean) => void;
+  timeLeftToLogout?: number; // in seconds
+  totalLogoutTime?: number; // in seconds
+  logout: () => ReduxAction;
+  cancelLogout: () => ReduxAction;
+  useCheckoutContent?: boolean;
+}
+
+export const IdleModal: React.FC<Expand<IdleModalProps> &
+  HTMLAttributes<HTMLElement>>;

package/src/components/molecules/idle-modal/index.js

@@ -0,0 +1,3 @@
+import IdleModal from "./IdleModal";
+
+export default IdleModal;

package/src/components/molecules/index.d.ts

@@ -6,3 +6,4 @@ export * from "./popover";
 export * from "./radio-group";
 export * from "./toast-notification";
 export * from "./popup-menu";
+export * from "./multiple-select-filter";

package/src/components/molecules/index.js

@@ -10,6 +10,7 @@ export { default as EmailForm } from "./email-form";
 export { default as FooterWithSubfooter } from "./footer-with-subfooter";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
+export { default as IdleModal } from "./idle-modal";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
 export { default as LinkCard } from "./link-card";
 export { default as LoginForm } from "./login-form";
@@ -28,6 +29,7 @@ export { default as PhoneForm } from "./phone-form";
 export { default as Popover } from "./popover";
 export { default as RadioGroup } from "./radio-group";
 export { default as RadioSection } from "./radio-section";
+export { default as RegistrationBanner } from "./registration-banner";
 export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";
 export { default as ResetPasswordForm } from "./reset-password-form";
@@ -41,3 +43,8 @@ export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
 export { default as PopupMenu } from "./popup-menu";
+export { default as MultipleSelectFilter } from "./multiple-select-filter";
+export { default as ContactCard } from "./contact-card";
+export { default as HeroImage } from "./hero-image";
+export { default as TurnstileWidget } from "./turnstile-widget/TurnstileWidget";
+export { default as Tooltip } from "./tooltip";

package/src/components/molecules/link-card/LinkCard.js

@@ -4,44 +4,44 @@ import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
-import { noop } from "../../../util/general";
+import ExternalLinkIcon from "../../atoms/icons/ExternalLinkIcon";
+import { SPACING } from "../../../constants/style_constants";
 
 const LinkCard = ({
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
+  subtitlePadding = "0 0 40px",
   showLeft,
   leftContent,
   showRight,
   rightContent,
-  onClick,
   extraStyles = "",
   extraHoverStyles = "",
   extraActiveStyles = "",
   themeValues,
   titleVariant = "h3",
-  disabled = false
+  disabled = false,
+  isExternalLink = false,
+  href = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
-  const locatorSlug = title.toLowerCase().replaceAll(regex, "-");
+  const locatorSlug = title?.toLowerCase?.()?.replaceAll?.(regex, "-");
 
   return (
     <Styled.Container
+      as="a"
+      role="link"
+      href={disabled ? undefined : href}
+      tabIndex={disabled ? -1 : 0}
       borderRadius="8px"
       dataQa={`link-card-${locatorSlug}`}
-      width="100%"
-      maxWidth={isMobile ? "100%" : "288px"}
-      minWidth={isMobile ? "240px" : "288px"}
-      minHeight="141px"
-      padding="24px"
-      theme={themeValues}
+      themeValues={themeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
-      onClick={disabled ? noop : onClick}
       aria-disabled={disabled}
-      isDisabled={disabled}
-      role="group"
+      disabled={disabled}
       aria-label={`${title}, ${subtitle}`}
     >
       <Stack
@@ -51,21 +51,32 @@ const LinkCard = ({
         style={{ width: "100%" }}
         fullHeight
       >
-        <Box padding={0} width="100%">
+        <Stack
+          direction="row"
+          childGap="0.5rem"
+          extraStyles={`align-items: center;`}
+        >
           <Styled.Title
             variant={titleVariant}
-            theme={themeValues}
+            themeValues={themeValues}
             margin={0}
-            isDisabled={disabled}
+            disabled={disabled}
           >
             {title}
           </Styled.Title>
-        </Box>
-        <Box padding={"0 0 40px"} width="100%">
+          {isExternalLink && (
+            <ExternalLinkIcon
+              linkColor={themeValues.color}
+              text={locatorSlug}
+              style={{ height: "1.125rem", width: "1.125rem" }}
+            />
+          )}
+        </Stack>
+        <Box padding={subtitlePadding} width="100%">
           <Styled.Subtitle
             variant="pS"
-            theme={themeValues}
-            isDisabled={disabled}
+            themeValues={themeValues}
+            disabled={disabled}
           >
             {subtitle}
           </Styled.Subtitle>

package/src/components/molecules/link-card/LinkCard.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as LinkCardStories from './LinkCard.stories.js';
+
+<Meta of={LinkCardStories} />
+
+<Title />
+
+The LinkCard is a variant of the Card component that has been built to display a title, subtitle, and optionally additional content like a badge or icon. When clicked, the onClick function is called. Typically this function is used to navigate the user within the application.
+
+Currently, the LinkCard is used in NFE on the /find page to assist users in finding accounts to link to their profile or to make one-time payments on. The LinkCard can take arbitrary child components for both its left and right content, which makes it very flexible and useful for any application where a grid of tiles is needed.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>