@thecb/components 11.6.2 → 11.6.3-beta.0

package/package.json

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

package/src/components/atoms/badge/Badge.stories.js

@@ -1,9 +1,9 @@
 import React from "react";
 import {
   MANATEE_GREY,
-  MATISSE_BLUE,
   ROYAL_BLUE_VIVID,
-  ZEST_ORANGE
+  ZEST_ORANGE,
+  CORNFLOWER_BLUE
 } from "../../../constants/colors";
 import Badge from "./Badge";
 import { Box, Stack, Cluster } from "../layouts";
@@ -80,12 +80,23 @@ const PrimaryBadge = props => {
     <Badge
       {...props}
       label={"Item in Cart"}
-      Icon={() => MultiCartIcon({ color: ROYAL_BLUE_VIVID })}
+      Icon={() => MultiCartIcon({ iconFill: ROYAL_BLUE_VIVID })}
       variant="primary"
     />
   );
 };
 
+const SecondaryBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Item in Cart"}
+      Icon={() => MultiCartIcon({ iconFill: CORNFLOWER_BLUE })}
+      variant="secondary"
+    />
+  );
+};
+
 const InfoBadge = props => {
   return (
     <Badge
@@ -133,6 +144,7 @@ export const Badges = {
             <SuccessBadge {...args} />
             <DisabledBadge {...args} />
             <PrimaryBadge {...args} />
+            <SecondaryBadge {...args} />
             <WarnBadge {...args} />
           </Cluster>
           <Cluster justify="flex-start" align="center" childGap="1.5rem">

package/src/components/atoms/badge/Badge.theme.js

@@ -15,6 +15,7 @@ const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
+  secondary: `${ROYAL_BLUE_VIVID}`,
   success: `${HINT_GREEN}`,
   disabled: `${GRECIAN_GREY}`
 };
@@ -23,6 +24,7 @@ const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
+  secondary: `${CORNFLOWER_BLUE}`,
   success: `${SEA_GREEN}`,
   disabled: `${MANATEE_GREY}`
 };

package/src/components/atoms/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./alert";
+export * from "./badge";
 export * from "./button-with-action";
 export * from "./button-with-link";
 export * from "./card";

package/src/components/molecules/collapsible-section/index.d.ts

@@ -8,7 +8,7 @@ export interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string;
+  title?: string | JSX.Element;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;