@thecb/components 12.0.2-beta.2 → 12.0.2

package/package.json

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

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/LinkCard.theme.js

@@ -1,6 +1,7 @@
 import {
   CORNFLOWER_BLUE,
   LINK_WATER,
+  MOON_RAKER,
   ROYAL_BLUE_VIVID,
   MANATEE_GREY,
   GHOST_GREY,
@@ -13,7 +14,7 @@ const disabledBorderColor = GHOST_GREY;
 const disabledColor = MANATEE_GREY;
 const activeBackgroundColor = CORNFLOWER_BLUE;
 const backgroundColor = LINK_WATER;
-const borderColor = MANATEE_GREY;
+const borderColor = MOON_RAKER;
 const color = ROYAL_BLUE_VIVID;
 const textColor = BRIGHT_GREY;
 

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> &