@thecb/components 10.1.3-beta.4 → 10.2.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.1.3-beta.4",
+  "version": "10.2.1-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,14 +34,15 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
                 extraStyles={`
                           text-transform: uppercase;
                           ${isActive.toString() === "true" &&
-                            `pointer-events: none;
-                             color: ${themeValues.activeBreadcrumbColor};
+                            `color: ${themeValues.activeBreadcrumbColor};
+                             pointer-events: none;
+                             text-decoration: none;
                             `}
                           &:first-child {
                             margin-left: 0;
                           }
                           &:active {
-                            color: ${themeValues.activeColor}; 
+                            color: ${themeValues.activeColor};
                           }`}
               >
                 {linkText}

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

@@ -1,5 +1,8 @@
 // import theme from "styled-theming";
-import { MATISSE_BLUE, STORM_GREY } from "../../../constants/colors";
+import { colors, styleConstants } from "../../../constants";
+
+const { MATISSE_BLUE, STORM_GREY } = colors;
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 /*
   For now I'm using string values, eventually shared components library will have its own constants file
@@ -13,7 +16,7 @@ const fontSize = "0.875rem";
 const lineHeight = "1.25rem";
 const fontWeight = "400";
 const margin = "0.5rem";
-const hover = `text-decoration: none;`;
+const hover = `text-decoration: ${LINK_TEXT_DECORATION};`;
 
 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,6 +68,7 @@ const ButtonWithAction = forwardRef(
       text,
       textWrap = false,
       isLoading = false,
+      disabled = false,
       loadingColor = "white",
       dataQa = null,
       textExtraStyles,
@@ -94,9 +95,6 @@ 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 = `
@@ -104,9 +102,6 @@ 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;
@@ -114,8 +109,8 @@ const ButtonWithAction = forwardRef(
     color: #FFFFFF;
     cursor: default;
     &:focus {
-      box-shadow: 0 0 10px #6D717E;
-      outline: none;
+      outline: 3px solid #6D717E;
+      outline-offset: 2px;
     }
     ${extraDisabledStyles}
   `;
@@ -129,11 +124,12 @@ const ButtonWithAction = forwardRef(
         minWidth={themeValues.minWidth}
         background={themeValues.backgroundColor}
         border={themeValues.border}
-        hoverStyles={hoverStyles}
-        activeStyles={activeStyles}
+        hoverStyles={disabled ? disabledStyles : hoverStyles}
+        activeStyles={disabled ? disabledStyles : activeStyles}
         disabledStyles={disabledStyles}
+        aria-disabled={disabled}
         as="button"
-        onClick={isLoading ? undefined : action}
+        onClick={isLoading || disabled ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}
@@ -152,6 +148,7 @@ 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,12 +18,15 @@ 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", undefined, "props")}
+    action={text("action", buttonHandler, "props")}
+    disabled={boolean("disabled", false, "props")}
   />
 );
 

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

@@ -1,4 +1,6 @@
-import {
+import { colors, styleConstants } from "../../../constants";
+
+const {
   WHITE,
   TRANSPARENT,
   SAPPHIRE_BLUE,
@@ -6,7 +8,9 @@ import {
   MATISSE_BLUE,
   RASPBERRY,
   ERROR_COLOR
-} from "../../../constants/colors";
+} = colors;
+
+const { LINK_TEXT_DECORATION } = styleConstants;
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -98,6 +102,21 @@ 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,
@@ -225,6 +244,7 @@ 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,7 +57,11 @@ const ButtonWithLink = ({
         text-decoration: none; }`}
       dataQa={dataQa}
     >
-      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
+      <ButtonWithAction
+        {...otherProps}
+        disabled={disabled}
+        extraStyles={extraStyles}
+      />
     </ButtonWithLinkWrapper>
   );
 };

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

@@ -107,6 +107,21 @@ 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,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/text/Text.js

@@ -10,6 +10,7 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
+  textDecoration = "none",
   textWrap = true,
   extraStyles = ``,
   hoverStyles,
@@ -26,6 +27,7 @@ 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,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/obligation/modules/AutopayModalModule.js

@@ -43,23 +43,21 @@ const AutopayModal = ({
   };
   const plan = isPaymentPlan ? "your payment plan" : "autopay";
   const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
-  const deactivateText = `Stop ${shortPlan.toLowerCase()} for ${titleCaseString(
-    description
-  )}: ${titleCaseString(subDescription)}`;
-  const activateText = titleCaseString(
-    `Set Up ${shortPlan} for ${description}: ${subDescription}`
-  );
+  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
+  const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
-    modalHeaderText: autoPayActive ? deactivateText : activateText,
+    modalHeaderText: autoPayActive
+      ? titleCaseString(deactivateText)
+      : titleCaseString(activateText),
     modalBodyText: autoPayActive
-      ? `Are you sure you want to stop ${plan}? ${
-          !inactive && nextDate && nextDate !== "On"
-            ? "Your next payment will be due on " + nextDate + "."
+      ? `Are you sure you want to deactivate ${plan}? ${
+          !inactive && nextDate
+            ? `Your next payment will be due on ${nextDate}.`
             : ""
         }`
       : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
+    continueButtonText: autoPayActive ? `Disable ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {

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}
     }

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

@@ -0,0 +1,32 @@
+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/components/molecules/pagination/Pagination.theme.js

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

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

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

package/src/constants/index.d.ts

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

package/src/constants/index.js

@@ -1,4 +1,13 @@
-import * as colors from "./colors";
-import * as fontWeights from "./style_constants";
+export * as colors from "./colors";
+export * as general from "./general";
+export * as regexConstants from "./regex_constants";
+export * as styleConstants from "./style_constants";
 
-export { colors, fontWeights };
+/**
+ * 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";

package/src/constants/style_constants.d.ts

@@ -0,0 +1,11 @@
+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;

package/src/constants/style_constants.js

@@ -8,6 +8,7 @@ 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,
@@ -17,5 +18,6 @@ export {
   COMPACT_JUMBO_HEIGHT,
   FONT_WEIGHT_REGULAR,
   FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD
+  FONT_WEIGHT_SEMIBOLD,
+  LINK_TEXT_DECORATION
 };