@thecb/components 11.2.3-beta.4 → 11.2.3

package/package.json

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

package/src/components/molecules/registration-banner/RegistrationBanner.js

@@ -29,12 +29,10 @@ const RegistrationBanner = ({
       extraStyles={extraStyles}
       themeValues={themeValues}
       isMobile={isMobile}
-      role="banner"
       aria-label="Registration Banner"
       justify="center"
     >
       <Styled.ContentContainer
-        role="main"
         align="center"
         justify="space-between"
         overflow="visible"

package/src/components/molecules/registration-banner/RegistrationBanner.styled.js

@@ -1,10 +1,11 @@
 import styled from "styled-components";
 import { Box, Cluster, Stack } from "../../atoms/layouts";
 import ButtonWithLink from "../../atoms/button-with-link/ButtonWithLink";
-import { hexToRGBA } from "../../../util/general";
+import { adjustHexColor } from "../../../util/general";
 
 export const BannerContainer = styled(Cluster)`
-  background: ${({ themeValues }) => hexToRGBA(themeValues.background, 0.9)};
+  background: ${({ themeValues }) =>
+    adjustHexColor(themeValues.background, 10, "lighten")};
   padding: ${({ isMobile }) => (isMobile ? "1rem 2rem" : " 2rem 8.25rem")};
 `;
 

package/src/components/molecules/registration-banner/index.d.ts

@@ -6,7 +6,7 @@ export interface RegistrationBannerProps {
   extraStyles?: string;
   loginLink?: string;
   registrationLink?: string;
-  themeValues: any;
+  themeValues?: any;
   titleAs?: string;
   titleVariant?: string;
 }

package/src/util/general.js

@@ -213,39 +213,3 @@ export const adjustHexColor = (hex, percent, action) => {
     .slice(1)
     .padStart(6, "0")}`;
 };
-
-/**
- * Converts a hex color code to an RGBA color string with the specified alpha value.
- *
- * @param {string} hex - The hex color code (e.g., "#3498db" or "3498db").
- * @param {number} alpha - The alpha value (opacity) between 0 and 1.
- * @returns {string} - The RGBA color string (e.g., "rgba(52, 152, 219, 0.5)").
- * @throws {Error} - Throws an error if the hex code is not a valid 3 or 6-digit hex color.
- */
-export const hexToRGBA = (hex, alpha) => {
-  // Remove hash at the start if present
-  hex = hex.replace(/^\s*#/, "");
-
-  // If hex is 3 characters, convert it to 6 characters.
-  if (hex.length === 3) {
-    hex = hex
-      .split("")
-      .map(char => char + char)
-      .join("");
-  }
-
-  // Validate hex length
-  if (hex.length !== 6) {
-    throw new Error(
-      "Invalid hex color provided. Expected a 3 or 6-digit hex color."
-    );
-  }
-
-  // Parse the hex color components
-  const bigint = parseInt(hex, 16);
-  const r = (bigint >> 16) & 255;
-  const g = (bigint >> 8) & 255;
-  const b = bigint & 255;
-
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};