@thecb/components 11.11.0-beta.5 → 11.11.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.11.0-beta.5",
+  "version": "11.11.0-beta.8",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.js

@@ -50,8 +50,8 @@ const FormattedBankAccount = ({
         <Text
           variant="p"
           color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic;`}
-        >{`Autopay Enabled`}</Text>
+          extraStyles={`font-style: italic; font-size: .75rem;`}
+        >{`Autopay On`}</Text>
       )}
     </Stack>
   </BankItemWrapper>

package/src/components/atoms/formatted-bank-account/FormattedBankAccount.theme.js

@@ -1,7 +1,7 @@
-import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, SEA_GREEN } from "../../../constants/colors";
 
 const textColor = `${CHARADE_GREY}`;
-const autopayTextColor = `${REGENT_GREY}`;
+const autopayTextColor = `${SEA_GREEN}`;
 
 export const fallbackValues = {
   textColor,

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -55,8 +55,8 @@ const FormattedCreditCard = ({
         <Text
           variant="p"
           color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic;`}
-        >{`Autopay Enabled`}</Text>
+          extraStyles={`font-style: italic; font-size: .75rem;`}
+        >{`Autopay On`}</Text>
       )}
     </Stack>
   </CreditCardWrapper>

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.theme.js

@@ -1,7 +1,7 @@
-import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, SEA_GREEN } from "../../../constants/colors";
 
 const textColor = `${CHARADE_GREY}`;
