@thecb/components 8.4.0-beta.17 → 8.4.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.0-beta.17",
+  "version": "8.4.0-beta.18",
   "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,12 +1,10 @@
 import React, { useContext } from "react";
-import Heading from "../../atoms/heading";
-import Paragraph from "../../atoms/paragraph";
 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 { MOON_RAKER } from "../../../constants/colors";
 import { ThemeContext } from "styled-components";
+import * as Styled from "./LinkCard.styled";
 
 const LinkCard = ({
   title = "Test Workflow",
@@ -22,13 +20,10 @@ const LinkCard = ({
   extraActiveStyles = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
-  const activeAndHoverStyles = `cursor: pointer;
-    border-radius: 8px;
-    border: 1px solid ${themeValues.color};
-    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);`;
+
   return (
-    <Box
-      border={`1px solid ${MOON_RAKER};`}
+    <Styled.Container
+      border={`1px solid ${themeValues.background};`}
       borderRadius="8px"
       dataQa={`link-card-${title}`}
       width="100%"
@@ -36,23 +31,9 @@ const LinkCard = ({
       minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
       padding="24px"
-      extraStyles={`
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        width: 100%;
-        gap: 40px;
-        flex-shrink: 0;
-        align-self: stretch;
-        ${extraStyles}
-      `}
-      hoverStyles={`${activeAndHoverStyles}
-        border: 0;
-        ${extraHoverStyles}
-      `}
-      activeStyles={`${activeAndHoverStyles}
-        ${extraActiveStyles}
-      `}
+      extraStyles={extraStyles}
+      hoverStyles={extraHoverStyles}
+      activeStyles={extraActiveStyles}
       onClick={onClick}
     >
       <Stack
@@ -63,42 +44,19 @@ const LinkCard = ({
         fullHeight
       >
         <Box padding={0} width="100%">
-          <Heading
+          <Styled.Title
             variant="h6"
             weight={FONT_WEIGHT_SEMIBOLD}
             color={themeValues.color}
             margin={0}
-            extraStyles={`
-              display: -webkit-box; 
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              align-self: stretch;
-              overflow: hidden; 
-              text-overflow: ellipsis;
-              font-size: 16px;
-              line-height: 150%;
-              background-color: transparent;
-            `}
           >
             {title}
-          </Heading>
+          </Styled.Title>
         </Box>
         <Box padding={"0 0 40px"} width="100%">
-          <Paragraph
-            variant="pS"
-            color={themeValues.color}
-            extraStyles="overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-box-orient: vertical;
-              -webkit-line-clamp: 2;
-              align-self: stretch;
-              font-size: 14px;
-              line-height: 150%;
-              letter-spacing: 0.14px;"
-          >
+          <Styled.Subtitle variant="pS" color={themeValues.color}>
             {subtitle}
-          </Paragraph>
+          </Styled.Subtitle>
         </Box>
         <Box
           background="transparent"
@@ -106,18 +64,15 @@ const LinkCard = ({
           padding="0"
           width="100%"
         >
-          <Stack
-            direction="row"
-            childGap="6px"
-            justify="space-between"
-            extraStyles={`width: 100%; align-items: flex-end;`}
-          >
-            {showLeft && leftContent ? leftContent : <></>}
+          <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}
             {showRight && rightContent}
-          </Stack>
+          </Styled.Footer>
         </Box>
       </Stack>
-    </Box>
+    </Styled.Container>
   );
 };
 

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

@@ -0,0 +1,65 @@
+import styled from "styled-components";
+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 } from "../../../constants/colors";
+
+export const Container = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  gap: 40px;
+  flex-shrink: 0;
+  align-self: stretch;
+
+  &:hover,
+  &:active {
+    cursor: pointer;
+    border-radius: 8px;
+    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+      0px 5px 11px 0px rgba(41, 42, 51, 0.1),
+      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);
+  }
+
+  &:hover:not(:active) {
+    border: 0;
+  }
+
+  &:active {
+    border: 1px solid ${ROYAL_BLUE_VIVID};
+  }
+`;
+
+export const Title = styled(Heading)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: stretch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 16px;
+  line-height: 150%;
+  background-color: transparent;
+`;
+
+export const Subtitle = styled(Paragraph)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  align-self: stretch;
+  font-size: 14px;
+  line-height: 150 %;
+  letter-spacing: 0.14px;
+`;
+
+export const Footer = styled(Stack)`
+  align-items: center;
+  width: 100%;
+`;

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

@@ -1,11 +1,7 @@
-import {
-  CORNFLOWER_BLUE,
-  ROYAL_BLUE_VIVID,
-  WHITE
-} from "../../../constants/colors";
+import { ROYAL_BLUE_VIVID, MOON_RAKER } from "../../../constants/colors";
 
-const background = { default: `${WHITE}`, hover: `${CORNFLOWER_BLUE}` };
-const color = { default: `${ROYAL_BLUE_VIVID}` };
+const background = { default: MOON_RAKER };
+const color = { default: ROYAL_BLUE_VIVID };
 
 export const fallbackValues = {
   background,