@thecb/components 10.4.0-beta.0 → 10.4.0-beta.2

package/src/components/atoms/link/ExternalLink.styled.js

@@ -1,6 +1,10 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -18,10 +22,10 @@ export const StyledExternalLink = styled(
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -30,7 +34,6 @@ export const StyledExternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }
 

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,7 +1,11 @@
 import React, { forwardRef } from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { ROYAL_BLUE } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { ROYAL_BLUE } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
+
 /*
   The extracting of props and the disabling of the eslint rule is to stop React from complaining about
   unrecognized DOM attributes.
@@ -24,10 +28,10 @@ export const StyledInternalLink = styled(
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${LINK_TEXT_DECORATION};
 
   &:hover {
     color: ${({ hoverColor }) => hoverColor};
-    text-decoration: underline;
   }
 
   &:focus {
@@ -36,7 +40,6 @@ export const StyledInternalLink = styled(
   }
 
   &:active {
-    text-decoration: underline;
     color: ${({ activeColor }) => activeColor};
   }
 

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}>
-      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
+    <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
+      <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/atoms/placeholder/Placeholder.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, select } from "@storybook/addon-knobs";
+import { boolean, text, select } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
 import page from "../../../../.storybook/page";
 
@@ -23,7 +23,7 @@ const defaultIcon = "accounts";
 export const placeholder = () => (
   <Placeholder
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    isLink
+    isLink={boolean("isLink", true, "props")}
     destination={text("destination", "add-account", "props")}
     text={text("text", "Add an Account", "props")}
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}

package/src/components/atoms/text/Text.styled.js

@@ -8,6 +8,7 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
+  text-decoration: ${({ textDecoration }) => textDecoration};
   white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -60,6 +60,7 @@ const AccountAndRoutingModal = ({
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
+      textDecoration={themeValues.linkTextDecoration}
       extraStyles={`cursor: pointer;`}
       role="button"
       className="modal-trigger"

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.stories.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean, select, text } from "@storybook/addon-knobs";
+
+import AccountAndRoutingModal from "./AccountAndRoutingModal";
+import page from "../../../../.storybook/page";
+
+const groupId = "props";
+
+const variants = {
+  default: "default",
+  None: undefined
+};
+
+const linkVariants = {
+  p: "p",
+  pL: "pL",
+  pS: "pS",
+  pXS: "pXS",
+  pXXS: "pXXS",
+  pXL: "PXL"
+};
+
+export const accountAndRoutingModal = () => (
+  <AccountAndRoutingModal
+    link={text("text", "Show modal", groupId)}
+    title={text("title", "Title", groupId)}
+    isOpen={boolean("isOpen", false, groupId)}
+    acceptText={text("acceptText", "Accept", groupId)}
+    content="Your routing number is the 9-digit..."
+    variant={select("variants", variants, "default", groupId)}
+    linkVariant={select("linkVariants", linkVariants, groupId)}
+    initialFocusSelector="[name='Cancel']"
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/AccountAndRoutingModal",
+  Component: AccountAndRoutingModal
+});
+export default story;

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js

@@ -1,4 +1,7 @@
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import {
+  FONT_WEIGHT_REGULAR,
+  LINK_TEXT_DECORATION
+} from "../../../constants/style_constants";
 
 const linkColor = { default: "#3176AA" };
 const fontSize = { default: "1rem" };
@@ -10,10 +13,15 @@ const modalLinkHoverFocus = {
   default: `outline: none; text-decoration: underline;`
 };
 
+const linkTextDecoration = {
+  default: LINK_TEXT_DECORATION
+};
+
 export const fallbackValues = {
   linkColor,
   fontSize,
   lineHeight,
   fontWeight,
-  modalLinkHoverFocus
+  modalLinkHoverFocus,
+  linkTextDecoration
 };

package/src/components/molecules/index.d.ts

@@ -5,3 +5,4 @@ export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
 export * from "./toast-notification";
+export * from "./popup-menu";

package/src/components/molecules/index.js

@@ -40,3 +40,4 @@ export { default as Timeout } from "./timeout";
 export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
+export { default as PopupMenu } from "./popup-menu";

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",

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

@@ -4,6 +4,7 @@ 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;
@@ -22,13 +23,19 @@ export const Container = styled(Box)`
 
   &:hover,
   &:active {
-    cursor: pointer;
-    box-shadow: 0px 0px 0px 0px rgba(41, 42, 51, 0.1),
+    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);
+      0px 80px 33px 0px rgba(41, 42, 51, 0);`
+      }
+    `};
   }
 
   &:hover:not(:active) {
@@ -38,7 +45,7 @@ export const Container = styled(Box)`
   &:active {
     ${({ theme }) => `
       background-color: ${theme.activeBackgroundColor};
-      border: 1px solid ${theme.color};
+      border: 1px solid ${theme.borderColor};
     ;`}
   }
 `;

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,
+  GHOST_GREY,
+  TRANSPARENT
 } 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: `${GHOST_GREY}`
+};
+const color = {
+  primary: `${ROYAL_BLUE_VIVID}`,
+  disabled: `${MANATEE_GREY}`
+};
 
 export const fallbackValues = {
   activeBackgroundColor,

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

@@ -115,6 +115,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
+                  isInCustomerManagement={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -221,6 +222,7 @@ const Obligation = ({
                   description={description}
                   subDescription={subDescription}
                   allowedPaymentInstruments={allowedPaymentInstruments}
+                  isInCustomerManagement={isInCustomerManagement}
                 />
               )}
             </Cluster>
@@ -243,6 +245,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>