-const autopayTextColor = `${REGENT_GREY}`;
+const autopayTextColor = `${SEA_GREEN}`;
 
 export const fallbackValues = {
   textColor,

package/src/components/molecules/editable-list/EditableList.js

@@ -23,6 +23,7 @@ const EditableList = ({
   titleWeight = "400",
   canAdd = true,
   addItem,
+  addItemDestination,
   removeItem,
   editItem,
   itemName,
@@ -168,6 +169,8 @@ const EditableList = ({
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
+              isLink={!!addItemDestination}
+              destination={addItemDestination}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}

package/src/components/molecules/radio-section/InnerRadioSection.js

@@ -159,7 +159,7 @@ const InnerRadioSection = ({
               <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
                 <Text
                   as="label"
-                  htmlFor={`radio-input-${idString(section)}`}
+                  htmlFor={`radio-${idString(section)}`}
                   color={CHARADE_GREY}
                 >
                   {section.title}

package/src/components/molecules/radio-section/RadioSection.stories.js

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import RadioSection from "./RadioSection";
+import { Box } from "../../atoms/layouts";
+
+const PaymentMethodSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      isSectionRequired={true}
+      sections={[
+        {
+          id: "checking-1234",
+          title: "Checking Account ending in 1234",
+          content: (
+            <Box padding="1rem">
+              <p>Checking account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Checking Account"
+        },
+        {
+          id: "savings-5678",
+          title: "Savings Account ending in 5678",
+          content: (
+            <Box padding="1rem">
+              <p>Savings account payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Savings Account"
+        },
+        {
+          id: "card-4321",
+          title: "Card ending in 4321",
+          content: (
+            <Box padding="1rem">
+              <p>Credit card payment details would appear here.</p>
+            </Box>
+          ),
+          required: true,
+          dataQa: "Credit Card"
+        }
+      ]}
+    />
+  );
+};
+
+const BasicSections = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "section-a",
+          title: "Section A",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section A</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-b",
+          title: "Section B",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section B</p>
+            </Box>
+          )
+        },
+        {
+          id: "section-c",
+          title: "Section C",
+          content: (
+            <Box padding="1rem">
+              <p>Content for section C</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const WithDisabledSection = () => {
+  const [openSection, setOpenSection] = useState("");
+  return (
+    <RadioSection
+      toggleOpenSection={setOpenSection}
+      openSection={openSection}
+      sections={[
+        {
+          id: "enabled-section",
+          title: "Enabled Option",
+          content: (
+            <Box padding="1rem">
+              <p>This option is selectable.</p>
+            </Box>
+          )
+        },
+        {
+          id: "disabled-section",
+          title: "Disabled Option",
+          disabled: true,
+          content: (
+            <Box padding="1rem">
+              <p>This option is disabled.</p>
+            </Box>
+          )
+        }
+      ]}
+    />
+  );
+};
+
+const meta = {
+  title: "Molecules/RadioSection",
+  component: RadioSection,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"]
+};
+
+export default meta;
+
+export const PaymentMethods = {
+  render: () => <PaymentMethodSections />
+};
+
+export const Basic = {
+  render: () => <BasicSections />
+};
+
+export const Disabled = {
+  render: () => <WithDisabledSection />
+};

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -54,7 +54,7 @@ const TermsAndConditionsModal = ({
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
       textDecoration={themeValues.modalLinkTextDecoration}
-      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer; min-height: 24px; line-height: 24px;`}
       role="button" // This should always be a "button" since it opens a modal
       className="modal-trigger"
     >

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -0,0 +1,110 @@
+import React from "react";
+import TermsAndConditionsModal from "./TermsAndConditionsModal";
+
+const TermsContent = () => (
+  <p>
+    By enrolling, you agree to the automatic payment terms. Payments will be
+    processed on the first of each month using your selected payment method. You
+    may cancel at any time by contacting support. See our{" "}
+    <a href="#">Privacy Policy</a> for more details.
+  </p>
+);
+
+const meta = {
+  title: "Molecules/TermsAndConditionsModal",
+  component: TermsAndConditionsModal,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    link: "Terms and Conditions",
+    title: "Terms and Conditions",
+    terms: <TermsContent />,
+    isOpen: false,
+    linkVariant: "p",
+    initialFocusSelector: "[name='Cancel']"
+  },
+  argTypes: {
+    link: {
+      description: "Text displayed for the modal trigger link",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms and Conditions" }
+      }
+    },
+    title: {
+      description: "Title displayed in the modal header",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Terms & Conditions" }
+      }
+    },
+    isOpen: {
+      description: "Whether the modal is currently open",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    acceptText: {
+      description:
+        "Text for the accept button. If omitted, only a close button is shown.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    linkVariant: {
+      description: "Text size variant for the trigger link",
+      control: "select",
+      options: ["p", "pL", "pS", "pXS", "pXXS", "pXL"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "p" }
+      }
+    },
+    initialFocusSelector: {
+      description: "CSS selector for the element that receives initial focus",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Default = {};
+
+export const SmallVariant = {
+  args: {
+    linkVariant: "pS"
+  }
+};
+
+export const ExtraSmallVariant = {
+  args: {
+    linkVariant: "pXS"
+  }
+};
+
+export const LargeVariant = {
+  args: {
+    linkVariant: "pL"
+  }
+};
+
+export const WithAcceptButton = {
+  args: {
+    acceptText: "I Accept"
+  }
+};
+
+export const CustomLinkText = {
+  args: {
+    link: "Learn More",
+    linkVariant: "pS"
+  }
+};

package/src/components/molecules/tooltip/Tooltip.js

@@ -1,11 +1,14 @@
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { createThemeValues } from "../../../util/themeUtils";
+import { WHITE } from "../../../constants/colors";
 import { ThemeContext } from "styled-components";
 import Text from "../../atoms/text";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { noop, arrowBorder } from "../../../util/general";
-import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
+import { fallbackValues } from "./Tooltip.theme";
+
+const TOOLTIP_THEME_SOURCE = "Popover";
 
 const Tooltip = ({
   tooltipID,
@@ -32,9 +35,12 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
-  arrowColor
+  customTriggerRole,
+  backgroundColor = WHITE
 }) => {
   const closeTimeoutRef = useRef(null);
+  const containerRef = useRef(null);
+
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
@@ -58,6 +64,87 @@ const Tooltip = ({
     }
   };
 
+  /**
+   * Renders the tooltip trigger element.
+   *
+   * When `hasCustomTrigger` is true, the provided child element is cloned and
+   * injected with the event handlers needed to control tooltip visibility:
+   *  - onFocus/onBlur: open and close for keyboard users
+   *  - onKeyDown: allows Escape to dismiss the tooltip
+   *  - onTouchStart: open on tap for touch/mobile users (onFocus is unreliable on touch)
+   *
+   * Mouse interactions (hover) are handled at the container level via
+   * onMouseEnter/onMouseLeave, so they do not need to be injected here.
+   *
+   * Any existing event handlers on the child are preserved and called first,
+   * so the child's own behavior is not overridden.
+   *
+   * When no custom trigger is provided, a default ButtonWithAction is rendered
+   * using `triggerText` and `triggerButtonVariant`.
+   */
+  const renderTrigger = () => {
+    if (hasCustomTrigger && !children) {
+      console.warn(
+        "Tooltip: children prop is required when hasCustomTrigger is true"
+      );
+    }
+
+    if (hasCustomTrigger && children) {
+      const child = React.Children.only(children);
+      // Capture the child's existing handlers before overwriting
+      const {
+        onFocus: childOnFocus,
+        onBlur: childOnBlur,
+        onKeyDown: childOnKeyDown,
+        onTouchStart: childOnTouchStart
+      } = child.props ?? {};
+
+      return React.cloneElement(child, {
+        tabIndex: child.props?.tabIndex ?? 0,
+        style: { cursor: `pointer`, ...child.props?.style },
+        onFocus: e => {
+          childOnFocus?.(e);
+          handleToggleTooltip(true);
+        },
+        onBlur: e => {
+          childOnBlur?.(e);
+          handleToggleTooltip(false);
+        },
+        onKeyDown: e => {
+          childOnKeyDown?.(e);
+          handleKeyDown(e);
+        },
+        onTouchStart: e => {
+          childOnTouchStart?.(e);
+          handleToggleTooltip(true);
+        },
+        role: customTriggerRole || child.props?.role,
+        "aria-describedby": tooltipID,
+        "data-qa": `tooltip-trigger-${tooltipID}`
+      });
+    } else {
+      return (
+        <ButtonWithAction
+          action={noop}
+          onKeyDown={handleKeyDown}
+          variant={triggerButtonVariant}
+          text={triggerText}
+          tabIndex={0}
+          ariaDescribedby={tooltipID}
+          onFocus={() => handleToggleTooltip(true)}
+          onBlur={() => handleToggleTooltip(false)}
+          onTouchStart={() => handleToggleTooltip(true)}
+          dataQa={`tooltip-trigger-${tooltipID}`}
+          extraStyles={`
+            color: ${themeValues.linkColor};
+            &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
+            &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
+            button, span, &:hover span { text-decoration: none; }
+          `}
+        />
+      );
+    }
+  };
   const handleMouseEnter = () => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
@@ -65,57 +152,35 @@ const Tooltip = ({
     }
     handleToggleTooltip(true);
   };
-
   const handleMouseLeave = () => {
     closeTimeoutRef.current = setTimeout(() => {
       handleToggleTooltip(false);
     }, 300);
   };
 
+  // Touch listener effect
   useEffect(() => {
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
+    if (!tooltipOpen) return;
+
+    const handleOutsideTouch = e => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setTooltipOpen(false);
       }
     };
-  }, []);
-
-  const renderTrigger = () => {
-    if (hasCustomTrigger && children) {
-      return React.cloneElement(React.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: () => handleToggleTooltip(true),
-        onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown,
-        tabIndex: "0",
-        style: { cursor: "pointer" }
-      });
-    }
+    document.addEventListener("touchstart", handleOutsideTouch);
+    return () => document.removeEventListener("touchstart", handleOutsideTouch);
+  }, [tooltipOpen]);
 
-    return (
-      <ButtonWithAction
-        action={noop}
-        aria-describedby={tooltipID}
-        onKeyDown={handleKeyDown}
-        variant={triggerButtonVariant}
-        onFocus={() => handleToggleTooltip(true)}
-        onBlur={() => handleToggleTooltip(false)}
-        onTouchStart={() => handleToggleTooltip(true)}
-        data-qa={`tooltip-trigger-${tooltipID}`}
-        text={triggerText}
-        tabIndex="0"
-        extraStyles={`
-          color: ${themeValues.linkColor};
-          &:hover { color: ${themeValues.hoverColor}; text-decoration: none;}
-          &:active, &:focus { color: ${themeValues.activeColor};text-decoration: none;}
-          button, span, &:hover span { text-decoration: none; }
-        `}
-      />
-    );
-  };
+  // Unmount cleanup only
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
 
   return (
     <Box
+      ref={containerRef}
       padding="0"
       extraStyles={`position: relative; ${containerExtraStyles}`}
       onMouseEnter={handleMouseEnter}
@@ -127,7 +192,7 @@ const Tooltip = ({
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={themeValues.borderColor}
+        background={backgroundColor}
         data-qa="tooltip-contents"
         extraStyles={`
           position: absolute;
@@ -137,6 +202,7 @@ const Tooltip = ({
           bottom: ${bottom};
           left: ${left};
           height: ${height};
+          color: ${themeValues.textColor};
           ${contentExtraStyles}
         `}
         boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
@@ -145,11 +211,11 @@ const Tooltip = ({
         minWidth={minWidth}
         maxWidth={maxWidth}
       >
-        {typeof content === "string" ? (
-          <Text color={themeValues.linkColor}>{content}</Text>
-        ) : (
+        {typeof content === "string" && content !== "" ? (
+          <Text color={themeValues.textColor}>{content}</Text>
+        ) : content !== undefined && content !== null ? (
           content
-        )}
+        ) : null}
         <Box
           padding="0"
           extraStyles={`
@@ -157,11 +223,7 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(
-              arrowColor || themeValues.borderColor,
-              arrowDirection,
-              "8px"
-            )};
+            ${arrowBorder(backgroundColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

package/src/components/molecules/tooltip/Tooltip.stories.js

@@ -3,7 +3,7 @@ import Tooltip from "./Tooltip";
 import Text from "../../atoms/text/Text";
 import AutopayOnIcon from "../../atoms/icons/AutopayOnIcon";
 import Box from "../../atoms/layouts/Box";
-import { SEA_GREEN } from "../../../constants/colors";
+import { SEA_GREEN, WHITE } from "../../../constants/colors";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -52,6 +52,15 @@ const meta = {
         defaultValue: { summary: false }
       }
     },
+    customTriggerRole: {
+      description:
+        "Role for the custom trigger element for accessibility purposes. Defaults to undefined.",
+      control: { type: "text" },
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     children: {
       description:
         "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
@@ -135,7 +144,7 @@ const meta = {
       description: "Maximum width of the tooltip content box.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "300px" }
+        defaultValue: { summary: "100%" }
       }
     },
     height: {
@@ -161,12 +170,12 @@ const meta = {
         defaultValue: { summary: '""' }
       }
     },
-    arrowColor: {
+    backgroundColor: {
       description:
-        "Override color for the tooltip arrow. Defaults to the theme border color when not provided.",
+        "Override backgroundColor for the tooltip arrow. Defaults to WHITE when not provided.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: undefined }
+        defaultValue: { summary: WHITE }
       }
     }
   }
@@ -215,21 +224,23 @@ export const RichTooltipContent = {
     tooltipID: "tooltip-node-content",
     contentExtraStyles: "background-color: #000000; color: #ffffff;",
     triggerText: "Rich content",
-    arrowColor: "black",
+    backgroundColor: "black",
     contentPosition: {
       top: "-126px",
       right: "auto",
       bottom: "auto",
       left: "-225px"
     },
-    content: (
-      <div style={{ padding: "8px" }}>
-        <strong>Bold title</strong>
-        <p>
-          With <em>an italic text detail</em> below.
-        </p>
-      </div>
-    )
+    content: React.createElement("div", { style: { padding: "8px" } }, [
+      React.createElement("strong", null, "Bold title"),
+      React.createElement(
+        "p",
+        null,
+        "With ",
+        React.createElement("em", null, "an italic text detail"),
+        " below."
+      )
+    ])
   }
 };