@thecb/components 4.3.1 → 4.3.4

package/package.json

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

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

@@ -63,7 +63,8 @@ const StyledCheckbox = styled.div`
     checkedStyles,
     focusedStyles,
     errorStyles,
-    disabledStyles
+    disabledStyles,
+    disabledCheckedStyles
   }) =>
     error
       ? css`
@@ -71,7 +72,7 @@ const StyledCheckbox = styled.div`
         `
       : disabled
       ? css`
-          ${disabledStyles}
+          ${checked ? disabledCheckedStyles : disabledStyles}
         `
       : checked
       ? css`
@@ -90,7 +91,9 @@ const Checkbox = ({
   disabled = false,
   themeValues,
   hidden = false,
-  error = false
+  error = false,
+  extraStyles,
+  textExtraStyles
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -109,7 +112,7 @@ const Checkbox = ({
       onKeyDown={e => handleClick(e, onChange)}
       hiddenStyles={hidden}
       background={themeValues.backgroundColor}
-      extraStyles="outline: none;"
+      extraStyles={`outline: none; ${extraStyles}`}
     >
       <CheckboxLabelContainer>
         <CheckboxContainer data-qa="Checkbox">
@@ -131,6 +134,7 @@ const Checkbox = ({
             checkedStyles={themeValues.checkedStyles}
             errorStyles={themeValues.errorStyles}
             disabledStyles={themeValues.disabledStyles}
+            disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
           >
             <CheckboxIcon
@@ -147,7 +151,13 @@ const Checkbox = ({
           variant="p"
           weight={themeValues.textFontWeight}
           color={themeValues.textColor}
-          extraStyles={`margin-left: 1rem`}
+          extraStyles={
+            textExtraStyles
+              ? `${textExtraStyles} ${disabled &&
+                  `color: #6e727e; background-color: #f7f7f7;`} `
+              : `margin-left: 1rem ${disabled &&
+                  `color: #6e727e; background-color: #f7f7f7;`}`
+          }
         >
           {title}
         </Text>

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

@@ -13,12 +13,19 @@ const textFontSize = { default: "1.1rem" };
 const textFontWeight = { default: "400" };
 const textLineHeight = { default: "2rem" };
 const textColor = { default: `${CHARADE_GREY}` };
-const disabledCheckColor = { default: `${GHOST_GREY};` };
+const disabledCheckColor = { default: `${WHITE};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };
 const focusedStyles = {
   default: `box-shadow: 0 0 5px 0 ${MATISSE_BLUE};`
 };
+const disabledCheckedStyles = {
+  default: `
+  background: #6d717e;
+  border: 1px solid #6d717e;
+`
+};
+
 const disabledStyles = {
   default: `
   background: ${SEASHELL_WHITE};
@@ -50,5 +57,6 @@ export const fallbackValues = {
   focusedStyles,
   disabledStyles,
   checkedStyles,
-  defaultStyles
+  defaultStyles,
+  disabledCheckedStyles
 };

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

@@ -17,7 +17,6 @@ import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
   display: flex;
-  padding-left: 8px;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
@@ -92,7 +91,8 @@ const Dropdown = ({
   onClick = noop,
   themeValues,
   maxHeight,
-  widthFitOptions = false
+  widthFitOptions = false,
+  disabled
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -171,7 +171,6 @@ const Dropdown = ({
   useEffect(() => {
     clearTimeout(timer);
     setTimer(setTimeout(() => setInputValue(""), 2000));
-
     setFilteredOptions(
       options.filter(
         option =>
@@ -205,6 +204,12 @@ const Dropdown = ({
       width="100%"
       hoverStyles={`background-color: ${themeValues.hoverColor};`}
       aria-expanded={isOpen}
+      extraStyles={
+        disabled &&
+        `color: #6e727e;
+      background-color: #f7f7f7;
+      pointer-events: none;`
+      }
     >
       <Box
         as="button"
@@ -222,8 +227,13 @@ const Dropdown = ({
         }
         borderRadius="2px"
         tabIndex={0}
-        extraStyles={`height: 48px;`}
         dataQa={placeholder}
+        extraStyles={`height: 48px;
+          ${disabled &&
+            `color: #6e727e;
+          background-color: #f7f7f7;
+          pointer-events: none;`}
+          `}
       >
         <Stack direction="row" bottomItem={2}>
           {isOpen ? (
@@ -234,7 +244,15 @@ const Dropdown = ({
               themeValues={themeValues}
             />
           ) : (
-            <Text variant="p">
+            <Text
+              variant="p"
+              extraStyles={
+                disabled &&
+                `color: #6e727e;
+            background-color: #f7f7f7;
+            pointer-events: none;`
+              }
+            >
               {value
                 ? options.find(option => option.value === value)?.text
                 : placeholder}

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

@@ -40,6 +40,13 @@ const InputField = styled.input`
     outline-offset: 2px;
   }
 
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      color: #6e727e;
+      background-color: #f7f7f7;
+    `}
+
   ${({ extraStyles }) =>
     css`
       ${extraStyles}
