@thecb/components 4.3.2 → 4.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.3.2",
+  "version": "4.3.3",
   "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,8 @@ const Checkbox = ({
   disabled = false,
   themeValues,
   hidden = false,
-  error = false
+  error = false,
+  textExtraStyles
 }) => {
   const [focused, setFocused] = useState(false);
 
@@ -131,6 +133,7 @@ const Checkbox = ({
             checkedStyles={themeValues.checkedStyles}
             errorStyles={themeValues.errorStyles}
             disabledStyles={themeValues.disabledStyles}
+            disabledCheckedStyles={themeValues.disabledCheckedStyles}
             focusedStyles={themeValues.focusedStyles}
           >
             <CheckboxIcon
@@ -147,7 +150,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/searchable-select/SearchableSelect.js

@@ -0,0 +1,84 @@
+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 departments"
+          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}
+              />
+            ))}
+          </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/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";

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -0,0 +1,165 @@
+import React, { useEffect } from "react";
+import { required } from "redux-freeform";
+import { Stack } from "../../atoms/layouts";
+import Heading from "../../atoms/heading";
+import { noop } from "../../../util/general";
+import {
+  FormInput,
+  FormContainer,
+  FormInputColumn
+} from "../../atoms/form-layouts";
+import FormSelect from "../../atoms/form-select";
+import SearchableSelect from "../../atoms/searchable-select";
+
+const RESEARCHER = "RESEARCHER";
+const AGENCY_ADMIN = "AGENCY_ADMIN";
+const CLIENT_ADMIN = "CLIENT_ADMIN";
+const SUPERVISOR = "SUPERVISOR";
+const CB_ADMIN = "CITYBASE_ADMIN";
+const CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
+
+const roleDescriptions = {
+  [RESEARCHER]: "Researcher",
+  [AGENCY_ADMIN]: "Agency admin",
+  [CLIENT_ADMIN]: "Client admin",
+  [SUPERVISOR]: "Supervisor",
+  [CB_ADMIN]: "Citybase admin"
+};
+
+const InternalUserInfoForm = ({
+  variant = "default",
+  fields,
+  actions,
+  clearOnDismount,
+  showErrors,
+  handleSubmit = noop,
+  allAgencyOptions,
+  selectedAgencies,
+  allSelected,
+  toggleSelectAllAgencies,
+  selectAgency,
+  roleOptions,
+  clientOptions,
+  disabled,
+  emailDisabled,
+  roleDisabled,
+  formType
+}) => {
+  useEffect(() => {
+    if (formType === CREATE_CLIENT_ADMIN) {
+      actions.fields.client.addValidator(required());
+    }
+  }, []);
+  if (clearOnDismount) {
+    useEffect(() => () => actions.form.clear(), []);
+  }
+  const clientErrorMessages = {
+    [required.error]: "Client is required"
+  };
+  const firstNameErrorMessages = {
+    [required.error]: "First name is required"
+  };
+  const lastNameErrorMessages = {
+    [required.error]: "Last name is required"
+  };
+  const emailErrorMessages = {
+    [required.error]: "Email is required"
+  };
+  const roleErrorMessages = {
+    [required.error]: "Role is required"
+  };
+  return (
+    <FormContainer variant={variant} role="form" aria-label="user-info-form">
+      <Stack>
+        {formType === CREATE_CLIENT_ADMIN && (
+          <FormInputColumn>
+            <Heading variant="h6" weight="700" margin="0 0 1rem">
+              Select Client
+            </Heading>
+            <FormSelect
+              labelTextWhenNoError="Client"
+              errorMessages={clientErrorMessages}
+              options={clientOptions.map(client => ({
+                text: client,
+                value: client,
+                id: client
+              }))}
+              field={fields.client}
+              fieldActions={actions.fields.client}
+              showErrors={showErrors}
+              onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            />
+          </FormInputColumn>
+        )}
+        <FormInputColumn>
+          <Heading variant="h6" weight="700" margin="0 0 1rem">
+            Personal Information
+          </Heading>
+          <FormInput
+            labelTextWhenNoError="First Name"
+            errorMessages={firstNameErrorMessages}
+            field={fields.firstName}
+            fieldActions={actions.fields.firstName}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          />
+          <FormInput
+            labelTextWhenNoError="Last Name"
+            errorMessages={lastNameErrorMessages}
+            field={fields.lastName}
+            fieldActions={actions.fields.lastName}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+          />
+          <FormInput
+            labelTextWhenNoError="Email"
+            errorMessages={emailErrorMessages}
+            field={fields.email}
+            fieldActions={actions.fields.email}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={disabled || emailDisabled}
+          />
+        </FormInputColumn>
+        <FormInputColumn>
+          <Heading variant="h6" weight="700" margin="0 0 1rem">
+            Dashboard Settings
+          </Heading>
+          <FormSelect
+            labelTextWhenNoError="Role"
+            errorMessages={roleErrorMessages}
+            options={roleOptions.map(role => ({
+              text: roleDescriptions[role],
+              value: role,
+              id: role
+            }))}
+            field={fields.role}
+            fieldActions={actions.fields.role}
+            showErrors={showErrors}
+            onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
+            disabled={disabled || roleDisabled}
+          />
+        </FormInputColumn>
+        {formType !== CREATE_CLIENT_ADMIN && (
+          <FormInputColumn>
+            <Heading variant="h6" weight="700" margin="0 0 1rem">
+              Select Agencies
+            </Heading>
+            <SearchableSelect
+              actions={actions}
+              fields={fields}
+              items={allAgencyOptions}
+              selectedItems={selectedAgencies}
+              allSelected={allSelected}
+              toggleSelectAllItems={toggleSelectAllAgencies}
+              selectItem={selectAgency}
+              disabled={disabled}
+            />
+          </FormInputColumn>
+        )}
+      </Stack>
+    </FormContainer>
+  );
+};
+
+export default InternalUserInfoForm;

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.state.js

@@ -0,0 +1,26 @@
+import { createFormState, required, isProbablyEmail } from "redux-freeform";
+
+const formConfig = {
+  client: {
+    validators: []
+  },
+  firstName: {
+    validators: [required()]
+  },
+  lastName: {
+    validators: [required()]
+  },
+  email: {
+    validators: [required(), isProbablyEmail()]
+  },
+  role: {
+    validators: [required()]
+  },
+  searchTerm: {
+    validators: []
+  }
+};
+
+export const { reducer, mapStateToProps, mapDispatchToProps } = createFormState(
+  formConfig
+);

package/src/components/molecules/internal-user-info-form/index.js

@@ -0,0 +1,11 @@
+import InternalUserInfoForm from "./InternalUserInfoForm";
+import {
+  reducer,
+  mapStateToProps,
+  mapDispatchToProps
+} from "./InternalUserInfoForm.state";
+
+InternalUserInfoForm.reducer = reducer;
+InternalUserInfoForm.mapStateToProps = mapStateToProps;
+InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps;
+export default InternalUserInfoForm;