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

package/package.json

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

package/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -34,15 +34,14 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 extraStyles={`
                           text-transform: uppercase;
                           ${isActive.toString() === "true" &&
-                            `color: ${themeValues.activeBreadcrumbColor};
-                             pointer-events: none;
-                             text-decoration: none;
+                            `pointer-events: none;
+                             color: ${themeValues.activeBreadcrumbColor};
                             `}
                           &:first-child {
                             margin-left: 0;
                           }
                           &:active {
-                            color: ${themeValues.activeColor};
+                            color: ${themeValues.activeColor}; 
                           }`}
               >
                 {linkText}

package/src/components/atoms/breadcrumb/Breadcrumb.theme.js

@@ -1,8 +1,5 @@
 // import theme from "styled-theming";
-import { colors, styleConstants } from "../../../constants";
-
-const { MATISSE_BLUE, STORM_GREY } = colors;
-const { LINK_TEXT_DECORATION } = styleConstants;
+import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
@@ -16,7 +13,7 @@ const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
 const margin = "0.5rem";
-const hover = `text-decoration: ${LINK_TEXT_DECORATION};`;
+const hover = `text-decoration: none;`;
 
 export const fallbackValues = {
   color,

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

@@ -57,7 +57,7 @@ const Spinner = ({ color, isMobile }) => (
 
   Note: the children prop is only used if contentOverride is set to true, in which case
   the text prop is ignored.
-
+  
 */
 
 const ButtonWithAction = forwardRef(
@@ -68,7 +68,6 @@ const ButtonWithAction = forwardRef(
       text,
       textWrap = false,
       isLoading = false,
-      disabled = false,
       loadingColor = "white",
       dataQa = null,
       textExtraStyles,
@@ -95,6 +94,9 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.hoverBackgroundColor};
     border-color: ${themeValues.hoverBorderColor};
     color: ${themeValues.hoverColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
     cursor: pointer;
   `;
     const activeStyles = `
@@ -102,6 +104,9 @@ const ButtonWithAction = forwardRef(
     background-color: ${themeValues.activeBackgroundColor};
     border-color: ${themeValues.activeBorderColor};
     color: ${themeValues.activeColor};
+    text-decoration: ${
+      variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
+    };
   `;
     const disabledStyles = `
     background-color: #6D717E;
@@ -109,8 +114,8 @@ const ButtonWithAction = forwardRef(
     color: #FFFFFF;
     cursor: default;
     &:focus {
-      outline: 3px solid #6D717E;
-      outline-offset: 2px;
+      box-shadow: 0 0 10px #6D717E;
+      outline: none;
     }
     ${extraDisabledStyles}
   `;
