@thecb/components 9.2.0-beta.9 → 9.3.0-beta.1

package/package.json

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

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

@@ -95,7 +95,8 @@ const Checkbox = ({
   checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles,
-  dataQa = null
+  dataQa = null,
+  isRequired = false
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -142,6 +143,7 @@ const Checkbox = ({
             disabledStyles={themeValues.disabledStyles}
             disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
+            aria-required={isRequired}
           >
             <CheckboxIcon
               viewBox="0 0 24 24"

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

@@ -13,12 +13,13 @@ const groupId = "props";
 export const checkbox = () => (
   <Checkbox
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox", "props")}
-    name={text("name", "Checkbox", "props")}
+    title={text("title", "Checkbox Title", "props")}
+    name={text("name", "Checkbox Name", "props")}
     checked={boolean("checked", false, "props")}
     error={boolean("error", false, "props")}
     disabled={boolean("disabled", false, "props")}
     focused={boolean("focused", false, "props")}
+    isRequired={boolean("isRequired", true, "props")}
   />
 );
 

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -10,7 +10,8 @@ const CountryDropdown = ({
   fieldActions,
   showErrors,
   onChange,
-  dataQa = null
+  dataQa = null,
+  isRequired = false
 }) => (
   <FormSelect
     options={options}
@@ -22,6 +23,7 @@ const CountryDropdown = ({
     showErrors={showErrors}
     onChange={onChange}
     autocompleteValue="country-name"
+    isRequired={isRequired}
   />
 );
 export default CountryDropdown;

package/src/components/atoms/country-dropdown/CountryDropdown.stories.js

@@ -30,6 +30,7 @@ const CountryFormWrapper = ({ fields, actions }) => (
       options={options}
       field={fields.country}
       fieldActions={actions.fields.country}
+      isRequired={true}
     />
   </Box>
 );

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

@@ -105,8 +105,10 @@ const Dropdown = ({
   ariaDescribedby,
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
-  ariaInvalid = false
+  ariaInvalid = false,
+  isRequired = false
 }) => {
+  const required = options.required || isRequired;
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
   const [filteredOptions, setFilteredOptions] = useState([]);
@@ -296,7 +298,8 @@ const Dropdown = ({
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
         aria-expanded={isOpen}
-        aria-required={options.required}
+        aria-required={required}
+        required={required}
         aria-invalid={ariaInvalid}
         background={isOpen ? themeValues.hoverColor : WHITE}
         borderRadius="2px"
@@ -328,7 +331,6 @@ const Dropdown = ({
         }}
         padding="12px"
         placeholder={getSelection()}
-        required={options.required}
         role="combobox"
         themeValues={themeValues}
         title={hasTitles ? getSelection() : null}
@@ -336,6 +338,7 @@ const Dropdown = ({
         tabIndex={0}
         value={inputValue}
         width="100%"
+        disabled={disabledValues.includes(inputValue)}
       />
       <IconWrapper open={isOpen} onClick={onClick}>
         <DropdownIcon />
@@ -350,6 +353,7 @@ const Dropdown = ({
             tabIndex={0}
             role="listbox"
             id={`${ariaLabelledby}_listbox`}
+            required={required}
           >
             <Stack childGap="0" as="ul">
               {filteredOptions.map((choice, i) => {

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

@@ -116,8 +116,10 @@ const FormInput = ({
   extraStyles,
   removeFromValue, // regex of characters to remove before setting value
   dataQa = null,
+  isRequired = false,
   ...props
 }) => {
+  const required = isRequired || props?.required;
   const [showPassword, setShowPassword] = useState(false);
   const { isMobile } = useContext(ThemeContext);
   const setValue = value => {
@@ -221,6 +223,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={required}
             {...props}
           />
         ) : (
@@ -247,6 +250,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            required={required}
             {...props}
           />
         )}

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useMemo, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
@@ -24,10 +24,25 @@ const FormSelect = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
   dataQa = null,
-  widthFitOptions = false
+  widthFitOptions = false,
+  isRequired = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
+  const required = options?.required || isRequired;
+
+  const labelId = useMemo(
+    () => labelTextWhenNoError => createIdFromString(labelTextWhenNoError),
+    [labelTextWhenNoError]
+  );
+
+  const descriptionId = useMemo(
+    () => (field, labelTextWhenNoError) =>
+      field.hasErrors && field.dirty
+        ? labelId(labelTextWhenNoError) + "error-message"
+        : "",
+    [field, labelTextWhenNoError]
+  );
 
   const handleClickAway = event => {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -45,8 +60,8 @@ const FormSelect = ({
   return (
     <SelectContainer
       ref={dropdownRef}
+      aria-role="group"
       disabled={disabled}
-      aria-disabled={disabled}
       data-qa={dataQa}
     >
       <Box padding="0" minWidth="100%">
@@ -61,18 +76,15 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
-            id={createIdFromString(labelTextWhenNoError)}
+            id={labelId(labelTextWhenNoError)}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
-        ariaLabelledby={createIdFromString(labelTextWhenNoError)}
-        ariaDescribedby={createIdFromString(
-          labelTextWhenNoError,
-          "error message"
-        )}
+        ariaLabelledby={labelId(labelTextWhenNoError)}
+        ariaDescribedby={descriptionId(field, labelTextWhenNoError)}
         maxHeight={dropdownMaxHeight}
         widthFitOptions={widthFitOptions}
         hasTitles={hasTitles}
@@ -94,6 +106,7 @@ const FormSelect = ({
         disabled={disabled}
         autocompleteValue={autocompleteValue}
         smoothScroll={smoothScroll}
+        isRequired={required}
       />
       <Stack direction="row" justify="space-between">
         <Text

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

@@ -12,7 +12,7 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
   }
 });
 const errorMessages = {
-  [required.error]: "thing is required"
+  [required.error]: "This field is required."
 };
 const options = [
   { value: "", text: "choose name" },
@@ -34,7 +34,7 @@ const story = page({
 const FormWrapper = props => (
   <FormSelect
     autocompleteValue={props.autocompleteValue}
-    labelTextWhenNoError="Form Select"
+    labelTextWhenNoError="Form Select Label"
     errorMessages={errorMessages}
     options={options}
     field={props.fields.thing}

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -9,11 +9,13 @@ const FormStateDropdown = ({
   field,
   fieldActions,
   showErrors,
-  countryCode
+  countryCode,
+  isRequired = false
 }) => {
   const placeholder =
     countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
   const options = [placeholder, ...getOptions(countryCode)];
+
   return (
     <FormSelect
       options={options}
@@ -23,6 +25,7 @@ const FormStateDropdown = ({
       errorMessages={errorMessages}
       showErrors={showErrors}
       autocompleteValue="address-level1"
+      isRequired={isRequired}
     />
   );
 };

package/src/components/molecules/address-form/AddressForm.js

@@ -58,6 +58,7 @@ const AddressForm = ({
           labelTextWhenNoError="Country"
           errorMessages={countryErrorMessages}
           field={fields.country}
+          isRequired={true}
           onChange={value => {
             actions.fields.country.set(value);
             // temporary measure to not dirty fields until
@@ -81,6 +82,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line1"
           dataQa="Address"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Apt, Suite, Unit, Floor, etc. (Optional)"
@@ -90,6 +92,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-line2"
           dataQa="Address Line 2"
+          isRequired={false}
         />
         <FormInput
           labelTextWhenNoError="City"
@@ -100,6 +103,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="address-level2"
           dataQa="City"
+          isRequired={true}
         />
         <StateProvinceDropdown
           labelTextWhenNoError={isUS ? "State" : "State or Province"}
@@ -110,6 +114,7 @@ const AddressForm = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           dataQa="State or Province"
+          isRequired={true}
         />
         <FormInput
           isNum={isUS}
@@ -122,6 +127,7 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="postal-code"
           dataQa="Zip code"
+          isRequired={true}
         />
         {showWalletCheckbox && (
           <Checkbox

package/src/components/molecules/index.d.ts

@@ -4,4 +4,3 @@ export * from "./editable-table";
 export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
-export * from "./toast-notification";

package/src/components/molecules/index.js

@@ -37,6 +37,5 @@ export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
 export { default as Timeout } from "./timeout";
-export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -76,6 +76,7 @@ const PaymentFormACH = ({
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           autocompleteValue="name"
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Routing number"
@@ -97,6 +98,7 @@ const PaymentFormACH = ({
             />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
         />
         <FormInput
           labelTextWhenNoError="Confirm routing number"
@@ -106,6 +108,7 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.confirmRoutingNumber}
           showErrors={showErrors}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          isRequired={true}
           isNum
         />
         <FormInput
@@ -115,6 +118,7 @@ const PaymentFormACH = ({
           field={fields.accountNumber}
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
+          isRequired={true}
           isNum
           helperModal={() => (
             <AccountAndRoutingModal
@@ -132,6 +136,7 @@ const PaymentFormACH = ({
         <FormInput
           labelTextWhenNoError="Confirm account number"
           dataQa="Confirm account number"
+          isRequired={true}
           errorMessages={confirmAccountNumberErrors}
           field={fields.confirmAccountNumber}
           fieldActions={actions.fields.confirmAccountNumber}
@@ -142,6 +147,7 @@ const PaymentFormACH = ({
         {allowBankAccountType && (
           <FormSelect
             labelTextWhenNoError="Account type"
+            isRequired={true}
             dataQa="Account type"
             options={[
               { text: "Select account type", value: "" },
@@ -182,6 +188,7 @@ const PaymentFormACH = ({
                   showCheckbox={false}
                   description="View"
                   terms={termsContent}
+                  isRequired={true}
                 />
               </Cover>
             )}

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -98,6 +98,7 @@ const PaymentFormCard = ({
         {!hideZipCode && (
           <CountryDropdown
             labelTextWhenNoError="Country"
+            isRequired={true}
             errorMessages={countryErrorMessages}
             field={fields.country}
             onChange={value => {

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,19 +24,21 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
 
@@ -97,7 +99,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="4px 14px 4px 4px"
+        margin="6px 14px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${GREY_CHATEAU}`;
+const inactiveColor = `${STORM_GREY}`;
 
 export const fallbackValues = {
   activeColor,

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -22,6 +22,7 @@ const TermsAndConditionsControlV1 = ({
           error={error}
           checked={isChecked}
           onChange={onCheck}
+          isRequired={true}
         />
         <Box padding="0 0 0 58px">
           <Stack>

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -57,6 +57,7 @@ const TermsAndConditionsControlV2 = ({
               onChange={onCheck}
               checkboxMargin={checkboxMargin}
               extraStyles={`align-self: flex-start;`}
+              isRequired={true}
             />
           )}
           <Stack childGap="0.25rem" fullHeight>

package/src/constants/colors.d.ts

@@ -97,7 +97,6 @@ export const COSMOS_RED: Color;
 export const BLUSH_RED: Color;
 
 export const ERROR_COLOR: Color;
-export const ERROR_BACKGROUND_COLOR: Color;
 
 export const ALERT_COLORS: {
   warn: ColorSet;

package/src/constants/colors.js

@@ -90,7 +90,6 @@ const BLUSH_RED = "#FFF0F5";
 
 // Second level color constants
 const ERROR_COLOR = RAZZMATAZZ_RED;
-const ERROR_BACKGROUND_COLOR = "#FFF4F8";
 
 // These colors are sequestered so that the alert component can reference them // by type of alert
 const ALERT_COLORS = {
@@ -222,6 +221,5 @@ export {
   RASPBERRY,
   ALERT_COLORS,
   PILL_COLORS,
-  ERROR_COLOR,
-  ERROR_BACKGROUND_COLOR
+  ERROR_COLOR
 };

package/src/index.d.ts

@@ -1,5 +1,4 @@
 import * as constants from "./constants";
-import * as hooks from "./util/hooks";
 export * from "./components";
 export * from "./types/common";
-export { constants, hooks };
+export { constants };

package/src/types/common/index.ts

@@ -4,5 +4,4 @@ export { default as FieldActions } from "./FieldActions";
 export { default as FormSelectOption } from "./FormSelectOption";
 export { default as SearchableSelectOption } from "./SearchableSelectOption";
 export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
-export { default as ToastVariants } from "./ToastVariants";
 export * from "./FieldActions";

package/src/util/index.js

@@ -3,13 +3,5 @@ import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "./useOutsideClick";
-import useToastNotification from "./hooks/use-toast-notification";
 
-export {
-  formats,
-  general,
-  theme,
-  useFocusInvalidInput,
-  useOutsideClick,
-  useToastNotification
-};
+export { formats, general, theme, useFocusInvalidInput, useOutsideClick };

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { Box, Cluster } from "../../atoms/layouts";
-import { Paragraph } from "../../atoms";
-import {
-  SuccessfulIconMedium,
-  ErroredIcon,
-  IconQuitLarge
-} from "../../atoms/icons";
-import {
-  ERROR_BACKGROUND_COLOR,
-  HINT_GREEN,
-  WHITE
-} from "../../../constants/colors";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-
-const VARIANTS = {
-  SUCCESS: "success",
-  ERROR: "error"
-};
-
-const ToastNotification = ({
-  variant = VARIANTS.SUCCESS,
-  message = "",
-  toastOpen,
-  closeToastNotification,
-  extraStyles,
-  minWidth = "112px",
-  maxWidth = "350px",
-  height = "56px",
-  childGap = "1rem",
-  backgroundColor
-}) => (
-  <Box
-    onClick={closeToastNotification}
-    background={
-      backgroundColor
-        ? backgroundColor
-        : variant === VARIANTS.SUCCESS
-        ? HINT_GREEN
-        : variant === "error"
-        ? ERROR_BACKGROUND_COLOR
-        : WHITE
-    }
-    minWidth={minWidth}
-    minHeight={height && parseInt(height) < 100 ? height : "100px"}
-    height={height ? height : "auto"}
-    tabIndex={toastOpen ? "-1" : "0"}
-    padding="0rem 1rem"
-    borderRadius="4px"
-    boxShadow="0px 4px 4px rgba(41, 42, 51, 0.15),
-      0px 1px 7px rgba(41, 42, 51, 0.2),
-      0px 7px 12px rgba(41, 42, 51, 0.15)"
-    extraStyles={`
-      display: ${toastOpen ? "block" : "none"};
-      position: fixed; bottom: 4rem; left: 4rem;
-      ${extraStyles};
-      cursor: pointer;
-    `}
-  >
-    <Cluster align="center" childGap={childGap}>
-      {variant === "success" && <SuccessfulIconMedium />}
-      {variant === "error" && <ErroredIcon />}
-      <Box padding="1rem 0" maxWidth={maxWidth}>
-        <Paragraph
-          weight={FONT_WEIGHT_SEMIBOLD}
-          extraStyles={"word-break: break-word;"}
-        >
-          {message}
-        </Paragraph>
-      </Box>
-      <IconQuitLarge />
-    </Cluster>
-  </Box>
-);
-
-export default ToastNotification;

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -1,67 +0,0 @@
-import React, { useEffect } from "react";
-import ToastNotification from "./ToastNotification";
-import page from "../../../../.storybook/page";
-import { useToastNotification } from "../../../util";
-import { ToastVariants } from "../../../types/common";
-
-export const toastNotificationSuccess = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-    />
-  );
-};
-
-toastNotificationSuccess.storyName = "Success Toast";
-
-export const toastNotificationError = () => {
-  const {
-    isToastOpen,
-    toastVariant,
-    toastMessage,
-    showToast,
-    hideToast,
-  } = useToastNotification();
-
-  useEffect(() => {
-    showToast({
-      message: "An error occurred",
-      variant: ToastVariants.ERROR,
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      variant={toastVariant}
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-    />
-  );
-};
-toastNotificationError.storyName = "Error Toast";
-
-const story = page({
-  title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification,
-});
-
-export default story;