@thecb/components 11.10.0-beta.2 → 11.10.1-beta.0

package/package.json

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

package/src/components/atoms/card-type/CardType.js

@@ -34,17 +34,9 @@ const cardBrands = {
   }
 };
 
-const normalizeType = type => {
-  if (!type) return undefined;
-  const lower = type.toLowerCase();
-  if (lower === "mastercard") return "master_card";
-  return lower;
-};
-
 const CardType = ({ type, size = "small" }) => {
-  const normalizedType = normalizeType(type);
   const { label, [size]: IconComponent } =
-    cardBrands[normalizedType] || cardBrands.default;
+    cardBrands[type] || cardBrands.default;
   return (
     <span role="img" aria-label={label}>
       <IconComponent />

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

@@ -1,5 +1,5 @@
-import React, { Fragment, useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+import React, { Fragment } from "react";
+import styled from "styled-components";
 import CardType from "../card-type";
 import Text from "../text";
 import { Box, Stack } from "../layouts";
@@ -15,7 +15,7 @@ export const CreditCardWrapper = styled.div`
 
 export const CCIconWrapper = styled.div`
   margin-right: 16px;
-  width: 36px;
+  width: 30px;
   height: auto;
   display: flex;
 `;
@@ -27,18 +27,16 @@ const FormattedCreditCard = ({
   expireDate,
   expirationStatus,
   themeValues
-}) => {
-  const { isMobile } = useContext(ThemeContext);
-  return (
+}) => (
   <CreditCardWrapper>
     <CCIconWrapper>
-      <CardType type={type} size={isMobile ? "small" : "large"} />
+      <CardType type={type} />
     </CCIconWrapper>
     <Stack childGap="0">
       <Box padding="0">
         <Text
           variant="p"
-          padding="0"
+          padding="0 0 0 8px"
           color={themeValues.textColor}
           textAlign="left"
           extraStyles={`display: inline-block;`}
@@ -60,8 +58,7 @@ const FormattedCreditCard = ({
       )}
     </Stack>
   </CreditCardWrapper>
-  );
-};
+);
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",

package/src/components/atoms/icons/AmExSmallIcon.js

@@ -8,8 +8,6 @@ const AmExSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="American Express"
     >
       <g clipPath="url(#clip0_3693_1095)">
         <g clipPath="url(#clip1_3693_1095)">

package/src/components/atoms/icons/DiscoverSmallIcon.js

@@ -8,8 +8,6 @@ const DiscoverSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Discover"
     >
       <g clipPath="url(#clip0_3818_267)">
         <path

package/src/components/atoms/icons/GenericCardLarge.js

@@ -9,7 +9,7 @@ const GenericCardLarge = () => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       role="img"
-      aria-label="Credit card"
+      aria-label="Card Payment"
     >
       <rect width="36" height="24" rx="2" fill="#15749D" />
       <path

package/src/components/atoms/icons/GenericSmallIcon.js

@@ -8,8 +8,6 @@ const GenericSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Credit card"
     >
       <rect width="24" height="16" rx="2" fill="#15749D" />
       <path

package/src/components/atoms/icons/MasterCardSmallIcon.js

@@ -8,8 +8,6 @@ const MasterCardSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Mastercard"
     >
       <rect width="24" height="16" rx="1" fill="#F6F6F9" />
       <path

package/src/components/atoms/icons/VisaSmallIcon.js

@@ -8,8 +8,6 @@ const VisaSmallIcon = () => {
       viewBox="0 0 24 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      role="img"
-      aria-label="Visa"
     >
       <path
         fillRule="evenodd"

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

@@ -69,8 +69,8 @@ const InnerRadioSection = ({
   `;
 
   const RightIcon = styled.img`
-    height: ${({ isMobile }) => (isMobile ? "16px" : "24px")};
-    width: ${({ isMobile }) => (isMobile ? "24px" : "36px")};
+    height: ${({ isMobile }) => (isMobile ? "14px" : "18px")};
+    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
     ${({ fade }) => fade && "opacity: 0.4;"}
     transition: opacity 0.3s ease;
   `;

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

@@ -2,34 +2,23 @@ import React, { useContext, useEffect, useRef, useState } from "react";
 import { createThemeValues } from "../../../util/themeUtils";
 import { ThemeContext } from "styled-components";
 import Text from "../../atoms/text";
-import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { noop, arrowBorder } from "../../../util/general";
-import WarningIconXS from "../../atoms/icons/WarningIconXS";
-import {
-  MATISSE_BLUE,
-  PEACOCK_BLUE,
-  SAPPHIRE_BLUE,
-  WHITE
-} from "../../../constants/colors";
-
-const TOOLTIP_THEME_SOURCE = "Popover";
-
-const fallbackValues = {
-  hoverColor: SAPPHIRE_BLUE,
-  activeColor: PEACOCK_BLUE,
-  popoverTriggerColor: MATISSE_BLUE,
-  borderColor: `rgba(255, 255, 255, 0.85)`
-};
+import { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
 
 const Tooltip = ({
   tooltipID,
-  hasIconTrigger = false,
-  IconTrigger = WarningIconXS,
-  iconHelpText = "Open the tooltip",
-  triggerText = "Open the tooltip",
-  tooltipContent = "The contents of the tooltip go here.",
+  children,
+  triggerText = "",
+  containerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  content = "",
+  contentBackgroundColor = fallbackValues.borderColor,
+  contentExtraStyles = "",
+  minWidth = "250px",
+  maxWidth = "100%",
+  height = "auto",
   contentPosition = {
     top: "-110px",
     right: "auto",
@@ -42,15 +31,7 @@ const Tooltip = ({
     arrowRight: "10px",
     arrowBottom: "-8px",
     arrowLeft: "auto"
-  },
-  minWidth = "250px",
-  maxWidth = "300px",
-  height = "auto",
-  containerExtraStyles = "",
-  triggerExtraStyles = "",
-  triggerButtonVariant = "smallGhost",
-  contentExtraStyles = "",
-  contentBackgroundColor = WHITE
+  }
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -61,23 +42,16 @@ const Tooltip = ({
     TOOLTIP_THEME_SOURCE
   );
 
-  const {
-    borderColor,
-    popoverTriggerColor: tooltipTriggerColor,
-    hoverColor,
-    activeColor
-  } = themeValues;
-
   const { top, right, bottom, left } = contentPosition;
   const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition;
 
-  const handleToggleTooltip = desiredTooltipState => {
-    if (tooltipOpen !== desiredTooltipState) {
-      setTooltipOpen(desiredTooltipState);
+  const handleToggleTooltip = desiredState => {
+    if (tooltipOpen !== desiredState) {
+      setTooltipOpen(desiredState);
     }
   };
 
-  const handleKeyboardEvent = e => {
+  const handleKeyDown = e => {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
@@ -105,80 +79,73 @@ const Tooltip = ({
     };
   }, []);
 
-  return (
-    <Box
-      ref={closeTimeoutRef}
-      padding="0"
-      extraStyles={`position: relative; ${containerExtraStyles}`}
-      onMouseEnter={() => handleMouseEnter(true)}
-      onMouseLeave={() => handleMouseLeave(false)}
-      data-qa="tooltip-container"
-    >
+  const renderTrigger = () => {
+    if (children) {
+      return React.cloneElement(React.Children.only(children), {
+        "aria-describedby": tooltipID,
+        onFocus: () => handleToggleTooltip(true),
+        onBlur: () => handleToggleTooltip(false),
+        onKeyDown: handleKeyDown
+      });
+    }
+
+    return (
       <ButtonWithAction
+        action={noop}
         aria-describedby={tooltipID}
-        onKeyDown={handleKeyboardEvent}
+        onKeyDown={handleKeyDown}
         variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
         onTouchStart={() => handleToggleTooltip(true)}
-        data-qa="tooltip-trigger"
-        contentOverride={true}
-      >
-        {hasIconTrigger === true && (
-          <>
-            <Box aria-label="Open tooltip">
-              <IconTrigger color={tooltipTriggerColor} />
-            </Box>
-            <Box padding="0" srOnly>
-              <Text>{iconHelpText}</Text>
-            </Box>
-          </>
-        )}
-        {hasIconTrigger === false && (
-          <Text
-            color={tooltipTriggerColor}
-            extraStyles={`
-              color: ${tooltipTriggerColor};
-              &:visited {
-                color: ${tooltipTriggerColor};
-              }
-              &:hover {
-                color: ${hoverColor}; 
-              }
-              &:active,
-              &:focus {
-                color: ${activeColor}; 
-              }
-              ${triggerExtraStyles};
-            `}
-          >
-            {triggerText}
-          </Text>
-        )}
-      </ButtonWithAction>
+        data-qa={`tooltip-trigger-${tooltipID}`}
+        text={triggerText}
+        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; }
+        `}
+      />
+    );
+  };
+
+  return (
+    <Box
+      padding="0"
+      extraStyles={`position: relative; ${containerExtraStyles}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-qa={`${tooltipID}-container`}
+    >
+      {renderTrigger()}
       <Box
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={contentBackgroundColor}
+        background={themeValues.borderColor}
         data-qa="tooltip-contents"
         extraStyles={`
           position: absolute;
           display: ${tooltipOpen ? "block" : "none"};
-          top: ${top}; 
+          top: ${top};
           right: ${right};
           bottom: ${bottom};
           left: ${left};
           height: ${height};
           ${contentExtraStyles}
-          `}
-        boxShadow={`0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)`}
-        border={`1px solid transparent`}
+        `}
+        boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+        border="1px solid transparent"
         borderRadius="4px"
         minWidth={minWidth}
         maxWidth={maxWidth}
       >
-        <Paragraph>{tooltipContent}</Paragraph>
+        {typeof content === "string" ? (
+          <Text color={themeValues.linkColor}>{content}</Text>
+        ) : (
+          content
+        )}
         <Box
           padding="0"
           extraStyles={`
@@ -186,7 +153,7 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(borderColor, arrowDirection, "8px")};
+            ${arrowBorder(themeValues.borderColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

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

@@ -6,9 +6,19 @@ import * as TooltipStories from './Tooltip.stories.js';
 
 <Title />
 
-The Tooltip is a fully accessible tooltip widget that displays additional information when a user hovers over or focuses on a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `IconTrigger` prop. The trigger is rendered as a `ButtonWithAction` with the `smallGhost` variant.
+Tooltip is an accessible tooltip component implementing the [WAI-ARIA Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). It displays supplemental information when the user hovers over or focuses on a trigger element.
 
-The Tooltip uses the WAI-ARIA tooltip pattern (`role="tooltip"` and `aria-describedby`) for accessibility. It can be positioned anywhere around the trigger element using the position props. Content and style of the tooltip are customizable.
+The trigger can be either:
+- **Custom children**: Pass any single React element as `children`. It will receive `aria-describedby`, focus, blur, and keyboard handlers automatically.
+- **Default button**: When no `children` are provided, a `ButtonWithAction` is rendered using the `triggerText` prop.
+
+The tooltip content (`content` prop) accepts a plain string or a React node for rich content. It is styled similarly to the Popover component, including an arrow pointing toward the trigger.
+
+### Accessibility
+- The trigger element has `aria-describedby` referencing the tooltip.
+- The tooltip container has `role="tooltip"`.
+- Pressing **Escape** dismisses the tooltip.
+- Focus stays on the trigger while the tooltip is displayed.
 
 <Controls />
 

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

@@ -1,6 +1,5 @@
 import React from "react";
 import Tooltip from "./Tooltip";
-import WarningIconXS from "../../atoms/icons/WarningIconXS";
 
 const meta = {
   title: "Molecules/Tooltip",
@@ -18,11 +17,8 @@ const meta = {
   ],
   args: {
     tooltipID: "tooltip-id",
-    hasIconTrigger: false,
-    IconTrigger: WarningIconXS,
-    iconHelpText: "Open the tooltip",
     triggerText: "Hover me",
-    tooltipContent: "The contents of the tooltip go here.",
+    content: "This is the tooltip content.",
     contentPosition: {
       top: "-110px",
       right: "auto",
@@ -40,71 +36,56 @@ const meta = {
     maxWidth: "300px",
     height: "auto",
     containerExtraStyles: "",
-    triggerExtraStyles: "",
-    triggerButtonVariant: "smallGhost",
-    contentBackgroundColor: "",
-    contentExtraStyles: ""
+    contentExtraStyles: "",
+    contentBackgroundColor: ""
   },
   argTypes: {
-    tooltipID: {
+    children: {
       description:
-        "Unique ID linking the trigger to the tooltip content for accessibility",
+        "Optional trigger element. When provided, it replaces the default ButtonWithAction trigger. The child element will receive aria-describedby, focus, blur, and keydown handlers.",
       table: {
-        type: { summary: "string" },
+        type: { summary: "React.ReactNode" },
         defaultValue: { summary: undefined }
       }
     },
-    hasIconTrigger: {
+    content: {
       description:
-        "When true, renders an icon as the tooltip trigger instead of text",
-      control: { type: "boolean" },
+        "The content displayed inside the tooltip. Can be a string or a React node/element.",
       table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
+        type: { summary: "string | React.ReactNode" },
+        defaultValue: { summary: '""' }
       }
     },
-    IconTrigger: {
+    tooltipID: {
       description:
-        "Icon component rendered as the trigger when hasIconTrigger is true",
-      table: {
-        type: { summary: "React Component" },
-        defaultValue: { summary: "WarningIconXS" }
-      }
-    },
-    iconHelpText: {
-      description: "Screen reader text for the icon trigger",
+        "Unique ID for the tooltip content element. Used as the aria-describedby value on the trigger.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "Open the tooltip" }
+        defaultValue: { summary: undefined }
       }
     },
     triggerText: {
       description:
-        "Text rendered as the tooltip trigger when hasIconTrigger is false",
-      table: {
-        type: { summary: "string | JSX.Element" },
-        defaultValue: { summary: "Open the tooltip" }
-      }
-    },
-    tooltipContent: {
-      description: "The content displayed inside the tooltip",
+        "Text shown in the default ButtonWithAction trigger. Not needed when children are provided.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "The contents of the tooltip go here." }
+        defaultValue: { summary: '""' }
       }
     },
     contentPosition: {
       description:
-        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger",
+        "CSS position values (top, right, bottom, left) for the tooltip content box relative to the trigger.",
       table: {
         type: { summary: "object" },
         defaultValue: {
-          summary: `{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }`
+          summary:
+            '{ top: "-110px", right: "auto", bottom: "auto", left: "-225px" }'
         }
       }
     },
     arrowDirection: {
-      description: "Direction the tooltip arrow points (up, down, left, right)",
+      description:
+        "Direction the tooltip arrow points (up, down, left, right).",
       control: { type: "select" },
       options: ["up", "down", "left", "right"],
       table: {
@@ -114,30 +95,31 @@ const meta = {
     },
     arrowPosition: {
       description:
-        "CSS position values (arrowTop, arrowRight, arrowBottom, arrowLeft) for the arrow element",
+        "CSS position values (arrowTop, arrowRight, arrowBottom, arrowLeft) for the arrow element.",
       table: {
         type: { summary: "object" },
         defaultValue: {
-          summary: `{ arrowTop: "auto", arrowRight: "10px", arrowBottom: "-8px", arrowLeft: "auto" }`
+          summary:
+            '{ arrowTop: "auto", arrowRight: "10px", arrowBottom: "-8px", arrowLeft: "auto" }'
         }
       }
     },
     minWidth: {
-      description: "Minimum width of the tooltip content box",
+      description: "Minimum width of the tooltip content box.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "250px" }
       }
     },
     maxWidth: {
-      description: "Maximum width of the tooltip content box",
+      description: "Maximum width of the tooltip content box.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "300px" }
       }
     },
     height: {
-      description: "Height of the tooltip content box",
+      description: "Height of the tooltip content box.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: "auto" }
@@ -145,25 +127,25 @@ const meta = {
     },
     containerExtraStyles: {
       description:
-        "Additional CSS string applied to the tooltip container element",
+        "Additional CSS string applied to the tooltip container element.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    triggerExtraStyles: {
-      description: "Additional CSS string applied to the text trigger element",
+    contentExtraStyles: {
+      description:
+        "Additional CSS string applied to the tooltip content element.",
       table: {
         type: { summary: "string" },
         defaultValue: { summary: '""' }
       }
     },
-    triggerButtonVariant: {
-      description:
-        "Button variant applied to the trigger ButtonWithAction element",
+    contentBackgroundColor: {
+      description: "Background color of the tooltip content box.",
       table: {
         type: { summary: "string" },
-        defaultValue: { summary: "smallGhost" }
+        defaultValue: { summary: "white" }
       }
     }
   }
@@ -174,15 +156,57 @@ export default meta;
 export const Basic = {
   args: {
     tooltipID: "tooltip-basic",
-    triggerText: "How basic is this?",
-    tooltipContent:
+    triggerText: "What is this?",
+    content:
       "This is a detailed explanation of a feature or term that the user may need more context about."
   }
 };
 
+export const WithChildren = {
+  args: {
+    tooltipID: "tooltip-children",
+    content: "Extra information about this label.",
+    contentPosition: {
+      top: "-84px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    }
+  },
+  render: args => (
+    <Tooltip {...args}>
+      <button type="button">Custom trigger</button>
+    </Tooltip>
+  )
+};
+
+export const RichTooltipContent = {
+  args: {
+    tooltipID: "tooltip-node-content",
+    contentBackgroundColor: "#ffffff",
+    triggerText: "Rich content",
+    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>
+    )
+  }
+};
+
 export const TooltipBelow = {
   args: {
     tooltipID: "tooltip-below",
+    triggerText: "Hover for info",
+    content: "This tooltip appears below the trigger.",
     contentPosition: {
       top: "50px",
       right: "auto",
@@ -202,6 +226,8 @@ export const TooltipBelow = {
 export const TooltipRight = {
   args: {
     tooltipID: "tooltip-right",
+    triggerText: "Hover for info",
+    content: "This tooltip appears to the right.",
     contentPosition: {
       top: "-40px",
       right: "auto",
@@ -217,21 +243,3 @@ export const TooltipRight = {
     }
   }
 };
-
-export const CustomContent = {
-  args: {
-    tooltipID: "tooltip-custom-content",
-    triggerText: "What is this?",
-    tooltipContent:
-      "This is a detailed explanation of a feature or term that the user may need more context about."
-  }
-};
-
-export const CustomWidth = {
-  args: {
-    tooltipID: "tooltip-custom-width",
-    minWidth: "150px",
-    maxWidth: "200px",
-    tooltipContent: "A narrower tooltip."
-  }
-};