@@ -124,12 +129,11 @@ const ButtonWithAction = forwardRef(
         minWidth={themeValues.minWidth}
         background={themeValues.backgroundColor}
         border={themeValues.border}
-        hoverStyles={disabled ? disabledStyles : hoverStyles}
-        activeStyles={disabled ? disabledStyles : activeStyles}
+        hoverStyles={hoverStyles}
+        activeStyles={activeStyles}
         disabledStyles={disabledStyles}
-        aria-disabled={disabled}
         as="button"
-        onClick={isLoading || disabled ? undefined : action}
+        onClick={isLoading ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}
@@ -148,7 +152,6 @@ const ButtonWithAction = forwardRef(
                 weight={themeValues.fontWeight}
                 variant={themeValues.fontSizeVariant}
                 color={themeValues.color}
-                textDecoration={themeValues.textDecoration}
                 textWrap={textWrap}
                 extraStyles={textExtraStyles}
               >

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

@@ -18,15 +18,12 @@ const variants = {
 const defaultValue = "primary";
 const groupId = "props";
 
-const buttonHandler = () => console.log("Button selected");
-
 export const buttonWithAction = () => (
   <ButtonWithAction
     variant={select(variantsLabel, variants, defaultValue, groupId)}
     text={text("text", "button", "props")}
     isLoading={boolean("isLoading", false, "props")}
-    action={text("action", buttonHandler, "props")}
-    disabled={boolean("disabled", false, "props")}
+    action={text("action", undefined, "props")}
   />
 );
 

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

@@ -1,6 +1,4 @@
-import { colors, styleConstants } from "../../../constants";
-
-const {
+import {
   WHITE,
   TRANSPARENT,
   SAPPHIRE_BLUE,
@@ -8,9 +6,7 @@ const {
   MATISSE_BLUE,
   RASPBERRY,
   ERROR_COLOR
-} = colors;
-
-const { LINK_TEXT_DECORATION } = styleConstants;
+} from "../../../constants/colors";
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -102,21 +98,6 @@ const minWidth = {
   whitePrimary: "130px"
 };
 
-const textDecoration = {
-  primary: "none",
-  secondary: "none",
-  back: "none",
-  smallPrimary: "none",
-  smallSecondary: "none",
-  smallGhost: LINK_TEXT_DECORATION,
-  ghost: LINK_TEXT_DECORATION,
-  tertiary: "none",
-  danger: "none",
-  dangerSecondary: "none",
-  whiteSecondary: "none",
-  whitePrimary: "none"
-};
-
 const backgroundColor = {
   primary: MATISSE_BLUE,
   secondary: TRANSPARENT,
@@ -244,7 +225,6 @@ export const fallbackValues = {
   fontWeight,
   height,
   minWidth,
-  textDecoration,
   backgroundColor,
   border,
   hoverBackgroundColor,

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -9,8 +9,8 @@ const ButtonWithLink = ({
   url = "/",
   disabled = false,
   fileLink = false,
-  extraStyles = "",
-  linkExtraStyles = "",
+  extraStyles,
+  linkExtraStyles,
   newTab = false,
   dataQa,
   ...otherProps
@@ -57,11 +57,7 @@ const ButtonWithLink = ({
         text-decoration: none; }`}
       dataQa={dataQa}
     >
-      <ButtonWithAction
-        {...otherProps}
-        disabled={disabled}
-        extraStyles={extraStyles}
-      />
+      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
     </ButtonWithLinkWrapper>
   );
 };

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

@@ -107,21 +107,6 @@ export const BoxWrapper = styled(
           : ``}
       `}
   }
-  
-  &[aria-disabled="true"] {
-    ${({ disabledStyles, as }) =>
-      css`
-        ${disabledStyles}
-        ${as === "button"
-          ? `        > * > span {
-          ${disabledStyles}
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }`
-          : ``}
-      `}
-  }
 
   & * {
     color: ${({ color }) => color};

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

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

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

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

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

@@ -10,7 +10,6 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
-  textDecoration = "none",
   textWrap = true,
   extraStyles = ``,
   hoverStyles,
@@ -27,7 +26,6 @@ const Text = ({
     weight={weight}
     color={color}
     fontFamily={themeValues.fontFamily}
-    textDecoration={textDecoration}
     as={as}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}

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

@@ -8,7 +8,6 @@ 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/obligation/Obligation.js

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

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

@@ -23,7 +23,8 @@ const PaymentDetailsActions = ({
   dueDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -109,7 +110,7 @@ const PaymentDetailsActions = ({
             padding={isMobile ? "0 8px 0 0" : "0"}
             extraStyles={isMobile && `flex-grow: 1;`}
           >
-            {autoPayAvailable && !autoPayEnabled ? (
+            {autoPayAvailable && !autoPayEnabled && !isInCustomerManagement ? (
               <ButtonWithAction
                 variant="tertiary"
                 text={`Set Up ${planType}`}
@@ -140,7 +141,7 @@ const PaymentDetailsActions = ({
               />
             )}
           </Box>
-          {!isMobile && (
+          {!isMobile && !isInCustomerManagement && (
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
@@ -152,7 +153,7 @@ const PaymentDetailsActions = ({
             </Box>
           )}
         </Cluster>
-        {isMobile && (
+        {isMobile && !isInCustomerManagement && (
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}

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

@@ -94,7 +94,6 @@ export const getPagesPanel = (page, pagesCount) => {
 
 const Pagination = ({
   activeBorderWidth = "3px",
-  ariaLabel,
   arrowColor,
   borderRadius = "3px",
   buttonHeight = "44px",
@@ -108,6 +107,7 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
+  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -115,6 +115,12 @@ 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}
     }

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

@@ -1,7 +1,8 @@
 import {
   WHITE,
   MATISSE_BLUE,
-  ALABASTER_WHITE
+  ALABASTER_WHITE,
+  STORM_GREY
 } from "../../../constants/colors";
 
 const arrowColor = WHITE;

package/src/components/molecules/tab-sidebar/TabSidebar.js

@@ -36,6 +36,7 @@ const TabSidebar = ({ links, isMobile, themeValues }) => (
           to={route}
           key={`${route}-${index}`}
           extraStyles={`&:hover {
+            text-decoration: none; 
             ${
               active
                 ? `> * {

package/src/constants/index.d.ts

@@ -1,4 +1,3 @@
 import * as colors from "./colors";
-import * as styleConstants from "./style_constants";
 
-export { colors, styleConstants };
+export { colors };

package/src/constants/index.js

@@ -1,13 +1,4 @@
-export * as colors from "./colors";
-export * as general from "./general";
-export * as regexConstants from "./regex_constants";
-export * as styleConstants from "./style_constants";
+import * as colors from "./colors";
+import * as fontWeights from "./style_constants";
 
-/**
- * This export is named "fontWeights" and referenced as such in much existing code.
- * Navigate Frontend is one example that uses this particular export. However, new
- * usage of style constants should reference the `styleConstants` export instead.
- *
- * @deprecated
- */
-export * as fontWeights from "./style_constants";
+export { colors, fontWeights };

package/src/constants/style_constants.js

@@ -8,7 +8,6 @@ const COMPACT_JUMBO_HEIGHT = "65px";
 const FONT_WEIGHT_REGULAR = "400";
 const FONT_WEIGHT_BOLD = "700";
 const FONT_WEIGHT_SEMIBOLD = "600";
-const LINK_TEXT_DECORATION = "underline solid 1px";
 
 export {
   HEADER_HEIGHT,
@@ -18,6 +17,5 @@ export {
   COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD,
-  LINK_TEXT_DECORATION
+  FONT_WEIGHT_SEMIBOLD
 };

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

@@ -1,32 +0,0 @@
-import React from "react";
-import { number, text } from "@storybook/addon-knobs";
-import Pagination from "./Pagination";
-import page from "../../../../.storybook/page";
-
-export const pagination = () => (
-  <Pagination
-    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
-    ariaLabel={text("ariaLabel", "Aria Label", "props")}
-    arrowColor={text("arrowColor", "#FFFFFF", "props")}
-    borderRadius={text("borderRadius", "3px", "props")}
-    buttonHeight={text("buttonHeight", "44px", "props")}
-    buttonWidth={text("buttonWidth", "44px", "props")}
-    childGap={text("childGap", "24px", "props")}
-    currentPage={number("currentPage", 2)}
-    fontSize={text("fontSize", "17px", "props")}
-    fontWeight={text("fontWeight", "900", "props")}
-    numberColor={text("numberColor", "#15749D", "props")}
-    pageCount={number("pageCount", 3)}
-    pageNext={() => {}}
-    pagePrevious={() => {}}
-    setCurrentPage={() => {}}
-    // themeValues
-  />
-);
-
-const story = page({
-  title: "Components|Molecules/Pagination",
-  Component: Pagination
-});
-
-export default story;

package/src/constants/style_constants.d.ts

@@ -1,11 +0,0 @@
-type StyleDeclaration = string;
-
-export const HEADER_HEIGHT: StyleDeclaration;
-export const FOOTER_HEIGHT: StyleDeclaration;
-export const SPACER_HEIGHT: StyleDeclaration;
-export const JUMBO_HEIGHT: StyleDeclaration;
-export const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
-export const FONT_WEIGHT_REGULAR: StyleDeclaration;
-export const FONT_WEIGHT_BOLD: StyleDeclaration;
-export const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
-export const LINK_TEXT_DECORATION: StyleDeclaration;