@thecb/components 10.12.4 → 10.12.5-beta.0

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

@@ -9,6 +9,7 @@ import {
   isChecked,
   isMaxSelectionReached
 } from "./util";
+import { GHOST_GREY } from "../../../../constants/colors";
 
 const FilterableList = ({
   id,
@@ -67,20 +68,23 @@ const FilterableList = ({
   return (
     <Box
       id={id}
-      padding="0"
       role="listbox"
-      aria-label="Filter options container"
-      onKeyDown={handleKeyDown}
+      padding="0"
       extraStyles={`
         overflow-y: auto;
         max-height: 250px;
         display: flex;
         flex-flow: column;
-        padding-bottom: 0.5rem;
-    `}
+      `}
+      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 =
@@ -98,47 +102,41 @@ const FilterableList = ({
                 tabIndex={tabIndex}
                 name={name}
                 themeValues={themeValues}
-                showDivider={
-                  sortedOptions.length > 0 &&
-                  index === sortedAppliedOptions.length - 1
-                }
               ></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>
-          );
-        })}
-      </>
+      {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>
   );
 };

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

@@ -1,7 +1,6 @@
 import React, { forwardRef } from "react";
 import Checkbox from "../../../atoms/checkbox";
-import { GHOST_GREY } from "../../../../constants/colors";
-import CheckboxCheckmarkIcon from "../../../atoms/icons/CheckboxCheckmarkIcon";
+import { Box } from "../../../atoms";
 
 const FilterableListItem = forwardRef(
   (
@@ -13,64 +12,54 @@ const FilterableListItem = forwardRef(
       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
+      <Box
+        padding="0"
         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.primaryHoverColor};
-          }
-          ${showDivider && dividerStyles}
-          ${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={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 + `;`
-              : ""
-          }
-       `}
-      />
+          checkboxMargin="0.3rem"
+          role="option"
+          checkboxExtraStyles={`
+            width: 1.375rem; 
+            height: 1.375rem;
+            ${
+              checked && !disabled
+                ? `background: ` + themeValues.secondaryColor + `;`
+                : ""
+            }
+         `}
+          tabIndex={tabIndex}
+          dataQa={`${name}-option-${index}`}
+        />
+      </Box>
     );
   }
 );

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

@@ -22,16 +22,13 @@ const SearchBox = ({
           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;
-            }
-          `}
+              height: 2.875rem;
+              border: 0; 
+              border-radius: 0;
+              padding: 0.45rem;
+              font-size: 0.875rem;
+              border-bottom: 1px solid ${GHOST_GREY};
+           `}
         />
       )}
     </Box>

package/src/components/molecules/multiple-select-filter/index.d.ts

