@thecb/components 8.4.0-beta.2 → 8.4.0-beta.4

package/package.json

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

@@ -8,6 +8,7 @@ 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 { LINK_WATER, MOON_RAKER } from "../../../constants/colors";
 // import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
 // import ArrowRightIcon from "../../atoms/icons/ArrowRightIcon";
 
@@ -20,23 +21,25 @@ const LinkCard = ({
   showLeft,
   leftContent,
   showRight,
-  rightContent
+  rightContent,
+  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%"
@@ -44,21 +47,21 @@ const LinkCard = ({
       minWidth="240px"
       minHeight="141px"
       padding="16px 24px"
-      extraStyles="
+      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={() => {
-        navigate(path);
-      }}
+      onClick={onClick}
     >
       <Stack childGap={0} bottomItem={3} fullHeight>
-        <Box padding={"1rem 1rem 0 1rem"}>
+        <Box padding={"1rem 0 0 0"}>
           <Heading
             variant="h6"
             weight={FONT_WEIGHT_SEMIBOLD}
@@ -69,7 +72,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}
@@ -97,8 +100,10 @@ const LinkCard = ({
           padding="0 1rem 1rem 1rem"
         >
           <Stack direction="row" justify="space-between">
-            {showLeft && leftContent}
-            {showRight && rightContent}
+            <Stack direction="row" childGap="6px">
+              {showLeft && leftContent}
+              {showRight && rightContent}
+            </Stack>
 
             {/* <Stack direction="row" childGap="6px">
               <Text

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

@@ -11,6 +11,9 @@ export interface LinkCardProps {
   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 = "#EBEFFB";
 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,