@thecb/components 10.3.0 → 10.4.0-beta.1

package/package.json

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

@@ -91,29 +91,35 @@ const ButtonWithAction = forwardRef(
     const { isMobile } = themeContext;
 
     const hoverStyles = `
-    outline: none;
-    background-color: ${themeValues.hoverBackgroundColor};
-    border-color: ${themeValues.hoverBorderColor};
-    color: ${themeValues.hoverColor};
-    cursor: pointer;
-  `;
+      outline: none;
+      background-color: ${themeValues.hoverBackgroundColor};
+      border-color: ${themeValues.hoverBorderColor};
+      color: ${themeValues.hoverColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
+      cursor: pointer;
+    `;
     const activeStyles = `
-    outline: none;
-    background-color: ${themeValues.activeBackgroundColor};
-    border-color: ${themeValues.activeBorderColor};
-    color: ${themeValues.activeColor};
+      outline: none;
+      background-color: ${themeValues.activeBackgroundColor};
+      border-color: ${themeValues.activeBorderColor};
+      color: ${themeValues.activeColor};
+      text-decoration: ${
+        variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+      };
   `;
     const disabledStyles = `
-    background-color: #6D717E;
-    border-color: #6D717E;
-    color: #FFFFFF;
-    cursor: default;
-    &:focus {
-      outline: 3px solid #6D717E;
-      outline-offset: 2px;
-    }
-    ${extraDisabledStyles}
-  `;
+      background-color: ${themeValues.disabledBackgroundColor};
+      border-color: ${themeValues.disabledBorderColor};
+      color: ${themeValues.disabledColor};
+      cursor: default;
+      &:focus {
+        outline: 3px solid ${themeValues.disabledBorderColor};
+        outline-offset: 2px;
+      }
+      ${extraDisabledStyles}
+    `;
 
     return (
       <Box
@@ -147,7 +153,7 @@ const ButtonWithAction = forwardRef(
               <Text
                 weight={themeValues.fontWeight}
                 variant={themeValues.fontSizeVariant}
-                color={themeValues.color}
+                color={disabled ? themeValues.disabledColor : themeValues.color}
                 textDecoration={themeValues.textDecoration}
                 textWrap={textWrap}
                 extraStyles={textExtraStyles}

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -12,6 +12,7 @@ const variants = {
   smallSecondary: "smallSecondary",
   ghost: "ghost",
   smallGhost: "smallGhost",
+  tertiary: "tertiary",
   danger: "danger",
   None: undefined
 };
@@ -23,10 +24,10 @@ const buttonHandler = () => console.log("Button selected");
 export const buttonWithAction = () => (
   <ButtonWithAction
     variant={select(variantsLabel, variants, defaultValue, groupId)}
+    disabled={boolean("disabled", false, "props")}
     text={text("text", "button", "props")}
     isLoading={boolean("isLoading", false, "props")}
     action={text("action", buttonHandler, "props")}
-    disabled={boolean("disabled", false, "props")}
   />
 );
 

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -5,13 +5,60 @@ const {
   TRANSPARENT,
   SAPPHIRE_BLUE,
   PEACOCK_BLUE,
+  MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  STORM_GREY
 } = colors;
 
 const { LINK_TEXT_DECORATION } = styleConstants;
 
+const disabledBorderColor = {
+  primary: STORM_GREY,
+  secondary: STORM_GREY,
+  back: TRANSPARENT,
+  smallPrimary: STORM_GREY,
+  smallSecondary: STORM_GREY,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: STORM_GREY,
+  dangerSecondary: STORM_GREY,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
+};
+
+const disabledColor = {
+  primary: WHITE,
+  secondary: MANATEE_GREY,
+  back: MANATEE_GREY,
+  smallPrimary: WHITE,
+  smallSecondary: MANATEE_GREY,
+  smallGhost: MANATEE_GREY,
+  ghost: MANATEE_GREY,
+  tertiary: MANATEE_GREY,
+  danger: WHITE,
+  dangerSecondary: MANATEE_GREY,
+  whiteSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY
+};
+
+const disabledBackgroundColor = {
+  primary: MANATEE_GREY,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MANATEE_GREY,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: MANATEE_GREY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
+};
+
 const padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -252,5 +299,8 @@ export const fallbackValues = {
   hoverColor,
   activeBackgroundColor,
   activeBorderColor,
-  activeColor
+  activeColor,
+  disabledColor,
+  disabledBackgroundColor,
+  disabledBorderColor
 };

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

@@ -17,6 +17,7 @@ import {
   PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -36,21 +37,27 @@ const PlaceholderContentWrapper = ({
   action,
   destination,
   children,
-  dataQa
+  dataQa,
+  disabled = false
 }) =>
   isLink ? (
     <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
-      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
+      <Box
+        padding="0"
+        minHeight="100%"
+        extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
+      >
         {children}
       </Box>
     </Link>
   ) : (
     <Box
-      onClick={action}
+      onClick={disabled ? noop : action}
       padding="0"
       minHeight="100%"
-      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
+      aria-disabled={disabled}
+      extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
     >
       {children}
     </Box>
@@ -65,21 +72,26 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  dataQa
-}) => (
-  <PlaceholderContentWrapper
-    isLink={isLink}
-    action={action}
-    destination={destination}
-    dataQa={dataQa}
-  >
-    <Box
-      padding="0"
-      borderRadius="4px"
-      border="none"
-      minHeight={themeValues.height}
-      hiddenStyles={!visible}
-      extraStyles={`
+  dataQa,
+  disabled = false
+}) => {
+  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%,
@@ -100,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" && 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
                     }; 
@@ -124,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}
+      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", 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)}
+      showLeft={boolean("showLeft", true, groupId)}
+      onClick={() => window.alert("Click event!")}
+      leftContent={renderLeftContent({ disabled })}
+      showRight={boolean("showRight", true, groupId)}
+      rightContent={renderRightContent({ disabled })}
+      extraHoverStyles={`
+      .show-on-hover {
+        color: ${disabled ? TRANSPARENT : ROYAL_BLUE_VIVID};
+      }
     `}
-    extraActiveStyles={`
-      background-color: ${CORNFLOWER_BLUE};
+      extraActiveStyles={`
+      background-color: ${disabled ? TRANSPARENT : CORNFLOWER_BLUE};
     `}
-  />
-);
+    />
+  );
+};
 
 const story = page({
   title: "Components|Molecules/LinkCard",