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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.3.1-beta.5",
+  "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,28 @@ 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 =
-    children.length + (imgSrc ? 1 : 0) + (text ? 1 : 0) + (headerText ? 1 : 0);
+    (Array.isArray(children) ? children.length : 1) +
+    (text ? 1 : 0) +
+    (imgSrc ? 1 : 0) +
+    (headerText ? 1 : 0);
 
   return (
     <BoxWithShadow
@@ -43,7 +47,7 @@ const Card = ({
       minWidth={width}
       extraStyles={extraStyles}
     >
-      <Cover singleChild>
+      <Cover singleChild fillCenter>
         <Stack fullHeight childGap="0" bottomItem={numberOfChildren}>
           {headerText && (
             <CardHeader
@@ -53,6 +57,7 @@ const Card = ({
               backgroundColor={themeValues.headerBackgroundColor}
               borderRadius={borderRadius}
               padding={padding}
+              as={headerAs}
             ></CardHeader>
           )}
           {imgSrc && (
@@ -61,18 +66,18 @@ const Card = ({
               objectFit={imgObjectFit}
               backgroundColor={themeValues.imageBackgroundColor}
               src={imgSrc}
+              alt={imgAltText}
+            />
+          )}
+          {text && (
+            <CardText
+              padding={padding}
+              titleText={titleText}
+              text={text}
+              titleVariant={titleVariant}
             />
           )}
-          <Box padding={padding}>
-            {text && (
-              <CardText
-                titleText={titleText}
-                text={text}
-                titleVariant={titleVariant}
-              />
-            )}
-            {children}
-          </Box>
+          {children}
         </Stack>
       </Cover>
     </BoxWithShadow>

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

@@ -5,32 +5,37 @@ import withWindowSize from "../../withWindowSize";
 
 import { fallbackValues } from "./CardText.theme";
 
+import Box from "../layouts/Box";
 import Cover from "../layouts/Cover";
 import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
 
 export const CardText = ({
+  padding,
   text,
   titleText,
   titleVariant = "small",
   themeValues
 }) => {
   return (
-    <Cover>
-      <Stack>
-        {titleText && (
-          <Title
-            variant={titleVariant}
-            color={themeValues.titleColor}
-            weight={themeValues?.titleWeight}
-          >
-            {titleText}
-          </Title>
-        )}
-        <Paragraph color={themeValues.textColor}>{text}</Paragraph>
-      </Stack>
-    </Cover>
+    <Box padding={padding}>
+      <Cover>
+        <Stack>
+          {titleText && (
+            <Title
+              as="p"
+              variant={titleVariant}
+              color={themeValues.titleColor}
+              weight={themeValues.titleWeight}
+            >
+              {titleText}
+            </Title>
+          )}
+          <Paragraph color={themeValues.textColor}>{text}</Paragraph>
+        </Stack>
+      </Cover>
+    </Box>
   );
 };
 

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";