@thecb/components 8.4.5-beta.7 → 8.4.5

package/package.json

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

@@ -19,7 +19,6 @@ const LinkCard = ({
   themeValues,
   titleVariant = "h3"
 }) => {
-  console.log("LinkCard themeValues", themeValues);
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
   const locatorSlug = title.toLowerCase().replaceAll(regex, "-");
@@ -33,7 +32,7 @@ const LinkCard = ({
       minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
       padding="24px"
-      themeValues={themeValues}
+      theme={themeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
@@ -47,16 +46,12 @@ const LinkCard = ({
         fullHeight
       >
         <Box padding={0} width="100%">
-          <Styled.Title
-            variant={titleVariant}
-            themeValues={themeValues}
-            margin={0}
-          >
+          <Styled.Title variant={titleVariant} theme={themeValues} margin={0}>
             {title}
           </Styled.Title>
         </Box>
         <Box padding={"0 0 40px"} width="100%">
-          <Styled.Subtitle variant="pS" themeValues={themeValues}>
+          <Styled.Subtitle variant="pS" theme={themeValues}>
             {subtitle}
           </Styled.Subtitle>
         </Box>
@@ -66,12 +61,7 @@ const LinkCard = ({
           padding="0"
           width="100%"
         >
-          <Styled.Footer
-            themeValues={themeValues}
-            direction="row"
-            childGap="6px"
-            justify="space-between"
-          >
+          <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 && <Box />}
             {showLeft && leftContent}
@@ -84,4 +74,3 @@ const LinkCard = ({
 };
 
 export default themeComponent(LinkCard, "LinkCard", fallbackValues);
-// export default LinkCard;

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

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

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

@@ -14,9 +14,9 @@ export const Container = styled(Box)`
   flex-shrink: 0;
   align-self: stretch;
   border-radius: 8px;
-  ${({ themeValues }) => `
-    background-color: ${themeValues.backgroundColor};
-    border: 1px solid ${themeValues.borderColor};
+  ${({ theme }) => `
+    background-color: ${theme.backgroundColor};
+    border: 1px solid ${theme.borderColor};
   `}
   transition: all .2s ease-in-out;
 
@@ -32,13 +32,13 @@ export const Container = styled(Box)`
   }
 
   &:hover:not(:active) {
-    ${({ themeValues }) => `border: 1px solid ${themeValues.borderColor};`}
+    ${({ theme }) => `border: 1px solid ${theme.borderColor};`}
   }
 
   &:active {
-    ${({ themeValues }) => `
-      background-color: ${themeValues.activeBackgroundColor};
-      border: 1px solid ${themeValues.color};
+    ${({ theme }) => `
+      background-color: ${theme.activeBackgroundColor};
+      border: 1px solid ${theme.color};
     ;`}
   }
 `;
@@ -54,7 +54,7 @@ export const Title = styled(Heading)`
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ themeValues }) => `color: ${themeValues.color};`};
+  ${({ theme }) => `color: ${theme.color};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -68,7 +68,7 @@ export const Subtitle = styled(Paragraph)`
   line-height: 150 %;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ themeValues }) => `color: ${themeValues.color};`};
+  ${({ theme }) => `color: ${theme.color};`};
 `;
 
 export const Footer = styled(Stack)`