@thecb/components 10.12.1 → 10.12.2-beta.0

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

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

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

@@ -22,13 +22,16 @@ 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};
-           `}
+            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>

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

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