@thecb/components 10.12.1 → 10.12.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.12.1",
+  "version": "10.12.2-beta.1",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/checkbox/Checkbox.js

@@ -16,6 +16,7 @@ const CheckboxLabelContainer = styled.label`
   display: flex;
   align-items: center;
   column-gap: 1rem;
+  cursor: pointer;
 `;
 
 const CheckboxIcon = styled.svg`
@@ -106,6 +107,8 @@ const Checkbox = forwardRef(
       labelledById,
       dataQa = null,
       checkboxExtraStyles,
+      hasIconOverride = false,
+      icon: Icon,
       ...rest
     },
     ref
@@ -132,7 +135,13 @@ const Checkbox = forwardRef(
         onKeyDown={e => handleClick(e, onChange)}
         hiddenStyles={hidden}
         background={themeValues.backgroundColor}
-        extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
+        extraStyles={`
+          :focus {
+            outline: 0;
+          }
+          ${extraStyles}; 
+          margin: ${checkboxMargin};
+        `}
         {...rest}
       >
         <CheckboxLabelContainer data-qa={dataQa}>
@@ -164,14 +173,18 @@ const Checkbox = forwardRef(
               focusedStyles={themeValues.focusedStyles}
               checkboxExtraStyles={checkboxExtraStyles}
             >
-              <CheckboxIcon
-                viewBox="0 0 24 24"
-                disabled={disabled}
-                disabledCheckColor={themeValues.disabledCheckColor}
-                checkColor={themeValues.checkColor}
-              >
-                <polyline points="20 6 9 17 4 12" />
-              </CheckboxIcon>
+              {hasIconOverride ? (
+                <Icon />
+              ) : (
+                <CheckboxIcon
+                  viewBox="0 0 24 24"
+                  disabled={disabled}
+                  disabledCheckColor={themeValues.disabledCheckColor}
+                  checkColor={themeValues.checkColor}
+                >
+                  <polyline points="20 6 9 17 4 12" />
+                </CheckboxIcon>
+              )}
             </StyledCheckbox>
           </CheckboxContainer>
           {title && (

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { text, select, boolean } from "@storybook/addon-knobs";
 import Checkbox from "./Checkbox";
 import page from "../../../../.storybook/page";
@@ -10,18 +10,22 @@ const variants = {
 const defaultValue = "default";
 const groupId = "props";
 
-export const checkbox = () => (
-  <Checkbox
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
-    title={text("title", "Checkbox", "props")}
-    name={text("name", "Checkbox", "props")}
-    checked={boolean("checked", false, "props")}
-    error={boolean("error", false, "props")}
-    disabled={boolean("disabled", false, "props")}
-    focused={boolean("focused", false, "props")}
-    labelledById={text("labelledById", undefined, "props")}
-  />
-);
+export const checkbox = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <Checkbox
+      variant={select(variantsLabel, variants, defaultValue, groupId)}
+      title={text("title", "Checkbox", "props")}
+      name={text("name", "Checkbox", "props")}
+      checked={checked}
+      error={boolean("error", false, "props")}
+      disabled={boolean("disabled", false, "props")}
+      focused={boolean("focused", false, "props")}
+      labelledById={text("labelledById", undefined, "props")}
+      onChange={() => setChecked(!checked)}
+    />
+  );
+};
 
 const story = page({
   title: "Components|Atoms/Checkbox",

package/src/components/atoms/checkbox/Checkbox.theme.js

@@ -6,7 +6,8 @@ import {
   MATISSE_BLUE,
   RED,
   CHARADE_GREY,
-  STORM_GREY
+  STORM_GREY,
+  ROYAL_BLUE
 } from "../../../constants/colors";
 
 const backgroundColor = { default: `${TRANSPARENT}` };
@@ -18,7 +19,10 @@ const disabledCheckColor = { default: `${WHITE};` };
 const checkColor = { default: `${WHITE};` };
 const errorStyles = { default: `border: 1px solid ${RED};` };
 const focusedStyles = {
-  default: `box-shadow: 0 0 5px 0 ${MATISSE_BLUE};`
+  default: `
+    outline: 3px solid ${ROYAL_BLUE}; 
+    outline-offset: 3px;
+  `
 };
 const disabledCheckedStyles = {
   default: `

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

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

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

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

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

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

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

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

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

