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

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -14,6 +14,7 @@ import Stack from "../layouts/Stack";
 import CardImage from "./CardImage.styled";
 import CardText from "./CardText";
 import CardHeader from "./CardHeader";
+import { noop } from "../../../util/general";
 
 const Card = ({
   borderRadius = "4px",
@@ -26,8 +27,12 @@ const Card = ({
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
+  onQuitClick = noop,
   padding = "24px",
+  showQuitLink = false,
   text,
+  textAs = "p",
+  titleAs = "h2",
   titleText,
   titleVariant = "small",
   themeValues,
@@ -90,9 +95,13 @@ const Card = ({
             <Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
               {text && (
                 <CardText
+                  onQuitClick={onQuitClick}
                   padding={padding}
+                  showQuitLink={showQuitLink}
+                  titleAs={titleAs}
                   titleText={titleText}
                   text={text}
+                  textAs={textAs}
                   titleVariant={titleVariant}
                 />
               )}

package/src/components/atoms/card/CardText.js

@@ -10,10 +10,16 @@ import Cover from "../layouts/Cover";
 import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
+import IconQuitLarge from "../../atoms/icons/IconQuitLarge";
+import { Cluster } from "../layouts";
 
 export const CardText = ({
+  showQuitLink,
+  onQuitClick,
+  titleAs,
   padding,
   text,
+  textAs = "p",
   titleText,
   titleVariant = "small",
   themeValues
@@ -22,17 +28,34 @@ export const CardText = ({
     <Box padding={padding}>
       <Cover>
         <Stack>
-          {titleText && (
-            <Title
-              as="p"
-              variant={titleVariant}
-              color={themeValues.titleColor}
-              weight={themeValues.titleWeight}
-            >
-              {titleText}
-            </Title>
-          )}
-          <Paragraph color={themeValues.textColor}>{text}</Paragraph>
+          <Cluster justify="space-between" align="center" overflow={true}>
+            {titleText && (
+              <Title
+                as={titleAs}
+                variant={titleVariant}
+                color={themeValues.titleColor}
+                weight={themeValues.titleWeight}
+              >
+                {titleText}
+              </Title>
+            )}
+            {showQuitLink && (
+              <Box
+                padding="0"
+                onClick={onQuitClick}
+                onKeyDown={e => e.key === "Enter" && onQuitClick()}
+                role="button"
+                tabIndex={0}
+                aria-label={`Close Card: ${titleText}`}
+                extraStyles="cursor: pointer;"
+              >
+                <IconQuitLarge />
+              </Box>
+            )}
+          </Cluster>
+          <Paragraph as={textAs} color={themeValues.textColor}>
+            {text}
+          </Paragraph>
         </Stack>
       </Cover>
     </Box>

package/src/components/atoms/card/index.d.ts

@@ -2,8 +2,10 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -27,6 +29,10 @@ export interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 export const Card: React.FC<Expand<CardProps> &

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

@@ -106,6 +106,8 @@ const Checkbox = forwardRef(
       labelledById,
       dataQa = null,
       checkboxExtraStyles,
+      hasIconOverride = false,
+      icon: Icon,
       ...rest
     },
     ref
@@ -164,14 +166,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/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 = "14",
+  height = "15",
+  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="M12.25 1.8125H1.75C1.50838 1.8125 1.3125 2.00838 1.3125 2.25V12.75C1.3125 12.9916 1.50838 13.1875 1.75 13.1875H2.625V11.7778C2.625 9.89848 4.02411 8.375 5.75 8.375H8.25C9.97589 8.375 11.375 9.89848 11.375 11.7778V13.1875H12.25C12.4916 13.1875 12.6875 12.9916 12.6875 12.75V2.25C12.6875 2.00838 12.4916 1.8125 12.25 1.8125ZM1.75 14.5H2.625H11.375H12.25C13.2165 14.5 14 13.7165 14 12.75V2.25C14 1.2835 13.2165 0.5 12.25 0.5H1.75C0.783502 0.5 0 1.2835 0 2.25V12.75C0 13.7165 0.783502 14.5 1.75 14.5ZM7 7.5C8.20812 7.5 9.1875 6.52062 9.1875 5.3125C9.1875 4.10438 8.20812 3.125 7 3.125C5.79188 3.125 4.8125 4.10438 4.8125 5.3125C4.8125 6.52062 5.79188 7.5 7 7.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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { fallbackValues } from "./MultipleSelectFilter.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { Box } from "../../atoms/layouts";
-import { GHOST_GREY, WHITE } from "../../../constants/colors";
+import { GHOST_GREY, WHITE, CHARADE_GREY } from "../../../constants/colors";
 import { noop } from "../../../util/general";
 import { FilterContainer } from "./MultipleSelectFilter.styled";
 import ActionLinkButton from "./__private__/ActionLinkButton";
@@ -10,12 +10,15 @@ import FilterButton from "./__private__/FilterButton";
 import FilterDropdown from "./__private__/FilterDropdown";
 import SearchBox from "./__private__/SearchBox";
 import FilterableList from "./__private__/FilterableList";
+import useOutsideClickHook from "../../../hooks/use-outside-click";
 
 const MultipleSelectFilter = ({
   actions,
   autocompleteValue,
   btnContentOverride,
+  btnExtraStyles,
   disabled,
+  dropdownExtraStyles,
   extraStyles,
   fields,
   filterLabel,
@@ -28,22 +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 containerRef = useRef(null);
+  const handleOnClose = () => {
+    if (openedRef.current) {
+      setOpened(false);
+      actions.fields.searchTerm.set("");
+    }
+  };
+  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);
@@ -71,27 +81,11 @@ const MultipleSelectFilter = ({
           filterButtonRef.current &&
           filterButtonRef.current.contains(event.target))
       ) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
+        handleOnClose();
       }
     };
-    const handleClickOutside = event => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target) &&
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target)
-      ) {
-        setOpened(false);
-        actions.fields.searchTerm.set("");
-        onApply(selectedOptions);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.addEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, []);
@@ -113,7 +107,7 @@ const MultipleSelectFilter = ({
             ? themeValues.secondaryColor
             : WHITE
         }
-        contentColor={!opened && selectedOptions?.length ? WHITE : "#292A33"}
+        contentColor={!opened && selectedOptions?.length ? WHITE : CHARADE_GREY}
         name={name}
         filterDropdownID={filterDropdownID}
         hasIcon={hasIcon}
@@ -121,12 +115,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}
@@ -137,7 +134,7 @@ const MultipleSelectFilter = ({
           disabled={disabled}
         ></SearchBox>
         <FilterableList
-          id={checkboxListID}
+          id={listGroupID}
           options={options}
           appliedOptions={appliedOptions}
           themeValues={themeValues}
@@ -159,23 +156,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;

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

@@ -18,10 +18,18 @@ const FilterButton = forwardRef(
       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}
@@ -32,6 +40,8 @@ const FilterButton = forwardRef(
         aria-controls={filterDropdownID}
         backgroundColor={backgroundColor}
         dataQa={`${name}-filter-button`}
+        extraStyles={extraStyles}
+        aria-label={`${filterLabel} Filter: ${btnTextFilterDescription} ${btnTextItemsDescription}`}
         contentOverride
       >
         {btnContentOverride ? (
@@ -62,16 +72,10 @@ 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`
-                  : ""}
+                {btnTextItemsDescription}
               </Text>
             </Center>
             <DropdownIconV2 color={contentColor} />

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

@@ -1,23 +1,27 @@
 import React, { forwardRef } from "react";
 import { FilterDropdownContainer } from "../MultipleSelectFilter.styled";
 
-const FilterDropdown = forwardRef(({ id, ariaOwns, opened, children }, ref) => {
-  return (
-    <>
-      {opened && (
-        <FilterDropdownContainer
-          ref={ref}
-          id={id}
-          role="combobox"
-          aria-expanded={opened}
-          aria-haspopup="listbox"
-          aria-owns={ariaOwns}
-        >
-          {children}
-        </FilterDropdownContainer>
-      )}
-    </>
-  );
-});
+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;