@thecb/components 10.12.1 → 10.12.3-beta.0

package/src/components/molecules/multiple-select-filter/__private__/FilterButton.js

@@ -1,85 +0,0 @@
-import React, { forwardRef } from "react";
-import { Text, Center } from "../../../atoms";
-import DropdownIconV2 from "../../../atoms/dropdown/DropdownIconV2";
-import { StyledFilterButton } from "../MultipleSelectFilter.styled";
-import { noop } from "../../../../util/general";
-
-const FilterButton = forwardRef(
-  (
-    {
-      btnContentOverride,
-      action = noop,
-      opened,
-      backgroundColor,
-      contentColor,
-      name,
-      filterDropdownID,
-      hasIcon = false,
-      icon: Icon,
-      truncateBtnTextWidth,
-      filterLabel,
-      selectedOptions
-    },
-    ref
-  ) => {
-    return (
-      <StyledFilterButton
-        ref={ref}
-        variant="tertiary"
-        action={action}
-        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>
-        )}
-      </StyledFilterButton>
-    );
-  }
-);
-
-export default FilterButton;

package/src/components/molecules/multiple-select-filter/__private__/FilterDropdown.js

@@ -1,23 +0,0 @@
-import React, { forwardRef } from "react";
-import { FilterDropdownContainer } from "../MultipleSelectFilter.styled";
-
-const FilterDropdown = forwardRef(({ id, ariaOwns, opened, children }, ref) => {
-  return (
-    <>
-      {opened && (
-        <FilterDropdownContainer
-          ref={ref}
-          id={id}
-          role="combobox"
-          aria-expanded={opened}
-          aria-haspopup="listbox"
-          aria-owns={ariaOwns}
-        >
-          {children}
-        </FilterDropdownContainer>
-      )}
-    </>
-  );
-});
-
-export default FilterDropdown;

package/src/components/molecules/multiple-select-filter/__private__/FilterableList.js

@@ -1,144 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Box } from "../../../atoms";
-import FilterableListItem from "./FilterableListItem";
-import useKeyboardNavigation from "./useKeyboardNavigation";
-import {
-  sortItemsList,
-  filterItemsList,
-  selectOption,
-  isChecked,
-  isMaxSelectionReached
-} from "./util";
-import { GHOST_GREY } from "../../../../constants/colors";
-
-const FilterableList = ({
-  id,
-  options,
-  appliedOptions,
-  selectedOptions,
-  maxSelections,
-  name,
-  setSelectedOptions,
-  searchTerm,
-  themeValues
-}) => {
-  const [filteredOptions, setFilteredOptions] = useState([]);
-  const [filteredAppliedOptions, setFilteredAppliedOptions] = useState([]);
-
-  useEffect(() => {
-    setFilteredOptions(options);
-    setFilteredAppliedOptions(appliedOptions);
-  }, [options, appliedOptions]);
-
-  useEffect(() => {
-    const filteredOptionItems = filterItemsList(options, searchTerm?.rawValue);
-    const filteredAppliedItems = filterItemsList(
-      appliedOptions,
-      searchTerm?.rawValue
-    );
-
-    setFilteredOptions(
-      filteredOptionItems.length ? filteredOptionItems : filteredOptions
-    );
-    setFilteredAppliedOptions(filteredAppliedItems);
-  }, [searchTerm.rawValue]);
-
-  const handleSelectOption = option =>
-    selectOption(option, selectedOptions, setSelectedOptions);
-
-  const isAppliedOption = option =>
-    filteredAppliedOptions?.some(
-      appliedItem => appliedItem?.name === option?.name
-    );
-
-  const currentFilteredOptions = filteredOptions.filter(
-    option => !isAppliedOption(option)
-  );
-
-  const sortedOptions = sortItemsList(currentFilteredOptions);
-  const sortedAppliedOptions = sortItemsList(filteredAppliedOptions);
-
-  const { itemRefs, focusedIndex, handleKeyDown } = useKeyboardNavigation({
-    options: sortedOptions,
-    appliedOptions: sortedAppliedOptions,
-    selectedOptions,
-    maxSelections
-  });
-
-  return (
-    <Box
-      id={id}
-      role="listbox"
-      padding="0"
-      extraStyles={`
-        overflow-y: auto;
-        max-height: 250px;
-        display: flex;
-        flex-flow: column;
-      `}
-      onKeyDown={handleKeyDown}
-    >
-      {sortedAppliedOptions?.length > 0 && (
-        <Box
-          padding="0"
-          extraStyles={
-            sortedOptions.length > 0 && `border-bottom: 1px solid ${GHOST_GREY}`
-          }
-        >
-          {sortedAppliedOptions.map((option, index) => {
-            const checked = isChecked(option, selectedOptions);
-            const tabIndex =
-              index === focusedIndex || (index === 0 && focusedIndex === -1)
-                ? "0"
-                : "-1";
-            return (
-              <FilterableListItem
-                key={index}
-                ref={el => (itemRefs.current[index] = el)}
-                index={index}
-                option={option}
-                checked={checked}
-                selectOption={handleSelectOption}
-                tabIndex={tabIndex}
-                name={name}
-                themeValues={themeValues}
-              ></FilterableListItem>
-            );
-          })}
-        </Box>
-      )}
-      {sortedOptions.map((option, index) => {
-        const checked = isChecked(option, selectedOptions);
-        const isDisabled =
-          isMaxSelectionReached(maxSelections, selectedOptions) && !checked;
-        const indexOffset = sortedAppliedOptions?.length
-          ? sortedAppliedOptions?.length
-          : 0;
-        const currentIndex = index === 0 ? indexOffset : index + indexOffset;
-        const tabIndex =
-          currentIndex === focusedIndex ||
-          (indexOffset === 0 &&
-            currentIndex === indexOffset &&
-            focusedIndex === -1)
-            ? "0"
-            : "-1";
-        return (
-          <FilterableListItem
-            key={currentIndex}
-            ref={el => (itemRefs.current[currentIndex] = el)}
-            index={currentIndex}
-            option={option}
-            checked={checked}
-            selectOption={isDisabled ? noop : handleSelectOption}
-            disabled={isDisabled}
-            tabIndex={tabIndex}
-            name={name}
-            themeValues={themeValues}
-          ></FilterableListItem>
-        );
-      })}
-    </Box>
-  );
-};
-
-export default React.memo(FilterableList);

