@thecb/components 11.8.0-beta.4 → 11.8.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.8.0-beta.4",
+  "version": "11.8.1-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -81,8 +81,8 @@
     "vite": "^5.2.11"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.13.1 || ^17.0.0",
+    "react-dom": "^16.13.1 || ^17.0.0",
     "react-router-dom": "^6.3.0",
     "styled-components": "^5.1.1",
     "styled-theming": "^2.2.0"

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

@@ -0,0 +1,88 @@
+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";
+
+const DisplayCard = ({
+  title,
+  item,
+  buttonText,
+  buttonAction,
+  url,
+  link = false,
+  helpText,
+  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}
+            />
+          )}
+        </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>
+            {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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,165 @@
+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,
+    helpText: 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 }
+      }
+    },
+    helpText: {
+      description:
+        "Text rendered to the right of the `item` text and styled as italic.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    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 WithLink = {
+  args: {
+    buttonText: "Link",
+    url: "https://example.com",
+    link: true
+  },
+  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 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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = ({ stroke = "none", strokeWidth = 1 }) => (
+const IconAdd = ({ strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = ({ stroke = "none", 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={stroke} strokeWidth={strokeWidth}>
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">

package/src/components/atoms/index.js

@@ -13,6 +13,7 @@ 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/index.js

@@ -47,4 +47,3 @@ 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/templates/sidebar-stack-content/SidebarStackContent.js

@@ -36,7 +36,7 @@ const SidebarStackContent = ({
     >
       <Cover centerOverride={!sidebarVerticalCenter} key="page-cover">
         {header ? header : <Box padding="0" key="header-box" />}
-        <Box padding="0" minWidth="100%" key="content-box" role="main">
+        <Box padding="0" minWidth="100%" key="content-box">
           {subHeader && !(isMobile && hideMobileSubHeader) ? (
             subHeader
           ) : (

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

@@ -1,149 +0,0 @@
-import React, { useState } from "react";
-import { themeComponent } from "../../../util/themeUtils";
-import Text from "../../atoms/text";
-import Paragraph from "../../atoms/paragraph";
-import { Box } from "../../atoms/layouts";
-import ButtonWithAction from "../../atoms/button-with-action";
-import { noop } from "../../../util/general";
-import { ESCAPE } from "../../../constants/keyboard";
-import { fallbackValues } from "./Tooltip.theme";
-import WarningIconXS from "../../atoms/icons/WarningIconXS";
-import { SELECTIVE_YELLOW } from "../../../constants/colors";
-
-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 Tooltip = ({
-  themeValues,
-  triggerText = "",
-  content = "",
-  hasIconTrigger = false,
-  IconTrigger = WarningIconXS,
-  iconHelpText = "",
-  tooltipID = "tooltip-content",
-  extraStyles = "",
-  textExtraStyles = "",
-  minWidth = "250px",
-  maxWidth = "300px",
-  height = "auto",
-  arrowDirection = "down",
-  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)",
-  tooltipContentExtraStyles
-}) => {
-  const { hoverColor, activeColor, tooltipTriggerColor } = themeValues;
-  const { top, right, bottom, left } = position ?? {};
-  const { arrowTop, arrowRight, arrowBottom, arrowLeft } = arrowPosition ?? {};
-
-  const [tooltipOpen, setTooltipOpen] = useState(false);
-
-  const handleToggleTooltip = tooltipState => {
-    if (tooltipOpen !== tooltipState) {
-      setTooltipOpen(tooltipState);
-    }
-  };
-
-  const handleKeyboardEvent = e => {
-    if (e.keyCode === ESCAPE || e.keyCode === 9) {
-      handleToggleTooltip(false);
-    }
-  };
-
-  return (
-    <Box padding="0" extraStyles={`position: relative; ${extraStyles}`}>
-      <ButtonWithAction
-        action={() => noop}
-        onFocus={() => handleToggleTooltip(true)}
-        onBlur={() => handleToggleTooltip(false)}
-        onKeyDown={handleKeyboardEvent}
-        onTouchStart={() => handleToggleTooltip(true)}
-        onTouchEnd={() => handleToggleTooltip(false)}
-        onMouseEnter={() => handleToggleTooltip(true)}
-        onMouseLeave={() => handleToggleTooltip(false)}
-        contentOverride
-        variant="smallGhost"
-        tabIndex="0"
-        aria-describedby={tooltipID}
-        extraStyles={buttonExtraStyles}
-      >
-        {hasIconTrigger && (
-          <>
-            <Box aria-label="Trigger Popover">
-              <IconTrigger color={iconColor} />
-            </Box>
-            <Box padding="0" srOnly aria-hidden="true">
-              <Text>{iconHelpText}</Text>
-            </Box>
-          </>
-        )}
-        {!hasIconTrigger && (
-          <Text extraStyles={textExtraStyles}>{triggerText}</Text>
-        )}
-      </ButtonWithAction>
-      <Box
-        background={backgroundColor}
-        borderRadius="4px"
-        boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
-        id={tooltipID}
-        role="tooltip"
-        minWidth={minWidth}
-        maxWidth={maxWidth}
-        aria-hidden={!tooltipOpen}
-        extraStyles={`
-          display: ${tooltipOpen ? "block" : "none"}; 
-          position: absolute; 
-          top: ${top}; 
-          right: ${right}; 
-          bottom: ${bottom}; 
-          left: ${left};
-          height: ${height};
-          ${tooltipContentExtraStyles};
-          `}
-      >
-        <Paragraph>{content}</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 themeComponent(Tooltip, "Tooltip", fallbackValues);

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

@@ -1,15 +0,0 @@
-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 `icon` 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 />