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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.0-beta.2",
+  "version": "11.10.1-beta.1",
   "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,
+  hasCustomTrigger = false,
+  triggerText = "",
+  containerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  content = "",
+  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 (hasCustomTrigger && 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 />