@thecb/components 11.6.2 → 11.6.3-beta.1

package/package.json

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

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

@@ -1,5 +1,5 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useContext } from "react";
+import styled, { ThemeContext } from "styled-components";
 import Box from "../layouts/Box";
 import Text from "../../atoms/text/";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,31 +15,45 @@ const StyledBadgeContainer = styled(Box)`
 `;
 
 const StyledBadge = styled(Text)`
-  font-family: "Public Sans", sans-serif;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%; /* 15px */
-  letter-spacing: 0.2px;
+  line-height: 150%;
+  letter-spacing: ${props => (props.isMobile ? "0.2px" : "0.24px")};
   white-space: nowrap;
-
-  @media screen and (min-width: 1049px) {
-    font-size: 12px;
-    line-height: 150%; /* 18px */
-    letter-spacing: 0.24px;
-  }
 `;
 
-const Badge = ({ label, Icon, themeValues, iconOnLeft = true, id }) => (
-  <StyledBadgeContainer background={themeValues.background} id={id}>
-    {iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-    <StyledBadge color={themeValues.color}>{label}</StyledBadge>
-    {!iconOnLeft && Icon && (
-      <Icon color={themeValues.color} fill={themeValues.color} />
-    )}
-  </StyledBadgeContainer>
-);
+const Badge = ({
+  label,
+  Icon,
+  themeValues,
+  iconOnLeft = true,
+  id,
+  extraStyles
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  return (
+    <StyledBadgeContainer
+      background={themeValues.background}
+      id={id}
+      extraStyles={extraStyles}
+    >
+      {iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+      <StyledBadge
+        color={themeValues.color}
+        weight={themeValues.fontWeight}
+        fontSize={
+          isMobile ? themeValues.fontSizeMobile : themeValues.fontSizeDesktop
+        }
+        isMobile={isMobile}
+      >
+        {label}
+      </StyledBadge>
+      {!iconOnLeft && Icon && (
+        <Icon color={themeValues.color} fill={themeValues.color} />
+      )}
+    </StyledBadgeContainer>
+  );
+};
 
 export default themeComponent(Badge, "Badge", fallbackValues, "success");

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,30 @@ const PrimaryBadge = props => {
     <Badge
       {...props}
       label={"Item in Cart"}
-      Icon={() => MultiCartIcon({ color: ROYAL_BLUE_VIVID })}
+      Icon={() => MultiCartIcon({ iconFill: ROYAL_BLUE_VIVID })}
       variant="primary"
     />
   );
 };
 
+const PrimaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Kiosk"} variant="primaryHeadline" />;
+};
+
+const SecondaryBadge = props => {
+  return (
+    <Badge
+      {...props}
+      label={"Item in Cart"}
+      Icon={() => MultiCartIcon({ iconFill: CORNFLOWER_BLUE })}
+      variant="secondary"
+    />
+  );
+};
+
+const SecondaryHeadlineBadge = props => {
+  return <Badge {...props} label={"Online"} variant="secondaryHeadline" />;
+};
 const InfoBadge = props => {
   return (
     <Badge
@@ -133,6 +151,9 @@ export const Badges = {
             <SuccessBadge {...args} />
             <DisabledBadge {...args} />
             <PrimaryBadge {...args} />
+            <PrimaryHeadlineBadge {...args} />
+            <SecondaryBadge {...args} />
+            <SecondaryHeadlineBadge {...args} />
             <WarnBadge {...args} />
           </Cluster>
           <Cluster justify="flex-start" align="center" childGap="1.5rem">

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

@@ -10,11 +10,20 @@ import {
   SEA_GREEN,
   ZEST_ORANGE
 } from "../../../constants/colors";
+import {
+  FONT_SIZE,
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
+import { fallbackValues as textTheme } from "../text/Text.theme";
 
 const background = {
   info: `${INFO_BLUE}`,
   warn: `${HALF_COLONIAL_WHITE}`,
   primary: `${CORNFLOWER_BLUE}`,
+  primaryHeadline: `${CORNFLOWER_BLUE}`,
+  secondary: `${ROYAL_BLUE_VIVID}`,
+  secondaryHeadline: `${ROYAL_BLUE_VIVID}`,
   success: `${HINT_GREEN}`,
   disabled: `${GRECIAN_GREY}`
 };
@@ -23,11 +32,50 @@ const color = {
   info: `${MATISSE_BLUE}`,
   warn: `${ZEST_ORANGE}`,
   primary: `${ROYAL_BLUE_VIVID}`,
+  primaryHeadline: `${ROYAL_BLUE_VIVID}`,
+  secondary: `${CORNFLOWER_BLUE}`,
+  secondaryHeadline: `${CORNFLOWER_BLUE}`,
   success: `${SEA_GREEN}`,
   disabled: `${MANATEE_GREY}`
 };
 
+const fontWeight = {
+  info: FONT_WEIGHT_REGULAR,
+  warn: FONT_WEIGHT_REGULAR,
+  primary: FONT_WEIGHT_REGULAR,
+  primaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  secondary: FONT_WEIGHT_REGULAR,
+  secondaryHeadline: FONT_WEIGHT_SEMIBOLD,
+  success: FONT_WEIGHT_REGULAR,
+  disabled: FONT_WEIGHT_REGULAR
+};
+
+const fontSizeMobile = {
+  info: textTheme.fontSize.pXXS,
+  warn: textTheme.fontSize.pXXS,
+  primary: textTheme.fontSize.pXXS,
+  primaryHeadline: textTheme.fontSize.pXS,
+  secondary: textTheme.fontSize.pXXS,
+  secondaryHeadline: textTheme.fontSize.pXS,
+  success: textTheme.fontSize.pXXS,
+  disabled: textTheme.fontSize.pXXS
+};
+
+const fontSizeDesktop = {
+  info: textTheme.fontSize.pXS,
+  warn: textTheme.fontSize.pXS,
+  primary: textTheme.fontSize.pXS,
+  primaryHeadline: textTheme.fontSize.pS,
+  secondary: textTheme.fontSize.pXS,
+  secondaryHeadline: textTheme.fontSize.pS,
+  success: textTheme.fontSize.pXS,
+  disabled: textTheme.fontSize.pXS
+};
+
 export const fallbackValues = {
   background,
-  color
+  color,
+  fontWeight,
+  fontSizeMobile,
+  fontSizeDesktop
 };

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

@@ -5,6 +5,7 @@ export interface BadgeProps {
   label: string;
   Icon?: JSX.Element;
   iconOnLeft?: boolean;
+  variant?: "info" | "warn" | "primary" | "primaryHeadline" | "secondary" | "secondaryHeadline" | "success" | "disabled";
 }
 
 export const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;

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;

package/src/constants/style_constants.js

@@ -5,6 +5,7 @@ export const BORDER_RADIUS = {
 };
 export const BORDER_THIN = "1px";
 export const FONT_SIZE = {
+  XXS: "0.625rem", // 10px
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px