@thecb/components 12.0.4-beta.0 → 12.0.5-beta.0

package/package.json

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

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

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const AccountsIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const AccountsIconSmall = ({ themeValues, ariaHidden }) => {
   return (
     <svg
       width="22px"
@@ -12,6 +15,7 @@ const AccountsIconSmall = ({ themeValues }) => {
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <defs>
         <rect

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

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const FindIconSmall = ({ themeValues, iconIndex = 0 }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const FindIconSmall = ({ themeValues, iconIndex = 0, ariaHidden }) => {
   const maskId = `find-icon-mask-${iconIndex}`;
   return (
     <svg
@@ -11,6 +14,7 @@ const FindIconSmall = ({ themeValues, iconIndex = 0 }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         fillRule="evenodd"

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

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const HistoryIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const HistoryIconSmall = ({ themeValues, ariaHidden }) => {
   return (
     <svg
       width="20"
@@ -10,6 +13,7 @@ const HistoryIconSmall = ({ themeValues }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         d="M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z"

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

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const PropertiesIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const PropertiesIconSmall = ({ themeValues, ariaHidden }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,6 +15,7 @@ const PropertiesIconSmall = ({ themeValues }) => {
       version="1.1"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
         <path

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

@@ -2,7 +2,10 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const SettingsIconSmall = ({ themeValues }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const SettingsIconSmall = ({ themeValues, ariaHidden }) => {
   return (
     <svg
       width="22px"
@@ -12,6 +15,7 @@ const SettingsIconSmall = ({ themeValues }) => {
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <defs>
         <rect

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

@@ -2,7 +2,15 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const WalletIconSmall = ({ themeValues, iconIndex = 0, colorOverride }) => {
+// When ariaHidden is true, aria-hidden="true" is added to the SVG, which tells
+// screen readers to skip this element. Use this when the icon is purely decorative
+// and adjacent text already conveys its meaning (e.g. an icon inside a labeled nav link).
+const WalletIconSmall = ({
+  themeValues,
+  iconIndex = 0,
+  colorOverride,
+  ariaHidden
+}) => {
   return (
     <svg
       width="20"
@@ -10,6 +18,7 @@ const WalletIconSmall = ({ themeValues, iconIndex = 0, colorOverride }) => {
       viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={ariaHidden ? "true" : undefined}
     >
       <path
         fillRule="evenodd"

package/src/components/molecules/link-card/LinkCard.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Stack } from "../../atoms/layouts";
+import { ExternalLink, InternalLink } from "../../atoms/link";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
 import * as Styled from "./LinkCard.styled";
@@ -25,79 +26,102 @@ const LinkCard = ({
   const regex = /\W/g;
   const locatorSlug = title?.toLowerCase?.()?.replaceAll?.(regex, "-");
 
-  return (
-    <Styled.StyledAnchor
-      key={`link-card-${locatorSlug}`}
-      href={disabled ? undefined : href}
-      rel={isExternalLink ? "noopener noreferrer" : undefined}
-      target={isExternalLink ? "_blank" : undefined}
-      tabIndex={disabled ? -1 : 0}
-      aria-disabled={disabled}
-      $disabled={disabled}
-      aria-label={`${title}, ${subtitle}`}
-      data-qa={`link-card-${locatorSlug}`}
-      $theme={themeValues}
-      $extraStyles={
-        disabled ? `pointer-events: none; ${extraStyles}` : extraStyles
-      }
-      $hoverStyles={extraHoverStyles}
-      $activeStyles={extraActiveStyles}
+  const baseStyles = Styled.getCardBaseStyles(
+    themeValues,
+    disabled,
+    extraStyles
+  );
+  const hoverActiveStyles = Styled.getCardHoverActiveStyles(
+    themeValues,
+    disabled,
+    extraHoverStyles,
+    extraActiveStyles
+  );
+
+  const cardContent = (
+    <Stack
+      childGap={0}
+      bottomItem={3}
+      justify="space-between"
+      style={{ width: "100%" }}
+      fullHeight
     >
       <Stack
-        childGap={0}
-        bottomItem={3}
-        justify="space-between"
-        style={{ width: "100%" }}
-        fullHeight
+        direction="row"
+        childGap="0.5rem"
+        extraStyles={`align-items: center;`}
       >
-        <Stack
-          direction="row"
-          childGap="0.5rem"
-          extraStyles={`align-items: center;`}
+        <Styled.Title
+          variant={titleVariant}
+          $theme={themeValues}
+          margin={0}
+          $disabled={disabled}
         >
-          <Styled.Title
-            variant={titleVariant}
-            $theme={themeValues}
-            margin={0}
-            $disabled={disabled}
-          >
-            {title}
-          </Styled.Title>
-          {isExternalLink && (
-            <ExternalLinkIcon
-              linkColor={themeValues.color}
-              text={locatorSlug}
-              style={{ height: "1.125rem", width: "1.125rem" }}
-            />
-          )}
-        </Stack>
-        <Box padding={subtitlePadding} width="100%">
-          <Styled.Subtitle
-            variant="pS"
-            $theme={themeValues}
-            $disabled={disabled}
-          >
-            {subtitle}
-          </Styled.Subtitle>
-        </Box>
-        <Box
-          background="transparent"
-          borderWidthOverride="0 0 0 0"
-          padding="0"
-          width="100%"
-        >
-          <Styled.Footer direction="row" childGap="6px" justify="space-between">
-            {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
-            {showLeft && !!leftContent ? (
-              leftContent
-            ) : (
-              <Box extraStyles="margin-right: auto;" />
-            )}
-            {showRight && !!rightContent && rightContent}
-          </Styled.Footer>
-        </Box>
+          {title}
+        </Styled.Title>
+        {isExternalLink && (
+          <ExternalLinkIcon
+            linkColor={themeValues.color}
+            text={locatorSlug}
+            style={{ height: "1.125rem", width: "1.125rem" }}
+          />
+        )}
       </Stack>
-    </Styled.StyledAnchor>
+      <Box padding={subtitlePadding} width="100%">
+        <Styled.Subtitle variant="pS" $theme={themeValues} $disabled={disabled}>
+          {subtitle}
+        </Styled.Subtitle>
+      </Box>
+      <Box
+        background="transparent"
+        borderWidthOverride="0 0 0 0"
+        padding="0"
+        width="100%"
+      >
+        <Styled.Footer direction="row" childGap="6px" justify="space-between">
+          {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
+          {showLeft && !!leftContent ? (
+            leftContent
+          ) : (
+            <Box extraStyles="margin-right: auto;" />
+          )}
+          {showRight && !!rightContent && rightContent}
+        </Styled.Footer>
+      </Box>
+    </Stack>
+  );
+
+  if (isExternalLink) {
+    return (
+      <ExternalLink
+        key={`link-card-${locatorSlug}`}
+        href={disabled ? undefined : href}
+        newTab={true}
+        isUnderlined={false}
+        tabIndex={disabled ? "-1" : "0"}
+        ariaLabel={`${title}, ${subtitle}`}
+        dataQa={`link-card-${locatorSlug}`}
+        extraStyles={`${baseStyles} ${hoverActiveStyles}`}
+      >
+        {cardContent}
+      </ExternalLink>
+    );
+  }
+
+  return (
+    <InternalLink
+      key={`link-card-${locatorSlug}`}
+      to={disabled ? undefined : href}
+      isUnderlined={false}
+      hoverUnderline={false}
+      tabIndex={disabled ? "-1" : "0"}
+      aria-label={`${title}, ${subtitle}`}
+      aria-disabled={disabled}
+      data-qa={`link-card-${locatorSlug}`}
+      extraStyles={`${baseStyles} ${hoverActiveStyles}`}
+    >
+      {cardContent}
+    </InternalLink>
   );
 };
 

package/src/components/molecules/link-card/LinkCard.stories.js

@@ -8,7 +8,6 @@ import {
 import { Box } from "../../atoms/layouts";
 import LinkCard from "./LinkCard";
 import Badge from "../../atoms/badge/Badge";
-import { fn } from "@storybook/test";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
 import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
 import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
@@ -24,11 +23,11 @@ const meta = {
   args: {
     title: "Test Workflow",
     subtitle: "Link your benefit plan",
+    href: "/test-workflow",
     showLeft: undefined,
     leftContent: undefined,
     showRight: undefined,
     rightContent: undefined,
-    onClick: fn(),
     extraStyles: "",
     extraActiveStyles: "",
     extraHoverStyles: "",
@@ -51,6 +50,14 @@ const meta = {
         defaultValue: { summary: "Link your benefit plan" }
       }
     },
+    href: {
+      description:
+        "URL or path for the LinkCard. Internal path for InternalLink, full URL for ExternalLink",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
     showLeft: {
       description: "Whether to show the LinkCard's left content",
       table: {
@@ -79,13 +86,6 @@ const meta = {
         defaultValue: { summary: undefined }
       }
     },
-    onClick: {
-      description: "Function to execute on click of LinkCard",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
     extraStyles: {
       description: "Extra styles to apply to the LinkCard",
       table: {
@@ -139,7 +139,8 @@ export default meta;
 export const BasicLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection"
+    subtitle: "Cityville Department of Building Inspection",
+    href: "/permits/construction"
   },
   render: args => {
     return (
@@ -196,7 +197,8 @@ export const BasicLinkCard = {
 export const ExternalLinkCard = {
   args: {
     title: "Construction Permits",
-    subtitle: "Cityville Department of Building Inspection"
+    subtitle: "Cityville Department of Building Inspection",
+    href: "https://example.com/permits/construction"
   },
   render: args => {
     return (
@@ -254,7 +256,8 @@ export const ExternalLinkCard = {
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",
-    subittle: "Cityville Water Management"
+    subittle: "Cityville Water Management",
+    href: "/water-bills/autopay"
   },
   render: args => {
     return (
@@ -312,7 +315,8 @@ export const CompleteLinkCard = {
 export const DisabledLinkCard = {
   args: {
     title: "Property Tax - Autopay",
-    subtitle: ""
+    subtitle: "",
+    href: "/property-tax/autopay"
   },
   render: args => {
     return (

package/src/components/molecules/link-card/LinkCard.styled.js

@@ -7,16 +7,7 @@ import {
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
 
-export const StyledAnchor = styled("a")`
-  ${({
-    $disabled: disabled,
-    $theme: theme,
-    $extraStyles: extraStyles,
-    $disabledStyles: disabledStyles,
-    $hoverStyles: hoverStyles,
-    $activeStyles: activeStyles
-  }) => `
-  display: flex;
+export const getCardBaseStyles = (theme, disabled, extraStyles) => `
   flex-direction: column;
   align-items: flex-start;
   gap: 40px;
@@ -25,51 +16,60 @@ export const StyledAnchor = styled("a")`
   align-self: stretch;
   border-radius: 8px;
   text-decoration: none;
+  font-size: inherit;
+  color: inherit;
+  font-weight: inherit;
+  line-height: inherit;
   background-color: ${
     disabled ? theme.disabledBackgroundColor : theme.backgroundColor
   };
   border: 1px solid
     ${disabled ? theme.disabledBorderColor : theme.borderColor};
   transition: all 0.2s ease-in-out;
+  ${disabled ? `pointer-events: none;` : ""}
   ${extraStyles || ""}
+`;
 
-  ${
-    disabled
-      ? `
-        &:hover,
-        &:active {
-          cursor: default;
-          box-shadow: none;
-          border: 1px solid ${theme.disabledBorderColor};
-          ${disabledStyles || ""}
-        }
-      `
-      : `
-        &:hover,
-        &:active {
-          cursor: pointer;
-          box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
-            0px 5px 11px 0px rgba(41, 42, 51, 0.1),
-            0px 4px 19px 0px rgba(41, 42, 51, 0.09),
-            0px 27px 26px 0px rgba(41, 42, 51, 0.05),
-            0px 56px 31px 0px rgba(41, 42, 51, 0.01),
-            0px 80px 33px 0px rgba(41, 42, 51, 0);
-        }
-        ${hoverStyles || ""}
+export const getCardHoverActiveStyles = (
+  theme,
+  disabled,
+  hoverStyles,
+  activeStyles
+) => {
+  if (disabled) {
+    return `
+      &:hover,
+      &:active {
+        cursor: default;
+        box-shadow: none;
+        border: 1px solid ${theme.disabledBorderColor};
+      }
+    `;
+  }
+  return `
+    &:hover,
+    &:active {
+      cursor: pointer;
+      box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+        0px 5px 11px 0px rgba(41, 42, 51, 0.1),
+        0px 4px 19px 0px rgba(41, 42, 51, 0.09),
+        0px 27px 26px 0px rgba(41, 42, 51, 0.05),
+        0px 56px 31px 0px rgba(41, 42, 51, 0.01),
+        0px 80px 33px 0px rgba(41, 42, 51, 0);
+    }
+    ${hoverStyles || ""}
 
-        &:hover:not(:active) {
-          border: 1px solid ${theme.borderColor};
-        }
+    &:hover:not(:active) {
+      border: 1px solid ${theme.borderColor};
+    }
 
-        &:active {
-          background-color: ${theme.activeBackgroundColor};
-          border: 1px solid ${theme.borderColor};
-          ${activeStyles || ""}
-        }
-      `
-  }
-  `}
-`;
+    &:active {
+      background-color: ${theme.activeBackgroundColor};
+      border: 1px solid ${theme.borderColor};
+      ${activeStyles || ""}
+    }
+  `;
+};
 
 export const Title = styled(Heading)`
   display: -webkit-box;

package/src/components/molecules/link-card/index.d.ts

@@ -5,16 +5,19 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   title?: string; // title
   subtitle?: string; // beneath title
+  subtitlePadding?: string;
   themeValues?: any;
   showLeft?: boolean;
   leftContent?: JSX.Element;
   showRight?: boolean;
   rightContent?: JSX.Element;
-  onClick: () => void;
+  href?: string;
   extraHoverStyles?: string;
   extraStyles?: string;
   extraActiveStyles?: string;
   titleVariant?: string;
+  disabled?: boolean;
+  isExternalLink?: boolean;
 }
 
 export const LinkCard: React.FC<Expand<LinkCardProps> &

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -57,7 +57,7 @@ const NavMenuMobile = ({
         width="100%"
         maxWidth="400px"
         padding="1rem 0.5rem"
-        extraStyles={`position: relative; max-width: 400px; height: calc(100vh - 72px);`}
+        extraStyles={`position: relative; max-width: 400px; height: calc(100vh - 72px); overflow-y: auto;`}
         background={themeValues.backgroundColor}
       >
         {menuContent}