@thecb/components 6.3.1-beta.7 → 6.3.1-beta.8

package/package.json

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

package/src/components/atoms/button-with-action/index.d.ts

@@ -10,7 +10,7 @@ export interface ButtonWithActionProps {
   textExtraStyles?: string;
   contentOverride?: boolean;
   extraStyles?: string;
-  tabIndex?: number;
+  tabIndex?: string;
 }
 
 export const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &

package/src/components/atoms/card/Card.js

@@ -5,7 +5,6 @@ import withWindowSize from "../../withWindowSize";
 
 import { fallbackValues } from "./Card.theme";
 
-import Box from "../layouts/Box";
 import BoxWithShadow from "../box-with-shadow";
 import Cover from "../layouts/Cover";
 import Stack from "../layouts/Stack";
@@ -15,23 +14,25 @@ import CardText from "./CardText";
 import CardHeader from "./CardHeader";
 
 const Card = ({
-  themeValues,
-  children,
+  borderRadius = "4px",
   extraStyles,
-  width = "276px",
-  text,
-  titleText,
-  titleVariant = "small",
+  headerAs = "h2",
+  headerText,
+  headerVariant = "small",
   imgSrc,
   imgHeight = "150px",
   imgObjectFit = "none",
-  headerText,
-  headerVariant = "small",
-  borderRadius = "4px",
-  padding = "24px"
+  imgAltText,
+  padding = "24px",
+  text,
+  titleText,
+  titleVariant = "small",
+  themeValues,
+  width = "276px",
+  children
 }) => {
   const numberOfChildren =
-    (typeof children === "Array" ? children.length : 1) +
+    (Array.isArray(children) ? children.length : 1) +
     (text ? 1 : 0) +
     (imgSrc ? 1 : 0) +
     (headerText ? 1 : 0);
@@ -56,6 +57,7 @@ const Card = ({
               backgroundColor={themeValues.headerBackgroundColor}
               borderRadius={borderRadius}
               padding={padding}
+              as={headerAs}
             ></CardHeader>
           )}
           {imgSrc && (
@@ -64,6 +66,7 @@ const Card = ({
               objectFit={imgObjectFit}
               backgroundColor={themeValues.imageBackgroundColor}
               src={imgSrc}
+              alt={imgAltText}
             />
           )}
           {text && (

package/src/components/atoms/card/CardHeader.js

@@ -4,12 +4,13 @@ import Box from "../layouts/Box";
 import Title from "../title";
 
 export const CardHeader = ({
+  backgroundColor,
+  borderRadius,
+  as,
   headerText,
   headerColor,
   headerVariant,
-  backgroundColor,
-  padding,
-  borderRadius
+  padding
 }) => {
   return (
     <Box
@@ -17,7 +18,7 @@ export const CardHeader = ({
       background={backgroundColor}
       borderRadius={`${borderRadius} ${borderRadius} 0 0`}
     >
-      <Title variant={headerVariant} color={headerColor}>
+      <Title as={as} variant={headerVariant} color={headerColor}>
         {headerText}
       </Title>
     </Box>

package/src/components/atoms/card/CardText.js

@@ -24,9 +24,10 @@ export const CardText = ({
         <Stack>
           {titleText && (
             <Title
+              as="p"
               variant={titleVariant}
               color={themeValues.titleColor}
-              weight={themeValues?.titleWeight}
+              weight={themeValues.titleWeight}
             >
               {titleText}
             </Title>

package/src/components/atoms/card/CardText.theme.js

@@ -8,5 +8,5 @@ const textColor = BRIGHT_GREY;
 export const fallbackValues = {
   titleColor,
   titleWeight,
-  titleWeight
+  textColor
 };

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

@@ -8,6 +8,7 @@ export interface CardProps {
   extraStyles?: string;
   imgSrc?: string;
   imgHeight?: string;
+  imgAltText?: string;
   imgObjectFit?:
     | "contain"
     | "cover"
@@ -19,6 +20,7 @@ export interface CardProps {
     | "revert"
     | "revert-layer"
     | "unset";
+  headerAs?: string;
   headerText?: string;
   headerVariant?: string;
   borderRadius?: string;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface CollapsibleSectionProps {
+  isOpen: boolean;
+  toggleSection?: () => void;
+  isMobile?: boolean;
+  supportsTouch?: boolean;
+  title?: string;
+  customPadding?: string;
+  initiallyOpen?: boolean;
+  openHeight?: string;
+  customTitle?: boolean;
+  stackTitle?: boolean;
+  stackTitleContent?: JSX.Element;
+  sectionGap?: string;
+  name?: string;
+  index?: number;
+}
+
+export const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/editable-table/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface EditableTableProps {
+  title?: any;
+  renderItem?: (items: any) => JSX.Element;
+  items: any;
+  isMobile?: boolean;
+}
+
+export const EditableTable: React.FC<Expand<EditableTableProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export interface TableListItemProps {
+  borderTopItem?: boolean;
+  canEdit?: boolean;
+  canRemove?: boolean;
+  isMobile?: boolean;
+  title?: any;
+  value?: any;
+}
+
+export const TableListItem: React.FC<Expand<TableListItemProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -1 +1,2 @@
+export * from "./collapsible-section";
 export * from "./footer-with-subfooter";