@thecb/components 10.2.1-beta.2 → 10.2.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.1-beta.2",
+  "version": "10.2.2-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(
@@ -95,6 +95,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 +105,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;
@@ -148,7 +154,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.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

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.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/modules/AutopayModalModule.js

@@ -39,25 +39,27 @@ const AutopayModal = ({
         ? "checking account payment method"
         : "payment method";
 
-    return `To setup ${planText} you must have a saved ${methodRequired} and address. Do you want to save these now?`;
+    return `To set up ${planText} you must have a saved ${methodRequired} and address. Do you want to save these now?`;
   };
   const plan = isPaymentPlan ? "your payment plan" : "autopay";
   const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
-  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
-  const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
+  const deactivateText = `Stop ${shortPlan.toLowerCase()} for ${titleCaseString(
+    description
+  )}: ${titleCaseString(subDescription)}`;
+  const activateText = `Set Up ${shortPlan.toLowerCase()} for ${titleCaseString(
+    description
+  )}: ${titleCaseString(subDescription)}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
-    modalHeaderText: autoPayActive
-      ? titleCaseString(deactivateText)
-      : titleCaseString(activateText),
+    modalHeaderText: autoPayActive ? deactivateText : activateText,
     modalBodyText: autoPayActive
-      ? `Are you sure you want to deactivate ${plan}? ${
-          !inactive && nextDate
-            ? `Your next payment will be due on ${nextDate}.`
+      ? `Are you sure you want to stop ${plan}? ${
+          !inactive && nextDate && nextDate !== "On"
+            ? "Your next payment will be due on " + nextDate + "."
             : ""
         }`
       : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? `Disable ${shortPlan}` : "Add",
+    continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {

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;