@thecb/components 7.7.3-beta.3 → 7.7.3-beta.5

package/package.json

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

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

@@ -1,6 +1,11 @@
 import React from "react";
 
-const WarningIconXS = () => (
+const WarningIconXS = ({
+  color = "#B34A00",
+  title,
+  titleID = "warning-icon-title",
+  iconIndex = 0
+}) => (
   <svg
     width="16px"
     height="13px"
@@ -8,47 +13,45 @@ const WarningIconXS = () => (
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
-    aria-labelledby="#warning-restricted-item"
+    aria-labelledby={title && `#${titleID}-${iconIndex}`}
     role="img"
   >
-    <title id="warning-restricted-item">
-      Warning: restricted items cannot be selected
-    </title>
+    {title && <title id={`${titleID}-${iconIndex}`}>{title}</title>}
     <defs>
       <path
         d="M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z"
-        id="WarningIconXs-path-1"
+        id={`WarningIconXs-path-1-${iconIndex}`}
       ></path>
     </defs>
     <g
-      id="WarningIconXs-SRV-2647---Workflow-$0-Balance"
+      id={`WarningIconXs-Group-1-${iconIndex}`}
       stroke="none"
       strokeWidth="1"
       fill="none"
       fillRule="evenodd"
     >
       <g
-        id="WarningIconXs-11---Search-Results----Checked--Copy-6"
+        id={`WarningIconXs-Group-2-${iconIndex}`}
         transform="translate(-135.000000, -483.000000)"
       >
         <g
-          id="WarningIconXs-Group"
+          id={`WarningIconXs-Group-3-${iconIndex}`}
           transform="translate(133.000000, 479.000000)"
         >
-          <mask id="WarningIconXs-mask-2" fill="white">
-            <use xlinkHref="#WarningIconXs-path-1"></use>
+          <mask id={`WarningIconXs-mask-2-${iconIndex}`} fill="white">
+            <use xlinkHref={`#WarningIconXs-path-1-${iconIndex}`}></use>
           </mask>
           <use
-            id="WarningIconXs-Mask"
-            fill="#B34A00"
+            id={`WarningIconXs-Mask-${iconIndex}`}
+            fill={color}
             fillRule="nonzero"
-            xlinkHref="#WarningIconXs-path-1"
+            xlinkHref={`#WarningIconXs-path-1-${iconIndex}`}
           ></use>
           <polygon
-            id="WarningIconXs-Path"
-            fill="#B34A00"
+            id={`WarningIconXs-Path-${iconIndex}`}
+            fill={color}
             fillRule="nonzero"
-            mask="url(#WarningIconXs-mask-2)"
+            mask={`url(#WarningIconXs-mask-2-${iconIndex})`}
             points="-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
           ></polygon>
         </g>

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

@@ -8,9 +8,9 @@ import { useOutsideClick } from "../../../util";
 import { noop } from "../../../util/general";
 import { fallbackValues } from "./Popover.theme";
 
-const arrowBorder = (direction, width = "8px") => {
+const arrowBorder = (borderColor, direction, width = "8px") => {
   const angle = `${width} solid transparent`;
-  const straight = `${width} solid rgba(255, 255, 255, 0.85)`;
+  const straight = `${width} solid ${borderColor}`;
   if (direction == "down") {
     return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
   } else if (direction == "up") {
@@ -40,7 +40,10 @@ const Popover = ({
   arrowPosition, // { top: string, right: string, bottom: string, left: string }
   arrowDirection = "down",
   transform = "none",
-  buttonExtraStyles
+  buttonExtraStyles,
+  backgroundColor = "white",
+  borderColor = "rgba(255, 255, 255, 0.85)",
+  popoverExtraStyles
 }) => {
   const { hoverColor, activeColor, popoverTriggerColor } = themeValues;
   const { top = "-110px", right = "auto", bottom = "auto", left = "-225px" } =
@@ -110,7 +113,7 @@ const Popover = ({
         )}
       </ButtonWithAction>
       <Box
-        background="white"
+        background={backgroundColor}
         borderRadius="4px"
         boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
         id={`Disclosed${popoverID}`}
@@ -128,6 +131,7 @@ const Popover = ({
           left: ${left};
           height: ${height};
           transform: ${transform};
+          ${popoverExtraStyles};
           `}
       >
         <Paragraph>{content}</Paragraph>
@@ -138,7 +142,7 @@ const Popover = ({
             content: "";
             width: 0;
             height: 0;
-            ${arrowBorder(arrowDirection, "8px")};
+            ${arrowBorder(borderColor, arrowDirection, "8px")};
             filter: drop-shadow(2px 8px 14px black);
             bottom: ${arrowBottom};
             right: ${arrowRight};

package/src/components/molecules/popover/index.d.ts

@@ -23,6 +23,9 @@ export interface PopoverProps {
   arrowDirection?: "left" | "right" | "top" | "bottom";
   transform?: string;
   disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popoverExtraStyles?: string;
 }
 
 export const Popover: React.FC<Expand<PopoverProps> &