@thecb/components 10.4.0-beta.1 → 10.4.0-beta.10

package/package.json

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

@@ -28,6 +28,6 @@ const color = {
 };
 
 export const fallbackValues = {
-  background: background,
-  color: color
+  background,
+  color
 };

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

@@ -135,7 +135,7 @@ const ButtonWithAction = forwardRef(
         disabledStyles={disabledStyles}
         aria-disabled={disabled}
         as="button"
-        onClick={isLoading || disabled ? undefined : action}
+        onClick={isLoading || disabled ? noop : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}

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

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { Fragment, useState } from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
+import { Box } from "../layouts";
 import ButtonWithAction from "./ButtonWithAction";
 import page from "../../../../.storybook/page";
 
@@ -14,21 +15,38 @@ const variants = {
   smallGhost: "smallGhost",
   tertiary: "tertiary",
   danger: "danger",
+  dangerSecondary: "dangerSecondary",
+  whiteSecondary: "whiteSecondary",
+  whitePrimary: "whitePrimary",
   None: undefined
 };
 const defaultValue = "primary";
 const groupId = "props";
 
-const buttonHandler = () => console.log("Button selected");
+const buttonHandler = () => window.alert("Button click!");
 
 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")}
-  />
+  <Fragment>
+    {/* Uncomment to view buttons on a dark background */}
+    {/* <Box extraStyles="background-color: #000;">
+      <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")}
+      />
+    </Box> */}
+    <Box extraStyles="background-color: #fff;">
+      <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")}
+      />
+    </Box>
+  </Fragment>
 );
 
 const story = page({

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

@@ -8,25 +8,24 @@ const {
   MANATEE_GREY,
   MATISSE_BLUE,
   RASPBERRY,
-  ERROR_COLOR,
-  STORM_GREY
+  ERROR_COLOR
 } = colors;
 
 const { LINK_TEXT_DECORATION } = styleConstants;
 
 const disabledBorderColor = {
-  primary: STORM_GREY,
-  secondary: STORM_GREY,
+  primary: MANATEE_GREY,
+  secondary: MANATEE_GREY,
   back: TRANSPARENT,
-  smallPrimary: STORM_GREY,
-  smallSecondary: STORM_GREY,
+  smallPrimary: MANATEE_GREY,
+  smallSecondary: MANATEE_GREY,
   smallGhost: TRANSPARENT,
   ghost: TRANSPARENT,
   tertiary: TRANSPARENT,
-  danger: STORM_GREY,
-  dangerSecondary: STORM_GREY,
-  whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  danger: MANATEE_GREY,
+  dangerSecondary: MANATEE_GREY,
+  whiteSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY
 };
 
 const disabledColor = {

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

@@ -17,7 +17,6 @@ import {
   PaymentMethodAddIcon
 } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { noop } from "../../../util/general";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -37,27 +36,21 @@ const PlaceholderContentWrapper = ({
   action,
   destination,
   children,
-  dataQa,
-  disabled = false
+  dataQa
 }) =>
   isLink ? (
     <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
-      <Box
-        padding="0"
-        minHeight="100%"
-        extraStyles={disabled ? `cursor: default;` : `cursor: pointer;`}
-      >
+      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
   ) : (
     <Box
-      onClick={disabled ? noop : action}
+      onClick={action}
       padding="0"
       minHeight="100%"
+      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
-      aria-disabled={disabled}
-      extraStyles={disabled ? "cursor: default;" : "cursor: pointer;"}
     >
       {children}
     </Box>
@@ -72,26 +65,21 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  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={`
+  dataQa
+}) => (
+  <PlaceholderContentWrapper
+    isLink={isLink}
+    action={action}
+    destination={destination}
+    dataQa={dataQa}
+  >
+    <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%,
@@ -112,22 +100,22 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
-        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 { 
+      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 { 
                     fill: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
@@ -136,45 +124,44 @@ 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

@@ -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,
@@ -40,7 +39,10 @@ const LinkCard = ({
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
       onClick={disabled ? noop : onClick}
-      disabled={disabled}
+      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,

package/src/components/molecules/obligation/Obligation.js

@@ -115,6 +115,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
+                  disableActions={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -138,7 +139,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -162,7 +163,7 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
-          isInCustomerManagement={isInCustomerManagement}
+          disableActions={isInCustomerManagement}
         />
       )}
     </Box>
@@ -221,7 +222,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
-                  isInCustomerManagement={isInCustomerManagement}
+                  disableActions={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -244,7 +245,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
+              disableActions={isInCustomerManagement}
             />
           )}
         </Stack>