@thecb/components 10.4.0-beta.7 → 10.4.0-beta.9

package/package.json

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

@@ -7,7 +7,6 @@ import * as Styled from "./LinkCard.styled";
 import { noop } from "../../../util/general";
 
 const LinkCard = ({
-  variant = "primary", // "primary" | "disabled"
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   showLeft,
@@ -41,6 +40,9 @@ const LinkCard = ({
       activeStyles={extraActiveStyles}
       onClick={disabled ? noop : onClick}
       aria-disabled={disabled}
+      isDisabled={disabled}
+      role="group"
+      aria-label={`${title}, ${subtitle}`}
     >
       <Stack
         childGap={0}
@@ -50,12 +52,21 @@ const LinkCard = ({
         fullHeight
       >
         <Box padding={0} width="100%">
-          <Styled.Title variant={titleVariant} theme={themeValues} margin={0}>
+          <Styled.Title
+            variant={titleVariant}
+            theme={themeValues}
+            margin={0}
+            isDisabled={disabled}
+          >
             {title}
           </Styled.Title>
         </Box>
         <Box padding={"0 0 40px"} width="100%">
-          <Styled.Subtitle variant="pS" theme={themeValues}>
+          <Styled.Subtitle
+            variant="pS"
+            theme={themeValues}
+            isDisabled={disabled}
+          >
             {subtitle}
           </Styled.Subtitle>
         </Box>

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

@@ -1,5 +1,5 @@
 import page from "../../../../.storybook/page";
-import { boolean, select, text } from "@storybook/addon-knobs";
+import { boolean, text } from "@storybook/addon-knobs";
 import React from "react";
 import LinkCard from "./LinkCard";
 import Box from "../../atoms/layouts/Box";
@@ -11,61 +11,65 @@ import AutopayIcon from "../../atoms/icons/AutopayIcon";
 import {
   CORNFLOWER_BLUE,
   ROYAL_BLUE_VIVID,
+  LINK_WATER,
+  WHITE,
   MANATEE_GREY,
+  GHOST_GREY,
   TRANSPARENT
 } from "../../../constants/colors";
 
+const theme = {
+  disabledBackgroundColor: TRANSPARENT,
+  disabledBorderColor: GHOST_GREY,
+  disabledColor: MANATEE_GREY,
+  activeBackgroundColor: CORNFLOWER_BLUE,
+  backgroundColor: WHITE,
+  borderColor: LINK_WATER,
+  color: ROYAL_BLUE_VIVID
+};
+
 const groupId = "props";
-const variant = "primary";
-const variants = { primary: "primary", disabled: "disabled" };
 const disabled = false;
 const showLeft = true;
 
-const renderLeftContent = ({ disabled }) => {
-  return (
-    <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
-      <Badge
-        label="Autopay Available"
-        Icon={AutopayIcon}
-        variant={disabled ? "disabled" : "success"}
-      />
-    </Box>
-  );
-};
-const renderRightContent = ({ disabled }) => {
-  return (
-    <Stack direction="row" childGap="6px">
-      <Text
-        variant="pS"
-        disabled={disabled || variant === "disabled"}
-        className="show-on-hover"
-        color={disabled ? MANATEE_GREY : ROYAL_BLUE_VIVID}
-        extraStyles={`text-align: right; color: transparent; ${
-          !showLeft ? "margin-left: auto;" : ""
-        }`}
-      >
-        Find
-      </Text>
-      <PlusCircleIcon color={disabled ? MANATEE_GREY : ROYAL_BLUE_VIVID} />
-    </Stack>
-  );
-};
 export const linkCard = () => {
   return (
     <LinkCard
       disabled={boolean("disabled", disabled, groupId)}
-      variant={select("variant", variants, variant, groupId)}
       title={text("title", "Link Card Title", groupId)}
       subtitle={text("subtitle", "Link card description", groupId)}
       path={text("path", "/service/animal-care-and-control", groupId)}
+      themeValues={theme}
       showLeft={boolean("showLeft", true, groupId)}
       onClick={() => window.alert("Click event!")}
-      leftContent={renderLeftContent({ disabled })}
+      leftContent={
+        <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
+          <Badge
+            label="Autopay Available"
+            Icon={AutopayIcon}
+            variant={disabled ? "disabled" : "success"}
+          />
+        </Box>
+      }
       showRight={boolean("showRight", true, groupId)}
-      rightContent={renderRightContent({ disabled })}
+      rightContent={
+        <Stack direction="row" childGap="6px">
+          <Text
+            variant="pS"
+            className="show-on-hover"
+            color={ROYAL_BLUE_VIVID}
+            extraStyles={`text-align: right; color: transparent; ${
+              !showLeft ? "margin-left: auto;" : ""
+            }`}
+          >
+            Find
+          </Text>
+          <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
+        </Stack>
+      }
       extraHoverStyles={`
       .show-on-hover {
-        color: ${disabled ? TRANSPARENT : ROYAL_BLUE_VIVID};
+        color: ${ROYAL_BLUE_VIVID};
       }
     `}
       extraActiveStyles={`

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

@@ -4,7 +4,6 @@ import Paragraph from "../../atoms/paragraph";
 import Stack from "../../atoms/layouts/Stack";
 import { Box } from "../../atoms/layouts";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { TRANSPARENT, GHOST_GREY } from "../../../constants/colors";
 
 export const Container = styled(Box)`
   display: flex;
@@ -15,39 +14,47 @@ export const Container = styled(Box)`
   flex-shrink: 0;
   align-self: stretch;
   border-radius: 8px;
-  ${({ theme }) => `
-    background-color: ${theme.backgroundColor};
-    border: 1px solid ${theme.borderColor};
+  ${({ isDisabled, theme }) => `
+    background-color: ${
+      isDisabled ? theme.disabledBackgroundColor : theme.backgroundColor
+    };
+    border: 1px solid ${
+      isDisabled ? theme.disabledBorderColor : theme.borderColor
+    };
   `}
   transition: all .2s ease-in-out;
 
-  &:hover,
-  &:active {
-    cursor: ${({ disabled }) => (disabled ? `default` : `pointer`)};
-    box-shadow: ${({ disabled }) => `
-      ${
-        disabled
-          ? `none`
-          : `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);`
-      }
-    `};
-  }
+  ${({ isDisabled, theme }) =>
+    isDisabled
+      ? `
+        &:hover,
+        &:active {
+          cursor: default;
+          box-shadow: none;
+          border: 1px solid ${theme.disabledBorderColor};
+        }
+      `
+      : `
+        &:hover,
+        &:active {
+          cursor: pointer;
+          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) {
-    ${({ theme }) => `border: 1px solid ${theme.borderColor};`}
-  }
+        &:hover:not(:active) {
+          border: 1px solid ${theme.borderColor};
+        }
 
-  &:active {
-    ${({ theme }) => `
-      background-color: ${theme.activeBackgroundColor};
-      border: 1px solid ${theme.borderColor};
-    ;`}
-  }
+        &:active {
+          background-color: ${theme.activeBackgroundColor};
+          border: 1px solid ${theme.borderColor};
+        }
+      `}
 `;
 
 export const Title = styled(Heading)`
@@ -61,7 +68,8 @@ export const Title = styled(Heading)`
   line-height: 150%;
   background-color: transparent;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ theme }) => `color: ${theme.color};`};
+  ${({ isDisabled, theme }) =>
+    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
 `;
 
 export const Subtitle = styled(Paragraph)`
@@ -72,10 +80,11 @@ export const Subtitle = styled(Paragraph)`
   -webkit-line-clamp: 2;
   align-self: stretch;
   font-size: 14px;
-  line-height: 150 %;
+  line-height: 150%;
   letter-spacing: 0.14px;
   font-weight: ${FONT_WEIGHT_SEMIBOLD};
-  ${({ theme }) => `color: ${theme.color};`};
+  ${({ isDisabled, theme }) =>
+    `color: ${isDisabled ? theme.disabledColor : theme.color};`};
 `;
 
 export const Footer = styled(Stack)`

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

@@ -8,24 +8,32 @@ import {
   TRANSPARENT
 } from "../../../constants/colors";
 
+const disabledBackgroundColor = {
+  primary: TRANSPARENT
+};
+const disabledBorderColor = {
+  primary: GHOST_GREY
+};
+const disabledColor = {
+  primary: MANATEE_GREY
+};
 const activeBackgroundColor = {
-  primary: `${CORNFLOWER_BLUE}`,
-  disabled: `${TRANSPARENT}`
+  primary: CORNFLOWER_BLUE
 };
 const backgroundColor = {
-  primary: `${LINK_WATER}`,
-  disabled: `${TRANSPARENT}`
+  primary: LINK_WATER
 };
 const borderColor = {
-  primary: `${MOON_RAKER}`,
-  disabled: `${GHOST_GREY}`
+  primary: MOON_RAKER
 };
 const color = {
-  primary: `${ROYAL_BLUE_VIVID}`,
-  disabled: `${MANATEE_GREY}`
+  primary: ROYAL_BLUE_VIVID
 };
 
 export const fallbackValues = {
+  disabledBackgroundColor,
+  disabledBorderColor,
+  disabledColor,
   activeBackgroundColor,
   backgroundColor,
   borderColor,