@@ -76,6 +83,13 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
     outline-offset: 2px;
   }
 
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      color: #6e727e;
+      background-color: #f7f7f7;
+    `}
+
   ${({ extraStyles }) =>
     css`
       ${extraStyles}

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

@@ -17,6 +17,7 @@ const FormSelect = ({
   onChange,
   dropdownMaxHeight,
   disabledValues,
+  disabled,
   themeValues
 }) => {
   const [open, setOpen] = useState(false);
@@ -36,7 +37,7 @@ const FormSelect = ({
   });
 
   return (
-    <SelectContainer ref={dropdownRef}>
+    <SelectContainer ref={dropdownRef} disabled={disabled}>
       <Box padding="0" minWidth="100%">
         <Cluster justify="space-between" align="center">
           <Text
@@ -70,6 +71,7 @@ const FormSelect = ({
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
+        disabled={disabled}
       />
       <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (

package/src/components/atoms/index.js

@@ -32,6 +32,7 @@ export { default as PasswordRequirements } from "./password-requirements";
 export { default as Placeholder } from "./placeholder";
 export { default as ProcessingFee } from "./processing-fee";
 export { default as RadioButton } from "./radio-button";
+export { default as SearchableSelect } from "./searchable-select";
 export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";
 export { default as StateProvinceDropdown } from "./state-province-dropdown";

package/src/components/atoms/password-requirements/PasswordRequirements.js

@@ -23,15 +23,15 @@ import {
 const PasswordRequirements = ({ password, isMobile }) => {
   const iconMap = {
     [INPUT_STATE_NEUTRAL]: {
-      icon: <IconNeutral margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconNeutral margin="0 0.5rem 0 0" />,
       color: MINESHAFT_GREY
     },
     [INPUT_STATE_INVALID]: {
-      icon: <IconInvalid margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconInvalid margin="0 0.5rem 0 0" />,
       color: RAZZMATAZZ_RED
     },
     [INPUT_STATE_VALID]: {
-      icon: <IconValid margin="0.125rem 0.5rem 0 0" />,
+      icon: <IconValid margin="0 0.5rem 0 0" />,
       color: FOREST_GREEN
     }
   };
@@ -83,7 +83,7 @@ const PasswordRequirements = ({ password, isMobile }) => {
                 </Box>
                 <Box padding="0">
                   <Sidebar onRight childGap="0rem">
-                    <Box padding="0rem">
+                    <Box padding="0.15rem 0 0 0">
                       <Cluster justify="flex-start" align="center">
                         <Stack fullHeight childGap="0.25rem">
                           <Paragraph

package/src/components/atoms/searchable-select/SearchableSelect.js

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import { fallbackValues } from "./SearchableSelect.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Stack } from "../layouts";
+import { FormInput } from "../form-layouts";
+import Checkbox from "../checkbox";
+
+const SELECT_ALL = "Select All";
+
+const SearchableSelect = ({
+  items,
+  selectedItems,
+  allSelected,
+  toggleSelectAllItems,
+  selectItem,
+  fields,
+  actions,
+  disabled,
+  themeValues
+}) => {
+  const [itemList, setItemList] = useState([]);
+  useEffect(() => setItemList(items), [items, selectedItems]);
+  useEffect(() => {
+    const filteredItems = items.filter(item =>
+      item?.name
+        ?.toLowerCase()
+        .includes(fields?.searchTerm?.rawValue?.toLowerCase())
+    );
+    setItemList(filteredItems);
+  }, [fields.searchTerm.rawValue]);
+
+  const handleSelect = value => {
+    if (value.name === SELECT_ALL) {
+      allSelected ? toggleSelectAllItems(false) : toggleSelectAllItems(true);
+    } else {
+      selectItem(value);
+    }
+  };
+  return (
+    <Box
+      padding="1rem"
+      border={themeValues.border}
+      extraStyles={
+        disabled &&
+        `color: #6e727e; background-color: #f7f7f7; pointer-events: none;`
+      }
+    >
+      <Stack>
+        <FormInput
+          errorMessages={{}}
+          field={fields.searchTerm}
+          fieldActions={actions.fields.searchTerm}
+          placeholder="Search agencies"
+          disabled={disabled}
+        />
+        <Box
+          padding="0.5rem 0"
+          extraStyles={`overflow-y: scroll; height: 250px;`}
+        >
+          <Stack>
+            {itemList.map(value => (
+              <Checkbox
+                key={value.name}
+                title={value.name}
+                name={value.name}
+                checked={selectedItems.find(item => item.name === value.name)}
+                onChange={() => handleSelect(value)}
+                textExtraStyles={`margin: 0;`}
+                disabled={disabled}
+                extraStyles={`margin: 0 0.5rem;`}
+              />
+            ))}
+          </Stack>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default themeComponent(
+  SearchableSelect,
+  "SearchableSelect",
+  fallbackValues,
+  "default"
+);

package/src/components/atoms/searchable-select/SearchableSelect.theme.js

@@ -0,0 +1,7 @@
+const border = {
+  default: `1px solid #caced8`
+};
+
+export const fallbackValues = {
+  border
+};

package/src/components/atoms/searchable-select/index.js

@@ -0,0 +1,3 @@
+import SearchableSelect from "./SearchableSelect";
+
+export default SearchableSelect;

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -13,9 +13,13 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
-import { Box, Cluster } from "../../atoms/layouts";
+import { Box, Cluster, Stack } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import Text from "../../atoms/text";
 import PasswordRequirements from "../../atoms/password-requirements";
 import { noop } from "../../../util/general";
+import { GHOST_GREY } from "../../../constants/colors";
 
 const ChangePasswordForm = ({
   clearOnDismount,
@@ -23,7 +27,11 @@ const ChangePasswordForm = ({
   actions,
   handleSubmit = noop,
   showErrors,
-  isMobile
+  isMobile,
+  revenueManagement,
+  closeForm,
+  firstName,
+  lastName
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
@@ -48,43 +56,89 @@ const ChangePasswordForm = ({
   };
 
   return (
-    <FormContainer role="form" aria-label="Change password">
-      <FormInputColumn>
-        <FormInput
-          labelTextWhenNoError="Current password"
-          errorMessages={currentPasswordErrorMessages}
-          field={fields.currentPassword}
-          fieldActions={actions.fields.currentPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-        <FormInput
-          labelTextWhenNoError="New password"
-          errorMessages={newPasswordErrorMessages}
-          field={fields.newPassword}
-          fieldActions={actions.fields.newPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-        <FormInput
-          labelTextWhenNoError="Confirm password"
-          errorMessages={confirmNewPasswordErrorMessages}
-          field={fields.confirmNewPassword}
-          fieldActions={actions.fields.confirmNewPassword}
-          showErrors={showErrors}
-          onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
-          type="password"
-        />
-      </FormInputColumn>
-      <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
-        <Cluster justify="center" align="center">
-          <PasswordRequirements
-            password={fields.newPassword}
-            isMobile={isMobile}
+    <FormContainer
+      role="form"
+      aria-label="Change password"
+      extraStyles={`padding: 0;`}
+    >
+      {revenueManagement && (
+        <Box
+          padding="1.5rem"
+          borderColor={GHOST_GREY}
+          borderSize="1px"
+          borderWidthOverride={"0 0 1px 0"}
+        >
+          <Cluster justify="flex-start" align="center">
+            <Box padding="1.25rem" borderRadius="50%" background="#CACED8">
+              <Heading variant="h4" weight="700">
+                {firstName.charAt(0).toUpperCase()}
+                {lastName.charAt(0).toUpperCase()}
+              </Heading>
+            </Box>
+            <Text variant="p" weight="700" extraStyles={`padding-left: 1rem;`}>
+              {firstName} {lastName}
+            </Text>
+          </Cluster>
+        </Box>
+      )}
+      <Box padding="1.5rem">
+        <FormInputColumn>
+          <FormInput
+            labelTextWhenNoError="Current password"
+            errorMessages={currentPasswordErrorMessages}
+            field={fields.currentPassword}
+            fieldActions={actions.fields.currentPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
           />
-        </Cluster>
+          <FormInput
+            labelTextWhenNoError="New password"
+            errorMessages={newPasswordErrorMessages}
+            field={fields.newPassword}
+            fieldActions={actions.fields.newPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
+          />
+          <FormInput
+            labelTextWhenNoError="Confirm password"
+            errorMessages={confirmNewPasswordErrorMessages}
+            field={fields.confirmNewPassword}
+            fieldActions={actions.fields.confirmNewPassword}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            type="password"
+          />
+        </FormInputColumn>
+        <Box padding={isMobile ? "1rem 0 0" : "1.5rem 0 0"}>
+          <Cluster justify="center" align="center">
+            <PasswordRequirements
+              password={fields.newPassword}
+              isMobile={isMobile}
+            />
+          </Cluster>
+        </Box>
+        {revenueManagement && (
+          <Box padding="1.5rem 0 0">
+            <Stack childGap="1rem" direction="row" justify="flex-end">
+              <ButtonWithAction
+                text="Cancel"
+                action={closeForm}
+                variant={"secondary"}
+                dataQa="Cancel"
+                extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
+              />
+              <ButtonWithAction
+                text="Save"
+                action={handleSubmit}
+                variant="primary"
+                dataQa="Save"
+                extraStyles={`margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;`}
+              />
+            </Stack>
+          </Box>
+        )}
       </Box>
     </FormContainer>
   );

package/src/components/molecules/index.js

@@ -8,6 +8,7 @@ export { default as EmailForm } from "./email-form";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
 export { iconsMap as ObligationIcons } from "./obligation/icons";
+export { default as InternalUserInfoForm } from "./internal-user-info-form";
 export { default as LoginForm } from "./login-form";
 export { default as Modal } from "./modal";
 export { default as Module } from "./module";
@@ -25,6 +26,7 @@ export { default as RegistrationForm } from "./registration-form";
 export { default as ResetConfirmationForm } from "./reset-confirmation-form";
 export { default as ResetPasswordForm } from "./reset-password-form";
 export { default as ResetPasswordSuccess } from "./reset-password-success";
+export { default as Tabs } from "./tabs";
 export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";