@thecb/components 10.12.1 → 10.12.3-beta.0

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -1,16 +1,146 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import { fallbackValues } from "./MultipleSelectFilter.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box } from "../../atoms/layouts";
-import { GHOST_GREY, WHITE, CHARADE_GREY } from "../../../constants/colors";
+import { Box, Center } from "../../atoms/layouts";
+import { FormInput } from "../../atoms/form-layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Checkbox from "../../atoms/checkbox";
+import { GHOST_GREY, WHITE } from "../../../constants/colors";
+import { Text } from "../../atoms";
+import DropdownIconV2 from "../../atoms/dropdown/DropdownIconV2";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { noop } from "../../../util/general";
-import { FilterContainer } from "./MultipleSelectFilter.styled";
-import ActionLinkButton from "./__private__/ActionLinkButton";
-import FilterButton from "./__private__/FilterButton";
-import FilterDropdown from "./__private__/FilterDropdown";
-import SearchBox from "./__private__/SearchBox";
-import FilterableList from "./__private__/FilterableList";
-import useOutsideClickHook from "../../../hooks/use-outside-click";
+import {
+  FilterContainer,
+  FilterButton,
+  FilterDropdown
+} from "./MultipleSelectFilter.styled";
+
+const ScrollableOptionsList = ({
+  id,
+  optionsList,
+  selectedOptions,
+  themeValues,
+  selectOption,
+  maxSelections,
+  name
+}) => {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const checkboxRefs = useRef([]);
+  const isMaxSelectionReached =
+    maxSelections && maxSelections === selectedOptions?.length;
+  const isChecked = option =>
+    selectedOptions?.some(
+      selectedOption => selectedOption?.name === option?.name
+    );
+
+  useEffect(() => {
+    if (
+      focusedIndex !== -1 &&
+      checkboxRefs.current &&
+      checkboxRefs.current[focusedIndex]
+    ) {
+      checkboxRefs.current[focusedIndex].focus(); // move focus to the active option
+    }
+  }, [focusedIndex]);
+
+  const handleKeyDown = event => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setFocusedIndex(prevIndex =>
+        prevIndex < optionsList.length - 1 ? prevIndex + 1 : 0
+      );
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setFocusedIndex(prevIndex =>
+        prevIndex > 0 ? prevIndex - 1 : optionsList.length - 1
+      );
+    } else if (event.key === " ") {
+      event.preventDefault();
+      // Select option on spacebar press if the maximum selection hasn't been reached.
+      const validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
+      if (
+        !isMaxSelectionReached ||
+        (focusedIndex !== -1 && isChecked(optionsList[validFocusedIndex]))
+      ) {
+        selectOption(optionsList[validFocusedIndex]);
+      }
+    } else if (event.key === "Tab") {
+      // Reset focus when tabbing out of the list.
+      setTimeout(() => {
+        setFocusedIndex(-1);
+      }, 500);
+    }
+  };
+
+  return (
+    <Box
+      id={id}
+      role="listbox"
+      padding="0"
+      extraStyles={`
+        overflow-y: auto; 
+        max-height: 250px; 
+        display: flex; 
+        flex-flow: column;
+      `}
+      onKeyDown={handleKeyDown}
+    >
+      {optionsList.map((option, index) => {
+        const checked = isChecked(option);
+        const isDisabled = isMaxSelectionReached && !checked;
+        const tabIndex =
+          index === focusedIndex || (index === 0 && focusedIndex === -1)
+            ? "0"
+            : "-1";
+        return (
+          <Box
+            padding="0"
+            key={index}
+            extraStyles={`
+              :hover,
+              :active,
+              :focus {
+                background-color: ${themeValues.primaryColor};
+              }
+          `}
+          >
+            <Checkbox
+              ref={el => (checkboxRefs.current[index] = el)}
+              title={option.name}
+              name={option.name}
+              checked={checked}
+              onChange={() => (isDisabled ? noop : selectOption(option))}
+              textExtraStyles={`font-size: 0.875rem; margin: 0;`}
+              disabled={isDisabled}
+              extraStyles={`
+                padding: 0.075rem 0.325rem; 
+                margin: 0;
+                :hover,
+                :active,
+                :focus {
+                  background-color: ${themeValues.primaryColor};
+                }
+            `}
+              checkboxMargin="0.3rem"
+              role="option"
+              checkboxExtraStyles={`
+                width: 1.375rem; 
+                height: 1.375rem; 
+                ${
+                  checked && !isDisabled
+                    ? `background: ` + themeValues.secondaryColor + `;`
+                    : ""
+                }`}
+              tabIndex={tabIndex}
+              dataQa={`${name}-option-${index}`}
+            />
+          </Box>
+        );
+      })}
+    </Box>
+  );
+};
 
 const MultipleSelectFilter = ({
   actions,
@@ -34,27 +164,53 @@ const MultipleSelectFilter = ({
   themeValues,
   truncateBtnTextWidth = "15rem"
 }) => {
+  const [itemList, setItemList] = useState([]);
   const [opened, setOpened] = useState(false);
-  const [appliedOptions, setAppliedOptions] = useState([]);
-
-  const handleClickOutsideContainer = () => {
-    setOpened(false);
-    actions.fields.searchTerm.set("");
-    onApply(selectedOptions);
-  };
-  const containerRef = useOutsideClickHook(() => handleClickOutsideContainer());
+  const containerRef = useRef(null);
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
   const filterDropdownID = `${name}-filter-dropdown`;
   const checkboxListID = `${name}-checkbox-list`;
 
+  const backgroundColor = opened
+    ? themeValues.primaryColor
+    : selectedOptions?.length
+    ? themeValues.secondaryColor
+    : WHITE;
+  const contentColor = !opened && selectedOptions?.length ? WHITE : "#292A33";
+
+  const completeOptionsList = itemList
+    .slice()
+    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
+  const selectValues = items => items.map(item => item.value);
+  const selectOption = selectedOption => {
+    if (selectValues(selectedOptions).includes(selectedOption.value)) {
+      const fewerOptions = selectedOptions.filter(
+        option => option.value !== selectedOption.value
+      );
+      setSelectedOptions(fewerOptions);
+    } else {
+      const moreOptions = selectedOptions.concat(selectedOption);
+      setSelectedOptions(moreOptions);
+    }
+  };
+
+  useEffect(() => setItemList(options), [options]);
+
   useEffect(() => {
-    if (!opened) {
-      onApply(selectedOptions);
-      setAppliedOptions(selectedOptions);
+    const filteredItems = options.filter(item =>
+      item?.name
+        ?.toLowerCase()
+        .includes(fields?.searchTerm?.rawValue?.toLowerCase())
+    );
+    // If no items are filtered, display the entire list of options.
+    if (filteredItems?.length) {
+      setItemList(filteredItems);
+    } else {
+      setItemList(options);
     }
-  }, [opened]);
+  }, [fields.searchTerm.rawValue]);
 
   useEffect(() => {
     const handleKeyDown = event => {
@@ -82,8 +238,22 @@ const MultipleSelectFilter = ({
         onApply(selectedOptions);
       }
     };
+    const handleClickOutside = event => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target)
+      ) {
+        setOpened(false);
+        actions.fields.searchTerm.set("");
+        onApply(selectedOptions);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      document.addEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -92,53 +262,101 @@ const MultipleSelectFilter = ({
     <FilterContainer ref={containerRef} extraStyles={`${extraStyles}`}>
       <FilterButton
         ref={filterButtonRef}
-        btnContentOverride={btnContentOverride}
+        variant="tertiary"
         action={() => {
           actions.fields.searchTerm.set("");
           setOpened(!opened);
         }}
-        opened={opened}
-        backgroundColor={
-          opened
-            ? themeValues.primaryColor
-            : selectedOptions?.length
-            ? themeValues.secondaryColor
-            : WHITE
-        }
-        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
-        name={name}
-        filterDropdownID={filterDropdownID}
-        hasIcon={hasIcon}
-        icon={Icon}
-        truncateBtnTextWidth={truncateBtnTextWidth}
-        filterLabel={filterLabel}
-        selectedOptions={selectedOptions}
-      ></FilterButton>
+        aria-haspopup="listbox"
+        aria-expanded={opened}
+        aria-controls={filterDropdownID}
+        backgroundColor={backgroundColor}
+        dataQa={`${name}-filter-button`}
+        contentOverride
+      >
+        {btnContentOverride ? (
+          btnContentOverride
+        ) : (
+          <Center
+            as="span"
+            style={{ display: "flex", flexDirection: "row" }}
+            intrinsic
+          >
+            {hasIcon && <Icon color={contentColor} />}
+            <Center
+              as="span"
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                padding: "0 0.5rem 0 0.25rem"
+              }}
+              intrinsic
+            >
+              <Text
+                variant="pS"
+                color={contentColor}
+                extraStyles={`
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
+                `}
+              >
+                {selectedOptions?.length
+                  ? `${filterLabel ? filterLabel + ": " : ""}${
+                      selectedOptions[0].name
+                    }`
+                  : `${filterLabel ? filterLabel : ""}`}
+              </Text>
+              <Text color={contentColor} variant="pS">
+                {selectedOptions?.length && selectedOptions?.length > 1
+                  ? `, +${selectedOptions?.length - 1} More`
+                  : ""}
+              </Text>
+            </Center>
+            <DropdownIconV2 color={contentColor} />
+          </Center>
+        )}
+      </FilterButton>
       <FilterDropdown
         id={filterDropdownID}
         ref={dropdownRef}
-        ariaOwns={checkboxListID}
-        opened={opened}
+        hidden={!opened}
+        role="combobox"
+        aria-expanded={opened}
+        aria-haspopup="listbox"
+        aria-owns={checkboxListID}
       >
-        <SearchBox
-          showSearchBox={searchable && options?.length > 8}
-          autocompleteValue={autocompleteValue}
-          fields={fields}
-          actions={actions}
-          placeholder={placeholder}
-          disabled={disabled}
-        ></SearchBox>
-        <FilterableList
+        <Box padding="0 0 0.5rem">
+          {searchable && options?.length > 8 && (
+            <FormInput
+              autocompleteValue={autocompleteValue}
+              showFieldErrorRow={false}
+              errorMessages={{}}
+              field={fields.searchTerm}
+              fieldActions={actions.fields.searchTerm}
+              placeholder={placeholder}
+              disabled={disabled}
+              extraStyles={`
+                height: 2.875rem;
+                border: 0; 
+                border-radius: 0;
+                padding: 0.45rem;
+                font-size: 0.875rem;
+                border-bottom: 1px solid ${GHOST_GREY};
+             `}
+            />
+          )}
+        </Box>
+        <ScrollableOptionsList
           id={checkboxListID}
-          options={options}
-          appliedOptions={appliedOptions}
-          themeValues={themeValues}
+          optionsList={completeOptionsList}
           selectedOptions={selectedOptions}
+          themeValues={themeValues}
+          selectOption={selectOption}
           maxSelections={maxSelections}
           name={name}
-          setSelectedOptions={setSelectedOptions}
-          searchTerm={fields?.searchTerm}
-        ></FilterableList>
+        ></ScrollableOptionsList>
         <Box
           padding="0 0.5rem 0.0625rem 0.5rem"
           extraStyles={`
@@ -149,26 +367,42 @@ const MultipleSelectFilter = ({
             border-top: 1px solid ${GHOST_GREY};
           `}
         >
-          <ActionLinkButton
+          <ButtonWithAction
             action={() => {
               setOpened(false);
               setSelectedOptions([]);
               actions.fields.searchTerm.set("");
               onClear();
             }}
+            variant="tertiary"
+            extraStyles={`
+              padding: 0.2rem; 
+              margin: 0.5rem; 
+              min-height: auto; 
+              min-width: auto;
+            `}
+            textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
             text="Clear"
             dataQa={`${name}-clear-filters`}
-          ></ActionLinkButton>
-          <ActionLinkButton
+          ></ButtonWithAction>
+          <ButtonWithAction
             ref={applyFilterButtonRef}
             action={() => {
               setOpened(false);
               actions.fields.searchTerm.set("");
               onApply(selectedOptions);
             }}
+            variant="tertiary"
+            extraStyles={`
+              padding: 0.2rem; 
+              margin: 0.5rem; 
+              min-height: auto; 
+              min-width: auto;
+            `}
+            textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
             text="Apply"
             dataQa={`${name}-apply-filters`}
-          ></ActionLinkButton>
+          ></ButtonWithAction>
         </Box>
       </FilterDropdown>
     </FilterContainer>

package/src/components/molecules/multiple-select-filter/{MultipleSelectFilter.stories.js → MultipleSelectFilter.oldstories.js}

@@ -41,7 +41,7 @@ const items = [
 ];
 
 const FormWrapper = props => {
-  const [selectedItems, setSelectedItems] = useState([]);
+  const [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
 
   return (
     <MultipleSelectFilter

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.styled.js

@@ -28,11 +28,11 @@ const StyledFilterDropdown = styled(Box)`
   max-width: 18.625rem;
 `;
 
-export const FilterDropdownContainer = forwardRef((props, ref) => (
+export const FilterDropdown = forwardRef((props, ref) => (
   <StyledFilterDropdown ref={ref} {...props} />
 ));
 
-const FilterButton = styled(ButtonWithAction)`
+const StyledFilterButton = styled(ButtonWithAction)`
   min-width: auto;
   min-height: 2.3125rem;
   margin: 0;
@@ -52,6 +52,6 @@ const FilterButton = styled(ButtonWithAction)`
   `}
 `;
 
-export const StyledFilterButton = forwardRef((props, ref) => (
-  <FilterButton ref={ref} {...props} />
+export const FilterButton = forwardRef((props, ref) => (
+  <StyledFilterButton ref={ref} {...props} />
 ));

package/src/components/molecules/obligation/Obligation.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as ObligationStories from './Obligation.stories.js';
+
+<Meta of={ObligationStories} />
+
+<Title />
+
+The Obligation is a purpose built component to display user accounts on NFE's User Profile. The component consumers configuration provided by FCS to dictate its icon and type. NFE uses this configuration to assemble the description and subDescription from the obligation's custom attributes. A full detail of the structure of the configuration object is beyond the scope of this documentation, but an example can be found in the story code, and further detail is available on Confluence within the implementation guides used by solutions engineers.
+
+The component currently has two states. An active obligation uses data from the user lookup and FCS to provide account details and amount due as well as controls to interact with the obligation, such as for viewing account details or enabling/disabling autopay. 
+
+An inactive obligation is one whose data is not fully returned from lookup (this happens when our systems contain record of the account because of its association with a user, but the source system or source file ingested by FLS no longer provides that information, such as when a debt gets paid off). Inactive obligations look different and take some props to display a small amount of information to the user about what account used to be represented there.
+
+If the current user is a customer management admin accessing the profile via the RevM impersonation feature, then most of the interaction controls with the Obligation will be disabled.
+
+The Obligation was designed to be extensible to meet product needs in the future. New "modules" can be added to the modules directory that feature different collections of buttons or information display. Some work will need to be done to the main component code to support such additions.
+
+<Controls />
+
+<div style={{ marginBottom: "2em"}}>
+    <Story />
+</div>