@thecb/components 10.2.4-beta.0 → 10.2.4-beta.10

package/package.json

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

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

@@ -32,9 +32,13 @@ const StyledBadge = styled(Text)`
 
 const Badge = ({ label, Icon, themeValues, iconOnLeft = true }) => (
   <StyledBadgeContainer background={themeValues.background}>
-    {iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+    {iconOnLeft && Icon && (
+      <Icon color={themeValues.color} fill={themeValues.color} />
+    )}
     <StyledBadge color={themeValues.color}>{label}</StyledBadge>
-    {!iconOnLeft && Icon && <Icon fill={themeValues.color} />}
+    {!iconOnLeft && Icon && (
+      <Icon color={themeValues.color} fill={themeValues.color} />
+    )}
   </StyledBadgeContainer>
 );
 

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/atoms/button-with-action/ButtonWithAction.js

@@ -81,6 +81,7 @@ const ButtonWithAction = forwardRef(
     },
     ref
   ) => {
+    const isGhostVariant = variant === "ghost" || variant === "smallGhost";
     const themeContext = useContext(ThemeContext);
     const themeValues = createThemeValues(
       themeContext,
@@ -110,9 +111,9 @@ const ButtonWithAction = forwardRef(
     };
   `;
     const disabledStyles = `
-    background-color: #6D717E;
-    border-color: #6D717E;
-    color: #FFFFFF;
+    background-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
+    border-color: ${isGhostVariant ? "transparent;" : "#6D717E;"};
+    color: ${isGhostVariant ? "#6D717E;" : "#FFFFFF"};
     cursor: default;
     &:focus {
       outline: 3px solid #6D717E;
@@ -155,7 +156,9 @@ const ButtonWithAction = forwardRef(
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
                 textWrap={textWrap}
-                extraStyles={textExtraStyles}
+                extraStyles={
+                  disabled ? textExtraStyles + disabledStyles : textExtraStyles
+                }
               >
                 {text}
               </Text>

package/src/components/atoms/icons/AutopayIcon.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 // Fill color based on default "success" variant color
-const AutopayIcon = ({ fill = "#317D4F" }) => (
+const AutopayIcon = ({ fill = "#317D4F", color = "#317D4F" }) => (
   <svg
     width="16"
     height="16"
@@ -24,7 +24,7 @@ const AutopayIcon = ({ fill = "#317D4F" }) => (
       />
     </mask>
     <g mask="url(#mask0_5560_39870)">
-      <path d="M0 0H16V16H0V0Z" fill={fill} />
+      <path d="M0 0H16V16H0V0Z" fill={fill || color} />
     </g>
   </svg>
 );

package/src/components/atoms/layouts/Box.js

@@ -45,6 +45,7 @@ const Box = forwardRef(
       extraStyles,
       srOnly = false,
       dataQa,
+      disabled = false,
       children,
       ...rest
     },

package/src/components/atoms/layouts/examples/box-example/BoxExample.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, radios, select } from "@storybook/addon-knobs";
+import { boolean, text, radios, select } from "@storybook/addon-knobs";
 
 import page from "../../../../../../.storybook/page";
 import Box from "../../Box";
@@ -47,6 +47,7 @@ export const box = () => (
     onFocus={text("onFocus", () => {}, groupId)}
     onBlur={text("onBlur", () => {}, groupId)}
     onTouchEnd={text("onTouchEnd", () => {}, groupId)}
+    disabled={boolean("disabled", false, groupId)}
   >
     Text Child
     <LayoutContentBlock

package/src/components/atoms/placeholder/Placeholder.js

@@ -41,8 +41,12 @@ const PlaceholderContentWrapper = ({
   disabled = false
 }) =>
   isLink ? (
-    <Link to={destination} data-qa={dataQa} disabled={disabled}>
-      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
+    <Link to={destination} data-qa={dataQa} aria-disabled={disabled}>
+      <Box
+        padding="0"
+        minHeight="100%"
+        extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
+      >
         {children}
       </Box>
     </Link>
@@ -53,11 +57,7 @@ const PlaceholderContentWrapper = ({
       minHeight="100%"
       dataQa={dataQa}
       aria-disabled={disabled}
-      extraStyles={
-        disabled
-          ? "cursor: default; opacity: 0.7;"
-          : "cursor: pointer; opacity: 1;"
-      }
+      extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
     >
       {children}
     </Box>
@@ -74,21 +74,24 @@ const Placeholder = ({
   themeValues,
   dataQa,
   disabled = false
-}) => (
-  <PlaceholderContentWrapper
-    isLink={isLink}
-    action={action}
-    destination={destination}
-    dataQa={dataQa}
-    disabled={disabled}
-  >
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={`
+}) => {
+  const tintedColor = `${tint(0.9, themeValues.color)}`;
+
+  return (
+    <PlaceholderContentWrapper
+      isLink={isLink}
+      action={action}
+      destination={destination}
+      dataQa={dataQa}
+      disabled={disabled}
+    >
+      <Box
+        padding="0"
+        borderRadius="4px"
+        border="none"
+        minHeight={themeValues.height}
+        hiddenStyles={!visible}
+        extraStyles={`
         background: linear-gradient(
           to right,
           ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
@@ -109,22 +112,22 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-      hoverStyles={`background-color: ${
-        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
-      };`}
-    >
-      <Center maxWidth="300px">
-        <Box
-          padding="0"
-          tabIndex="0"
-          onKeyPress={e => e.key === "Enter" && !disabled && action()}
-        >
-          <Cluster justify="center" align="center" minHeight="100%">
-            <Switcher maxChildren={2} childGap="0">
-              {variant === "large" && <div></div>}
-              <Box
-                padding="0"
-                extraStyles={`.fill { 
+        hoverStyles={`background-color: ${
+          variant === "large" ? GRECIAN_GREY : tintedColor
+        };`}
+      >
+        <Center maxWidth="300px">
+          <Box
+            padding="0"
+            tabIndex="0"
+            onKeyPress={e => e.key === "Enter" && !disabled && action()}
+          >
+            <Cluster justify="center" align="center" minHeight="100%">
+              <Switcher maxChildren={2} childGap="0">
+                {variant === "large" && <div></div>}
+                <Box
+                  padding="0"
+                  extraStyles={`.fill { 
                     fill: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
@@ -133,44 +136,45 @@ const Placeholder = ({
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
                   }`}
-              >
-                {variant === "large" ? (
-                  <Center intrinsic>
-                    {getLargeIcon(largeIcon)}
-                    <Text
-                      variant="pS"
-                      color={themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
-                      extraStyles={`text-align: center;`}
-                    >
-                      {text}
-                    </Text>
-                  </Center>
-                ) : (
-                  <Cover singleChild minHeight="100%">
-                    <Cluster justify="center" align="center">
-                      <IconAdd />
-                      <Center intrinsic>
-                        <Text
-                          variant="pS"
-                          color={themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
-                          extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                        >
-                          {text}
-                        </Text>
-                      </Center>
-                    </Cluster>
-                  </Cover>
-                )}
-              </Box>
-            </Switcher>
-          </Cluster>
-        </Box>
-      </Center>
-    </Box>
-  </PlaceholderContentWrapper>
-);
+                >
+                  {variant === "large" ? (
+                    <Center intrinsic>
+                      {getLargeIcon(largeIcon)}
+                      <Text
+                        variant="pS"
+                        color={themeValues.color}
+                        weight={FONT_WEIGHT_REGULAR}
+                        extraStyles={`text-align: center;`}
+                      >
+                        {text}
+                      </Text>
+                    </Center>
+                  ) : (
+                    <Cover singleChild minHeight="100%">
+                      <Cluster justify="center" align="center">
+                        <IconAdd />
+                        <Center intrinsic>
+                          <Text
+                            variant="pS"
+                            color={themeValues.color}
+                            weight={FONT_WEIGHT_REGULAR}
+                            extraStyles={`padding: 0 0 0 8px; text-align: center;`}
+                          >
+                            {text}
+                          </Text>
+                        </Center>
+                      </Cluster>
+                    </Cover>
+                  )}
+                </Box>
+              </Switcher>
+            </Cluster>
+          </Box>
+        </Center>
+      </Box>
+    </PlaceholderContentWrapper>
+  );
+};
 
 export default themeComponent(
   Placeholder,

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", // "primary" | "disabled"
   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={disabled ? noop : onClick}
+      aria-disabled={disabled}
     >
       <Stack
         childGap={0}
@@ -63,9 +67,12 @@ const LinkCard = ({
         >
           <Styled.Footer direction="row" childGap="6px" justify="space-between">
             {/* To keep rightContent aligned right, use an empty Box as leftContent if none is provided */}
-            {showLeft && !leftContent && <Box />}
-            {showLeft && leftContent}
-            {showRight && rightContent}
+            {showLeft && !!leftContent ? (
+              leftContent
+            ) : (
+              <Box extraStyles="margin-right: auto;" />
+            )}
+            {showRight && !!rightContent && rightContent}
           </Styled.Footer>
         </Box>
       </Stack>
@@ -73,4 +80,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,79 @@
+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 { 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 {
+  CORNFLOWER_BLUE,
+  ROYAL_BLUE_VIVID,
+  MANATEE_GREY,
+  TRANSPARENT
+} 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
-    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};}
+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", false, 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)}
+      showLeft={boolean("showLeft", showLeft, groupId)}
+      onClick={() => window.alert("Click event!")}
+      leftContent={renderLeftContent({ disabled })}
+      showRight={boolean("showRight", true, groupId)}
+      rightContent={renderRightContent({ disabled })}
+      extraHoverStyles={`
+      .show-on-hover {
+        color: ${disabled ? MANATEE_GREY : ROYAL_BLUE_VIVID};
+      }
     `}
-    extraActiveStyles={`
-      background-color: ${CORNFLOWER_BLUE};
+      extraActiveStyles={`
+      background-color: ${disabled ? TRANSPARENT : CORNFLOWER_BLUE};
     `}
-  />
-);
+    />
+  );
+};
 
 const story = page({
   title: "Components|Molecules/LinkCard",

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

@@ -2,13 +2,28 @@ import {
   CORNFLOWER_BLUE,
   LINK_WATER,
   MOON_RAKER,
-  ROYAL_BLUE_VIVID
+  ROYAL_BLUE_VIVID,
+  MANATEE_GREY,
+  ATHENS_GREY,
+  GHOST_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: `${ATHENS_GREY}`
+};
+const backgroundColor = {
+  primary: `${LINK_WATER}`,
+  disabled: `${ATHENS_GREY}`
+};
+const borderColor = {
+  primary: `${MOON_RAKER}`,
+  disabled: `${GHOST_GREY}`
+};
+const color = {
+  primary: `${ROYAL_BLUE_VIVID}`,
+  disabled: `${MANATEE_GREY}`
+};
 
 export const fallbackValues = {
   activeBackgroundColor,