@thecb/components 11.0.2 → 11.0.3

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.stories.js

@@ -107,3 +107,17 @@ export const WhiteSecondary = {
   ...Primary.args,
   variant: "whiteSecondary"
 };
+
+export const GreenPrimary = {
+  args: {
+    ...Primary.args,
+    variant: "greenPrimary"
+  }
+};
+
+export const GreenSecondary = {
+  args: {
+    ...Primary.args,
+    variant: "greenSecondary"
+  }
+};

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,4 +1,5 @@
 import { colors, styleConstants } from "../../../constants";
+import { adjustHexColor } from "../../../util/general";
 
 const {
   WHITE,
@@ -7,6 +8,8 @@ const {
   PEACOCK_BLUE,
   MANATEE_GREY,
   MATISSE_BLUE,
+  HINT_GREEN,
+  SEA_GREEN,
   RASPBERRY,
   ERROR_COLOR
 } = colors;
@@ -24,8 +27,10 @@ const disabledBorderColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledColor = {
@@ -39,8 +44,10 @@ const disabledColor = {
   tertiary: MANATEE_GREY,
   danger: WHITE,
   dangerSecondary: MANATEE_GREY,
+  whitePrimary: MANATEE_GREY,
   whiteSecondary: MANATEE_GREY,
-  whitePrimary: MANATEE_GREY
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const disabledBackgroundColor = {
@@ -54,8 +61,10 @@ const disabledBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: MANATEE_GREY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const padding = {
@@ -69,8 +78,10 @@ const padding = {
   ghost: "0.65rem 0",
   danger: "0.75rem 1.5rem",
   dangerSecondary: "0.75rem 1.5rem",
+  whitePrimary: "1.125rem 0.75rem",
   whiteSecondary: "0.75rem 2rem",
-  whitePrimary: "1.125rem 0.75rem"
+  greenPrimary: "0.75rem 1.5rem",
+  greenSecondary: "0.75rem 1.5rem"
 };
 
 const color = {
@@ -84,8 +95,10 @@ const color = {
   tertiary: MATISSE_BLUE,
   danger: WHITE,
   dangerSecondary: ERROR_COLOR,
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const fontSizeVariant = {
@@ -100,7 +113,9 @@ const fontSizeVariant = {
   danger: "pS",
   dangerSecondary: "pS",
   whiteSecondary: "pS",
-  whitePrimary: "pS"
+  whitePrimary: "pS",
+  greenPrimary: "pS",
+  greenSecondary: "pS"
 };
 
 const fontWeight = {
@@ -115,7 +130,9 @@ const fontWeight = {
   danger: "600",
   dangerSecondary: "600",
   whiteSecondary: "600",
-  whitePrimary: "600"
+  whitePrimary: "600",
+  greenPrimary: "600",
+  greenSecondary: "600"
 };
 
 const height = {
@@ -129,8 +146,10 @@ const height = {
   tertiary: "3rem",
   danger: "3rem",
   dangerSecondary: "3rem",
+  whitePrimary: "auto",
   whiteSecondary: "3rem",
-  whitePrimary: "auto"
+  greenPrimary: "3rem",
+  greenSecondary: "3rem"
 };
 
 const minWidth = {
@@ -144,8 +163,10 @@ const minWidth = {
   tertiary: "130px",
   danger: "130px",
   dangerSecondary: "157px",
+  whitePrimary: "130px",
   whiteSecondary: "160px",
-  whitePrimary: "130px"
+  greenPrimary: "130px",
+  greenSecondary: "130px"
 };
 
 const textDecoration = {
@@ -159,8 +180,10 @@ const textDecoration = {
   tertiary: "none",
   danger: "none",
   dangerSecondary: "none",
+  whitePrimary: "none",
   whiteSecondary: "none",
-  whitePrimary: "none"
+  greenPrimary: "none",
+  greenSecondary: "none"
 };
 
 const backgroundColor = {
@@ -174,8 +197,10 @@ const backgroundColor = {
   tertiary: TRANSPARENT,
   danger: RASPBERRY,
   dangerSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: TRANSPARENT
 };
 
 const border = {
@@ -189,8 +214,10 @@ const border = {
   tertiary: "none",
   danger: "2px solid " + RASPBERRY,
   dangerSecondary: "2px solid " + ERROR_COLOR,
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + WHITE,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: "2px solid " + SEA_GREEN,
+  greenSecondary: "2px solid " + SEA_GREEN
 };
 
 const hoverBackgroundColor = {
@@ -204,8 +231,10 @@ const hoverBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 10, "darken"),
+  greenSecondary: HINT_GREEN
 };
 
 const hoverBorderColor = {
@@ -219,8 +248,10 @@ const hoverBorderColor = {
   tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const hoverColor = {
@@ -234,8 +265,10 @@ const hoverColor = {
   tertiary: SAPPHIRE_BLUE,
   danger: WHITE,
   dangerSecondary: "#B10541",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 const activeBackgroundColor = {
@@ -249,8 +282,10 @@ const activeBackgroundColor = {
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#FAE7EE",
+  whitePrimary: TRANSPARENT,
   whiteSecondary: TRANSPARENT,
-  whitePrimary: TRANSPARENT
+  greenPrimary: adjustHexColor(SEA_GREEN, 20, "darken"),
+  greenSecondary: adjustHexColor(HINT_GREEN, 5, "darken")
 };
 
 const activeBorderColor = {
@@ -264,8 +299,10 @@ const activeBorderColor = {
   tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
+  whitePrimary: "2px solid " + TRANSPARENT,
   whiteSecondary: "2px solid " + TRANSPARENT,
-  whitePrimary: "2px solid " + TRANSPARENT
+  greenPrimary: SEA_GREEN,
+  greenSecondary: SEA_GREEN
 };
 
 const activeColor = {
@@ -279,8 +316,10 @@ const activeColor = {
   tertiary: PEACOCK_BLUE,
   danger: WHITE,
   dangerSecondary: "#910029",
+  whitePrimary: WHITE,
   whiteSecondary: WHITE,
-  whitePrimary: WHITE
+  greenPrimary: WHITE,
+  greenSecondary: SEA_GREEN
 };
 
 export const fallbackValues = {

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

@@ -1,6 +1,7 @@
 import React from "react";
+import { SEA_GREEN } from "../../../constants/colors";
 
-const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
+const SuccessfulIconMedium = ({ iconIndex = 0, fill = SEA_GREEN }) => {
   const mask0ID = `SuccessfulIconMedium-mask0-${iconIndex}`;
   const mask1ID = `SuccessfulIconMedium-mask1-${iconIndex}`;
   return (
@@ -11,7 +12,7 @@ const SuccessfulIconMedium = ({ iconIndex = 0 }) => {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle cx="12" cy="12" r="12" fill="#317D4F" />
+      <circle cx="12" cy="12" r="12" fill={fill} />
       <mask
         id={mask0ID}
         style={{ maskType: "luminance" }}

package/src/util/general.js

@@ -173,3 +173,43 @@ export const wrapIndex = (index, length) => {
     return index;
   }
 };
+
+/**
+ * Adjusts a hex color by lightening or darkening it.
+ *
+ * Intended for use when a satisfactory color is not available in the design system.
+ *
+ * @param {string} hex - The original hex color (e.g., "#3498db").
+ * @param {number} percent - The percentage to adjust the color (0-100).
+ * @param {string} action - The action to perform: 'lighten' or 'darken'.
+ * @returns {string} - The adjusted hex color.
+ * @throws {Error} - Throws an error if the action is not 'lighten' or 'darken'.
+ */
+export const adjustHexColor = (hex, percent, action) => {
+  // Remove hash at the start if present
+  hex = hex.replace(/^\s*#/, "");
+
+  // Parse r, g, b values
+  let r = parseInt(hex.substring(0, 2), 16);
+  let g = parseInt(hex.substring(2, 4), 16);
+  let b = parseInt(hex.substring(4, 6), 16);
+
+  // Adjust RGB values based on the action
+  if (action === "darken") {
+    r = Math.max(0, Math.floor(r * (1 - percent / 100)));
+    g = Math.max(0, Math.floor(g * (1 - percent / 100)));
+    b = Math.max(0, Math.floor(b * (1 - percent / 100)));
+  } else if (action === "lighten") {
+    r = Math.min(255, Math.floor(r + (255 - r) * (percent / 100)));
+    g = Math.min(255, Math.floor(g + (255 - g) * (percent / 100)));
+    b = Math.min(255, Math.floor(b + (255 - b) * (percent / 100)));
+  } else {
+    throw new Error("Action must be either 'lighten' or 'darken'");
+  }
+
+  // Convert back to hex
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b)
+    .toString(16)
+    .slice(1)
+    .padStart(6, "0")}`;
+};