@thecb/components 6.0.6 → 6.0.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.6",
+  "version": "6.0.8-beta.0",
   "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

@@ -103,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
 }) => {
@@ -292,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}

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,11 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -205,7 +210,11 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+            aria-labelledby={createIdFromString(labelTextWhenNoError)}
+            aria-describedby={createIdFromString(
+              labelTextWhenNoError,
+              "error message"
+            )}
             onChange={e => fieldActions.set(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}
@@ -233,6 +242,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/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/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/general.js

@@ -19,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) {