@thecb/components 10.2.4-beta.4 → 10.2.4-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.4-beta.4",
+  "version": "10.2.4-beta.6",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/badge/Badge.stories.js

@@ -9,7 +9,8 @@ const variants = {
   info: "info",
   warn: "warn",
   primary: "primary",
-  success: "success"
+  success: "success",
+  disabled: "disabled"
 };
 
 const defaultValue = "success";

package/src/components/atoms/badge/Badge.theme.js

@@ -1,4 +1,6 @@
 import {
+  MANATEE_GREY,
+  GRECIAN_GREY,
   CORNFLOWER_BLUE,
   HALF_COLONIAL_WHITE,
   HINT_GREEN,
@@ -13,17 +15,19 @@ const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
-  success: `${HINT_GREEN}`
+  success: `${HINT_GREEN}`,
+  disabled: `${GRECIAN_GREY}`
 };
 
 const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
-  success: `${SEA_GREEN}`
+  success: `${SEA_GREEN}`,
+  disabled: `${MANATEE_GREY}`
 };
 
 export const fallbackValues = {
-  background,
-  color
+  background: background,
+  color: color
 };

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

@@ -5,9 +5,9 @@ import { fallbackValues } from "./LinkCard.theme";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
 import { noop } from "../../../util/general";
-import { ATHENS_GREY } from "../../../constants/colors";
 
 const LinkCard = ({
+  variant = "primary", // "primary" | "disabled"
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   showLeft,
@@ -19,8 +19,7 @@ const LinkCard = ({
   extraHoverStyles = "",
   extraActiveStyles = "",
   themeValues,
-  titleVariant = "h3",
-  disabled = false
+  titleVariant = "h3"
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
@@ -36,16 +35,11 @@ const LinkCard = ({
       minHeight="141px"
       padding="24px"
       theme={themeValues}
-      extraStyles={
-        disabled
-          ? extraStyles +
-            `background-color: ${ATHENS_GREY} !important; cursor: default;`
-          : extraStyles
-      }
-      hoverStyles={disabled ? "" : extraHoverStyles}
-      activeStyles={disabled ? "" : extraActiveStyles}
-      onClick={disabled ? noop : onClick}
-      aria-disabled={disabled}
+      extraStyles={extraStyles}
+      hoverStyles={extraHoverStyles}
+      activeStyles={extraActiveStyles}
+      onClick={variant === "disabled" ? noop : onClick}
+      aria-disabled={variant === "disabled"}
     >
       <Stack
         childGap={0}
@@ -54,20 +48,12 @@ const LinkCard = ({
         style={{ width: "100%" }}
         fullHeight
       >
-        <Box
-          padding={0}
-          width="100%"
-          extraStyles={disabled ? "opacity: 0.5;" : ""}
-        >
+        <Box padding={0} width="100%">
           <Styled.Title variant={titleVariant} theme={themeValues} margin={0}>
             {title}
           </Styled.Title>
         </Box>
-        <Box
-          padding={"0 0 40px"}
-          width="100%"
-          extraStyles={disabled ? "opacity: 0.5;" : ""}
-        >
+        <Box padding={"0 0 40px"} width="100%">
           <Styled.Subtitle variant="pS" theme={themeValues}>
             {subtitle}
           </Styled.Subtitle>
@@ -77,7 +63,6 @@ const LinkCard = ({
           borderWidthOverride="0 0 0 0"
           padding="0"
           width="100%"
-          extraStyles={disabled ? "opacity: 0.5;" : ""}
         >
           <Styled.Footer direction="row" childGap="6px" justify="space-between">
             {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
@@ -91,4 +76,4 @@ const LinkCard = ({
   );
 };
 
-export default themeComponent(LinkCard, "LinkCard", fallbackValues);
+export default themeComponent(LinkCard, "LinkCard", fallbackValues, "primary");

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

@@ -1,51 +1,77 @@
+import page from "../../../../.storybook/page";
+import { boolean, select, text } from "@storybook/addon-knobs";
 import React from "react";
 import LinkCard from "./LinkCard";
 import Box from "../../atoms/layouts/Box";
 import Stack from "../../atoms/layouts/Stack";
 import Text from "../../atoms/text/Text";
-import page from "../../../../.storybook/page";
-import { boolean, text } from "@storybook/addon-knobs";
 import Badge from "../../atoms/badge/Badge";
 import PlusCircleIcon from "../../atoms/icons/PlusCircleIcon";
 import AutopayIcon from "../../atoms/icons/AutopayIcon";
-import { CORNFLOWER_BLUE, ROYAL_BLUE_VIVID } from "../../../constants/colors";
+
+import {
+  ATHENS_GREY,
+  CORNFLOWER_BLUE,
+  ROYAL_BLUE_VIVID,
+  GHOST_GREY
+} from "../../../constants/colors";
+
 const groupId = "props";
+const variant = "primary";
+const variants = { primary: "primary", disabled: "disabled" };
+const disabled = false;
+const showLeft = true;
 
-export const linkCard = () => (
-  <LinkCard
-    disabled={boolean("disabled", false, groupId)}
-    title={text("title", "Link Card Title", groupId)}
-    subtitle={text("subtitle", "Link card description", groupId)}
-    path={text("path", "/service/animal-care-and-control", groupId)}
-    showLeft={boolean("showLeft", true, groupId)}
-    onClick={() => window.alert("Click event!")}
-    leftContent={
-      <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
-        <Badge label="Autopay Available" Icon={AutopayIcon} />
-      </Box>
-    }
-    showRight={boolean("showRight", true, groupId)}
-    rightContent={
-      <Stack direction="row" childGap="6px">
-        <Text
-          variant="pS"
-          color={ROYAL_BLUE_VIVID}
-          extraStyles="text-align: right; color: transparent;"
-          className="show-on-hover"
-        >
-          Find
-        </Text>
-        <PlusCircleIcon color={ROYAL_BLUE_VIVID} />
-      </Stack>
-    }
-    extraHoverStyles={`
-      .show-on-hover {color: ${ROYAL_BLUE_VIVID};}
+const LeftContent = ({ parentVariant }) => {
+  return (
+    <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
+      <Badge
+        label="Autopay Available"
+        Icon={AutopayIcon}
+        variant={parentVariant === "disabled" ? "disabled" : "success"}
+      />
+    </Box>
+  );
+};
+export const linkCard = () => {
+  const leftContent = <LeftContent parentVariant={variant} />;
+  return (
+    <LinkCard
+      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)}
+      showLeft={boolean("showLeft", showLeft, groupId)}
+      onClick={() => window.alert("Click event!")}
+      leftContent={leftContent}
+      showRight={boolean("showRight", true, groupId)}
+      rightContent={
+        <Stack direction="row" childGap="6px">
+          <Text
+            variant="pS"
+            className="show-on-hover"
+            extraStyles={`text-align: right; color: transparent; ${
+              !showLeft || (showLeft && !leftContent)
+                ? "margin-left: auto;"
+                : ""
+            }`}
+          >
+            Find
+          </Text>
+          <PlusCircleIcon
+            color={variant === "disabled" ? GHOST_GREY : ROYAL_BLUE_VIVID}
+          />
+        </Stack>
+      }
+      extraHoverStyles={`
+      .show-on-hover {color: ${disabled ? ATHENS_GREY : ROYAL_BLUE_VIVID};}
     `}
-    extraActiveStyles={`
-      background-color: ${CORNFLOWER_BLUE};
+      extraActiveStyles={`
+      background-color: ${disabled ? ATHENS_GREY : CORNFLOWER_BLUE};
     `}
-  />
-);
+    />
+  );
+};
 
 const story = page({
   title: "Components|Molecules/LinkCard",

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

@@ -2,17 +2,31 @@ import {
   CORNFLOWER_BLUE,
   LINK_WATER,
   MOON_RAKER,
-  ROYAL_BLUE_VIVID
+  ROYAL_BLUE_VIVID,
+  GRECIAN_GREY,
+  MANATEE_GREY
 } from "../../../constants/colors";
 
-const activeBackgroundColor = CORNFLOWER_BLUE;
-const backgroundColor = LINK_WATER;
-const borderColor = MOON_RAKER;
-const color = ROYAL_BLUE_VIVID;
+const activeBackgroundColor = {
+  primary: `${CORNFLOWER_BLUE}`,
+  disabled: `transparent`
+};
+const backgroundColor = {
+  primary: `${LINK_WATER}`,
+  disabled: `transparent`
+};
+const borderColor = {
+  primary: `${MOON_RAKER}`,
+  disabled: `${GRECIAN_GREY}`
+};
+const color = {
+  primary: `${ROYAL_BLUE_VIVID}`,
+  disabled: `${MANATEE_GREY}`
+};
 
 export const fallbackValues = {
-  activeBackgroundColor,
-  backgroundColor,
-  borderColor,
-  color
+  activeBackgroundColor: activeBackgroundColor,
+  backgroundColor: backgroundColor,
+  borderColor: borderColor,
+  color: color
 };