@thecb/components 8.4.4 → 8.4.5-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.4",
+  "version": "8.4.5-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

@@ -1,15 +1,14 @@
 import React, { useContext } from "react";
-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 { themeComponent } from "../../../util/themeUtils";
+// import { fallbackValues } from "./LinkCard.theme";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
 
 const LinkCard = ({
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
-  themeValues,
+  parentThemeValues,
   showLeft,
   leftContent,
   showRight,
@@ -20,13 +19,13 @@ const LinkCard = ({
   extraActiveStyles = "",
   titleVariant = "h3"
 }) => {
+  console.log("LinkCard themeValues", themeValues);
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
   const locatorSlug = title.toLowerCase().replaceAll(regex, "-");
 
   return (
     <Styled.Container
-      border={`1px solid ${themeValues.background};`}
       borderRadius="8px"
       dataQa={`link-card-${locatorSlug}`}
       width="100%"
@@ -34,6 +33,7 @@ const LinkCard = ({
       minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
       padding="24px"
+      themeValues={parentThemeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
@@ -49,15 +49,14 @@ const LinkCard = ({
         <Box padding={0} width="100%">
           <Styled.Title
             variant={titleVariant}
-            weight={FONT_WEIGHT_SEMIBOLD}
-            color={themeValues.color}
+            themeValues={parentThemeValues}
             margin={0}
           >
             {title}
           </Styled.Title>
         </Box>
         <Box padding={"0 0 40px"} width="100%">
-          <Styled.Subtitle variant="pS" color={themeValues.color}>
+          <Styled.Subtitle variant="pS" themeValues={parentThemeValues}>
             {subtitle}
           </Styled.Subtitle>
         </Box>
@@ -67,7 +66,12 @@ const LinkCard = ({
           padding="0"
           width="100%"
         >
-          <Styled.Footer direction="row" childGap="6px" justify="space-between">
+          <Styled.Footer
+            themeValues={parentThemeValues}
+            direction="row"
+            childGap="6px"
+            justify="space-between"
+          >
             {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
             {showLeft && !leftContent && <Box />}
             {showLeft && leftContent}
@@ -79,4 +83,5 @@ const LinkCard = ({
   );
 };
 
-export default themeComponent(LinkCard, "LinkCard", fallbackValues, "default");
+// export default themeComponent(LinkCard, "LinkCard", fallbackValues, "default");
+export default LinkCard;

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

@@ -8,7 +8,6 @@ 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, CORNFLOWER_BLUE } from "../../../constants/colors";
 
 const groupId = "props";
 
@@ -28,20 +27,20 @@ export const linkCard = () => (
       <Stack direction="row" childGap="6px">
         <Text
           variant="pS"
-          color={ROYAL_BLUE_VIVID}
+          color={themeValues.color}
           extraStyles="text-align: right; color: transparent;"
           className="show-on-hover"
         >
           Find
         </Text>
-        <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
+        <PlusCircleIcon color={themeValues.color} />
       </Stack>
     }
     extraHoverStyles={`
-      .show-on-hover {color: ${ROYAL_BLUE_VIVID};}
+      .show-on-hover {color: ${themeValues.color};}
     `}
     extraActiveStyles={`
-      background-color: ${CORNFLOWER_BLUE};
+      background-color: ${themeValues.activeBackgroundColor};
     `}
   />
 );

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

@@ -3,11 +3,7 @@ import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
-import {
-  ROYAL_BLUE_VIVID,
-  LINK_WATER,
-  MOON_RAKER
-} from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 export const Container = styled(Box)`
   display: flex;
@@ -18,6 +14,11 @@ export const Container = styled(Box)`
   flex-shrink: 0;
   align-self: stretch;
   border-radius: 8px;
+  ${({ themeValues }) => `
+    background-color: ${themeValues.cardBackgroundColor};
+    border: 1px solid ${themeValues.cardBorderColor};
+  `}
+  transition: all .2s ease-in-out;
 
   &:hover,
   &:active {
@@ -31,12 +32,14 @@ export const Container = styled(Box)`
   }
 
   &:hover:not(:active) {
-    border: 1px solid ${MOON_RAKER};
-    background-color: ${LINK_WATER};
+    ${({ themeValues }) => `border: 1px solid ${themeValues.cardBorderColor};`}
   }
 
   &:active {
-    border: 1px solid ${ROYAL_BLUE_VIVID};
+    ${({ themeValues }) => `
+      background-color: ${themeValues.cardActiveBackgroundColor};
+      border: 1px solid ${themeValues.cardColor};
+    ;`}
   }
 `;
 
@@ -50,6 +53,8 @@ export const Title = styled(Heading)`
   font-size: 16px;
   line-height: 150%;
   background-color: transparent;
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  ${({ themeValues }) => `color: ${themeValues.cardColor};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -62,6 +67,8 @@ export const Subtitle = styled(Paragraph)`
   font-size: 14px;
   line-height: 150 %;
   letter-spacing: 0.14px;
+  font-weight: ${FONT_WEIGHT_SEMIBOLD};
+  ${({ themeValues }) => `color: ${themeValues.cardColor};`};
 `;
 
 export const Footer = styled(Stack)`

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

@@ -1,9 +1,18 @@
-import { ROYAL_BLUE_VIVID, MOON_RAKER } from "../../../constants/colors";
+import {
+  CORNFLOWER_BLUE,
+  LINK_WATER,
+  MOON_RAKER,
+  ROYAL_BLUE_VIVID
+} from "../../../constants/colors";
 
-const background = { default: MOON_RAKER };
+const activeBackgroundColor = { default: CORNFLOWER_BLUE };
+const backgroundColor = { default: LINK_WATER };
+const borderColor = { default: MOON_RAKER };
 const color = { default: ROYAL_BLUE_VIVID };
 
 export const fallbackValues = {
-  background,
+  activeBackgroundColor,
+  backgroundColor,
+  borderColor,
   color
 };