package/src/components/molecules/multiple-select-filter/__private__/FilterableListItem.js

@@ -1,67 +0,0 @@
-import React, { forwardRef } from "react";
-import Checkbox from "../../../atoms/checkbox";
-import { Box } from "../../../atoms";
-
-const FilterableListItem = forwardRef(
-  (
-    {
-      index,
-      option,
-      checked,
-      selectOption,
-      disabled,
-      tabIndex,
-      name,
-      themeValues
-    },
-    ref
-  ) => {
-    return (
-      <Box
-        padding="0"
-        key={index}
-        extraStyles={`
-        :hover,
-        :active,
-        :focus {
-        background-color: ${themeValues.primaryColor};
-        }
-    `}
-      >
-        <Checkbox
-          ref={ref}
-          title={option.name}
-          name={option.name}
-          checked={checked}
-          onChange={() => selectOption(option)}
-          textExtraStyles={`font-size: 0.875rem; margin: 0;`}
-          disabled={disabled}
-          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 && !disabled
-                ? `background: ` + themeValues.secondaryColor + `;`
-                : ""
-            }
-         `}
-          tabIndex={tabIndex}
-          dataQa={`${name}-option-${index}`}
-        />
-      </Box>
-    );
-  }
-);
-
-export default FilterableListItem;

package/src/components/molecules/multiple-select-filter/__private__/SearchBox.js

@@ -1,38 +0,0 @@
-import React from "react";
-import { Box, FormInput } from "../../../atoms";
-import { GHOST_GREY } from "../../../../constants/colors";
-
-const SearchBox = ({
-  autocompleteValue,
-  fields,
-  actions,
-  placeholder,
-  disabled,
-  showSearchBox
-}) => {
-  return (
-    <Box padding="0 0 0.5rem">
-      {showSearchBox && (
-        <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>
-  );
-};
-
-export default SearchBox;

package/src/components/molecules/multiple-select-filter/__private__/useKeyboardNavigation.js

@@ -1,84 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import { isMaxSelectionReached } from "./util";
-
-const useKeyboardNavigation = ({
-  options,
-  appliedOptions,
-  selectedOptions,
-  maxSelections
-}) => {
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const itemRefs = useRef([]);
-  const totalItemsLength = options.length + appliedOptions.length;
-
-  const handleArrowUp = event => {
-    event.preventDefault();
-    setFocusedIndex(prevIndex =>
-      prevIndex > 0 ? prevIndex - 1 : totalItemsLength - 1
-    );
-  };
-
-  const handleArrowDown = event => {
-    event.preventDefault();
-    setFocusedIndex(prevIndex =>
-      prevIndex < totalItemsLength - 1 ? prevIndex + 1 : 0
-    );
-  };
-
-  const handleSpacebar = event => {
-    event.preventDefault();
-    const validFocusedIndex = focusedIndex < 0 ? 0 : focusedIndex;
-    // Select option on spacebar press if the maximum selection hasn't been reached.
-    if (
-      !isMaxSelectionReached(maxSelections, selectedOptions) &&
-      itemRefs.current &&
-      itemRefs.current[validFocusedIndex]
-    ) {
-      const nestedInput = itemRefs.current[validFocusedIndex].querySelector(
-        "input"
-      );
-      if (nestedInput) {
-        nestedInput.click();
-      }
-    }
-  };
-
-  const handleTab = event => {
-    // Reset focus when tabbing out of the list.
-    setFocusedIndex(-1);
-  };
-
-  const keyActions = {
-    " ": event => handleSpacebar(event),
-    Space: event => handleSpacebar(event),
-    Tab: event => handleTab(event),
-    ArrowUp: event => handleArrowUp(event),
-    ArrowDown: event => handleArrowDown(event)
-  };
-
-  const handleKeyDown = event => {
-    const eventKey = event.code || event.key;
-    const action = keyActions[eventKey];
-    if (action) {
-      action(event);
-    }
-  };
-
-  useEffect(() => {
-    if (
-      focusedIndex !== -1 &&
-      itemRefs.current &&
-      itemRefs.current[focusedIndex]
-    ) {
-      itemRefs.current[focusedIndex].focus(); // move focus to the active option
-    }
-  }, [focusedIndex]);
-
-  return {
-    itemRefs,
-    focusedIndex,
-    handleKeyDown
-  };
-};
-
-export default useKeyboardNavigation;

package/src/components/molecules/multiple-select-filter/__private__/util.js

@@ -1,31 +0,0 @@
-export const filterItemsList = (list, searchTerm) =>
-  list.filter(item =>
-    item?.name?.toLowerCase().includes(searchTerm?.toLowerCase())
-  );
-
-export const sortItemsList = list =>
-  list
-    .slice()
-    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-
-export const isMaxSelectionReached = (maxSelection, selectedOptions) =>
-  maxSelection && maxSelection === selectedOptions?.length;
-
-export const isChecked = (option, selectedOptions) =>
-  selectedOptions?.some(
-    selectedOption => selectedOption?.name === option?.name
-  );
-
-export const selectValues = items => items.map(item => item.value);
-
-export const selectOption = (option, selectedOptions, setSelectedOptions) => {
-  if (selectValues(selectedOptions).includes(option.value)) {
-    const fewerOptions = selectedOptions.filter(
-      selectedOption => selectedOption.value !== option.value
-    );
-    setSelectedOptions(fewerOptions);
-  } else {
-    const moreOptions = selectedOptions.concat(option);
-    setSelectedOptions(moreOptions);
-  }
-};

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

@@ -1,105 +0,0 @@
-import React, { useEffect } from "react";
-import ToastNotification from "./ToastNotification";
-import page from "../../../../.storybook/page";
-import { useToastNotification } from "../../../hooks";
-import { ToastVariants } from "../../../types/common";
-import { text } from "@storybook/addon-knobs";
-
-const groupId = "props";
-
-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()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-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()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-toastNotificationError.storyName = "Error Toast";
-
-export const toastNotificationNoAutoHide = () => {
-  const {
-    isToastOpen,
-    toastMessage,
-    showToast,
-    hideToast
-  } = useToastNotification({ timeout: 0 });
-
-  useEffect(() => {
-    showToast({
-      message: "Success!",
-      variant: ToastVariants.SUCCESS
-    });
-  }, []);
-
-  return (
-    <ToastNotification
-      message={toastMessage}
-      toastOpen={isToastOpen}
-      closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
-    />
-  );
-};
-
-toastNotificationNoAutoHide.storyName = "No auto-hide";
-
-const story = page({
-  title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification
-});
-
-export default story;