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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.0-beta.3",
+  "version": "8.4.0-beta.5",
   "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,63 +1,61 @@
 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";
-// import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Stack } from "../../atoms/layouts";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
-// import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
-// import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
+import { LINK_WATER, MOON_RAKER } from "../../../constants/colors";
 
 const LinkCard = ({
   variant = "default",
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   themeValues,
-  path,
   showLeft,
   leftContent,
   showRight,
   rightContent,
-  onClick = () => navigate(path)
+  onClick,
+  extraStyles = "",
+  extraHoverStyles = ""
 }) => {
-  const navigate = useNavigate();
   const activeHoverStyles = `
     border-radius: 8px;
     cursor: pointer;
     border: 1px solid ${themeValues.color};
-    background: var(--primary-color-primary-10, #EBEFFB);
+    background: ${LINK_WATER};
     /* 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};}
+    ${extraHoverStyles}
   `;
 
   return (
     <Box
-      background="#FEFEFE" // --grays-cool-gray-00
-      border="1px solid #C4CEF4;" // --primary-color-primary-30
+      background={LINK_WATER}
+      border={`1px solid ${MOON_RAKER};`}
       borderRadius="8px"
       dataQa={`link-card-${title}`}
       width="100%"
       maxWidth="288px"
       minWidth="240px"
       minHeight="141px"
-      padding="16px 24px"
-      extraStyles="
+      padding="24px"
+      extraStyles={`
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         gap: 40px;
         flex-shrink: 0;
-        align-self: stretch;"
+        align-self: stretch;
+        ${extraStyles}
+      `}
       hoverStyles={activeHoverStyles}
       activeStyles={activeHoverStyles}
       onClick={onClick}
     >
       <Stack childGap={0} bottomItem={3} fullHeight>
-        <Box padding={"1rem 1rem 0 1rem"}>
+        <Box padding={0}>
           <Heading
             variant="h6"
             weight={FONT_WEIGHT_SEMIBOLD}
@@ -68,7 +66,7 @@ const LinkCard = ({
             {title}
           </Heading>
         </Box>
-        <Box padding={"0 1rem 40px"} /* minHeight={"4.25rem"}*/>
+        <Box padding={"0 0 40px"}>
           <Paragraph
             variant="pS"
             color={themeValues.color}

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

@@ -5,13 +5,14 @@ export interface LinkCardProps {
   variant?: string; // "default" is only one
   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;
+  extraHoverStyles?: string;
+  extraStyles?: string;
 }
 
 export const LinkCard: React.FC<Expand<LinkCardProps> &

package/src/constants/colors.js

@@ -6,7 +6,7 @@ to the one generated by name-that-color.
 */
 const BLACK = "#000000";
 const TRANSPARENT = "transparent";
-// WHITE
+const LINK_WATER = "#FEFEFE";
 const WHITE = "#FFFFFF";
 const SOLITUDE_WHITE = "#EBEDF1";
 const SEASHELL_WHITE = "#F1F1F1";
@@ -45,6 +45,7 @@ const MARINER_BLUE = "#2E75D2";
 const CURIOUS_BLUE = "#27A9E1";
 const SELAGO_BLUE = "#F2F8FD";
 const ONAHAU_BLUE = "#D1ECFF";
+const MOON_RAKER = "#C4CEF4";
 const PICKLED_BLUE = "#2C3E50";
 const CERULEAN_BLUE = "#0D8DC4";
 const FOAM_BLUE = "#EFF4FD";
@@ -143,6 +144,7 @@ export {
   BLACK,
   TRANSPARENT,
   WHITE,
+  LINK_WATER,
   SOLITUDE_WHITE,
   SEASHELL_WHITE,
   ALABASTER_WHITE,
@@ -180,6 +182,7 @@ export {
   CURIOUS_BLUE,
   SELAGO_BLUE,
   ONAHAU_BLUE,
+  MOON_RAKER,
   PICKLED_BLUE,
   CERULEAN_BLUE,
   FOAM_BLUE,