@thecb/components 11.8.1-beta.0 → 11.8.1

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = ({ strokeWidth = 1 }) => (
+const IconAdd = ({ stroke = "none", strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = ({ strokeWidth = 1 }) => (
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
+    <g fill="none" fillRule="evenodd" stroke={stroke} strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">

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/atoms/password-requirements/PasswordRequirements.js

@@ -16,7 +16,7 @@ import {
 import {
   MINESHAFT_GREY,
   ATHENS_GREY,
-  FOREST_GREEN,
+  SEA_GREEN,
   RAZZMATAZZ_RED
 } from "../../../constants/colors";
 
@@ -31,8 +31,8 @@ const PasswordRequirements = ({ password, isMobile }) => {
       color: RAZZMATAZZ_RED
     },
     [INPUT_STATE_VALID]: {
-      icon: <IconValid margin="0 0.5rem 0 0" />,
-      color: FOREST_GREEN
+      icon: <IconValid margin="0 0.5rem 0 0" bgFill={SEA_GREEN} />,
+      color: SEA_GREEN
     }
   };
 

package/src/components/molecules/index.js

@@ -47,3 +47,4 @@ export { default as MultipleSelectFilter } from "./multiple-select-filter";
 export { default as ContactCard } from "./contact-card";
 export { default as HeroImage } from "./hero-image";
 export { default as TurnstileWidget } from "./turnstile-widget/TurnstileWidget";
+export { default as Tooltip } from "./tooltip";

package/src/components/molecules/popover/Popover.js

@@ -5,24 +5,10 @@ import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { useOutsideClick } from "../../../hooks";
-import { noop } from "../../../util/general";
+import { noop, arrowBorder } from "../../../util/general";
 import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Popover.theme";
 
-const arrowBorder = (borderColor, direction, width = "8px") => {
-  const angle = `${width} solid transparent`;
-  const straight = `${width} solid ${borderColor}`;
-  if (direction == "down") {
-    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
-  } else if (direction == "up") {
-    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
-  } else if (direction == "left") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
-  } else if (direction == "right") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
-  }
-};
-
 const Popover = ({
   themeValues,
   triggerText = "",

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

@@ -0,0 +1,202 @@
+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)`
+};
+
+const Tooltip = ({
+  tooltipID,
+  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",
+    bottom: "auto",
+    left: "-225px"
+  },
+  arrowDirection = "down",
+  arrowPosition = {
+    arrowTop: "auto",
+    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);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    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 handleKeyboardEvent = e => {
+    if (e.key === "Escape") {
+      handleToggleTooltip(false);
+    }
+  };
+
+  const handleMouseEnter = () => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+    handleToggleTooltip(true);
+  };
+
+  const handleMouseLeave = () => {
+    closeTimeoutRef.current = setTimeout(() => {
+      handleToggleTooltip(false);
+    }, 300);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <Box
+      ref={closeTimeoutRef}
+      padding="0"
+      extraStyles={`position: relative; ${containerExtraStyles}`}
+      onMouseEnter={() => handleMouseEnter(true)}
+      onMouseLeave={() => handleMouseLeave(false)}
+      data-qa="tooltip-container"
+    >
+      <ButtonWithAction
+        aria-describedby={tooltipID}
+        onKeyDown={handleKeyboardEvent}
+        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>
+      <Box
+        role="tooltip"
+        id={tooltipID}
+        aria-hidden={!tooltipOpen}
+        background={contentBackgroundColor}
+        data-qa="tooltip-contents"
+        extraStyles={`
+          position: absolute;
+          display: ${tooltipOpen ? "block" : "none"};
+          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`}
+        borderRadius="4px"
+        minWidth={minWidth}
+        maxWidth={maxWidth}
+      >
+        <Paragraph>{tooltipContent}</Paragraph>
+        <Box
+          padding="0"
+          extraStyles={`
+            position: absolute;
+            content: "";
+            width: 0;
+            height: 0;
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
+            filter: drop-shadow(2px 8px 14px black);
+            bottom: ${arrowBottom};
+            right: ${arrowRight};
+            top: ${arrowTop};
+            left: ${arrowLeft};
+          `}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default Tooltip;

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

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as TooltipStories from './Tooltip.stories.js';
+
+<Meta of={TooltipStories} />
+
+<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.
+
+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 />
+
+<Story />

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

@@ -0,0 +1,237 @@
+import React from "react";
+import Tooltip from "./Tooltip";
+import WarningIconXS from "../../atoms/icons/WarningIconXS";
+
+const meta = {
+  title: "Molecules/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  decorators: [
+    Story => (
+      <div style={{ padding: "120px 300px" }}>
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    tooltipID: "tooltip-id",
+    hasIconTrigger: false,
+    IconTrigger: WarningIconXS,
+    iconHelpText: "Open the tooltip",
+    triggerText: "Hover me",
+    tooltipContent: "The contents of the tooltip go here.",
+    contentPosition: {
+      top: "-110px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    arrowDirection: "down",
+    arrowPosition: {
+      arrowTop: "auto",
+      arrowRight: "10px",
+      arrowBottom: "-8px",
+      arrowLeft: "auto"
+    },
+    minWidth: "250px",
+    maxWidth: "300px",
+    height: "auto",
+    containerExtraStyles: "",
+    triggerExtraStyles: "",
+    triggerButtonVariant: "smallGhost",
+    contentBackgroundColor: "",
+    contentExtraStyles: ""
+  },
+  argTypes: {
+    tooltipID: {
+      description:
+        "Unique ID linking the trigger to the tooltip content for accessibility",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    hasIconTrigger: {
+      description:
+        "When true, renders an icon as the tooltip trigger instead of text",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    IconTrigger: {
+      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",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "Open the tooltip" }
+      }
+    },
+    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",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "The contents of the tooltip go here." }
+      }
+    },
+    contentPosition: {
+      description:
+        "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" }`
+        }
+      }
+    },
+    arrowDirection: {
+      description: "Direction the tooltip arrow points (up, down, left, right)",
+      control: { type: "select" },
+      options: ["up", "down", "left", "right"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "down" }
+      }
+    },
+    arrowPosition: {
+      description:
+        "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" }`
+        }
+      }
+    },
+    minWidth: {
+      description: "Minimum width of the tooltip content box",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "250px" }
+      }
+    },
+    maxWidth: {
+      description: "Maximum width of the tooltip content box",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "300px" }
+      }
+    },
+    height: {
+      description: "Height of the tooltip content box",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "auto" }
+      }
+    },
+    containerExtraStyles: {
+      description:
+        "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",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: '""' }
+      }
+    },
+    triggerButtonVariant: {
+      description:
+        "Button variant applied to the trigger ButtonWithAction element",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "smallGhost" }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const Basic = {
+  args: {
+    tooltipID: "tooltip-basic",
+    triggerText: "How basic is this?",
+    tooltipContent:
+      "This is a detailed explanation of a feature or term that the user may need more context about."
+  }
+};
+
+export const TooltipBelow = {
+  args: {
+    tooltipID: "tooltip-below",
+    contentPosition: {
+      top: "50px",
+      right: "auto",
+      bottom: "auto",
+      left: "-225px"
+    },
+    arrowDirection: "up",
+    arrowPosition: {
+      arrowTop: "-8px",
+      arrowRight: "10px",
+      arrowBottom: "auto",
+      arrowLeft: "auto"
+    }
+  }
+};
+
+export const TooltipRight = {
+  args: {
+    tooltipID: "tooltip-right",
+    contentPosition: {
+      top: "-40px",
+      right: "auto",
+      bottom: "auto",
+      left: "calc(100% + 12px)"
+    },
+    arrowDirection: "left",
+    arrowPosition: {
+      arrowTop: "50%",
+      arrowRight: "auto",
+      arrowBottom: "auto",
+      arrowLeft: "-8px"
+    }
+  }
+};
+
+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."
+  }
+};

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

@@ -0,0 +1,9 @@
+const hoverColor = "#116285";
+const activeColor = "#0E506D";
+const tooltipTriggerColor = "#15749D";
+
+export const fallbackValues = {
+  hoverColor,
+  activeColor,
+  tooltipTriggerColor
+};

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

@@ -0,0 +1,34 @@
+import React from "react";
+import Expand from "../../../util/expand";
+export interface TooltipProps {
+  tooltipID: string;
+  hasIconTrigger?: boolean;
+  IconTrigger?: React.FC<React.SVGProps<SVGSVGElement>>;
+  iconHelpText?: string;
+  triggerText?: string | JSX.Element;
+  tooltipContent: string;
+  contentPosition?: {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  };
+  arrowDirection?: string;
+  arrowPosition?: {
+    arrowTop: string;
+    arrowRight: string;
+    arrowBottom: string;
+    arrowLeft: string;
+  };
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  containerExtraStyles?: string;
+  triggerExtraStyles?: string;
+  triggerButtonVariant?: string;
+  contentExtraStyles?: string;
+  contentBackgroundColor?: string;
+}
+
+export const Tooltip: React.FC<Expand<TooltipProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

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

package/src/util/general.js

@@ -222,3 +222,17 @@ export const adjustHexColor = (hex, percent, action) => {
     .slice(1)
     .padStart(6, "0")}`;
 };
+
+export const arrowBorder = (borderColor, direction, width = "8px") => {
+  const angle = `${width} solid transparent`;
+  const straight = `${width} solid ${borderColor}`;
+  if (direction == "down") {
+    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
+  } else if (direction == "up") {
+    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
+  } else if (direction == "left") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
+  } else if (direction == "right") {
+    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
+  }
+};