@@ -10,9 +10,7 @@ export interface MultipleSelectFilterProps {
   actions: FieldActions;
   autocompleteValue?: boolean;
   btnContentOverride?: JSX.Element;
-  btnExtraStyles?: string;
   disabled: boolean;
-  dropdownExtraStyles?: string;
   extraStyles?: string;
   fields: {
     searchTerm: Field;
@@ -26,6 +24,8 @@ export interface MultipleSelectFilterProps {
   options: SearchableSelectOption[];
   placeholder?: string;
   searchable?: boolean;
+  selectedOptions: SearchableSelectOption[];
+  setSelectedOptions: (options: SearchableSelectOption[]) => void;
   themeValues?: any[];
   truncateBtnTextWidth?: string;
 }

package/src/components/atoms/icons/CheckboxCheckmarkIcon.js

@@ -1,45 +0,0 @@
-import React from "react";
-
-const CheckboxCheckmarkIcon = ({
-  width = "18",
-  height = "18",
-  color = "#FEFEFE",
-  ...props
-}) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox={`0 0 ${width} ${height}`}
-    fill="none"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z"
-      fill="#FEFEFE"
-    />
-    <mask
-      id="mask0_3361_1486"
-      style={{ maskType: "luminance" }}
-      maskUnits="userSpaceOnUse"
-      x="4"
-      y="5"
-      width="11"
-      height="9"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M13.7503 5.35354C13.555 5.15828 13.2385 5.15828 13.0432 5.35354L7.52373 10.873L5.52808 8.87735C5.33282 8.68209 5.01624 8.68209 4.82097 8.87735L4.35348 9.34484C4.15822 9.54011 4.15822 9.85669 4.35348 10.052L6.70268 12.4012L7.17018 12.8687C7.36544 13.0639 7.68203 13.0639 7.87729 12.8687L8.34478 12.4012L14.2178 6.52814C14.4131 6.33288 14.4131 6.0163 14.2178 5.82104L13.7503 5.35354Z"
-        fill="white"
-      />
-    </mask>
-    <g mask="url(#mask0_3361_1486)">
-      <rect width={width} height={height} fill={color} />
-    </g>
-  </svg>
-);
-
-export default CheckboxCheckmarkIcon;

package/src/components/atoms/icons/PaymentStatusIcon.d.ts

@@ -1 +0,0 @@
-export const PaymentStatusIcon: JSX.Element;

package/src/components/atoms/icons/PaymentStatusIcon.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { CHARADE_GREY } from "../../../constants/colors";
-
-const PaymentStatusIcon = ({
-  width = "20",
-  height = "21",
-  color = CHARADE_GREY,
-  ...props
-}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.875 4.375C10.875 3.89175 11.2668 3.5 11.75 3.5H16.125C16.6082 3.5 17 3.89175 17 4.375V8.75C17 9.23325 16.6082 9.625 16.125 9.625H15.25V15.75C15.25 16.7165 14.4665 17.5 13.5 17.5H4.75C3.7835 17.5 3 16.7165 3 15.75V7C3 6.0335 3.7835 5.25 4.75 5.25H10.875V4.375ZM10.875 8.75V6.5625H4.75C4.50838 6.5625 4.3125 6.75838 4.3125 7V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H13.5C13.7416 16.1875 13.9375 15.9916 13.9375 15.75V9.625H11.75C11.2668 9.625 10.875 9.23325 10.875 8.75ZM13.9375 7.875C14.6624 7.875 15.25 7.28737 15.25 6.5625C15.25 5.83763 14.6624 5.25 13.9375 5.25C13.2126 5.25 12.625 5.83763 12.625 6.5625C12.625 7.28737 13.2126 7.875 13.9375 7.875Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-export default PaymentStatusIcon;

package/src/components/atoms/icons/PersonIcon.d.ts

@@ -1 +0,0 @@
-export const PersonIcon: JSX.Element;

package/src/components/atoms/icons/PersonIcon.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { CHARADE_GREY } from "../../../constants/colors";
-
-const PersonIcon = ({
-  width = "20",
-  height = "21",
-  color = CHARADE_GREY,
-  ...props
-}) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      fill="none"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M15.25 4.8125H4.75C4.50838 4.8125 4.3125 5.00838 4.3125 5.25V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H5.625V14.7778C5.625 12.8985 7.02411 11.375 8.75 11.375H11.25C12.9759 11.375 14.375 12.8985 14.375 14.7778V16.1875H15.25C15.4916 16.1875 15.6875 15.9916 15.6875 15.75V5.25C15.6875 5.00838 15.4916 4.8125 15.25 4.8125ZM4.75 17.5H5.625H14.375H15.25C16.2165 17.5 17 16.7165 17 15.75V5.25C17 4.2835 16.2165 3.5 15.25 3.5H4.75C3.7835 3.5 3 4.2835 3 5.25V15.75C3 16.7165 3.7835 17.5 4.75 17.5ZM10 10.5C11.2081 10.5 12.1875 9.52062 12.1875 8.3125C12.1875 7.10438 11.2081 6.125 10 6.125C8.79188 6.125 7.8125 7.10438 7.8125 8.3125C7.8125 9.52062 8.79188 10.5 10 10.5Z"
-        fill={color}
-      />
-    </svg>
-  );
-};
-export default PersonIcon;