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

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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,31 @@
+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/obligation/icons/PropertyPersonalIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-const PropertyPersonalIcon = () => (
+const PropertyBusinessIcon = () => (
   <svg
     width="48"
     height="48"

package/src/components/molecules/pagination/Pagination.stories.js

@@ -1,181 +1,32 @@
-import React, { useState } from "react";
-import { WHITE, GHOST_GREY } from "../../../constants/colors";
-import { Box } from "../../atoms/layouts";
+import React from "react";
+import { number, text } from "@storybook/addon-knobs";
 import Pagination from "./Pagination";
-import { fn } from "@storybook/test";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import page from "../../../../.storybook/page";
 
-const meta = {
-  title: "Molecules/Pagination",
-  component: Pagination,
-  parameters: {
-    layout: "centered"
-  },
-  tags: ["!autodocs"],
-  args: {
-    activeBorderWidth: "3px",
-    ariaLabel: undefined,
-    arrowColor: undefined,
-    borderRadius: "3px",
-    buttonHeight: "44px",
-    buttonWidth: "44px",
-    childGap: "24px",
-    currentPage: undefined,
-    fontSize: "17px",
-    fontWeight: "900",
-    numberColor: undefined,
-    pageCount: undefined,
-    pageNext: fn(),
-    pagePrevious: fn(),
-    setCurrentPage: fn()
-  },
-  argTypes: {
-    activeBorderWidth: {
-      description: "The width of the border around the active page number",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "3px" }
-      }
-    },
-    ariaLabel: {
-      description: "aria-label value for pagination container",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    arrowColor: {
-      description:
-        "Override for arrow color, if undefined component uses themed values",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    borderRadius: {
-      description: "Border radius of the border around pagination controls",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "3px" }
-      }
-    },
-    buttonHeight: {
-      description: "Height of pagination buttons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "44px" }
-      }
-    },
-    buttonWidth: {
-      description: "Width of pagination buttons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "44px" }
-      }
-    },
-    childGap: {
-      description: "Gap between pagination buttons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "24px" }
-      }
-    },
-    currentPage: {
-      description: "Current active page",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    fontSize: {
-      descripton: "Font size of page buttons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "17px" }
-      }
-    },
-    fontWeight: {
-      description: "Font weight of page buttons",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: "900" }
-      }
-    },
-    numberColor: {
-      description:
-        "Override for color of pagination number buttons, if undefined will use themed values",
-      table: {
-        type: { summary: "string" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    pageCount: {
-      description: "Total number of pages",
-      table: {
-        type: { summary: "number" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    pageNext: {
-      description: "Function to call when next button is clicked",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    pagePrevious: {
-      description: "Function to call when previous button is clicked",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    },
-    setCurrentPage: {
-      description: "Function to call when user selects a numerical page button",
-      table: {
-        type: { summary: "function" },
-        defaultValue: { summary: undefined }
-      }
-    }
-  }
-};
+export const pagination = () => (
+  <Pagination
+    activeBorderWidth={text("activeBorderWidth", "3px", "props")}
+    ariaLabel={text("ariaLabel", "Aria Label", "props")}
+    arrowColor={text("arrowColor", "#FFFFFF", "props")}
+    borderRadius={text("borderRadius", "3px", "props")}
+    buttonHeight={text("buttonHeight", "44px", "props")}
+    buttonWidth={text("buttonWidth", "44px", "props")}
+    childGap={text("childGap", "24px", "props")}
+    currentPage={number("currentPage", 2)}
+    fontSize={text("fontSize", "17px", "props")}
+    fontWeight={text("fontWeight", "900", "props")}
+    numberColor={text("numberColor", "#15749D", "props")}
+    pageCount={number("pageCount", 3)}
+    pageNext={() => {}}
+    pagePrevious={() => {}}
+    setCurrentPage={() => {}}
+    // themeValues
+  />
+);
 
-export default meta;
+const story = page({
+  title: "Components|Molecules/Pagination",
+  Component: Pagination
+});
 
-export const BasicPagination = {
-  args: {
-    activeBorderWidth: "3px",
-    childGap: "24px",
-    borderRadius: "4px",
-    fontSize: "14px",
-    buttonHeight: "44px",
-    buttonWidth: "44px",
-    fontWeight: FONT_WEIGHT_SEMIBOLD,
-    pageCount: 12,
-    ariaLabel: "Pagination"
-  },
-  render: args => {
-    const [currentPage, setCurrentPage] = useState(5);
-
-    return (
-      <Box
-        background={WHITE}
-        borderRadius="4px"
-        boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
-        padding={"24px"}
-      >
-        <Pagination
-          {...args}
-          currentPage={currentPage}
-          pageNext={() =>
-            currentPage < 12 ? setCurrentPage(currentPage + 1) : fn()
-          }
-          pagePrevious={() =>
-            currentPage > 1 ? setCurrentPage(currentPage - 1) : fn()
-          }
-          setCurrentPage={page => setCurrentPage(page.pageNumber)}
-        />
-      </Box>
-    );
-  }
-};
+export default story;