@thecb/components 12.0.0-beta.1 → 12.0.0-beta.2

package/package.json

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

@@ -36,11 +36,6 @@ const LinkCard = ({
       tabIndex={disabled ? -1 : 0}
       borderRadius="8px"
       dataQa={`link-card-${locatorSlug}`}
-      width="100%"
-      maxWidth={isMobile ? "100%" : "288px"}
-      minWidth={isMobile ? "240px" : "288px"}
-      minHeight="141px"
-      padding={SPACING.MD}
       themeValues={themeValues}
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { Grid } from "../../atoms/layouts";
 import {
   COOL_GREY_05,
   MANATEE_GREY,
@@ -252,6 +253,161 @@ export const ExternalLinkCard = {
   }
 };
 
+export const GridOfLinkCards = {
+  args: {
+    title: "Water Bills - Autopay",
+    subtitle: "Cityville Water Management",
+    href: "/water-bills"
+  },
+  render: args => {
+    return (
+      <Grid columnGap="40px">
+        <LinkCard
+          {...args}
+          extraStyles={`transition: all .2s ease-in-out;`}
+          extraHoverStyles={`.show-on-hover {opacity: 1}`}
+          showLeft={true}
+          leftContent={
+            <Badge
+              label="Autopay Available"
+              variant={"success"}
+              Icon={() =>
+                AutopayIcon({
+                  fill: SEA_GREEN
+                })
+              }
+            />
+          }
+          showRight={true}
+          rightContent={
+            <Box
+              extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+              padding="0"
+              hoverStyles=".show-on-hover {opacity: 1;}"
+            >
+              <Text
+                variant="pS"
+                className="show-on-hover"
+                color={ROYAL_BLUE_VIVID}
+                id={`workflow-two`}
+                extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+              >
+                {"Find"}
+              </Text>
+              <PlusCircleIcon
+                labelledBy={`workflow-two`}
+                color={ROYAL_BLUE_VIVID}
+              />
+            </Box>
+          }
+        />
+        <LinkCard
+          {...args}
+          extraStyles={`transition: all .2s ease-in-out;`}
+          extraHoverStyles={`.show-on-hover {opacity: 1}`}
+          showLeft={true}
+          leftContent={
+            <Badge
+              label="Autopay Available"
+              variant={"success"}
+              Icon={() =>
+                AutopayIcon({
+                  fill: SEA_GREEN
+                })
+              }
+            />
+          }
+          showRight={true}
+          rightContent={
+            <Box
+              extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+              padding="0"
+              hoverStyles=".show-on-hover {opacity: 1;}"
+            >
+              <Text
+                variant="pS"
+                className="show-on-hover"
+                color={ROYAL_BLUE_VIVID}
+                id={`workflow-two`}
+                extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+              >
+                {"Find"}
+              </Text>
+              <PlusCircleIcon
+                labelledBy={`workflow-two`}
+                color={ROYAL_BLUE_VIVID}
+              />
+            </Box>
+          }
+        />
+        <LinkCard
+          {...args}
+          extraStyles={`transition: all .2s ease-in-out;`}
+          extraHoverStyles={`.show-on-hover {opacity: 1}`}
+          showLeft={true}
+          leftContent={
+            <Badge
+              label="Autopay Available"
+              variant={"success"}
+              Icon={() =>
+                AutopayIcon({
+                  fill: SEA_GREEN
+                })
+              }
+            />
+          }
+          showRight={true}
+          rightContent={
+            <Box
+              extraStyles={`
+              display: flex;
+              gap: 6px;
+              justify-content: space-between;
+              align-items: center;
+            `}
+              padding="0"
+              hoverStyles=".show-on-hover {opacity: 1;}"
+            >
+              <Text
+                variant="pS"
+                className="show-on-hover"
+                color={ROYAL_BLUE_VIVID}
+                id={`workflow-two`}
+                extraStyles={`
+                transition: opacity .2s ease-in-out; 
+                opacity: 0
+              `}
+              >
+                {"Find"}
+              </Text>
+              <PlusCircleIcon
+                labelledBy={`workflow-two`}
+                color={ROYAL_BLUE_VIVID}
+              />
+            </Box>
+          }
+        />
+      </Grid>
+    );
+  }
+};
+
 export const CompleteLinkCard = {
   args: {
     title: "Water Bills - Autopay",

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

@@ -15,12 +15,9 @@ export const Container = styled(Box)`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 100%;
-  gap: 40px;
-  flex-shrink: 0;
   align-self: stretch;
   border-radius: 8px;
-  padding: ${SPACING.MD};
+  padding: 24px;
   ${({ disabled, themeValues }) => `
     background-color: ${
       disabled