@thecb/components 3.7.0-beta.1 → 3.7.0-beta.2

package/dist/index.cjs.js

@@ -13099,7 +13099,8 @@ var SettingsIconSmall = function SettingsIconSmall(_ref) {
 var SettingsIconSmall$1 = themeComponent(SettingsIconSmall, "Icons", fallbackValues$2, "primary");
 
 var ChevronIcon = function ChevronIcon(_ref) {
-  var themeValues = _ref.themeValues;
+  var themeValues = _ref.themeValues,
+      iconFill = _ref.iconFill;
   return /*#__PURE__*/React__default.createElement("svg", {
     width: "24",
     height: "24",
@@ -13120,16 +13121,16 @@ var ChevronIcon = function ChevronIcon(_ref) {
   }, /*#__PURE__*/React__default.createElement("mask", {
     id: "icon-chevron-mask-2"
   }, /*#__PURE__*/React__default.createElement("use", {
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     xlinkHref: "#icon-chevron-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
-    fill: themeValues.singleIconColor,
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor,
     id: "icon-chevron-Fill-2",
     xlinkHref: "#icon-chevron-path-1"
   }), /*#__PURE__*/React__default.createElement("g", {
     id: "Colors/Blue-Dark",
     mask: "url(#icon-chevron-mask-2)",
-    fill: themeValues.singleIconColor
+    fill: iconFill !== null && iconFill !== void 0 ? iconFill : themeValues.singleIconColor
   }, /*#__PURE__*/React__default.createElement("rect", {
     id: "icon-chevron-rect",
     width: "24",
@@ -36458,7 +36459,8 @@ var PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
 
 var PrevNextButton = function PrevNextButton(_ref) {
   var action = _ref.action,
-      type = _ref.type;
+      type = _ref.type,
+      arrowColor = _ref.arrowColor;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0 10px 0",
     minHeight: "40px",
@@ -36472,7 +36474,8 @@ var PrevNextButton = function PrevNextButton(_ref) {
     padding: "0",
     extraStyles: type === "prev" && "transform: scaleX(-1)"
   }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, {
-    variant: "darkMode"
+    variant: "darkMode",
+    iconFill: arrowColor
   }))));
 };
 
@@ -36527,7 +36530,9 @@ var Pagination = function Pagination(_ref2) {
       pageNext = _ref2.pageNext,
       setCurrentPage = _ref2.setCurrentPage,
       currentPage = _ref2.currentPage,
-      pageCount = _ref2.pageCount;
+      pageCount = _ref2.pageCount,
+      numberColor = _ref2.numberColor,
+      arrowColor = _ref2.arrowColor;
   return /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     childGap: "10px"
@@ -36537,7 +36542,7 @@ var Pagination = function Pagination(_ref2) {
   }), getPagesPanel(currentPage, pageCount).map(function (item, index) {
     return item.isButton ? /*#__PURE__*/React__default.createElement(Box, {
       padding: "0",
-      border: item.active && "1px solid ".concat(MATISSE_BLUE),
+      border: item.active && "1px solid ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE),
       borderRadius: item.active && "3px",
       extraStyles: "max-height: 40px;"
     }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
@@ -36551,7 +36556,7 @@ var Pagination = function Pagination(_ref2) {
         });
       } : noop,
       textExtraStyles: "font-size: 17px; font-weight: 900;",
-      extraStyles: "\n              min-width: 40px; min-height: 100%; padding: 0;\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n            }\n            &:hover { ".concat(item.active ? "cursor: default;" : "background-color: ".concat(ALABASTER_WHITE), " }\n            "),
+      extraStyles: "\n              min-width: 40px; min-height: 100%; padding: 0;\n              &:hover, &:focus {\n                text-decoration: none;\n                > * > span {\n                  text-decoration: none;\n                }\n              }\n              color: ".concat(numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE, "\n            }\n            &:hover { ").concat(item.active ? "cursor: default;" : "background-color: ".concat(ALABASTER_WHITE), " }\n            "),
       dataQa: index
     }, item.index)) : /*#__PURE__*/React__default.createElement(Box, {
       padding: "0 10px"
@@ -36561,11 +36566,12 @@ var Pagination = function Pagination(_ref2) {
       key: index,
       variant: "pXL",
       weight: "900",
-      color: MATISSE_BLUE
+      color: numberColor !== null && numberColor !== void 0 ? numberColor : MATISSE_BLUE
     }, "...")));
   }), currentPage < pageCount && /*#__PURE__*/React__default.createElement(PrevNextButton, {
     type: "next",
-    action: pageNext
+    action: pageNext,
+    arrowColor: arrowColor
   }));
 };
 

