@thecb/components 7.13.2 → 7.13.3-beta.10

package/package.json

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

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const ChevronIconWhite = ({ themeValues, iconFill }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      style={{ display: "inline-block", verticalAlign: "text-bottom" }}
+    >
+      <defs>
+        <polygon
+          id={`icon-chevron-path-1`}
+          points="10.4099998 6 9 7.40999976 13.5799996 11.9999996 9 16.5899995 10.4099998 17.9999993 16.4099994 11.9999996"
+        />
+      </defs>
+      <g
+        id={`icon-chevron-Icon/Chevron-Down`}
+        fill="#ffffff"
+        fillRule="evenodd"
+      >
+        <mask id={`icon-chevron-mask-2`}>
+          <use
+            fill={iconFill ?? themeValues.singleIconColor}
+            xlinkHref={`#icon-chevron-path-1`}
+          />
+        </mask>
+
+        <use
+          fill={iconFill ?? themeValues.singleIconColor}
+          id={`icon-chevron-Fill-2`}
+          xlinkHref={`#icon-chevron-path-1`}
+        />
+        <g
+          id="Colors/Blue-Dark"
+          mask={`url(#icon-chevron-mask-2)`}
+          fill={iconFill ?? themeValues.singleIconColor}
+        >
+          <rect id={`icon-chevron-rect`} width="24" height="24" />
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default themeComponent(
+  ChevronIconWhite,
+  "Icons",
+  fallbackValues,
+  "secondary"
+);

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -7,6 +7,8 @@ import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { ChevronIcon } from "../../atoms/icons";
 import { noop } from "../../../util/general";
+import ChevronIconWhite from "../../atoms/icons/ChevronIconWhite";
+// import { ChevronIconWhite  } from "@thecb/components"
 
 const CollapsibleSection = ({
   isOpen,
@@ -24,7 +26,10 @@ const CollapsibleSection = ({
   stackTitleContent,
   sectionGap = "0.5rem",
   name = "",
-  index = 1
+  index = 1,
+  iconColor = "",
+  extraStyles = "",
+  CustomIcon
 }) => {
   const handleKeyDown = e => {
     if (e.keyCode === 13) {
@@ -86,7 +91,7 @@ const CollapsibleSection = ({
             hoverStyles={`cursor: pointer;`}
             tabIndex="0"
             onKeyDown={handleKeyDown}
-            extraStyles={`z-index: 25;`}
+            extraStyles={`z-index: 25;`.concat(extraStyles)}
             role="button"
             aria-expanded={isOpen.toString()}
             aria-controls={id}
@@ -94,7 +99,7 @@ const CollapsibleSection = ({
           >
             <Cluster justify="space-between" align="center">
               {customTitle ? (
-                <Box width="calc(100% - 36px)" padding="0px">
+                <Box width="calc(100% - 36px)" padding="0">
                   {title}
                 </Box>
               ) : (
@@ -111,7 +116,7 @@ const CollapsibleSection = ({
                 variants={icon}
                 extraStyles={`display: flex; align-items: center;`}
               >
-                <ChevronIcon />
+                {CustomIcon ? <CustomIcon /> : <ChevronIconWhite />}
               </Motion>
             </Cluster>
           </Box>