@thecb/components 8.4.5-beta.2 → 8.4.5-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.5-beta.2",
+  "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,
@@ -34,7 +33,7 @@ const LinkCard = ({
       minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
       padding="24px"
-      themeValues={themeValues}
+      themeValues={parentThemeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
@@ -50,14 +49,14 @@ const LinkCard = ({
         <Box padding={0} width="100%">
           <Styled.Title
             variant={titleVariant}
-            themeValues={themeValues}
+            themeValues={parentThemeValues}
             margin={0}
           >
             {title}
           </Styled.Title>
         </Box>
         <Box padding={"0 0 40px"} width="100%">
-          <Styled.Subtitle variant="pS" themeValues={themeValues}>
+          <Styled.Subtitle variant="pS" themeValues={parentThemeValues}>
             {subtitle}
           </Styled.Subtitle>
         </Box>
@@ -68,7 +67,7 @@ const LinkCard = ({
           width="100%"
         >
           <Styled.Footer
-            themeValues={themeValues}
+            themeValues={parentThemeValues}
             direction="row"
             childGap="6px"
             justify="space-between"
@@ -84,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.styled.js

@@ -4,6 +4,7 @@ import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+
 export const Container = styled(Box)`
   display: flex;
   flex-direction: column;
@@ -14,8 +15,8 @@ export const Container = styled(Box)`
   align-self: stretch;
   border-radius: 8px;
   ${({ themeValues }) => `
-    background-color: ${themeValues.backgroundColor};
-    border: 1px solid ${themeValues.borderColor};
+    background-color: ${themeValues.cardBackgroundColor};
+    border: 1px solid ${themeValues.cardBorderColor};
   `}
   transition: all .2s ease-in-out;
 
@@ -31,13 +32,13 @@ export const Container = styled(Box)`
   }
 
   &:hover:not(:active) {
-    ${({ themeValues }) => `border: 1px solid ${themeValues.borderColor};`}
+    ${({ themeValues }) => `border: 1px solid ${themeValues.cardBorderColor};`}
   }
 
   &:active {
     ${({ themeValues }) => `
-      background-color: ${themeValues.activeBackgroundColor};
-      border: 1px solid ${themeValues.color};
+      background-color: ${themeValues.cardActiveBackgroundColor};
+      border: 1px solid ${themeValues.cardColor};
     ;`}
   }
 `;
@@ -53,7 +54,7 @@ export const Title = styled(Heading)`
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ themeValues }) => `color: ${themeValues.color};`};
+  ${({ themeValues }) => `color: ${themeValues.cardColor};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -67,7 +68,7 @@ export const Subtitle = styled(Paragraph)`
   line-height: 150 %;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ themeValues }) => `color: ${themeValues.color};`};
+  ${({ themeValues }) => `color: ${themeValues.cardColor};`};
 `;
 
 export const Footer = styled(Stack)`