@thecb/components 10.2.4-beta.8 → 10.3.0

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { text, select, boolean } from "@storybook/addon-knobs";
+import { boolean, text, select } from "@storybook/addon-knobs";
 import Placeholder from "./Placeholder";
 import page from "../../../../.storybook/page";
 
@@ -21,27 +21,14 @@ const iconLabel = "largeIcon";
 const defaultIcon = "accounts";
 
 export const placeholder = () => (
-  <>
-    <h2>Placeholder w/Link</h2>
-    <Placeholder
-      variant={select(variantsLabel, variants, defaultValue, groupId)}
-      isLink
-      destination={text("destination", "/", "props")}
-      text={text("text", "Add an Account", "props")}
-      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-      key="placeholder1"
-      disabled={boolean("disabled", false, groupId)}
-    />
-    <h2>Placeholder w/Action</h2>
-    <Placeholder
-      variant={select(variantsLabel, variants, defaultValue, groupId)}
-      text={text("text", "Add an Account", "props")}
-      largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-      key="placeholder2"
-      disabled={boolean("disabled", false, groupId)}
-      action={() => window.alert("Click event registered!")}
-    />
-  </>
+  <Placeholder
+    variant={select(variantsLabel, variants, defaultValue, groupId)}
+    isLink={boolean("isLink", true, "props")}
+    destination={text("destination", "add-account", "props")}
+    text={text("text", "Add an Account", "props")}
+    largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
+    key="placeholder"
+  />
 );
 
 const story = page({

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,10 +4,8 @@ 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,
@@ -38,8 +36,7 @@ const LinkCard = ({
       extraStyles={extraStyles}
       hoverStyles={extraHoverStyles}
       activeStyles={extraActiveStyles}
-      onClick={variant === "disabled" ? noop : onClick}
-      aria-disabled={variant === "disabled"}
+      onClick={onClick}
     >
       <Stack
         childGap={0}
@@ -76,4 +73,4 @@ const LinkCard = ({
   );
 };
 
-export default themeComponent(LinkCard, "LinkCard", fallbackValues, "primary");
+export default themeComponent(LinkCard, "LinkCard", fallbackValues);

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

@@ -1,77 +1,49 @@
-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 {
-  ATHENS_GREY,
-  CORNFLOWER_BLUE,
-  ROYAL_BLUE_VIVID,
-  GHOST_GREY
-} from "../../../constants/colors";
-
+import { CORNFLOWER_BLUE, ROYAL_BLUE_VIVID } 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 leftContent = <LeftContent parentVariant={variant} />;
-  return (
-    <LinkCard
-      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={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};}
+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};}
     `}
-      extraActiveStyles={`
-      background-color: ${disabled ? ATHENS_GREY : CORNFLOWER_BLUE};
+    extraActiveStyles={`
+      background-color: ${CORNFLOWER_BLUE};
     `}
-    />
-  );
-};
+  />
+);
 
 const story = page({
   title: "Components|Molecules/LinkCard",

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

@@ -2,27 +2,13 @@ import {
   CORNFLOWER_BLUE,
   LINK_WATER,
   MOON_RAKER,
-  ROYAL_BLUE_VIVID,
-  MANATEE_GREY,
-  ATHENS_GREY
+  ROYAL_BLUE_VIVID
 } from "../../../constants/colors";
 
-const activeBackgroundColor = {
-  primary: `${CORNFLOWER_BLUE}`,
-  disabled: `${ATHENS_GREY}`
-};
-const backgroundColor = {
-  primary: `${LINK_WATER}`,
-  disabled: `${ATHENS_GREY}`
-};
-const borderColor = {
-  primary: `${MOON_RAKER}`,
-  disabled: `${MANATEE_GREY}`
-};
-const color = {
-  primary: `${ROYAL_BLUE_VIVID}`,
-  disabled: `${MANATEE_GREY}`
-};
+const activeBackgroundColor = CORNFLOWER_BLUE;
+const backgroundColor = LINK_WATER;
+const borderColor = MOON_RAKER;
+const color = ROYAL_BLUE_VIVID;
 
 export const fallbackValues = {
   activeBackgroundColor,

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

@@ -36,8 +36,7 @@ const Obligation = ({
   inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
-  inactiveLookupValue = "",
-  isInCustomerManagement = false
+  inactiveLookupValue = ""
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -138,7 +137,6 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
-              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -162,7 +160,6 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
-          isInCustomerManagement={isInCustomerManagement}
         />
       )}
     </Box>

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -27,8 +27,7 @@ const AutopayModal = ({
   inactive,
   description,
   subDescription,
-  allowedPaymentInstruments,
-  isInCustomerManagement = false
+  allowedPaymentInstruments
 }) => {
   const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
     const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
@@ -81,7 +80,6 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
-            disabled={isInCustomerManagement}
             text={
               autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
             }
@@ -101,7 +99,6 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
-            disabled={isInCustomerManagement}
             text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -23,8 +23,7 @@ const PaymentDetailsActions = ({
   dueDate,
   description,
   subDescription,
-  allowedPaymentInstruments,
-  isInCustomerManagement = false
+  allowedPaymentInstruments
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -120,7 +119,6 @@ const PaymentDetailsActions = ({
                 }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-                disabled={isInCustomerManagement}
               />
             ) : (
               <AutopayModalModule
@@ -150,7 +148,6 @@ const PaymentDetailsActions = ({
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
-                disabled={isInCustomerManagement}
               />
             </Box>
           )}
@@ -164,7 +161,6 @@ const PaymentDetailsActions = ({
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"
               extraStyles={isMobile && `flex-grow: 1; width: 100%; margin: 0;`}
-              disabled={isInCustomerManagement}
             />
           </Box>
         )}

package/src/components/molecules/pagination/Pagination.js

@@ -94,6 +94,7 @@ export const getPagesPanel = (page, pagesCount) => {
 
 const Pagination = ({
   activeBorderWidth = "3px",
+  ariaLabel,
   arrowColor,
   borderRadius = "3px",
   buttonHeight = "44px",
@@ -107,7 +108,6 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
-  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -115,12 +115,6 @@ const Pagination = ({
   const extraStyles = `
     min-width: ${buttonWidth}; min-height: 100%; padding: 0;
     border-radius: ${borderRadius};
-    &:hover, &:focus {
-      text-decoration: none;
-      > * > span {
-        text-decoration: none;
-      }
-    }
     > * > span {
       color: ${numberColor ?? themeValues.numberColor}
     }