@thecb/components 6.1.0-beta.0 → 6.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.1.0-beta.0",
+  "version": "6.1.0-beta.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -5,7 +5,8 @@ import {
   SEASHELL_WHITE,
   MATISSE_BLUE,
   RED,
-  CHARADE_GREY
+  CHARADE_GREY,
+  STORM_GREY
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
@@ -29,7 +30,7 @@ const disabledCheckedStyles = {
 const disabledStyles = {
   default: `
   background: ${SEASHELL_WHITE};
-  border: 1px solid ${GHOST_GREY};
+  border: 1px solid ${STORM_GREY};
 `
 };
 const checkedStyles = {
@@ -41,7 +42,7 @@ const checkedStyles = {
 const defaultStyles = {
   default: `
   background: ${WHITE}; 
-  border: 1px solid ${GHOST_GREY};
+  border: 1px solid ${STORM_GREY};
 `
 };
 

package/src/components/atoms/dropdown/Dropdown.js

@@ -1,7 +1,11 @@
 import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
 import { Box, Stack } from "../layouts";
 import Text from "../text";
-import { noop } from "../../../util/general";
+import {
+  noop,
+  inputDisabledStyle,
+  inputPlaceholderTextStyle
+} from "../../../util/general";
 import DropdownIcon from "./DropdownIcon";
 import styled from "styled-components";
 // support for Array.prototype.at() in older browsers
@@ -12,7 +16,8 @@ import {
   GREY_CHATEAU,
   STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  CHARADE_GREY
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -98,6 +103,7 @@ const Dropdown = ({
   hasTitles = false,
   autoEraseTypeAhead = true,
   ariaLabelledby,
+  ariaDescribedby,
   autocompleteValue = "", // browser autofill value, like country-name or address-level1 for state
   smoothScroll = true
 }) => {
@@ -287,6 +293,7 @@ const Dropdown = ({
         aria-owns={`${ariaLabelledby}_listbox`}
         aria-haspopup="listbox"
         aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
         autocomplete={autocompleteValue}
         background={isOpen ? themeValues.hoverColor : WHITE}
@@ -300,10 +307,9 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         extraStyles={
-          disabled &&
-          `color: #6e727e;
-            background-color: #f7f7f7;
-            pointer-events: none;`
+          disabled
+            ? `${inputPlaceholderTextStyle}${inputDisabledStyle}`
+            : inputPlaceholderTextStyle
         }
         hoverStyles={`background-color: ${themeValues.hoverColor};`}
         isOpen={isOpen}

package/src/components/atoms/form-layouts/FormInput.js

@@ -3,6 +3,7 @@ import styled, { ThemeContext, css } from "styled-components";
 import { FormattedInput } from "formatted-input";
 import { fallbackValues } from "./FormLayouts.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
+import { createIdFromString } from "../../../util/general.js";
 import Text from "../text";
 import { Box, Cluster, Stack } from "../layouts";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
@@ -132,7 +133,7 @@ const FormInput = ({
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
-              id={labelTextWhenNoError.replace(/\s+/g, "-")}
+              id={createIdFromString(labelTextWhenNoError)}
             >
               {labelTextWhenNoError}
             </Text>
@@ -157,7 +158,7 @@ const FormInput = ({
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={labelTextWhenNoError.replace(/\s+/g, "-")}
+                id={createIdFromString(labelTextWhenNoError)}
               >
                 {labelTextWhenNoError}
               </Text>
@@ -188,7 +189,15 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -205,7 +214,15 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
+            aria-invalid={
+              (field.dirty && field.hasErrors) ||
+              (field.hasErrors && showErrors)
+            }
             onChange={e => fieldActions.set(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
@@ -233,6 +250,7 @@ const FormInput = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
+            id={createIdFromString(labelTextWhenNoError, "error message")}
           >
             {errorMessages[field.errors[0]]}
           </Text>

package/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -5,9 +5,9 @@ import {
   SEASHELL_WHITE,
   MINESHAFT_GREY,
   DUSTY_GREY,
-  GREY_CHATEAU,
   ATHENS_GREY,
-  INFO_BLUE
+  INFO_BLUE,
+  STORM_GREY
 } from "../../../constants/colors";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
@@ -25,7 +25,7 @@ const inputBackgroundColor = {
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
 const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
-const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
+const borderColor = { default: `${STORM_GREY}`, disabled: `${STORM_GREY}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };
 const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };

package/src/components/atoms/form-select/FormSelect.js

@@ -6,6 +6,7 @@ import { SelectContainer } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box, Cluster, Stack } from "../layouts";
+import { createIdFromString } from "../../../util/general";
 
 const FormSelect = ({
   fieldActions,
@@ -53,14 +54,18 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={labelTextWhenNoError.replace(/\s+/g, "-")}
+            id={createIdFromString(labelTextWhenNoError)}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
+        ariaDescribedby={createIdFromString(
+          labelTextWhenNoError,
+          "error message"
+        )}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -90,6 +95,7 @@ const FormSelect = ({
                 &::first-letter {
                   text-transform: uppercase;
                 }`}
+            id={createIdFromString(labelTextWhenNoError, "error message")}
           >
             {errorMessages[field.errors[0]]}
           </Text>

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

@@ -1,6 +1,6 @@
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: "#357fb8" };
+const linkColor = { default: "#3176AA" };
 const fontSize = { default: "1rem" };
 const lineHeight = { default: "1.5rem" };
 const fontWeight = {

package/src/components/molecules/modal/Modal.js

@@ -23,6 +23,7 @@ const getApplicationNode = () => document.getElementById("root");
 const Modal = ({
   hideModal,
   continueAction,
+  isContinueActionDisabled = false,
   cancelAction,
   modalOpen,
   modalHeaderText,
@@ -34,6 +35,7 @@ const Modal = ({
   useDangerButton = false,
   defaultWrapper = true,
   onlyCloseButton = false,
+  noButtons = false, // for instances where modal is closed automatically
   maxHeight,
   underlayClickExits = true,
   noBorder,
@@ -98,69 +100,83 @@ const Modal = ({
                     align="center"
                     childGap="0rem"
                   >
-                    {!onlyCloseButton ? (
-                      <Fragment>
-                        {isMobile ? (
-                          <Stack childGap="1rem" direction="row">
-                            <Box width="100%" padding="0">
-                              <ButtonWithAction
-                                variant="secondary"
-                                action={cancelAction ? cancelAction : hideModal}
-                                text={cancelButtonText}
-                                dataQa={cancelButtonText}
-                                extraStyles={buttonExtraStyles}
-                                className="modal-cancel-button"
-                              />
-                            </Box>
-                            <Box width="100%" padding="0">
-                              <ButtonWithAction
-                                variant={useDangerButton ? "danger" : "primary"}
-                                action={continueAction}
-                                text={continueButtonText}
-                                dataQa={continueButtonText}
-                                isLoading={isLoading}
-                                extraStyles={buttonExtraStyles}
-                                className="modal-continue-button"
-                              />
-                            </Box>
-                          </Stack>
+                    {!noButtons && (
+                      <>
+                        {!onlyCloseButton ? (
+                          <Fragment>
+                            {isMobile ? (
+                              <Stack childGap="1rem" direction="row">
+                                <Box width="100%" padding="0">
+                                  <ButtonWithAction
+                                    variant="secondary"
+                                    action={
+                                      cancelAction ? cancelAction : hideModal
+                                    }
+                                    text={cancelButtonText}
+                                    dataQa={cancelButtonText}
+                                    extraStyles={buttonExtraStyles}
+                                    className="modal-cancel-button"
+                                  />
+                                </Box>
+                                <Box width="100%" padding="0">
+                                  <ButtonWithAction
+                                    variant={
+                                      useDangerButton ? "danger" : "primary"
+                                    }
+                                    action={continueAction}
+                                    text={continueButtonText}
+                                    dataQa={continueButtonText}
+                                    isLoading={isLoading}
+                                    disabled={isContinueActionDisabled}
+                                    extraStyles={buttonExtraStyles}
+                                    className="modal-continue-button"
+                                  />
+                                </Box>
+                              </Stack>
+                            ) : (
+                              <Stack
+                                childGap="1rem"
+                                direction="row"
+                                justify="flex-end"
+                              >
+                                <ButtonWithAction
+                                  variant="secondary"
+                                  action={
+                                    cancelAction ? cancelAction : hideModal
+                                  }
+                                  text={cancelButtonText}
+                                  dataQa={cancelButtonText}
+                                  extraStyles={buttonExtraStyles}
+                                  className="modal-cancel-button"
+                                />
+                                <ButtonWithAction
+                                  variant={
+                                    useDangerButton ? "danger" : "primary"
+                                  }
+                                  action={continueAction}
+                                  text={continueButtonText}
+                                  dataQa={continueButtonText}
+                                  isLoading={isLoading}
+                                  disabled={isContinueActionDisabled}
+                                  extraStyles={buttonExtraStyles}
+                                  className="modal-continue-button"
+                                />
+                              </Stack>
+                            )}
+                          </Fragment>
                         ) : (
-                          <Stack
-                            childGap="1rem"
-                            direction="row"
-                            justify="flex-end"
-                          >
+                          <Box padding="0.5rem">
                             <ButtonWithAction
-                              variant="secondary"
-                              action={cancelAction ? cancelAction : hideModal}
-                              text={cancelButtonText}
-                              dataQa={cancelButtonText}
+                              action={hideModal}
+                              variant="primary"
+                              text="Close"
+                              dataQa="Close"
                               extraStyles={buttonExtraStyles}
                               className="modal-cancel-button"
                             />
-                            <ButtonWithAction
-                              variant={useDangerButton ? "danger" : "primary"}
-                              action={continueAction}
-                              text={continueButtonText}
-                              dataQa={continueButtonText}
-                              isLoading={isLoading}
-                              extraStyles={buttonExtraStyles}
-                              className="modal-continue-button"
-                            />
-                          </Stack>
+                          </Box>
                         )}
-                      </Fragment>
-                    ) : (
-                      <Box padding="0.5rem">
-                        <ButtonWithAction
-                          action={hideModal}
-                          variant="primary"
-                          text="Close"
-                          dataQa="Close"
-                          extraStyles={buttonExtraStyles}
-                          className="modal-cancel-button"
-                        />
-                      </Box>
+                      </>
                     )}
                   </Stack>
                 </Box>

package/src/components/molecules/modal/Modal.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { text, boolean } from "@storybook/addon-knobs";
 import Modal from "./Modal";
 
@@ -6,7 +6,8 @@ import page from "../../../../.storybook/page";
 
 import Text from "../../atoms/text";
 import { noop } from "../../../util/general";
-
+import Spinner from "../../atoms/spinner/Spinner";
+import { Center } from "../../atoms/layouts";
 const groupId = "props";
 export const modal = () => (
   <Modal
@@ -23,7 +24,7 @@ export const modal = () => (
     )}
     hideModal={noop}
     continueAction={noop}
-    modalOpen={boolean("modalOpen", false, groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
     modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
     modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
     cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
@@ -37,6 +38,54 @@ export const modal = () => (
   />
 );
 
+modal.storyName = "Standard Modal";
+
+export const modalWithoutButtons = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      // some async action or timer closes the modal instead
+      setIsModalOpen(false);
+    }, 3000);
+  }, []);
+  return (
+    <Modal
+      ModalLink={() => (
+        <Text
+          tabIndex={0}
+          onClick={noop}
+          color={"#347BB2"}
+          fontSize="18px"
+          lineHeight="2rem"
+          extraStyles={`cursor: pointer;`}
+        >
+          Modal Link
+        </Text>
+      )}
+      hideModal={noop}
+      continueAction={noop}
+      modalOpen={isModalOpen}
+      modalHeaderText={text(
+        "modalHeaderText",
+        "Modal Without Buttons",
+        groupId
+      )}
+      modalBodyText={
+        <Center tabIndex={0}>
+          <Spinner size="100" />
+        </Center>
+      }
+      modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+      modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+      defaultWrapper={boolean("defaultWrapper", true, groupId)}
+      noButtons={boolean("noButtons", true, groupId)}
+      maxHeight={text("maxHeight", null, groupId)}
+    />
+  );
+};
+
+modalWithoutButtons.storyName = "Modal Without Buttons";
+
 const story = page({
   title: "Components|Molecules/Modal",
   Component: Modal

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

@@ -3,7 +3,7 @@ import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 const color = "#15749D";
 const hoverColor = "#116285";
 const activeColor = "#0E506D";
-const linkColor = "#357fb8";
+const linkColor = "#3176AA";
 const fontWeight = FONT_WEIGHT_REGULAR;
 const modalLinkHoverFocus = `outline: none;
   cursor: pointer;

package/src/components/molecules/periscope-dashboard-iframe/PeriscopeDashboardIframe.js

@@ -50,6 +50,7 @@ const PeriscopeDashboardIframe = ({
     time.timer = setTimeout(() => {
       periscopeDataRequestFailure();
     }, 10000);
+    return () => clearTimeout(time.timer);
   }, []);
 
   const Dashboard = height => url => (
@@ -68,8 +69,10 @@ const PeriscopeDashboardIframe = ({
   const validatePeriscope = message => {
     if (isValidMessage(message)) {
       setHeight(message.data.dashboard_height + 100);
-      clearTimeout(time.timer);
-      periscopeDataRequestSuccess();
+      if (!periscopeDataSuccess) {
+        clearTimeout(time.timer);
+        periscopeDataRequestSuccess();
+      }
     }
   };
 

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -28,7 +28,9 @@ const TermsAndConditionsModal = ({
         borderRadius="3px"
         extraStyles="overflow: scroll; max-height: 20rem;"
       >
-        <Text variant="p">{terms}</Text>
+        <Text variant="p" extraStyles={`& a { text-decoration: underline; }`}>
+          {terms}
+        </Text>
       </Box>
     }
     defaultWrapper={false}

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -4,7 +4,7 @@ import {
 } from "../../../constants/style_constants";
 
 const backgroundColor = { default: "#ffffff", footer: "#ffffff" };
-const linkColor = { default: "#357fb8", footer: "#ffffff" };
+const linkColor = { default: "#3176AA", footer: "#ffffff" };
 const border = { default: "#cdcdcd", footer: "#cdcdcd" };
 const fontSize = { default: "1rem", footer: "0.875rem" };
 const lineHeight = { default: "1.5rem", footer: "1.25rem" };

package/src/constants/colors.js

@@ -53,6 +53,7 @@ const INFO_BLUE = "#E4F4FD";
 const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
+const ASTRAL_BLUE = "#3176AA";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -74,7 +75,7 @@ const APRICOT_ORANGE = "#FFE8D8";
 const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
-const RAZZMATAZZ_RED = "#ED125F";
+const RAZZMATAZZ_RED = "#D11053";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -159,6 +160,7 @@ export {
   HOVER_LIGHT_BLUE,
   MATISSE_BLUE,
   ROYAL_BLUE,
+  ASTRAL_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,

package/src/util/focusFirstInvalidInputHook.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+
+const useFocusInvalidInput = (showErrors = false) => {
+  console.log("hey show errors", showErrors);
+  // Only move focus when "showErrors" is true
+  // "showErrors" is managed by container page of form
+  // typically set to "true" on attempted form submission, if errors exist
+  useEffect(() => {
+    console.log("inside use effect show errors", showErrors);
+    if (showErrors) {
+      const inputsWithErrors = document.querySelectorAll(
+        "input[aria-invalid=true]"
+      );
+      console.log("inputs with errors is", inputsWithErrors);
+      inputsWithErrors?.[0]?.focus();
+    }
+  }, [showErrors]);
+};
+
+export default useFocusInvalidInput;

package/src/util/general.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
+import { CHARADE_GREY } from "../constants/colors";
 
 export const noop = () => {};
 
@@ -18,6 +19,19 @@ const createUniqueId = () =>
     .toString(36)
     .substr(2, 9);
 
+export const createIdFromString = (text, postscript, unique = false) => {
+  if (text === undefined) {
+    return createUniqueId();
+  } else {
+    // "first name", undefined, false -> "first-name"
+    // "email address", "error message", false -> "email-address-error-message"
+    // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+    return `${text?.replace(/\s+/g, "-")}${
+      postscript ? `-${postscript?.replace(/\s+/g, "-")}` : ``
+    }${unique ? createUniqueId() : ``}`;
+  }
+};
+
 export const safeChildren = (children, replacement = []) => {
   const unsafeValues = [false, undefined, NaN, null];
   if (children && children instanceof Array) {
@@ -32,8 +46,18 @@ export const safeChildren = (children, replacement = []) => {
   return unsafeValues.includes(children) ? replacement : children;
 };
 
-export const generateClickHandler = (form, handleErrors, submitForm) => e => {
+export const generateClickHandler = (
+  form,
+  handleErrors,
+  submitForm,
+  resetErrors
+) => e => {
   e.preventDefault();
+  if (resetErrors) {
+    // if provided, will reset error state tracker
+    // allows hooks that depend on error state to re-run
+    resetErrors();
+  }
   const formHasError = Object.values(form.fields).reduce(
     (acc, curr) => acc || curr.hasErrors,
     false
@@ -96,3 +120,23 @@ export const screenReaderOnlyStyle = `
   height: 1px;
   overflow: hidden;
 `;
+
+export const inputPlaceholderTextStyle = `
+  ::-webkit-input-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-moz-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-ms-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::placeholder {
+    color: ${CHARADE_GREY};
+  }
+`;
+export const inputDisabledStyle = `
+  color: #6e727e;
+  background-color: #f7f7f7;
+  pointer-events: none;
+`;

package/src/util/index.js

@@ -1,5 +1,6 @@
 import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 
-export { formats, general, theme };
+export { formats, general, theme, useFocusInvalidInput };