@thecb/components 11.10.1-beta.2 → 11.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.10.1-beta.2",
+  "version": "11.10.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,11 +34,19 @@ 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[type] || cardBrands.default;
+    cardBrands[normalizedType] || cardBrands.default;
   return (
-    <span role="img" aria-label={label}>
+    <span>
       <IconComponent />
     </span>
   );

package/src/components/atoms/dropdown/Dropdown.js

@@ -13,7 +13,6 @@ import "core-js/proposals/relative-indexing-method";
 
 import {
   ERROR_COLOR,
-  GREY_CHATEAU,
   MINESHAFT_GREY,
   STORM_GREY,
   WHITE
@@ -35,7 +34,7 @@ const IconWrapper = styled.div`
 
 const DropdownContentWrapper = styled.div`
   transform-origin: 0 0;
-  border: 1px solid ${GREY_CHATEAU};
+  border: 1px solid ${STORM_GREY};
   border-radius: 2px;
   background-color: ${WHITE};
   padding: 8px 0 8px;
@@ -349,7 +348,7 @@ const Dropdown = ({
             ? ERROR_COLOR
             : isOpen
             ? themeValues.selectedColor
-            : GREY_CHATEAU
+            : STORM_GREY
         }
         dataQa={placeholder}
         extraStyles={

package/src/components/atoms/dropdown/DropdownIcon.js

@@ -2,6 +2,7 @@ import React from "react";
 
 const DropdownIcon = () => (
   <svg
+    aria-hidden="true"
     version="1.2"
     xmlns="http://www.w3.org/2000/svg"
     overflow="visible"

package/src/components/atoms/dropdown/DropdownIconV2.js

@@ -7,6 +7,7 @@ const DropdownIconV2 = ({
   ...props
 }) => (
   <svg
+    aria-hidden="true"
     width={width}
     height={height}
     viewBox={`0 0 ${width} ${height}`}

package/src/components/atoms/form-layouts/FormInput.js

@@ -148,7 +148,7 @@ const FormInput = ({
     <Stack childGap="0.25rem">
       <Box padding="0">
         {helperModal ? (
-          <Cluster justify="space-between" align="center">
+          <Cluster justify="space-between" align="center" overflow>
             {labelDisplayOverride ? (
               labelDisplayOverride
             ) : (

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

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

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

@@ -8,6 +8,8 @@ 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,6 +8,8 @@ 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="Card Payment"
+      aria-label="Credit card"
     >
       <rect width="36" height="24" rx="2" fill="#15749D" />
       <path

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

@@ -8,6 +8,8 @@ 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,6 +8,8 @@ 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,6 +8,8 @@ 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 ? "14px" : "18px")};
-    width: ${({ isMobile }) => (isMobile ? "22px" : "28px")};
+    height: ${({ isMobile }) => (isMobile ? "16px" : "24px")};
+    width: ${({ isMobile }) => (isMobile ? "24px" : "36px")};
     ${({ fade }) => fade && "opacity: 0.4;"}
     transition: opacity 0.3s ease;
   `;

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

@@ -2,23 +2,34 @@ 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 { TOOLTIP_THEME_SOURCE, fallbackValues } from "./Tooltip.theme";
+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)`
+};
 
 const Tooltip = ({
   tooltipID,
-  children,
-  hasCustomTrigger = false,
-  triggerText = "",
-  containerExtraStyles = "",
-  triggerButtonVariant = "smallGhost",
-  content = "",
-  contentExtraStyles = "",
-  minWidth = "250px",
-  maxWidth = "100%",
-  height = "auto",
+  hasIconTrigger = false,
+  IconTrigger = WarningIconXS,
+  iconHelpText = "Open the tooltip",
+  triggerText = "Open the tooltip",
+  tooltipContent = "The contents of the tooltip go here.",
   contentPosition = {
     top: "-110px",
     right: "auto",
@@ -32,7 +43,14 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
-  arrowColor
+  minWidth = "250px",
+  maxWidth = "300px",
+  height = "auto",
+  containerExtraStyles = "",
+  triggerExtraStyles = "",
+  triggerButtonVariant = "smallGhost",
+  contentExtraStyles = "",
+  contentBackgroundColor = WHITE
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -43,16 +61,23 @@ 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 = desiredState => {
-    if (tooltipOpen !== desiredState) {
-      setTooltipOpen(desiredState);
+  const handleToggleTooltip = desiredTooltipState => {
+    if (tooltipOpen !== desiredTooltipState) {
+      setTooltipOpen(desiredTooltipState);
     }
   };
 
-  const handleKeyDown = e => {
+  const handleKeyboardEvent = e => {
     if (e.key === "Escape") {
       handleToggleTooltip(false);
     }
@@ -80,73 +105,80 @@ const Tooltip = ({
     };
   }, []);
 
-  const renderTrigger = () => {
-    if (hasCustomTrigger && children) {
-      return React.cloneElement(React.Children.only(children), {
-        "aria-describedby": tooltipID,
-        onFocus: () => handleToggleTooltip(true),
-        onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown
-      });
-    }
-
-    return (
+  return (
+    <Box
+      ref={closeTimeoutRef}
+      padding="0"
+      extraStyles={`position: relative; ${containerExtraStyles}`}
+      onMouseEnter={() => handleMouseEnter(true)}
+      onMouseLeave={() => handleMouseLeave(false)}
+      data-qa="tooltip-container"
+    >
       <ButtonWithAction
-        action={noop}
         aria-describedby={tooltipID}
-        onKeyDown={handleKeyDown}
+        onKeyDown={handleKeyboardEvent}
         variant={triggerButtonVariant}
         onFocus={() => handleToggleTooltip(true)}
         onBlur={() => handleToggleTooltip(false)}
         onTouchStart={() => handleToggleTooltip(true)}
-        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()}
+        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>
       <Box
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={themeValues.borderColor}
+        background={contentBackgroundColor}
         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}
       >
-        {typeof content === "string" ? (
-          <Text color={themeValues.linkColor}>{content}</Text>
-        ) : (
-          content
-        )}
+        <Paragraph>{tooltipContent}</Paragraph>
         <Box
           padding="0"
           extraStyles={`
@@ -154,11 +186,7 @@ const Tooltip = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(
-              arrowColor || themeValues.borderColor,
-              arrowDirection,
-              "8px"
-            )};
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

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

@@ -6,19 +6,9 @@ import * as TooltipStories from './Tooltip.stories.js';
 
 <Title />
 
-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 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.
 
-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.
+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.
 
 <Controls />