@thecb/components 8.4.0-beta.13 → 8.4.0-beta.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.0-beta.13",
+  "version": "8.4.0-beta.14",
   "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,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
@@ -6,9 +6,9 @@ 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";
 
 const LinkCard = ({
-  variant = "default",
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   themeValues,
@@ -21,6 +21,7 @@ const LinkCard = ({
   extraHoverStyles = "",
   extraActiveStyles = ""
 }) => {
+  const { isMobile } = useContext(ThemeContext);
   const activeAndHoverStyles = `cursor: pointer;
     border-radius: 8px;
     border: 1px solid ${themeValues.color};
@@ -32,7 +33,7 @@ const LinkCard = ({
       dataQa={`link-card-${title}`}
       width="100%"
       maxWidth="288px"
-      minWidth="240px"
+      minWidth={isMobile ? "240px" : "288px"}
       minHeight="141px"
       padding="24px"
       extraStyles={`
@@ -109,7 +110,7 @@ const LinkCard = ({
             direction="row"
             childGap="6px"
             justify="space-between"
-            extraStyles={`width: 100%; justify-content: space-between`}
+            extraStyles={`width: 100%; align-items: flex-end;`}
           >
             {showLeft && leftContent}
             {showRight && rightContent}