@thecb/components 11.6.3 → 11.6.4-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "11.6.3",
+  "version": "11.6.4-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.js

@@ -1,5 +1,5 @@
-import React, { useContext } from "react";
-import styled, { ThemeContext } from "styled-components";
+import React from "react";
+import styled from "styled-components";
 import Box from "../layouts/Box";
 import Text from "../../atoms/text/";
 import { themeComponent } from "../../../util/themeUtils";
@@ -15,45 +15,31 @@ const StyledBadgeContainer = styled(Box)`
 `;
 
 const StyledBadge = styled(Text)`
-  line-height: 150%;
-  letter-spacing: ${props => (props.isMobile ? "0.2px" : "0.24px")};
+  font-family: "Public Sans", sans-serif;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 15px */
+  letter-spacing: 0.2px;
   white-space: nowrap;
-`;
 
-const Badge = ({
-  label,
-  Icon,
-  themeValues,
-  iconOnLeft = true,
-  id,
-  extraStyles
-}) => {
-  const { isMobile } = useContext(ThemeContext);
+  @media screen and (min-width: 1049px) {
+    font-size: 12px;
+    line-height: 150%; /* 18px */
+    letter-spacing: 0.24px;
+  }
+`;
 
-  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>
-  );
-};
+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>
+);
 
 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,
-  CORNFLOWER_BLUE
+  ZEST_ORANGE
 } from "../../../constants/colors";
 import Badge from "./Badge";
 import { Box, Stack, Cluster } from "../layouts";
@@ -80,30 +80,12 @@ const PrimaryBadge = props => {
     <Badge
       {...props}
       label={"Item in Cart"}
-      Icon={() => MultiCartIcon({ iconFill: ROYAL_BLUE_VIVID })}
+      Icon={() => MultiCartIcon({ color: 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
@@ -151,9 +133,6 @@ 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,20 +10,11 @@ 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}`
 };
@@ -32,50 +23,11 @@ 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,
-  fontWeight,
-  fontSizeMobile,
-  fontSizeDesktop
+  color
 };

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

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

package/src/components/atoms/dropdown/Dropdown.js

@@ -135,7 +135,8 @@ const Dropdown = ({
   autocompleteValue, // browser autofill value, like country-name
   smoothScroll = true,
   ariaInvalid = false,
-  isRequired = false
+  isRequired = false,
+  extraStyles
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -316,7 +317,7 @@ const Dropdown = ({
     <Box
       padding="0"
       background={isOpen ? themeValues.hoverColor : WHITE}
-      extraStyles={`position: relative;`}
+      extraStyles={`position: relative;${extraStyles ? ` ${extraStyles}` : ""}`}
       minWidth="100%"
       onClick={() => {
         if (!isOpen) {

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

@@ -0,0 +1,59 @@
+import React from "react";
+import Expand from "../../../util/expand";
+import { FormSelectOption } from "../../../types/common";
+
+export interface DropdownThemeValues {
+  selectedColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+}
+
+export interface DropdownProps {
+  /** Placeholder text displayed when no value is selected */
+  placeholder?: string;
+  /** Array of options to display in the dropdown */
+  options: FormSelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Whether the dropdown is currently open */
+  isOpen?: boolean;
+  /** Whether the dropdown is in an error state */
+  isError?: boolean;
+  /** Callback fired when an option is selected */
+  onSelect: (value: string) => void;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Callback fired when the dropdown is clicked */
+  onClick?: () => void;
+  /** Theme values for styling the dropdown */
+  themeValues?: DropdownThemeValues;
+  /** Maximum height of the dropdown content */
+  maxHeight?: string;
+  /** Whether the dropdown width should fit its content */
+  widthFitOptions?: boolean;
+  /** Whether the dropdown is disabled */
+  disabled?: boolean;
+  /** Whether to show title attributes on options */
+  hasTitles?: boolean;
+  /** Whether to auto-erase type-ahead input after timeout */
+  autoEraseTypeAhead?: boolean;
+  /** ID of the element that labels this dropdown */
+  ariaLabelledby?: string;
+  /** ID of the element that describes this dropdown */
+  ariaDescribedby?: string;
+  /** Autocomplete attribute value for browser autofill */
+  autocompleteValue?: string;
+  /** Whether to use smooth scrolling when scrolling to selected item */
+  smoothScroll?: boolean;
+  /** Whether the dropdown has an invalid value */
+  ariaInvalid?: boolean;
+  /** Whether the dropdown is required */
+  isRequired?: boolean;
+  /** Custom CSS styles */
+  extraStyles?: string;
+}
+
+export const Dropdown: React.FC<Expand<DropdownProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export default Dropdown;

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

@@ -1,8 +1,8 @@
 export * from "./alert";
-export * from "./badge";
 export * from "./button-with-action";
 export * from "./button-with-link";
 export * from "./card";
+export * from "./dropdown";
 export * from "./sortable-table-heading";
 export * from "./form-layouts";
 export * from "./form-select";

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

@@ -8,7 +8,7 @@ export interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string | JSX.Element;
+  title?: string;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -23,4 +23,4 @@ export interface CollapsibleSectionProps {
 }
 
 export const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  Omit<React.HTMLAttributes<HTMLElement>, "title">>; // ommitting title prop to avoid conflicts with component's title prop
+  React.HTMLAttributes<HTMLElement>>;

package/src/constants/style_constants.js

@@ -5,7 +5,6 @@ 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