@thecb/components 10.12.1-beta.0 → 10.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.12.1-beta.0",
+  "version": "10.12.1",
   "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/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,6 +10,7 @@ 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,
@@ -36,7 +37,12 @@ const MultipleSelectFilter = ({
   const [opened, setOpened] = useState(false);
   const [appliedOptions, setAppliedOptions] = useState([]);
 
-  const containerRef = useRef(null);
+  const handleClickOutsideContainer = () => {
+    setOpened(false);
+    actions.fields.searchTerm.set("");
+    onApply(selectedOptions);
+  };
+  const containerRef = useOutsideClickHook(() => handleClickOutsideContainer());
   const dropdownRef = useRef(null);
   const filterButtonRef = useRef(null);
   const applyFilterButtonRef = useRef(null);
@@ -76,22 +82,8 @@ const MultipleSelectFilter = ({
         onApply(selectedOptions);
       }
     };
-    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 +105,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}

package/src/hooks/use-outside-click/index.js

@@ -18,12 +18,11 @@ const useOutsideClickHook = handler => {
       if (ref.current && !ref.current.contains(e.target)) {
         handler();
       }
+    };
 
-      document.addEventListener("click", handleOutsideClick, true);
-
-      return () => {
-        document.removeEventListener("click", handleOutsideClick, true);
-      };
+    document.addEventListener("click", handleOutsideClick, true);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick, true);
     };
   }, [ref]);