@thecb/components 8.4.0-beta.1 → 8.4.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.0-beta.1",
+  "version": "8.4.0-beta.3",
   "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

@@ -2,58 +2,59 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
-import Text from "../../atoms/text/Text";
-import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
+// import { Text } from "../../atoms/text";
+// import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Stack } from "../../atoms/layouts";
-import Badge from "../../atoms/badge/Badge";
-import { PlusCircleIcon, AutopayIcon, ArrowRightIcon } from "../../atoms/icons";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
+// import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
+// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
 
 const LinkCard = ({
   variant = "default",
-  workflowName = "Test Workflow",
-  workflowDescription = "Link your benefit plan",
-  workflowActionName = "Link an account",
+  title = "Test Workflow",
+  subtitle = "Link your benefit plan",
   themeValues,
-  slug
+  path,
+  showLeft,
+  leftContent,
+  showRight,
+  rightContent,
+  onClick = () => navigate(path)
 }) => {
   const navigate = useNavigate();
+  const activeHoverStyles = `
+    border-radius: 8px;
+    cursor: pointer;
+    border: 1px solid ${themeValues.color};
+    background: var(--primary-color-primary-10, #EBEFFB);
+    /* Primitives/New Shadow/3-Pressed-New */
+    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 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.00);
+    .show-on-hover {color: ${themeValues.color};}
+  `;
 
   return (
     <Box
       background="#FEFEFE" // --grays-cool-gray-00
       border="1px solid #C4CEF4;" // --primary-color-primary-30
-      padding={0}
       borderRadius="8px"
-      dataQa={`link-card-${workflowDescription}`}
-      hoverStyles={`
-        border-radius: 8px;
-        cursor: pointer;
-        border: 1px solid ${ROYAL_BLUE_VIVID};
-        background: var(--primary-color-primary-10, #EBEFFB);
-        /* Primitives/New Shadow/3-Pressed-New */
-        box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.10), 0px 5px 11px 0px rgba(41, 42, 51, 0.10), 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.00);
-        .show-on-hover {color: ${ROYAL_BLUE_VIVID};}
-      `}
-      extraStyles="display: flex;
-        width: 288px; 
-        min-width: 240px; 
-        max-width: 288px; 
-        min-height: 141px; 
-        padding: 16px 24px; 
-        flex-direction: column; 
-        align-items: flex-start; 
-        gap: 40px; 
-        flex-shrink: 0; 
+      dataQa={`link-card-${title}`}
+      width="100%"
+      maxWidth="288px"
+      minWidth="240px"
+      minHeight="141px"
+      padding="16px 24px"
+      extraStyles="
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 40px;
+        flex-shrink: 0;
         align-self: stretch;"
-      onClick={() => {
-        // @TODO replace with something valid like navigate
-        console.log("attempting navigation...");
-        // window.location.pathname = `/service/${slug}`;
-        navigate(`/service/${slug}`);
-      }}
+      hoverStyles={activeHoverStyles}
+      activeStyles={activeHoverStyles}
+      onClick={onClick}
     >
       <Stack childGap={0} bottomItem={3} fullHeight>
         <Box padding={"1rem 1rem 0 1rem"}>
@@ -64,10 +65,10 @@ const LinkCard = ({
             margin={0}
             extraStyles="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch; overflow: hidden; text-overflow: ellipsis; font-family: Public Sans; font-size: 16px; font-style: normal; font-weight: 600; line-height: 150%;"
           >
-            {workflowName}
+            {title}
           </Heading>
         </Box>
-        <Box padding={"0 1rem 0"} minHeight={"4.25rem"}>
+        <Box padding={"0 1rem 40px"} /* minHeight={"4.25rem"}*/>
           <Paragraph
             variant="pS"
             color={themeValues.color}
@@ -86,7 +87,7 @@ const LinkCard = ({
               line-height: 150%; /* 21px */
               letter-spacing: 0.14px;"
           >
-            {workflowDescription}
+            {subtitle}
           </Paragraph>
         </Box>
         <Box
@@ -95,41 +96,27 @@ const LinkCard = ({
           padding="0 1rem 1rem 1rem"
         >
           <Stack direction="row" justify="space-between">
-            <Box
-              background="transparent"
-              borderWidthOverride="0 0 0 0"
-              padding="0"
-            >
-              <Badge label="Autopay Available" Icon={AutopayIcon} />
-            </Box>
             <Stack direction="row" childGap="6px">
-              {workflowActionName === "Link an account" && (
-                <>
-                  <Text
-                    variant="pS"
-                    color={themeValues.color}
-                    extraStyles="text-align: right; color: transparent;"
-                    className="show-on-hover"
-                  >
-                    Find
-                  </Text>
-                  <PlusCircleIcon color={themeValues.color} />
-                </>
+              {showLeft && leftContent}
+              {showRight && rightContent}
+            </Stack>
+
+            {/* <Stack direction="row" childGap="6px">
+              <Text
+                variant="pS"
+                color={themeValues.color}
+                extraStyles="text-align: right; color: transparent;"
+                className="show-on-hover"
+              >
+                {workflowActionName}
+              </Text>
+              {workflowActionName === "Find" && (
+                <PlusCircleIcon color={themeValues.color} />
               )}
-              {workflowActionName === "Pay now" && (
-                <>
-                  <Text
-                    variant="pS"
-                    color={themeValues.color}
-                    extraStyles="text-align: right; color: transparent;"
-                    className="show-on-hover"
-                  >
-                    Pay
-                  </Text>
-                  <ArrowRightIcon color={themeValues.color} />
-                </>
+              {workflowActionName === "Pay" && (
+                <ArrowRightIcon color={themeValues.color} />
               )}
-            </Stack>
+            </Stack> */}
           </Stack>
         </Box>
       </Stack>

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

@@ -1,20 +1,42 @@
 import React from "react";
 import LinkCard from "./LinkCard";
+import Box from "../../atoms/layouts/Box";
+import Stack from "../../atoms/layouts/Stack";
+import Text from "../../atoms/text/Text";
 import page from "../../../../.storybook/page";
 import { text } from "@storybook/addon-knobs";
+import Badge from "../../atoms/badge/Badge";
+import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
+import AutopayIcon from "../../atoms/icons/AutopayIcon";
+import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 
 const groupId = "props";
 
 export const linkCard = () => (
   <LinkCard
-    workflowName={text("workflowName", "Workflow Name", "props")}
-    workflowDescription={text(
-      "workflowDescription",
-      "Workflow description",
-      groupId
-    )}
-    workflowActionName={text("workflowActionName", "Link an account", "props")}
-    slug={text("slug", "animal-care-and-control", "props")}
+    title={text("title", "Link Card Title", "props")}
+    subtitle={text("subtitle", "Link card description", groupId)}
+    path={text("path", "/service/animal-care-and-control", "props")}
+    showLeft={true}
+    leftContent={
+      <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
+        <Badge label="Autopay Available" Icon={AutopayIcon} />
+      </Box>
+    }
+    showRight={true}
+    rightContent={
+      <Stack direction="row" childGap="6px">
+        <Text
+          variant="pS"
+          color={ROYAL_BLUE_VIVID}
+          extraStyles="text-align: right; color: transparent;"
+          className="show-on-hover"
+        >
+          Find
+        </Text>
+        <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
+      </Stack>
+    }
   />
 );
 

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

@@ -3,11 +3,15 @@ import Expand from "../../../util/expand";
 
 export interface LinkCardProps {
   variant?: string; // "default" is only one
-  workflowName?: string; // title
-  workflowDescription?: string; // beneath title
-  workflowActionName: "Find" | "Pay";
+  title?: string; // title
+  subtitle?: string; // beneath title
   slug: string; // path segment of button on click (/service/${slug})
   themeValues?: any;
+  showLeft?: boolean;
+  leftContent?: JSX.Element;
+  showRight?: boolean;
+  rightContent?: JSX.Element;
+  onClick: () => void;
 }
 
 export const LinkCard: React.FC<Expand<LinkCardProps> &