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

package/dist/index.d.ts

@@ -9,6 +9,7 @@ interface CardProps {
   extraStyles?: string;
   imgSrc?: string;
   imgHeight?: string;
+  imgAltText?: string;
   imgObjectFit?:
     | "contain"
     | "cover"
@@ -20,6 +21,7 @@ interface CardProps {
     | "revert"
     | "revert-layer"
     | "unset";
+  headerAs?: string;
   headerText?: string;
   headerVariant?: string;
   borderRadius?: string;
@@ -39,7 +41,7 @@ interface ButtonWithActionProps {
   textExtraStyles?: string;
   contentOverride?: boolean;
   extraStyles?: string;
-  tabIndex?: number;
+  tabIndex?: number | string;
 }
 
 declare const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
@@ -276,6 +278,26 @@ interface TitleProps {
 declare const Title: React.FC<Expand<TitleProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+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;
+}
+
+declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface FooterWithSubfooterProps {
   footerLargeSide?: "left" | "right";
   footerLargeSideSize?: string;
@@ -302,5 +324,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Stack, StackProps, Switcher, SwitcherProps, Text, TextProps, Title, TitleProps };
+export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Stack, StackProps, Switcher, SwitcherProps, Text, TextProps, Title, TitleProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -35151,67 +35151,78 @@ var CardImage = styled.img.withConfig({
 
 var titleColor = BRIGHT_GREY;
 var titleWeight = FONT_WEIGHT_BOLD;
-var fallbackValues$x = _defineProperty({
+var textColor$2 = BRIGHT_GREY;
+var fallbackValues$x = {
   titleColor: titleColor,
-  titleWeight: titleWeight
-}, "titleWeight", titleWeight);
+  titleWeight: titleWeight,
+  textColor: textColor$2
+};
 
 var CardText = function CardText(_ref) {
-  var text = _ref.text,
+  var padding = _ref.padding,
+      text = _ref.text,
       titleText = _ref.titleText,
       _ref$titleVariant = _ref.titleVariant,
       titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
       themeValues = _ref.themeValues;
-  return /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: padding
+  }, /*#__PURE__*/React.createElement(Cover, null, /*#__PURE__*/React.createElement(Stack, null, titleText && /*#__PURE__*/React.createElement(Title$1, {
+    as: "p",
     variant: titleVariant,
     color: themeValues.titleColor,
-    weight: themeValues === null || themeValues === void 0 ? void 0 : themeValues.titleWeight
+    weight: themeValues.titleWeight
   }, titleText), /*#__PURE__*/React.createElement(Paragraph$1, {
     color: themeValues.textColor
-  }, text)));
+  }, text))));
 };
 var CardText$1 = themeComponent(withWindowSize(CardText), "CardText", fallbackValues$x);
 
 var CardHeader = function CardHeader(_ref) {
-  var headerText = _ref.headerText,
+  var backgroundColor = _ref.backgroundColor,
+      borderRadius = _ref.borderRadius,
+      as = _ref.as,
+      headerText = _ref.headerText,
       headerColor = _ref.headerColor,
       headerVariant = _ref.headerVariant,
-      backgroundColor = _ref.backgroundColor,
-      padding = _ref.padding,
-      borderRadius = _ref.borderRadius;
+      padding = _ref.padding;
   return /*#__PURE__*/React.createElement(Box, {
     padding: padding,
     background: backgroundColor,
     borderRadius: "".concat(borderRadius, " ").concat(borderRadius, " 0 0")
   }, /*#__PURE__*/React.createElement(Title$1, {
+    as: as,
     variant: headerVariant,
     color: headerColor
   }, headerText));
 };
 
 var Card = function Card(_ref) {
-  var themeValues = _ref.themeValues,
-      children = _ref.children,
+  var _ref$borderRadius = _ref.borderRadius,
+      borderRadius = _ref$borderRadius === void 0 ? "4px" : _ref$borderRadius,
       extraStyles = _ref.extraStyles,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "276px" : _ref$width,
-      text = _ref.text,
-      titleText = _ref.titleText,
-      _ref$titleVariant = _ref.titleVariant,
-      titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
+      _ref$headerAs = _ref.headerAs,
+      headerAs = _ref$headerAs === void 0 ? "h2" : _ref$headerAs,
+      headerText = _ref.headerText,
+      _ref$headerVariant = _ref.headerVariant,
+      headerVariant = _ref$headerVariant === void 0 ? "small" : _ref$headerVariant,
       imgSrc = _ref.imgSrc,
       _ref$imgHeight = _ref.imgHeight,
       imgHeight = _ref$imgHeight === void 0 ? "150px" : _ref$imgHeight,
       _ref$imgObjectFit = _ref.imgObjectFit,
       imgObjectFit = _ref$imgObjectFit === void 0 ? "none" : _ref$imgObjectFit,
-      headerText = _ref.headerText,
-      _ref$headerVariant = _ref.headerVariant,
-      headerVariant = _ref$headerVariant === void 0 ? "small" : _ref$headerVariant,
-      _ref$borderRadius = _ref.borderRadius,
-      borderRadius = _ref$borderRadius === void 0 ? "4px" : _ref$borderRadius,
+      imgAltText = _ref.imgAltText,
       _ref$padding = _ref.padding,
-      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
-  var numberOfChildren = children.length + (imgSrc ? 1 : 0) + (text ? 1 : 0) + (headerText ? 1 : 0);
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding,
+      text = _ref.text,
+      titleText = _ref.titleText,
+      _ref$titleVariant = _ref.titleVariant,
+      titleVariant = _ref$titleVariant === void 0 ? "small" : _ref$titleVariant,
+      themeValues = _ref.themeValues,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "276px" : _ref$width,
+      children = _ref.children;
+  var numberOfChildren = (Array.isArray(children) ? children.length : 1) + (text ? 1 : 0) + (imgSrc ? 1 : 0) + (headerText ? 1 : 0);
   return /*#__PURE__*/React.createElement(BoxWithShadow$1, {
     variant: "baseStandard",
     background: themeValues.backgroundColor,
@@ -35221,7 +35232,8 @@ var Card = function Card(_ref) {
     minWidth: width,
     extraStyles: extraStyles
   }, /*#__PURE__*/React.createElement(Cover, {
-    singleChild: true
+    singleChild: true,
+    fillCenter: true
   }, /*#__PURE__*/React.createElement(Stack, {
     fullHeight: true,
     childGap: "0",
@@ -35232,19 +35244,20 @@ var Card = function Card(_ref) {
     headerVariant: headerVariant,
     backgroundColor: themeValues.headerBackgroundColor,
     borderRadius: borderRadius,
-    padding: padding
+    padding: padding,
+    as: headerAs
   }), imgSrc && /*#__PURE__*/React.createElement(CardImage, {
     height: imgHeight,
     objectFit: imgObjectFit,
     backgroundColor: themeValues.imageBackgroundColor,
-    src: imgSrc
-  }), /*#__PURE__*/React.createElement(Box, {
-    padding: padding
-  }, text && /*#__PURE__*/React.createElement(CardText$1, {
+    src: imgSrc,
+    alt: imgAltText
+  }), text && /*#__PURE__*/React.createElement(CardText$1, {
+    padding: padding,
     titleText: titleText,
     text: text,
     titleVariant: titleVariant
-  }), children))));
+  }), children)));
 };
 
 var Card$1 = themeComponent(withWindowSize(Card), "Card", fallbackValues$w);
@@ -37966,10 +37979,10 @@ ForgotPasswordForm.reducer = reducer$4;
 ForgotPasswordForm.mapStateToProps = mapStateToProps$5;
 ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps$4;
 
-var textColor$2 = "#ffffff";
+var textColor$3 = "#ffffff";
 var backgroundColor$6 = "#182848";
 var fallbackValues$B = {
-  textColor: textColor$2,
+  textColor: textColor$3,
   backgroundColor: backgroundColor$6
 };