@thecb/components 10.12.3-beta.0 → 10.12.3-beta.1

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

@@ -1,101 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,180 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-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>

package/src/components/molecules/login-form/LoginForm.mdx

@@ -1,16 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as LoginFormStories from './LoginForm.stories.js';
-
-<Meta of={LoginFormStories} />
-
-<Title />
-
-Renders a form for users to login to the NFE User Profile. Built with [FormInput](?path=/docs/atoms-form-layouts-forminput--docs).
-
-The user is required to submit an email and password. Both inputs are validated as required inputs, while the email is also checked against the `isProbablyEmail` validator.
-
-<Controls />
-
-
-<Story />

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

@@ -1,17 +0,0 @@
-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/module/Module.mdx

@@ -1,17 +0,0 @@
-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>

package/src/components/molecules/obligation/Obligation.mdx

@@ -1,23 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as ObligationStories from './Obligation.stories.js';
-
-<Meta of={ObligationStories} />
-
-<Title />
-
-The Obligation is a purpose built component to display user accounts on NFE's User Profile. The component consumers configuration provided by FCS to dictate its icon and type. NFE uses this configuration to assemble the description and subDescription from the obligation's custom attributes. A full detail of the structure of the configuration object is beyond the scope of this documentation, but an example can be found in the story code, and further detail is available on Confluence within the implementation guides used by solutions engineers.
-
-The component currently has two states. An active obligation uses data from the user lookup and FCS to provide account details and amount due as well as controls to interact with the obligation, such as for viewing account details or enabling/disabling autopay. 
-
-An inactive obligation is one whose data is not fully returned from lookup (this happens when our systems contain record of the account because of its association with a user, but the source system or source file ingested by FLS no longer provides that information, such as when a debt gets paid off). Inactive obligations look different and take some props to display a small amount of information to the user about what account used to be represented there.
-
-If the current user is a customer management admin accessing the profile via the RevM impersonation feature, then most of the interaction controls with the Obligation will be disabled.
-
-The Obligation was designed to be extensible to meet product needs in the future. New "modules" can be added to the modules directory that feature different collections of buttons or information display. Some work will need to be done to the main component code to support such additions.
-
-<Controls />
-
-<div style={{ marginBottom: "2em"}}>
-    <Story />
-</div>