@thecb/components 11.8.0-beta.2 → 11.8.0-beta.4

package/package.json

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

package/src/components/atoms/alert/Alert.theme.js

@@ -1,8 +1,10 @@
 import {
   APRICOT_ORANGE,
+  INFO_BLUE,
   BLUSH_RED,
   HINT_GREEN,
   ZEST_ORANGE,
+  MATISSE_BLUE,
   RAZZMATAZZ_RED,
   EMERALD_GREEN,
   MUSTARD_YELLOW,
@@ -14,20 +16,18 @@ import {
   THUNDERBIRD_RED,
   HAZE_GREEN,
   ZODIAC_BLUE,
-  SCIENCE_BLUE,
-  LUCKY_POINT,
-  HAWKES_BLUE
+  SCIENCE_BLUE
 } from "../../../constants/colors";
 
 const background = {
-  info: `${HAWKES_BLUE}`,
+  info: `${INFO_BLUE}`,
   warn: `${APRICOT_ORANGE}`,
   error: `${BLUSH_RED}`,
   success: `${HINT_GREEN}`
 };
 
 const border = {
-  info: `${LUCKY_POINT}`,
+  info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   error: `${RAZZMATAZZ_RED}`,
   success: `${EMERALD_GREEN}`

package/src/components/atoms/index.js

@@ -13,7 +13,6 @@ export { default as SortableTableHeading } from "./sortable-table-heading";
 export { default as CountryDropdown } from "./country-dropdown";
 export { default as Detail } from "./detail";
 export { default as DisplayBox } from "./display-box";
-export { default as DisplayCard } from "./display-card";
 export { default as Dropdown } from "./dropdown";
 export * from "./form-layouts";
 export { default as FormSelect } from "./form-select";

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -31,15 +31,20 @@ const PaymentButtonBar = ({
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
+  // cancel URLs are external (back to client system)
+  const handleCancel = () => {
+    window.location.href = cancelURL;
+  };
+
   const backButton =
     !!cancelURL && !!cancelText ? (
-      <ButtonWithLink
+      <ButtonWithAction
         text={cancelText}
-        url={cancelURL}
+        action={handleCancel}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
         dataQa={backButtonTestId || cancelText}
-        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
+        aria-label={`${cancelText}, navigate back to previous site`}
         role="link"
       />
     ) : (
@@ -50,7 +55,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
-          aria-labelledby="back-button"
+          aria-label={"Back, navigate to previous page"}
           role="link"
         />
       )

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

@@ -7,8 +7,8 @@ import ButtonWithAction from "../../atoms/button-with-action";
 import { noop } from "../../../util/general";
 import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Tooltip.theme";
-import IconAdd from "../../atoms/icons/IconAdd";
-import { BLACK } from "../../../constants/colors";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
+import { SELECTIVE_YELLOW } from "../../../constants/colors";
 
 const arrowBorder = (borderColor, direction, width = "8px") => {
   const angle = `${width} solid transparent`;
@@ -29,32 +29,36 @@ const Tooltip = ({
   triggerText = "",
   content = "",
   hasIconTrigger = false,
-  IconTrigger = IconAdd,
+  IconTrigger = WarningIconXS,
   iconHelpText = "",
-  tooltipID = 0,
-  extraStyles,
+  tooltipID = "tooltip-content",
+  extraStyles = "",
   textExtraStyles = "",
   minWidth = "250px",
   maxWidth = "300px",
   height = "auto",
-  position,
-  arrowPosition,
   arrowDirection = "down",
-  transform = "none",
+  arrowPosition = {
+    arrowTop: "auto",
+    arrowRight: "10px",
+    arrowBottom: "-8px",
+    arrowLeft: "auto"
+  },
+  position = {
+    top: "-110px",
+    right: "auto",
+    bottom: "auto",
+    left: "-225px"
+  },
+  iconColor = SELECTIVE_YELLOW,
   buttonExtraStyles,
   backgroundColor = "white",
   borderColor = "rgba(255, 255, 255, 0.85)",
-  tooltipExtraStyles
+  tooltipContentExtraStyles
 }) => {
   const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
-    position ?? {};
-  const {
-    arrowTop = "auto",
-    arrowRight = "10px",
-    arrowBottom = "-8px",
-    arrowLeft = "auto"
-  } = arrowPosition ?? {};
+  const { top, right, bottom, left } = position ?? {};
+  const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition ?? {};
 
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
@@ -89,8 +93,10 @@ const Tooltip = ({
       >
         {hasIconTrigger && (
           <>
-            <IconTrigger stroke={BLACK} />
-            <Box padding="0" srOnly>
+            <Box aria-label="Trigger Popover">
+              <IconTrigger color={iconColor} />
+            </Box>
+            <Box padding="0" srOnly aria-hidden="true">
               <Text>{iconHelpText}</Text>
             </Box>
           </>
@@ -107,6 +113,7 @@ const Tooltip = ({
         role="tooltip"
         minWidth={minWidth}
         maxWidth={maxWidth}
+        aria-hidden={!tooltipOpen}
         extraStyles={`
           display: ${tooltipOpen ? "block" : "none"}; 
           position: absolute; 
@@ -115,8 +122,7 @@ const Tooltip = ({
           bottom: ${bottom}; 
           left: ${left};
           height: ${height};
-          transform: ${transform};
-          ${tooltipExtraStyles};
+          ${tooltipContentExtraStyles};
           `}
       >
         <Paragraph>{content}</Paragraph>

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

@@ -1,6 +1,5 @@
 import Tooltip from "./Tooltip";
-import IconAdd from "../../atoms/icons/IconAdd";
-
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
 export default {
   title: "Molecules/Tooltip",
   component: Tooltip,
@@ -13,7 +12,7 @@ export default {
     triggerText: "",
     content: "",
     hasIconTrigger: false,
-    IconTrigger: IconAdd,
+    IconTrigger: WarningIconXS,
     iconHelpText: "",
     tooltipID: 0,
     extraStyles: undefined,
@@ -59,7 +58,7 @@ export default {
         "The icon component to display. Requires hasIcon to be true.",
       table: {
         type: { summary: "React Component" },
-        defaultValue: { summary: "IconAdd" }
+        defaultValue: { summary: "WarningIconXS" }
       }
     },
     iconHelpText: {
@@ -186,7 +185,7 @@ export const BasicTooltip = {
 export const IconTooltip = {
   args: {
     hasIconTrigger: true,
-    IconTrigger: IconAdd,
+    IconTrigger: WarningIconXS,
     content:
       "Contact support at 1-800-CTY-VILL for help with your account balance."
   }

package/src/deprecated/icons/AlertInfoIcon.js

@@ -31,7 +31,7 @@ export const AlertInfoIcon = () => (
           </mask>
           <use
             id="background-2"
-            fill="#281978"
+            fill="#15749d"
             fillRule="nonzero"
             xlinkHref="#path-1"
           ></use>

package/src/components/atoms/display-card/DisplayCard.js

@@ -1,127 +0,0 @@
-import React, { Fragment } from "react";
-import Stack from "../layouts/Stack";
-import Box from "../layouts/Box";
-import Text from "../text";
-import Paragraph from "../paragraph";
-import Cluster from "../layouts/Cluster";
-import ButtonWithAction from "../button-with-action";
-import ButtonWithLink from "../button-with-link";
-import { WHITE, CHARADE_GREY, STORM_GREY } from "../../../constants/colors";
-import Popover from "../../molecules/popover";
-import Tooltip from "../../molecules/tooltip";
-import { Link } from "react-router-dom";
-
-const DisplayCard = ({
-  title,
-  item,
-  buttonText,
-  buttonAction,
-  url,
-  link = false,
-  linkText,
-  linkURL,
-  linkExtraStyles = "",
-  helpText,
-  hasTooltip = false,
-  tooltipTriggerText = "",
-  tooltipContent = "",
-  tooltipPosition = {
-    top: "auto",
-    bottom: "calc(100% + 0.25rem)",
-    left: "auto",
-    right: "0"
-  },
-  tooltipArrowPosition = {
-    arrowBottom: "-0.5rem",
-    arrowRight: "0.625rem",
-    arrowTop: "auto",
-    arrowLeft: "auto"
-  },
-  tooltipArrowDirection,
-  tooltipExtraStyles,
-  tooltipTextExtraStyles = `max-width: 300px;`,
-  hasPopover = false,
-  popoverTriggerText = "",
-  popoverContent = "",
-  popoverExtraStyles,
-  popoverTextExtraStyles
-}) => (
-  <Box padding="0 0 16px">
-    <Stack childGap="0rem">
-      <Box padding="0 0 8px 0">
-        <Cluster justify="space-between" align="center" overflow>
-          <Paragraph
-            variant="pL"
-            color={CHARADE_GREY}
-            extraStyles={`letter-spacing: 0.29px`}
-          >
-            {title}
-          </Paragraph>
-          {hasPopover && (
-            <Popover
-              triggerText={popoverTriggerText}
-              content={popoverContent}
-              popoverExtraStyles={popoverExtraStyles}
-              popoverTextExtraStyles={popoverTextExtraStyles}
-            />
-          )}
-          {hasTooltip && (
-            <Tooltip
-              triggerText={tooltipTriggerText}
-              content={tooltipContent}
-              textExtraStyles={tooltipTextExtraStyles}
-              position={tooltipPosition}
-              arrowPosition={tooltipArrowPosition}
-              arrowDirection={tooltipArrowDirection}
-              tooltipExtraStyles={tooltipExtraStyles}
-            />
-          )}
-        </Cluster>
-      </Box>
-      <Box padding="0">
-        <Box
-          padding="24px"
-          borderSize="1px"
-          borderRadius="4px"
-          background={WHITE}
-          boxShadow="0px 2px 14px 0px rgb(246, 246, 249),
-            0px 3px 8px 0px rgb(202, 206, 216)"
-        >
-          <Cluster justify="space-between" align="center">
-            <Text color={CHARADE_GREY}>{item}</Text>
-            {linkText && linkURL && (
-              <Link to={linkURL} extraStyles={linkExtraStyles}>
-                {linkText}
-              </Link>
-            )}
-            {link ? (
-              <ButtonWithLink
-                text={buttonText}
-                url={url}
-                variant="smallGhost"
-                dataQa={buttonText}
-                extraStyles={`min-width: 0;`}
-              />
-            ) : buttonAction ? (
-              <ButtonWithAction
-                text={buttonText}
-                action={buttonAction}
-                variant="smallGhost"
-                dataQa={buttonText}
-                extraStyles={`min-width: 0;`}
-              />
-            ) : helpText ? (
-              <Text color={STORM_GREY} extraStyles={`font-style: italic;`}>
-                {helpText}
-              </Text>
-            ) : (
-              <Fragment />
-            )}
-          </Cluster>
-        </Box>
-      </Box>
-    </Stack>
-  </Box>
-);
-
-export default DisplayCard;

package/src/components/atoms/display-card/DisplayCard.mdx

@@ -1,13 +0,0 @@
-import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
-
-import * as DisplayCardStories from './DisplayCard.stories.js';
-
-<Meta of={DisplayCardStories} />
-
-<Title />
-
-The DisplayCard component offers a consistent box style for text content. A link, button, or "help" text is also supported, which will be displayed with the text in a flexbox with any extra space rendered in-between. DisplayCard also supports an optional tooltip with the Popover molecule, and a title.
-
-Note: DisplyCard is _not_ themeable or styleable except for the Popover box.
-
-<Story />

package/src/components/atoms/display-card/DisplayCard.stories.js

@@ -1,274 +0,0 @@
-import DisplayCard from "./DisplayCard";
-import React from "react";
-import { fn } from "@storybook/test";
-
-const meta = {
-  title: "Atoms/DisplayCard",
-  component: DisplayCard,
-  parameters: {
-    layout: "centered",
-    controls: { expanded: true }
-  },
-  tags: ["!autodocs"],
-  args: {
-    title: "Display Card",
-    item: "Item text",
-    buttonText: undefined,
-    buttonAction: undefined,
-    url: undefined,
-    link: false,
-    linkText: undefined,
-    linkURL: undefined,
-    linkExtraStyles: "",
-    helpText: undefined,
-    hasTooltip: false,
-    tooltipTriggerText: "",
-    tooltipContent: "",
-    tooltipPosition: undefined,
-    tooltipArrowPosition: undefined,
-    tooltipArrowDirection: undefined,
-    tooltipExtraStyles: undefined,
-    tooltipTextExtraStyles: undefined,
-    hasPopover: false,
-    popoverTriggerText: "",
-    popoverContent: "",
-    popoverExtraStyles: undefined,
-    popoverTextExtraStyles: undefined
-  },
-  argTypes: {
-    title: {
-      description: "Text that appears above the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    item: {
-      description: "Text that appears in the box",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonText: {
-      description: "Text for the button or link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    buttonAction: {
-      description: "Callback function for the button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    url: {
-      description: "URL for the link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    link: {
-      description:
-        "Whether or not to display a link, uses the `url` and `buttonText` props",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    linkText: {
-      description:
-        "Text for the inline react-router Link rendered next to the item",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    linkURL: {
-      description: "Route path for the inline react-router Link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    linkExtraStyles: {
-      description: "Extra CSS styles to apply to the link",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    helpText: {
-      description:
-        "Text rendered to the right of the `item` text and styled as italic.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    hasTooltip: {
-      description: "Whether or not to render Tooltip component",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    tooltipTriggerText: {
-      description: "Text that triggers the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    tooltipContent: {
-      description: "Content displayed inside the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    tooltipPosition: {
-      description:
-        "Object with top/right/bottom/left values for tooltip position relative to trigger",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipArrowPosition: {
-      description:
-        "Object with arrowTop/arrowRight/arrowBottom/arrowLeft values for the tooltip arrow",
-      table: {
-        type: { summary: "Object" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipArrowDirection: {
-      description: "Direction the tooltip arrow points",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipExtraStyles: {
-      description: "Extra CSS styles to apply to the tooltip",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    tooltipTextExtraStyles: {
-      description: "Extra CSS styles for the tooltip trigger text",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "max-width: 300px;" }
-      }
-    },
-    hasPopover: {
-      description: "Whether or not to render Popover component",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: false }
-      }
-    },
-    popoverTriggerText: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverContent: {
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "" }
-      }
-    },
-    popoverExtraStyles: {
-      description: "Styles for the Box that wraps the Popover content.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    popoverTextExtraStyles: {
-      description: "Prop passed to the Popover component, but is not used.",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
-
-export default meta;
-
-export const Basic = {
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithExternalLink = {
-  args: {
-    buttonText: "Link",
-    url: "https://example.com",
-    link: true
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithRouterLink = {
-  args: {
-    linkText: "View details",
-    linkURL: "#",
-    linkExtraStyles: "text-decoration: none;"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithButtonAction = {
-  args: {
-    buttonText: "Button",
-    buttonAction: fn()
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithHelpText = {
-  parameters: {
-    layout: "padded"
-  },
-  args: {
-    helpText: "Help!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopover = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithTooltip = {
-  args: {
-    hasTooltip: true,
-    tooltipTriggerText: "What's this?",
-    tooltipContent: "This is example tooltip content!"
-  },
-  render: args => <DisplayCard {...args} />
-};
-
-export const WithPopoverAndExtraStyles = {
-  args: {
-    hasPopover: true,
-    popoverTriggerText: "Popover",
-    popoverContent: "This is example popover content!",
-    popoverExtraStyles: "padding: 4px 8px"
-  },
-  render: args => <DisplayCard {...args} />
-};

package/src/components/atoms/display-card/index.js

@@ -1,3 +0,0 @@
-import DisplayCard from "./DisplayCard";
-
-export default DisplayCard;