@thecb/components 7.8.1 → 7.8.2-beta.4

package/dist/index.d.ts

@@ -259,6 +259,7 @@ interface ClusterProps {
   justifySelf?: string;
   alignSelf?: string;
   flexGrow?: string;
+  innerWrapperAs?: string;
 }
 
 declare const Cluster: React.FC<Expand<ClusterProps> &

package/dist/index.esm.js

@@ -5007,7 +5007,9 @@ var INFO_BLUE = "#E4F4FD";
 var HOVER_LIGHT_BLUE = "#EFFAFF";
 var MATISSE_BLUE = "#15749D";
 var ROYAL_BLUE = "#3181E3";
-var ASTRAL_BLUE = "#3176AA"; // GREEN
+var ASTRAL_BLUE = "#3176AA";
+var SAPPHIRE_BLUE = "#116285";
+var PEACOCK_BLUE = "#0E506D"; // GREEN
 
 var FOREST_GREEN = "#19b03F";
 var MEADOW_GREEN = "#16C98D";
@@ -5030,6 +5032,7 @@ var RED = "#FF0000";
 var CRIMSON_RED = "#ED1C24";
 var THUNDERBIRD_RED = "#C3191F";
 var RAZZMATAZZ_RED = "#D11053";
+var RASPBERRY = "#ED125F";
 var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
