@thecb/components 10.12.2-beta.0 → 10.12.3-beta.0

package/src/components/molecules/edit-name-form/EdidNameForm.stories.js

@@ -1,24 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
-
-import EditNameForm from "./EditNameForm";
-import page from "../../../../.storybook/page";
-import * as EditNameFormState from "./EditNameForm.state";
-
-const story = page({
-  title: "Components|Molecules/EditNameForm",
-  Component: EditNameForm,
-  reducer: EditNameFormState.reducer,
-  mapStateToProps: EditNameFormState.mapStateToProps,
-  mapDispatchToProps: EditNameFormState.mapDispatchToProps
-});
-export default story;
-
-const ConnectedForm = connect(
-  EditNameFormState.mapStateToProps,
-  EditNameFormState.mapDispatchToProps
-)(EditNameForm);
-export const editNameForm = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
-);

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

@@ -1,27 +0,0 @@
-import React, { forwardRef } from "react";
-import { ButtonWithAction } from "../../../atoms";
-import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
-
-const ActionLinkButton = forwardRef(
-  ({ action, text, dataQa, ariaLabel }, ref) => {
-    return (
-      <ButtonWithAction
-        ref={ref}
-        action={action}
-        variant="tertiary"
-        extraStyles={`
-        padding: 0.2rem; 
-        margin: 0.5rem; 
-        min-height: auto; 
-        min-width: auto;
-      `}
-        textExtraStyles={`font-weight: ${FONT_WEIGHT_REGULAR};`}
-        text={text}
-        dataQa={dataQa}
-        aria-label={ariaLabel}
-      ></ButtonWithAction>
-    );
-  }
-);
-
-export default ActionLinkButton;

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

@@ -1,89 +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,
-      extraStyles
-    },
-    ref
-  ) => {
-    const btnTextFilterDescription = selectedOptions?.length
-      ? `${filterLabel ? `${filterLabel}: ` : ""}${selectedOptions[0].name}`
-      : `${filterLabel ? filterLabel : ""}`;
-    const btnTextItemsDescription =
-      selectedOptions?.length && selectedOptions?.length > 1
-        ? `, +${selectedOptions?.length - 1} More`
-        : "";
-    return (
-      <StyledFilterButton
-        ref={ref}
-        variant="tertiary"
-        action={action}
-        aria-haspopup="listbox"
-        aria-expanded={opened}
-        aria-controls={filterDropdownID}
-        backgroundColor={backgroundColor}
-        dataQa={`${name}-filter-button`}
-        extraStyles={extraStyles}
-        aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
-        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}
-                `}
-              >
-                {btnTextFilterDescription}
-              </Text>
-              <Text color={contentColor} variant="pS">
-                {btnTextItemsDescription}
-              </Text>
-            </Center>
-            <DropdownIconV2 color={contentColor} />
-          </Center>
-        )}
-      </StyledFilterButton>
-    );
-  }
-);
-
-export default FilterButton;

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

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

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

@@ -1,146 +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";
-
-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}
-      padding="0"
-      role="listbox"
-      aria-label="Filter options container"
-      onKeyDown={handleKeyDown}
-      extraStyles={`
-        overflow-y: auto;
-        max-height: 250px;
-        display: flex;
-        flex-flow: column;
-        padding-bottom: 0.5rem;
-    `}
-    >
-      {sortedAppliedOptions?.length > 0 && (
-        <>
-          {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}
-                showDivider={
-                  sortedOptions.length > 0 &&
-                  index === sortedAppliedOptions.length - 1
-                }
-              ></FilterableListItem>
-            );
-          })}
-        </>
-      )}
-      <>
-        {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,79 +0,0 @@
-import React, { forwardRef } from "react";
-import Checkbox from "../../../atoms/checkbox";
-import { GHOST_GREY } from "../../../../constants/colors";
-import CheckboxCheckmarkIcon from "../../../atoms/icons/CheckboxCheckmarkIcon";
-
-const FilterableListItem = forwardRef(
-  (
-    {
-      index,
-      option,
-      checked,
-      selectOption,
-      disabled,
-      tabIndex,
-      name,
-      showDivider,
-      extraStyles,
-      themeValues
-    },
-    ref
-  ) => {
-    const dividerStyles = `
-    ::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      display: block;
-      height: 1px;
-      background-color: ${GHOST_GREY};
-      bottom: -0.5rem;
-      left: 0;
-    }`;
-    return (
-      <Checkbox
-        key={index}
-        ref={ref}
-        title={option.name}
-        name={option.name}
-        role="option"
-        aria-selected={checked}
-        tabIndex={tabIndex}
-        dataQa={`${name}-option-${index}`}
-        checked={checked}
-        onChange={() => selectOption(option)}
-        textExtraStyles={`font-size: 0.875rem; margin: 0;`}
-        disabled={disabled}
-        extraStyles={`
-          padding: 0.375rem 0.625rem; 
-          margin: 0;
-          :hover,
-          :active,
-          :focus {
-            background-color: ${themeValues.primaryColor};
-            outline-offset: -3px;
-          }
-          ${showDivider && dividerStyles}
-          ${extraStyles}
-        `}
-        checkboxMargin={showDivider ? "0 0 1rem" : "0"}
-        hasIconOverride={true}
-        icon={CheckboxCheckmarkIcon}
-        checkboxExtraStyles={`
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 20px;
-          width: 20px;
-          ${
-            checked && !disabled
-              ? `background: ` + themeValues.secondaryColor + `;`
-              : ""
-          }
-       `}
-      />
-    );
-  }
-);
-
-export default FilterableListItem;

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

@@ -1,41 +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};
-            :focus {
-              outline-offset: -3px;
-            }
-          `}
-        />
-      )}
-    </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;