@thecb/components 10.2.4-beta.3 → 10.2.4-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.4-beta.3",
+  "version": "10.2.4-beta.5",
   "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,5 +1,7 @@
 import {
+  ATHENS_GREY,
   CORNFLOWER_BLUE,
+  GHOST_GREY,
   HALF_COLONIAL_WHITE,
   HINT_GREEN,
   INFO_BLUE,
@@ -13,17 +15,19 @@ const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
-  success: `${HINT_GREEN}`
+  success: `${HINT_GREEN}`,
+  disabled: `${ATHENS_GREY}`
 };
 
 const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
-  success: `${SEA_GREEN}`
+  success: `${SEA_GREEN}`,
+  disabled: `${GHOST_GREY}`
 };
 
 export const fallbackValues = {
-  background,
-  color
+  background: background,
+  color: color
 };

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

@@ -4,8 +4,10 @@ import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LinkCard.theme";
 import { ThemeContext } from "styled-components";
 import * as Styled from "./LinkCard.styled";
+import { noop } from "../../../util/general";
 
 const LinkCard = ({
+  variant = "primary",
   title = "Test Workflow",
   subtitle = "Link your benefit plan",
   showLeft,
@@ -17,7 +19,8 @@ const LinkCard = ({
   extraHoverStyles = "",
   extraActiveStyles = "",
   themeValues,
-  titleVariant = "h3"
+  titleVariant = "h3",
+  disabled = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
   const regex = /\W/g;
@@ -36,7 +39,8 @@ const LinkCard = ({
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
-      onClick={onClick}
+      onClick={variant === "disabled" || disabled ? noop : onClick}
+      aria-disabled={disabled}
     >
       <Stack
         childGap={0}
@@ -73,4 +77,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,49 +1,87 @@
-import React from "react";
+import page from "../../../../.storybook/page";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import React, { useContext } from "react";
+import { ThemeContext } from "styled-components";
+import { createThemeValues } from "../../../util/themeUtils";
+import { fallbackValues } from "./LinkCard.theme";
 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 { 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";
-const groupId = "props";
 
-export const linkCard = () => (
-  <LinkCard
-    title={text("title", "Link Card Title", "props")}
-    subtitle={text("subtitle", "Link card description", groupId)}
-    path={text("path", "/service/animal-care-and-control", "props")}
-    showLeft={true}
-    leftContent={
-      <Box background="transparent" borderWidthOverride="0 0 0 0" padding="0">
-        <Badge label="Autopay Available" Icon={AutopayIcon} />
-      </Box>
-    }
-    showRight={true}
-    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};}
+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;
+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 themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "Link",
+    variant
+  ); */
+  const leftContent = <LeftContent parentVariant={variant} />;
+  return (
+    <LinkCard
+      variant={select("variant", variants, variant, groupId)}
+      disabled={boolean("disabled", disabled, 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

@@ -1,18 +1,33 @@
 import {
+  ATHENS_GREY,
   CORNFLOWER_BLUE,
+  GHOST_GREY,
   LINK_WATER,
   MOON_RAKER,
-  ROYAL_BLUE_VIVID
+  ROYAL_BLUE_VIVID,
+  STORM_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: `${GHOST_GREY}`
+};
+const backgroundColor = {
+  primary: `${LINK_WATER}`,
+  disabled: `${ATHENS_GREY}`
+};
+const borderColor = {
+  primary: `${MOON_RAKER}`,
+  disabled: `${STORM_GREY}`
+};
+const color = {
+  primary: `${ROYAL_BLUE_VIVID}`,
+  disabled: `${GHOST_GREY}`
+};
 
 export const fallbackValues = {
-  activeBackgroundColor,
-  backgroundColor,
-  borderColor,
-  color
+  activeBackgroundColor: activeBackgroundColor,
+  backgroundColor: backgroundColor,
+  borderColor: borderColor,
+  color: color
 };