@thecb/components 7.7.3-beta.2 → 7.7.3-beta.4

package/dist/index.d.ts

@@ -2,6 +2,32 @@ import React from 'react';
 
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+interface ButtonWithActionProps {
+  action?: React.SyntheticEvent;
+  variant?: string;
+  text?: string;
+  textWrap?: boolean;
+  isLoading?: boolean;
+  textExtraStyles?: string;
+  contentOverride?: boolean;
+  extraStyles?: string;
+  tabIndex?: string;
+}
+
+declare const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+interface ButtonWithLinkProps extends ButtonWithActionProps {
+  linkExtraStyles?: string;
+  url: string;
+  disabled?: boolean;
+  fileLink?: boolean;
+  newTab?: boolean;
+}
+
+declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface CardProps {
   text?: string;
   titleText?: string;
@@ -33,32 +59,6 @@ interface CardProps {
 declare const Card: React.FC<Expand<CardProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-interface ButtonWithActionProps {
-  action?: React.SyntheticEvent;
-  variant?: string;
-  text?: string;
-  textWrap?: boolean;
-  isLoading?: boolean;
-  textExtraStyles?: string;
-  contentOverride?: boolean;
-  extraStyles?: string;
-  tabIndex?: string;
-}
-
-declare const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
-  React.HTMLAttributes<HTMLElement>>;
-
-interface ButtonWithLinkProps extends ButtonWithActionProps {
-  linkExtraStyles?: string;
-  url: string;
-  disabled?: boolean;
-  fileLink?: boolean;
-  newTab?: boolean;
-}
-
-declare const ButtonWithLink: React.FC<Expand<ButtonWithLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
-
 declare const GuidedCheckoutImage: JSX.Element;
 
 declare const HistoryIconSmall: JSX.Element;
@@ -260,6 +260,54 @@ interface ParagraphProps {
 declare const Paragraph: React.FC<Expand<ParagraphProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface TableProps {
+  extraStyles?: string;
+}
+
+interface TableBodyProps {
+  extraStyles?: string;
+}
+
+interface TableCellProps {
+  extraStyles?: string;
+  fontSize?: string;
+  maxWidth?: string;
+  padding?: string;
+}
+
+interface TableHeadProps {
+  extraStyles?: string;
+}
+interface TableHeadingProps {
+  extraStyles?: string;
+  minWidth?: string;
+  padding?: string;
+}
+
+interface TableRowProps {
+  extraStyles?: string;
+  hoverCursor?: boolean;
+  hoverEffect?: boolean;
+}
+
+declare const Table: React.FC<Expand<TableProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+declare const TableBody: React.FC<Expand<TableBodyProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+declare const TableCell: React.FC<Expand<TableCellProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+declare const TableHead: React.FC<Expand<TableHeadProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+declare const TableHeading: React.FC<Expand<TableHeadingProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+declare const TableRow: React.FC<Expand<TableRowProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 interface TextProps {
   weight?: string;
   color?: string;
@@ -383,6 +431,9 @@ interface PopoverProps {
   arrowDirection?: "left" | "right" | "top" | "bottom";
   transform?: string;
   disclosedExtraStyles?: string;
+  borderColor?: string;
+  backgroundColor?: string;
+  popoverExtraStyles?: string;
 }
 
 declare const Popover: React.FC<Expand<PopoverProps> &
@@ -402,5 +453,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, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Popover, PopoverProps, ProfileImage, RevenueManagementImage, Stack, StackProps, StandardCheckoutImage, Switcher, SwitcherProps, TableListItem, TableListItemProps, Text, TextProps, Title, TitleProps };
+export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Popover, PopoverProps, ProfileImage, RevenueManagementImage, Stack, StackProps, StandardCheckoutImage, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -23688,10 +23688,10 @@ var fallbackValues$i = {
   popoverTriggerColor: popoverTriggerColor
 };
 
-var arrowBorder = function arrowBorder(direction) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "8px";
+var arrowBorder = function arrowBorder(borderColor, direction) {
+  var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "8px";
   var angle = "".concat(width, " solid transparent");
-  var straight = "".concat(width, " solid rgba(255, 255, 255, 0.85)");
+  var straight = "".concat(width, " solid ").concat(borderColor);
 
   if (direction == "down") {
     return "border-left: ".concat(angle, "; border-right: ").concat(angle, "; border-top: ").concat(straight);
@@ -23733,7 +23733,12 @@ var Popover = function Popover(_ref) {
       arrowDirection = _ref$arrowDirection === void 0 ? "down" : _ref$arrowDirection,
       _ref$transform = _ref.transform,
       transform = _ref$transform === void 0 ? "none" : _ref$transform,
-      buttonExtraStyles = _ref.buttonExtraStyles;
+      buttonExtraStyles = _ref.buttonExtraStyles,
+      _ref$backgroundColor = _ref.backgroundColor,
+      backgroundColor = _ref$backgroundColor === void 0 ? "white" : _ref$backgroundColor,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "rgba(255, 255, 255, 0.85)" : _ref$borderColor,
+      popoverExtraStyles = _ref.popoverExtraStyles;
   var hoverColor = themeValues.hoverColor,
       activeColor = themeValues.activeColor,
       popoverTriggerColor = themeValues.popoverTriggerColor;
@@ -23819,7 +23824,7 @@ var Popover = function Popover(_ref) {
     color: popoverTriggerColor,
     extraStyles: "&:active { color: ".concat(activeColor, "; } &:hover { color: ").concat(hoverColor, " }; ").concat(textExtraStyles)
   }, triggerText)), /*#__PURE__*/React.createElement(Box, {
-    background: "white",
+    background: backgroundColor,
     borderRadius: "4px",
     boxShadow: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
     id: "Disclosed".concat(popoverID),
@@ -23828,10 +23833,10 @@ var Popover = function Popover(_ref) {
     tabIndex: popoverFocus && popoverOpen ? "0" : "-1",
     minWidth: minWidth,
     maxWidth: maxWidth,
-    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ")
+    extraStyles: "\n          display: ".concat(popoverOpen ? "block" : "none", "; \n          position: absolute; \n          top: ").concat(top, "; \n          right: ").concat(right, "; \n          bottom: ").concat(bottom, "; \n          left: ").concat(left, ";\n          height: ").concat(height, ";\n          transform: ").concat(transform, ";\n          ").concat(popoverExtraStyles, ";\n          ")
   }, /*#__PURE__*/React.createElement(Paragraph$1, null, content), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
-    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
+    extraStyles: "\n            position: absolute;\n            content: \"\";\n            width: 0;\n            height: 0;\n            ".concat(arrowBorder(borderColor, arrowDirection, "8px"), ";\n            filter: drop-shadow(2px 8px 14px black);\n            bottom: ").concat(arrowBottom, ";\n            right: ").concat(arrowRight, ";\n            top: ").concat(arrowTop, ";\n            left: ").concat(arrowLeft, ";\n          ")
   })));
 };
 
@@ -36419,7 +36424,7 @@ var LoadingLine = function LoadingLine(_ref) {
 var Table_styled = styled.table.withConfig({
   displayName: "Tablestyled",
   componentId: "sc-mveye7-0"
-})(["width:100%;table-layout:auto;", ""], function (_ref) {
+})(["width:100%;table-layout:auto;border-collapse:collapse;", ""], function (_ref) {
   var extraStyles = _ref.extraStyles;
   return extraStyles;
 });
@@ -36435,11 +36440,20 @@ var TableBody_styled = styled.tbody.withConfig({
 var TableCell_styled = styled.td.withConfig({
   displayName: "TableCellstyled",
   componentId: "sc-iqndn8-0"
-})(["padding:", ";font-size:0.875rem;white-space:nowrap;max-width:250px;overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
-  var padding = _ref.padding;
-  return padding ? padding : "24px";
+})(["padding:", ";font-size:", " white-space:nowrap;max-width:", ";overflow:hidden;text-overflow:ellipsis;&:last-child{text-align:right;}", ";"], function (_ref) {
+  var _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
 }, function (_ref2) {
-  var extraStyles = _ref2.extraStyles;
+  var _ref2$fontSize = _ref2.fontSize,
+      fontSize = _ref2$fontSize === void 0 ? "0.875rem" : _ref2$fontSize;
+  return fontSize;
+}, function (_ref3) {
+  var _ref3$maxWidth = _ref3.maxWidth,
+      maxWidth = _ref3$maxWidth === void 0 ? "250px" : _ref3$maxWidth;
+  return maxWidth;
+}, function (_ref4) {
+  var extraStyles = _ref4.extraStyles;
   return extraStyles;
 });
 
@@ -36453,12 +36467,16 @@ var fallbackValues$A = {
 var StyledTableHead = styled.thead.withConfig({
   displayName: "TableHeadstyled",
   componentId: "sc-j8e6c1-0"
-})(["background-color:", ";border-bottom:", ";font-size:0.875rem;"], function (_ref) {
+})(["background-color:", ";border-bottom:", ";font-size:", ";"], function (_ref) {
   var backgroundColor = _ref.backgroundColor;
   return backgroundColor;
 }, function (_ref2) {
   var borderColor = _ref2.borderColor;
   return "1px solid ".concat(borderColor);
+}, function (_ref3) {
+  var _ref3$fontSize = _ref3.fontSize,
+      fontSize = _ref3$fontSize === void 0 ? "0.875rem" : _ref3$fontSize;
+  return fontSize;
 });
 
 var borderColor$4 = GREY_CHATEAU;
@@ -36526,11 +36544,16 @@ var TableHead$1 = themeComponent(TableHead, "TableHead", fallbackValues$A);
 var TableHeading_styled = styled.th.withConfig({
   displayName: "TableHeadingstyled",
   componentId: "sc-1ggk38d-0"
-})(["padding:24px;min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth ? minWidth : "initial";
+})(["padding:", ";min-width:", ";text-align:left;&:last-child{text-align:right;}", ""], function (_ref) {
+  var _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? "24px" : _ref$padding;
+  return padding;
 }, function (_ref2) {
-  var extraStyles = _ref2.extraStyles;
+  var _ref2$minWidth = _ref2.minWidth,
+      minWidth = _ref2$minWidth === void 0 ? "initial" : _ref2$minWidth;
+  return minWidth;
+}, function (_ref3) {
+  var extraStyles = _ref3.extraStyles;
   return extraStyles;
 });