@@ -5114,6 +5117,8 @@ var colors = /*#__PURE__*/Object.freeze({
   MATISSE_BLUE: MATISSE_BLUE,
   ROYAL_BLUE: ROYAL_BLUE,
   ASTRAL_BLUE: ASTRAL_BLUE,
+  SAPPHIRE_BLUE: SAPPHIRE_BLUE,
+  PEACOCK_BLUE: PEACOCK_BLUE,
   FOREST_GREEN: FOREST_GREEN,
   MEADOW_GREEN: MEADOW_GREEN,
   POLAR_GREEN: POLAR_GREEN,
@@ -5135,6 +5140,7 @@ var colors = /*#__PURE__*/Object.freeze({
   FANTASY_RED: FANTASY_RED,
   COSMOS_RED: COSMOS_RED,
   BLUSH_RED: BLUSH_RED,
+  RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   ERROR_COLOR: ERROR_COLOR
 });
@@ -6659,7 +6665,7 @@ var ClusterInnerWrapper = styled.div.withConfig({
   return childGap;
 });
 
-var _excluded$6 = ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children"];
+var _excluded$6 = ["justify", "align", "childGap", "minHeight", "minWidth", "nowrap", "overflow", "justifySelf", "alignSelf", "flexGrow", "extraStyles", "children", "innerWrapperAs"];
 /*
   Cluster components suit any groups of elements that differ in
   length and are liable to wrap. Buttons that appear together at the
@@ -6683,6 +6689,8 @@ var Cluster = function Cluster(_ref) {
       flexGrow = _ref.flexGrow,
       extraStyles = _ref.extraStyles,
       children = _ref.children,
+      _ref$innerWrapperAs = _ref.innerWrapperAs,
+      innerWrapperAs = _ref$innerWrapperAs === void 0 ? "div" : _ref$innerWrapperAs,
       rest = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React.createElement(ClusterWrapper, _extends({
@@ -6698,7 +6706,8 @@ var Cluster = function Cluster(_ref) {
     childGap: childGap,
     minHeight: minHeight,
     minWidth: minWidth,
-    $nowrap: nowrap
+    $nowrap: nowrap,
+    as: innerWrapperAs
   }, safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null))));
 };
 
@@ -12535,10 +12544,6 @@ var Reel = function Reel(_ref) {
   }), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
 };
 
-/*
-  For now I'm using string values, eventually shared components library will have its own constants file
-  for colors/values that should be used here instead
-*/
 var padding = {
   primary: "0.75rem 1.5rem",
   secondary: "0.75rem 1.5rem",
@@ -12554,18 +12559,18 @@ var padding = {
   whitePrimary: "1.125rem 0.75rem"
 };
 var color$1 = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#15749D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#15749D",
-  smallGhost: "#15749D",
-  ghost: "#15749D",
-  tertiary: "#15749D",
-  danger: "#FFFFFF",
-  dangerSecondary: "#D11053",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fontSizeVariant = {
   primary: "pS",
@@ -12624,116 +12629,116 @@ var minWidth = {
   whitePrimary: "130px"
 };
 var backgroundColor = {
-  primary: "#15749D",
-  secondary: "transparent",
-  back: "transparent",
-  smallPrimary: "#15749D",
-  smallSecondary: "transparent",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
-  danger: "#ED125F",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var border = {
-  primary: "2px solid #15749D",
-  secondary: "2px solid #15749D",
-  back: "2px solid #15749D",
-  smallPrimary: "2px solid #15749D",
-  smallSecondary: "2px solid #15749D",
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid #ED125F",
-  dangerSecondary: "2px solid #D11053",
-  whiteSecondary: "2px solid white",
-  whitePrimary: "2px solid transparent"
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverBackgroundColor = {
-  primary: "#116285",
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: "transparent",
-  smallPrimary: "#116285",
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var hoverBorderColor = {
-  primary: "#116285",
-  secondary: "#15749D",
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: "#116285",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var hoverColor = {
-  primary: "#FFFFFF",
-  secondary: "#116285",
-  back: "#116285",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#116285",
-  smallGhost: "#116285",
-  ghost: "#116285",
-  tertiary: "#116285",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var activeBackgroundColor = {
-  primary: "#0E506D",
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: "transparent",
-  smallPrimary: "#0E506D",
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 var activeBorderColor = {
-  primary: "#0E506D",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#0E506D",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 var activeColor = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#0E506D",
-  smallGhost: "#0E506D",
-  ghost: "#0E506D",
-  tertiary: "#0E506D",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 var fallbackValues$1 = {
   padding: padding,
@@ -46548,6 +46553,7 @@ var PrevNextPlaceholder = function PrevNextPlaceholder(_ref) {
 
 var PrevNextButton = function PrevNextButton(_ref2) {
   var action = _ref2.action,
+      ariaLabel = _ref2.ariaLabel,
       arrowColor = _ref2.arrowColor,
       borderRadius = _ref2.borderRadius,
       buttonHeight = _ref2.buttonHeight,
@@ -46557,12 +46563,14 @@ var PrevNextButton = function PrevNextButton(_ref2) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minHeight: buttonHeight,
-    extraStyles: "max-height: ".concat(buttonHeight, ";")
+    extraStyles: "max-height: ".concat(buttonHeight, ";"),
+    as: "li"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     action: action,
     contentOverride: true,
     dataQa: type,
-    extraStyles: "\n        background-color: ".concat(numberColor, ";\n        border-color: ").concat(numberColor, ";\n        border-radius: ").concat(borderRadius, ";\n        margin: 0;\n        max-height: ").concat(buttonHeight, ";\n        min-height: 100%;\n        min-width: ").concat(buttonWidth, ";\n        padding: 0;\n        &:focus {\n          outline: none\n        }\n      ")
+    "aria-label": ariaLabel,
+    extraStyles: "\n        background-color: ".concat(numberColor, ";\n        border-color: ").concat(numberColor, ";\n        border-radius: ").concat(borderRadius, ";\n        margin: 0;\n        max-height: ").concat(buttonHeight, ";\n        min-height: 100%;\n        min-width: ").concat(buttonWidth, ";\n        padding: 0;\n      ")
   }, /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: type === "prev" && "transform: scaleX(-1)"
@@ -46640,18 +46648,25 @@ var Pagination = function Pagination(_ref3) {
       pageNext = _ref3.pageNext,
       pagePrevious = _ref3.pagePrevious,
       setCurrentPage = _ref3.setCurrentPage,
+      ariaLabel = _ref3.ariaLabel,
       themeValues = _ref3.themeValues;
 
   var _useContext = useContext(ThemeContext),
       isMobile = _useContext.isMobile;
 
-  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    &:hover, &:focus {\n      text-decoration: none;\n      > * > span {\n        text-decoration: none;\n      }\n    }\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n    &:focus {\n      outline: none\n    }\n  ");
+  var extraStyles = "\n    min-width: ".concat(buttonWidth, "; min-height: 100%; padding: 0;\n    border-radius: ").concat(borderRadius, ";\n    &:hover, &:focus {\n      text-decoration: none;\n      > * > span {\n        text-decoration: none;\n      }\n    }\n    > * > span {\n      color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, "\n    }\n    margin: 0;\n    &:hover {\n        background-color: ").concat(themeValues.hoverBackgroundColor, "\n    }\n  ");
   var extraDisabledStyles = "\n    border: ".concat(activeBorderWidth, " solid ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor, ";\n    color: ").concat(numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.activeColor, ";\n    background-color: ").concat(themeValues.activeBackgroundColor, ";\n    &:focus {\n      box-shadow: none;\n    }\n    &:hover {\n      background-color: initial;\n    }\n  ");
   return /*#__PURE__*/React.createElement(Cluster, {
     justify: "center",
-    childGap: childGap
+    childGap: childGap,
+    overflow: true,
+    as: "nav",
+    innerWrapperAs: "ul",
+    "aria-label": ariaLabel,
+    extraStyles: "> ul { padding: 0px; > li { list-style-type: none; } };"
   }, currentPage > 1 ? /*#__PURE__*/React.createElement(PrevNextButton, {
     action: pagePrevious,
+    ariaLabel: "Previous Page Button",
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
     buttonHeight: buttonHeight,
@@ -46673,13 +46688,16 @@ var Pagination = function Pagination(_ref3) {
   }, "".concat(currentPage, " of ").concat(pageCount)))) : getPagesPanel(currentPage, pageCount).map(function (item, index) {
     return item.isButton ? /*#__PURE__*/React.createElement(Box, {
       padding: "0",
-      extraStyles: "max-height: ".concat(buttonHeight, ";")
+      extraStyles: "max-height: ".concat(buttonHeight, ";"),
+      as: "li",
+      key: "pagination-button-".concat(item.index)
     }, /*#__PURE__*/React.createElement(ButtonWithAction, {
       variant: "ghost",
-      key: item.index,
       text: item.index,
       disabled: item.active,
       extraDisabledStyles: extraDisabledStyles,
+      "aria-current": item.active ? "page" : undefined,
+      "aria-label": "".concat(item.active ? "Current " : "", "Page ").concat(item.index, " Button"),
       action: !item.active ? function () {
         return setCurrentPage({
           pageNumber: item.index
@@ -46689,17 +46707,19 @@ var Pagination = function Pagination(_ref3) {
       extraStyles: extraStyles,
       dataQa: index
     }, item.index)) : /*#__PURE__*/React.createElement(Box, {
-      padding: "0 10px"
+      padding: "0 10px",
+      as: "li",
+      key: "pagination-elipsis-".concat(index)
     }, /*#__PURE__*/React.createElement(Cluster, {
       justify: "flex-end"
     }, /*#__PURE__*/React.createElement(Text$1, {
-      key: index,
       variant: "pXL",
       weight: fontWeight,
       color: numberColor !== null && numberColor !== void 0 ? numberColor : themeValues.numberColor
     }, "...")));
   }), currentPage < pageCount ? /*#__PURE__*/React.createElement(PrevNextButton, {
     action: pageNext,
+    ariaLabel: "Next Page Button",
     arrowColor: arrowColor !== null && arrowColor !== void 0 ? arrowColor : themeValues.arrowColor,
     borderRadius: borderRadius,
     buttonHeight: buttonHeight,