@thecb/components 6.3.0-beta.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.3.0-beta.0",
+  "version": "6.3.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/display-card/DisplayCard.js

@@ -17,7 +17,7 @@ const DisplayCard = ({
   url,
   link = false,
   helpText,
-  usePopover = false,
+  hasPopover = false,
   popoverTriggerText = "",
   popoverContent = "",
   popoverExtraStyles,
@@ -34,7 +34,7 @@ const DisplayCard = ({
           >
             {title}
           </Paragraph>
-          {usePopover && (
+          {hasPopover && (
             <Popover
               triggerText={popoverTriggerText}
               content={popoverContent}
@@ -54,9 +54,7 @@ const DisplayCard = ({
             0px 3px 8px 0px rgb(202, 206, 216)"
         >
           <Cluster justify="space-between" align="center">
-            <Text variant="p" color={CHARADE_GREY}>
-              {item}
-            </Text>
+            <Text color={CHARADE_GREY}>{item}</Text>
             {link ? (
               <ButtonWithLink
                 text={buttonText}
@@ -74,11 +72,7 @@ const DisplayCard = ({
                 extraStyles={`min-width: 0;`}
               />
             ) : helpText ? (
-              <Text
-                variant="p"
-                color={STORM_GREY}
-                extraStyles={`font-style: italic;`}
-              >
+              <Text color={STORM_GREY} extraStyles={`font-style: italic;`}>
                 {helpText}
               </Text>
             ) : (

package/src/components/molecules/popover/Popover.js

@@ -4,7 +4,7 @@ import Text from "../../atoms/text";
 import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
-import { useOutsideClickHook } from "../../../util";
+import { useOutsideClick } from "../../../util";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 
@@ -12,7 +12,7 @@ const Popover = ({
   themeValues,
   triggerText = "",
   content = "",
-  useIcon = false,
+  hasIcon = false,
   icon: Icon,
   iconHelpText = "", // for screen-readers, required if using an icon for trigger
   popoverID = 0,
@@ -22,11 +22,18 @@ const Popover = ({
   minWidth = "250px",
   maxWidth = "300px",
   height = "auto",
-  position // { top: string, right: string, bottom: string, left: string }
+  position, // { top: string, right: string, bottom: string, left: string }
+  arrowPosition // { top: string, right: string, bottom: string, left: string }
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
   const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
     position ?? {};
+  const {
+    arrowTop = "auto",
+    arrowRight = "10px",
+    arrowBottom = "-8px",
+    arrowLeft = "auto"
+  } = arrowPosition ?? {};
 
   const [popoverOpen, togglePopover] = useState(false);
 
@@ -43,22 +50,18 @@ const Popover = ({
       <ButtonWithAction
         action={() => noop}
         onFocus={() => {
-          console.log("on focus") || handleTogglePopover(true);
+          handleTogglePopover(true);
         }}
         onBlur={() => {
-          console.log("on blur") || handleTogglePopover(false);
+          handleTogglePopover(false);
         }}
         onKeyDown={e => {
           if (e.keyCode === 27) {
-            console.log("on key down") || handleTogglePopover(false);
+            handleTogglePopover(false);
           }
         }}
-        onTouchStart={() =>
-          console.log("on touch start") || handleTogglePopover(true)
-        }
-        onTouchEnd={() =>
-          console.log("on touch end") || handleTogglePopover(false)
-        }
+        onTouchStart={() => handleTogglePopover(true)}
+        onTouchEnd={() => handleTogglePopover(false)}
         onMouseEnter={() => handleTogglePopover(true)}
         onMouseLeave={() => handleTogglePopover(false)}
         contentOverride
@@ -71,13 +74,15 @@ const Popover = ({
         aria-controls={`Disclosed${popoverID}`}
         ref={triggerRef}
       >
-        {useIcon && <Icon />}
-        {useIcon && (
-          <Box padding="0" srOnly>
-            <Text id={`btnPopover${popoverID}_info`}>{iconHelpText}</Text>
-          </Box>
+        {hasIcon && (
+          <>
+            <Icon />
+            <Box padding="0" srOnly>
+              <Text id={`btnPopover${popoverID}_info`}>{iconHelpText}</Text>
+            </Box>
+          </>
         )}
-        {!useIcon && (
+        {!hasIcon && (
           <Text
             color={popoverTriggerColor}
             extraStyles={`&:active { color: ${activeColor}; } &:hover { color: ${hoverColor} }; ${textExtraStyles}`}
@@ -109,7 +114,7 @@ const Popover = ({
         <Paragraph>{content}</Paragraph>
         <Box
           padding="0"
-          extraStyles={`position: absolute; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: -8px; right: 10px;`}
+          extraStyles={`position: absolute; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(255, 255, 255, 0.85); filter: drop-shadow(2px 8px 14px black); bottom: ${arrowBottom}; right: ${arrowRight}; top: ${arrowTop}; left: ${arrowLeft};`}
         />
       </Box>
     </Box>

package/src/util/index.js

@@ -2,6 +2,6 @@ import * as formats from "./formats";
 import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
-import useOutsideClickHook from "./useOutsideClickHook";
+import useOutsideClick from "./useOutsideClick";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClickHook };
+export { formats, general, theme, useFocusInvalidInput, useOutsideClick };

package/src/util/{useOutsideClickHook.js → useOutsideClick.js}

@@ -1,12 +1,12 @@
 import { useRef, useEffect } from "react";
 
 /* 
-  Hook that assigns an onPointerUp event listener to the main document element
+  Hook that assigns a click event listener to the main document element
   Returns a ref to attach to another element (like an icon/button that triggers a popover)
-  If a pointerup event gets captured by the document and the assigned element isn't the target
+  If a click event gets captured by the document and the assigned element isn't the target
   hook will run whatever handler is passed (eg a function that closes a popover)
 
-  See tooltip component for implementation
+  See popover component for implementation
 
 */
 
@@ -16,9 +16,6 @@ const useOutsideClickHook = handler => {
   useEffect(() => {
     const handleOutsideClick = e => {
       if (ref.current && !ref.current.contains(e.target)) {
-        console.log("in outside click handler");
-        console.log("ref", ref);
-        console.log("target", e.target);
         handler();
       }