package/package.json

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const ChevronIcon = ({ themeValues }) => {
+const ChevronIcon = ({ themeValues, iconFill }) => {
   return (
     <svg
       width="24"
@@ -21,20 +21,20 @@ const ChevronIcon = ({ themeValues }) => {
       <g id={`icon-chevron-Icon/Chevron-Down`} fill="none" fillRule="evenodd">
         <mask id={`icon-chevron-mask-2`}>
           <use
-            fill={themeValues.singleIconColor}
+            fill={iconFill ?? themeValues.singleIconColor}
             xlinkHref={`#icon-chevron-path-1`}
           />
         </mask>
 
         <use
-          fill={themeValues.singleIconColor}
+          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={themeValues.singleIconColor}
+          fill={iconFill ?? themeValues.singleIconColor}
         >
           <rect id={`icon-chevron-rect`} width="24" height="24" />
         </g>

package/src/components/molecules/pagination/Pagination.js

@@ -9,7 +9,7 @@ import { noop } from "../../../util/general";
 const PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
 const PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
 
-const PrevNextButton = ({ action, type }) => (
+const PrevNextButton = ({ action, type, arrowColor }) => (
   <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
     <ButtonWithAction
       action={action}
@@ -24,7 +24,7 @@ const PrevNextButton = ({ action, type }) => (
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
-        <ChevronIcon variant="darkMode" />
+        <ChevronIcon variant="darkMode" iconFill={arrowColor} />
       </Box>
     </ButtonWithAction>
   </Box>
@@ -63,7 +63,9 @@ const Pagination = ({
   pageNext,
   setCurrentPage,
   currentPage,
-  pageCount
+  pageCount,
+  numberColor,
+  arrowColor
 }) => (
   <Cluster justify="center" childGap="10px">
     {currentPage > 1 && <PrevNextButton type="prev" action={pagePrevious} />}
@@ -71,7 +73,7 @@ const Pagination = ({
       item.isButton ? (
         <Box
           padding="0"
-          border={item.active && `1px solid ${MATISSE_BLUE}`}
+          border={item.active && `1px solid ${numberColor ?? MATISSE_BLUE}`}
           borderRadius={item.active && "3px"}
           extraStyles="max-height: 40px;"
         >
@@ -94,6 +96,7 @@ const Pagination = ({
                   text-decoration: none;
                 }
               }
+              color: ${numberColor ?? MATISSE_BLUE}
             }
             &:hover { ${
               item.active
@@ -109,7 +112,12 @@ const Pagination = ({
       ) : (
         <Box padding="0 10px">
           <Cluster justify="flex-end">
-            <Text key={index} variant="pXL" weight="900" color={MATISSE_BLUE}>
+            <Text
+              key={index}
+              variant="pXL"
+              weight="900"
+              color={numberColor ?? MATISSE_BLUE}
+            >
               {"..."}
             </Text>
           </Cluster>
@@ -117,7 +125,7 @@ const Pagination = ({
       )
     )}
     {currentPage < pageCount && (
-      <PrevNextButton type="next" action={pageNext} />
+      <PrevNextButton type="next" action={pageNext} arrowColor={arrowColor} />
     )}
   </Cluster>
 );