@thecb/components 11.11.0-beta.4 → 11.11.0-beta.7

package/src/components/molecules/registration-form/RegistrationForm.js

@@ -36,7 +36,8 @@ const RegistrationForm = ({
   };
   const emailErrorMessages = {
     [required.error]: "Email is required",
-    [isProbablyEmail.error]: "Invalid email address"
+    [isProbablyEmail.error]:
+      "Please enter a valid email address in the format user@example.com"
   };
   const passwordErrorMessages = {
     [required.error]: "Password is required",

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,12 @@
 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 = ({
   tooltipID,
@@ -32,7 +33,7 @@ const Tooltip = ({
     arrowBottom: "-8px",
     arrowLeft: "auto"
   },
-  arrowColor
+  backgroundColor = WHITE
 }) => {
   const closeTimeoutRef = useRef(null);
   const [tooltipOpen, setTooltipOpen] = useState(false);
@@ -40,7 +41,7 @@ const Tooltip = ({
   const themeValues = createThemeValues(
     themeContext,
     fallbackValues,
-    TOOLTIP_THEME_SOURCE
+    "Tooltip"
   );
 
   const { top, right, bottom, left } = contentPosition;
@@ -82,13 +83,28 @@ const Tooltip = ({
 
   const renderTrigger = () => {
     if (hasCustomTrigger && children) {
-      return React.cloneElement(React.Children.only(children), {
+      const child = React.Children.only(children);
+      const {
+        onFocus: childOnFocus,
+        onBlur: childOnBlur,
+        onKeyDown: childOnKeyDown
+      } = child.props ?? {};
+      return React.cloneElement(child, {
         "aria-describedby": tooltipID,
-        onFocus: () => handleToggleTooltip(true),
-        onBlur: () => handleToggleTooltip(false),
-        onKeyDown: handleKeyDown,
+        onFocus: e => {
+          childOnFocus?.(e);
+          handleToggleTooltip(true);
+        },
+        onBlur: e => {
+          childOnBlur?.(e);
+          handleToggleTooltip(false);
+        },
+        onKeyDown: e => {
+          childOnKeyDown?.(e);
+          handleKeyDown(e);
+        },
         tabIndex: "0",
-        style: { cursor: "pointer" }
+        style: { ...child.props?.style, cursor: "pointer" }
       });
     }
 
@@ -127,7 +143,7 @@ const Tooltip = ({
         role="tooltip"
         id={tooltipID}
         aria-hidden={!tooltipOpen}
-        background={themeValues.borderColor}
+        background={backgroundColor}
         data-qa="tooltip-contents"
         extraStyles={`
           position: absolute;
@@ -137,6 +153,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)"
@@ -146,7 +163,7 @@ const Tooltip = ({
         maxWidth={maxWidth}
       >
         {typeof content === "string" ? (
-          <Text color={themeValues.linkColor}>{content}</Text>
+          <Text color={themeValues.textColor}>{content}</Text>
         ) : (
           content
         )}
@@ -157,11 +174,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",
@@ -161,12 +161,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,7 +215,7 @@ 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",

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

@@ -1,19 +1,18 @@
 import {
-  MATISSE_BLUE,
-  PEACOCK_BLUE,
-  SAPPHIRE_BLUE
+  ROYAL_BLUE_VIVID,
+  ROYAL_BLUE,
+  CONGRESS_BLUE,
+  CHARADE_GREY
 } from "../../../constants/colors";
 
-const hoverColor = SAPPHIRE_BLUE;
-const activeColor = PEACOCK_BLUE;
-const linkColor = MATISSE_BLUE;
-const borderColor = "rgba(255, 255, 255, 0.85)";
-
-export const TOOLTIP_THEME_SOURCE = "Button";
+const hoverColor = ROYAL_BLUE;
+const activeColor = CONGRESS_BLUE;
+const linkColor = ROYAL_BLUE_VIVID;
+const textColor = CHARADE_GREY;
 
 export const fallbackValues = {
-  borderColor,
   linkColor,
   hoverColor,
-  activeColor
+  activeColor,
+  textColor
 };

package/src/components/molecules/tooltip/index.d.ts

@@ -26,7 +26,7 @@ export interface TooltipProps {
   height?: string;
   containerExtraStyles?: string;
   contentExtraStyles?: string;
-  arrowColor?: string;
+  backgroundColor?: string;
 }
 
 export const Tooltip: React.FC<Expand<TooltipProps> &

package/src/util/formats.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { createFormat } from "formatted-input";
 import Text from "../components/atoms/text";
-import { ASH_GREY, FIRE_YELLOW } from "../constants/colors";
+import { ASH_GREY, FIRE_YELLOW, STORM_GREY } from "../constants/colors";
 export const formatDelimiter = "_";
 
 export const phoneFormats = [
@@ -101,7 +101,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Exp Date {expireDate}
@@ -112,6 +113,7 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
+          fontSize=".75rem"
           color={FIRE_YELLOW}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
@@ -123,7 +125,8 @@ export const renderCardStatus = (
         <Text
           as={as}
           variant="pXS"
-          color={ASH_GREY}
+          fontSize=".75rem"
+          color={STORM_GREY}
           extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
         >
           Expired