@@ -52,7 +52,9 @@ import {
   DisabledPaymentMethodsAddIcon,
   ReversalNeededIcon,
   OverageIcon,
-  ShortageIcon
+  ShortageIcon,
+  PersonIcon,
+  PaymentStatusIcon
 } from "./index";
 
 const story = page({
@@ -114,3 +116,5 @@ export const successfulIcon = () => <SuccessfulIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
 export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
 export const voidedIcon = () => <VoidedIcon />;
+export const personIcon = () => <PersonIcon />;
+export const paymentStatusIcon = () => <PaymentStatusIcon />;

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

@@ -99,6 +99,8 @@ import OverageIcon from "./OverageIcon";
 import ShortageIcon from "./ShortageIcon";
 import NoResultsIcon from "./NoResultsIcon";
 import AgencyIcon from "./AgencyIcon";
+import PersonIcon from "./PersonIcon";
+import PaymentStatusIcon from "./PaymentStatusIcon";
 
 export {
   AccountsIcon,
@@ -201,5 +203,7 @@ export {
   OverageIcon,
   ShortageIcon,
   NoResultsIcon,
-  AgencyIcon
+  AgencyIcon,
+  PersonIcon,
+  PaymentStatusIcon
 };

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.js

@@ -16,7 +16,9 @@ const MultipleSelectFilter = ({
   actions,
   autocompleteValue,
   btnContentOverride,
+  btnExtraStyles,
   disabled,
+  dropdownExtraStyles,
   extraStyles,
   fields,
   filterLabel,
@@ -29,27 +31,29 @@ const MultipleSelectFilter = ({
   options,
   placeholder = "Search",
   searchable = true,
-  selectedOptions,
-  setSelectedOptions,
   themeValues,
   truncateBtnTextWidth = "15rem"
 }) => {
   const [opened, setOpened] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState([]);
   const [appliedOptions, setAppliedOptions] = useState([]);
+  const openedRef = useRef(opened);
 
-  const handleClickOutsideContainer = () => {
-    setOpened(false);
-    actions.fields.searchTerm.set("");
-    onApply(selectedOptions);
+  const handleOnClose = () => {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
   };
-  const containerRef = useOutsideClickHook(() => handleClickOutsideContainer());
+  const containerRef = useOutsideClickHook(() => handleOnClose());
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
   const filterDropdownID = `${name}-filter-dropdown`;
-  const checkboxListID = `${name}-checkbox-list`;
+  const listGroupID = `${name}-list-group`;
 
   useEffect(() => {
+    openedRef.current = opened;
     if (!opened) {
       onApply(selectedOptions);
       setAppliedOptions(selectedOptions);
@@ -77,9 +81,7 @@ const MultipleSelectFilter = ({
           filterButtonRef.current &&
           filterButtonRef.current.contains(event.target))
       ) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
+        handleOnClose();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
@@ -98,14 +100,20 @@ const MultipleSelectFilter = ({
           setOpened(!opened);
         }}
         opened={opened}
+        backgroundHoverColor={
+          appliedOptions?.length
+            ? themeValues.secondaryHoverColor
+            : themeValues.primaryHoverColor
+        }
         backgroundColor={
-          opened
-            ? themeValues.primaryColor
-            : selectedOptions?.length
+          appliedOptions?.length
             ? themeValues.secondaryColor
-            : WHITE
+            : themeValues.primaryColor
+        }
+        textColor={appliedOptions?.length ? WHITE : CHARADE_GREY}
+        textHoverColor={
+          opened && !appliedOptions?.length ? CHARADE_GREY : WHITE
         }
-        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
         name={name}
         filterDropdownID={filterDropdownID}
         hasIcon={hasIcon}
@@ -113,12 +121,15 @@ const MultipleSelectFilter = ({
         truncateBtnTextWidth={truncateBtnTextWidth}
         filterLabel={filterLabel}
         selectedOptions={selectedOptions}
+        extraStyles={btnExtraStyles}
       ></FilterButton>
       <FilterDropdown
         id={filterDropdownID}
         ref={dropdownRef}
-        ariaOwns={checkboxListID}
+        ariaOwns={listGroupID}
+        ariaControls={listGroupID}
         opened={opened}
+        extraStyles={dropdownExtraStyles}
       >
         <SearchBox
           showSearchBox={searchable && options?.length > 8}
@@ -129,7 +140,7 @@ const MultipleSelectFilter = ({
           disabled={disabled}
         ></SearchBox>
         <FilterableList
-          id={checkboxListID}
+          id={listGroupID}
           options={options}
           appliedOptions={appliedOptions}
           themeValues={themeValues}
@@ -151,23 +162,20 @@ const MultipleSelectFilter = ({
         >
           <ActionLinkButton
             action={() => {
-              setOpened(false);
               setSelectedOptions([]);
-              actions.fields.searchTerm.set("");
+              handleOnClose();
               onClear();
             }}
             text="Clear"
             dataQa={`${name}-clear-filters`}
+            ariaLabel={"Clear all filters"}
           ></ActionLinkButton>
           <ActionLinkButton
             ref={applyFilterButtonRef}
-            action={() => {
-              setOpened(false);
-              actions.fields.searchTerm.set("");
-              onApply(selectedOptions);
-            }}
+            action={() => handleOnClose()}
             text="Apply"
             dataQa={`${name}-apply-filters`}
+            ariaLabel={"Apply all filters"}
           ></ActionLinkButton>
         </Box>
       </FilterDropdown>

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.stories.js

@@ -41,8 +41,6 @@ const items = [
 ];
 
 const FormWrapper = props => {
-  const [selectedItems, setSelectedItems] = useState([]);
-
   return (
     <MultipleSelectFilter
       autocompleteValue={props.autocompleteValue}
@@ -55,8 +53,8 @@ const FormWrapper = props => {
       placeholder={"Find an agency"}
       fields={props.fields}
       actions={props.actions}
-      selectedOptions={selectedItems}
-      setSelectedOptions={setSelectedItems}
+      btnExtraStyles={props.btnExtraStyles}
+      dropdownExtraStyles={props.dropdownExtraStyles}
     />
   );
 };

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.styled.js

@@ -5,9 +5,9 @@ import ButtonWithAction from "../../atoms/button-with-action";
 
 const StyledFilterContainer = styled(Box)`
   position: relative;
+  overflow: visible;
   box-sizing: border-box;
   padding: 0;
-  ${({ extraStyles }) => extraStyles}
 `;
 
 export const FilterContainer = forwardRef((props, ref) => (
@@ -18,7 +18,7 @@ const StyledFilterDropdown = styled(Box)`
   position: absolute;
   top: calc(100% + 0.5rem);
   left: 0;
-  width: 100%;
+  width: 18.4rem;
   background-color: white;
   z-index: 1000;
   border-radius: 0.25rem;
@@ -39,15 +39,23 @@ const FilterButton = styled(ButtonWithAction)`
   padding: 0.5rem;
   border-radius: 0.25rem;
   box-shadow: 0px 1px 2px 0px rgba(41, 42, 51, 0.1);
-  ${({ textColor }) => `
-    color: ${textColor};
+  ${({ opened, textColor, textHoverColor }) => `
+    color: ${opened ? textHoverColor : textColor};
+    :hover,
+    :active,
+    :focus {
+      color: ${textHoverColor};
+      > * {
+        color: ${textHoverColor};
+      }
+    }
   `}
-  ${({ backgroundColor }) => `
-    background-color: ${backgroundColor};
+  ${({ opened, backgroundColor, backgroundHoverColor }) => `
+    background-color: ${opened ? backgroundHoverColor : backgroundColor};  
     :hover,
     :active,
     :focus {
-      background-color: ${backgroundColor};
+      background-color: ${backgroundHoverColor};
     }
   `}
 `;

package/src/components/molecules/multiple-select-filter/MultipleSelectFilter.theme.js

@@ -1,9 +1,13 @@
-import { INFO_BLUE, MATISSE_BLUE } from "../../../constants/colors";
+import { INFO_BLUE, MATISSE_BLUE, WHITE } from "../../../constants/colors";
 
-const primaryColor = INFO_BLUE;
+const primaryColor = WHITE;
+const primaryHoverColor = INFO_BLUE;
 const secondaryColor = MATISSE_BLUE;
+const secondaryHoverColor = "#115D7E";
 
 export const fallbackValues = {
   primaryColor,
-  secondaryColor
+  primaryHoverColor,
+  secondaryColor,
+  secondaryHoverColor
 };

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

@@ -2,23 +2,26 @@ import React, { forwardRef } from "react";
 import { ButtonWithAction } from "../../../atoms";
 import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
 
-const ActionLinkButton = forwardRef(({ action, text, dataQa }, ref) => {
-  return (
-    <ButtonWithAction
-      ref={ref}
-      action={action}
-      variant="tertiary"
-      extraStyles={`
+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}
-    ></ButtonWithAction>
-  );
-});
+        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

@@ -11,17 +11,27 @@ const FilterButton = forwardRef(
       action = noop,
       opened,
       backgroundColor,
-      contentColor,
+      backgroundHoverColor,
+      textColor,
+      textHoverColor,
       name,
       filterDropdownID,
       hasIcon = false,
       icon: Icon,
       truncateBtnTextWidth,
       filterLabel,
-      selectedOptions
+      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}
@@ -31,7 +41,13 @@ const FilterButton = forwardRef(
         aria-expanded={opened}
         aria-controls={filterDropdownID}
         backgroundColor={backgroundColor}
+        backgroundHoverColor={backgroundHoverColor}
+        textColor={textColor}
+        textHoverColor={textHoverColor}
+        opened={opened}
         dataQa={`${name}-filter-button`}
+        extraStyles={extraStyles}
+        aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
         contentOverride
       >
         {btnContentOverride ? (
@@ -42,7 +58,7 @@ const FilterButton = forwardRef(
             style={{ display: "flex", flexDirection: "row" }}
             intrinsic
           >
-            {hasIcon && <Icon color={contentColor} />}
+            {hasIcon && <Icon color={opened ? textHoverColor : textColor} />}
             <Center
               as="span"
               style={{
@@ -54,7 +70,7 @@ const FilterButton = forwardRef(
             >
               <Text
                 variant="pS"
-                color={contentColor}
+                color={opened ? textHoverColor : textColor}
                 extraStyles={`
                   white-space: nowrap;
                   overflow: hidden;
@@ -62,19 +78,13 @@ const FilterButton = forwardRef(
                   ${truncateBtnTextWidth && `max-width:` + truncateBtnTextWidth}
                 `}
               >
-                {selectedOptions?.length
-                  ? `${filterLabel ? filterLabel + ": " : ""}${
-                      selectedOptions[0].name
-                    }`
-                  : `${filterLabel ? filterLabel : ""}`}
+                {btnTextFilterDescription}
               </Text>
-              <Text color={contentColor} variant="pS">
-                {selectedOptions?.length && selectedOptions?.length > 1
-                  ? `, +${selectedOptions?.length - 1} More`
-                  : ""}
+              <Text color={opened ? textHoverColor : textColor} variant="pS">
+                {btnTextItemsDescription}
               </Text>
             </Center>
-            <DropdownIconV2 color={contentColor} />
+            <DropdownIconV2 color={opened ? textHoverColor : textColor} />
           </Center>
         )}
       </StyledFilterButton>