@thecb/components 5.3.3-beta.0 → 5.4.4

package/dist/index.esm.js

@@ -12158,7 +12158,7 @@ var ReelStyled = styled.div.withConfig({
   return childWidth;
 });
 
-var _excluded$g = ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "children"];
+var _excluded$g = ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "useOrderedList", "useUnorderedList", "children"];
 
 var Reel = function Reel(_ref) {
   var _ref$childGap = _ref.childGap,
@@ -12173,16 +12173,22 @@ var Reel = function Reel(_ref) {
       justifyContent = _ref$justifyContent === void 0 ? "flex-start" : _ref$justifyContent,
       _ref$disableScroll = _ref.disableScroll,
       disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll,
+      _ref$useOrderedList = _ref.useOrderedList,
+      useOrderedList = _ref$useOrderedList === void 0 ? false : _ref$useOrderedList,
+      _ref$useUnorderedList = _ref.useUnorderedList,
+      useUnorderedList = _ref$useUnorderedList === void 0 ? false : _ref$useUnorderedList,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$g);
 
+  var elementType = useOrderedList ? "ol" : useUnorderedList ? "ul" : "div";
   return /*#__PURE__*/React.createElement(ReelStyled, _extends({
     childGap: childGap,
     height: height,
     childWidth: childWidth,
     padding: padding,
     justifyContent: justifyContent,
-    disableScroll: disableScroll
+    disableScroll: disableScroll,
+    as: elementType
   }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
@@ -35180,6 +35186,8 @@ var fallbackValues$v = {
 };
 
 var CollapsibleSection = function CollapsibleSection(_ref) {
+  var _label$replaceAll;
+
   var isOpen = _ref.isOpen,
       toggleSection = _ref.toggleSection,
       themeValues = _ref.themeValues,
@@ -35198,7 +35206,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
       stackTitleContent = _ref.stackTitleContent,
       _ref$sectionGap = _ref.sectionGap,
-      sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap;
+      sectionGap = _ref$sectionGap === void 0 ? "0.5rem" : _ref$sectionGap,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 1 : _ref$index;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -35207,6 +35219,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   };
 
   var numChildren = typeof children === "Array" ? children.length : 1;
+  var label = name !== "" ? name : !customTitle ? title : "collapsible section";
+  var id = "".concat(label === null || label === void 0 ? void 0 : (_label$replaceAll = label.replaceAll(" ", "-")) === null || _label$replaceAll === void 0 ? void 0 : _label$replaceAll.toLowerCase(), "-").concat(index);
   var wrapper = {
     open: {
       height: openHeight,
@@ -35242,6 +35256,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     positionTransition: true
   }, stackTitle && /*#__PURE__*/React.createElement(Fragment, null, stackTitleContent), /*#__PURE__*/React.createElement(Stack, {
     childGap: isOpen && !isMobile ? sectionGap : "0rem"
+  }, /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    role: "heading",
+    "aria-label": label,
+    "aria-level": 3
   }, /*#__PURE__*/React.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
@@ -35251,7 +35270,11 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "cursor: pointer;",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    extraStyles: "z-index: 25;"
+    extraStyles: "z-index: 25;",
+    role: "button",
+    "aria-expanded": isOpen.toString(),
+    "aria-controls": id,
+    id: "".concat(id, "-button")
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -35266,7 +35289,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
   }, title), /*#__PURE__*/React.createElement(Motion, {
     variants: icon,
     extraStyles: "display: flex; align-items: center;"
-  }, /*#__PURE__*/React.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React.createElement(ChevronIcon$1, null))))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React.createElement(Motion, {
     padding: "0",
@@ -35276,7 +35299,10 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
+    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;",
+    id: "".concat(id, "-content"),
+    role: "region",
+    "aria-labelledby": "".concat(id, "-button")
   }, children))));
 };
 
@@ -35387,18 +35413,23 @@ var EditableList = function EditableList(_ref) {
       Modal = _ref.modal,
       modalProps = _ref.modalProps,
       autoPayMethods = _ref.autoPayMethods,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "p" : _ref$as,
       qaPrefix = _ref.qaPrefix;
+  var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React.createElement(Box, {
-    padding: "0rem 0rem 1.5rem 0rem"
+    padding: "0rem 0rem 1.5rem 0rem",
+    as: "section",
+    "aria-labelledby": "li"
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0rem"
   }, title !== "" && /*#__PURE__*/React.createElement(Box, {
     padding: "0rem 0rem 0.5rem 0rem"
-  }, /*#__PURE__*/React.createElement(Paragraph$1, {
-    variant: "pL",
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    as: as,
     weight: titleWeight,
     color: CHARADE_GREY,
-    extraStyles: "letter-spacing: 0.29px;"
+    extraStyles: "letter-spacing: 0.29px; font-size: 1.125rem;"
   }, title)), /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
@@ -35443,7 +35474,8 @@ var EditableList = function EditableList(_ref) {
       action: function action() {
         return removeItem(item.id);
       },
-      extraStyles: "min-width: 0;"
+      extraStyles: "min-width: 0;",
+      "aria-label": "Remove ".concat(itemName, " ").concat(title)
     })), canEdit && /*#__PURE__*/React.createElement(Box, {
       padding: "0 0.5rem",
       border: "2px solid transparent",
@@ -35456,14 +35488,16 @@ var EditableList = function EditableList(_ref) {
       action: function action() {
         return editItem(item.id);
       },
-      extraStyles: "min-width: 0;"
+      extraStyles: "min-width: 0;",
+      "aria-label": "Edit ".concat(itemName, " ").concat(title)
     }))));
   })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React.createElement(Placeholder$1, {
-    text: "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName),
+    text: addText,
     action: addItem,
-    dataQa: "Add " + qaPrefix
+    dataQa: "Add " + qaPrefix,
+    "aria-label": addText
   }))));
 };
 
@@ -35730,7 +35764,11 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
   var tabs = _ref.tabs,
       highlightIndex = _ref.highlightIndex,
       themeValues = _ref.themeValues,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      _ref$useOrderedList = _ref.useOrderedList,
+      useOrderedList = _ref$useOrderedList === void 0 ? true : _ref$useOrderedList,
+      _ref$useUnorderedList = _ref.useUnorderedList,
+      useUnorderedList = _ref$useUnorderedList === void 0 ? false : _ref$useUnorderedList;
   var itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
   var itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
   var boxesBefore = itemsAfterIndex > itemsBeforeIndex && isMobile ? itemsAfterIndex - itemsBeforeIndex : 0;
@@ -35749,14 +35787,17 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     childGap: "4.5rem",
     childWidth: "11rem",
     justifyContent: "space-evenly",
-    disableScroll: true
+    disableScroll: true,
+    useOrderedList: useOrderedList,
+    useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
     return /*#__PURE__*/React.createElement(Box, {
       key: t,
       borderSize: "3px",
       borderColor: highlightIndex == i ? themeValues.textColor : "transparent",
       borderWidthOverride: "0 0 3px 0",
-      extraStyles: "text-align: center;"
+      extraStyles: "text-align: center;",
+      as: "li"
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       textAlign: "center",
@@ -38909,6 +38950,17 @@ var fallbackValues$x = {
   backgroundColor: backgroundColor$6
 };
 
+/*
+  New (01/22) - updated <Module /> to use <Title /> atom
+  Because <Title /> decouples size from element, also gave <Module />
+  two new props: "as" and "fontSize"
+
+  When present, <Module /> will use those values to dictate element type and font size.
+
+  For backwards compatability, <Module /> still computes a themed font size and element type based on old
+  <Heading /> variants. If "fontSize" or "as" is undefined, <Module /> will use themed values.
+*/
+
 var Module = function Module(_ref) {
   var heading = _ref.heading,
       _ref$spacing = _ref.spacing,
@@ -38920,13 +38972,20 @@ var Module = function Module(_ref) {
       themeValues = _ref.themeValues,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      fontSize = _ref.fontSize,
+      as = _ref.as,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement(Fragment, null, heading && /*#__PURE__*/React.createElement(Heading$1, {
-    variant: variant === "small" ? "h6" : variant === "default" ? "h5" : "h2",
+  var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
+  var computedFontSize = fontSize || themedFontSize;
+  var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
+  var computedElemType = as || themedElemType;
+  return /*#__PURE__*/React.createElement(Fragment, null, heading && /*#__PURE__*/React.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
-    textAlign: themeValues.textAlign
+    textAlign: themeValues.textAlign,
+    as: computedElemType,
+    extraStyles: "font-size: ".concat(computedFontSize, ";")
   }, heading), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React.createElement(Box, {
@@ -39798,7 +39857,8 @@ var Collapsible = function Collapsible(_ref2) {
     toggleSection: function toggleSection() {
       return setIsOpen(!isOpen);
     },
-    customTitle: true
+    customTitle: true,
+    name: "Collapsed Payment Details"
   }, /*#__PURE__*/React.createElement(Motion, {
     variants: {
       open: {
@@ -39907,19 +39967,21 @@ var PaymentDetails = function PaymentDetails(_ref4) {
   }, /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center"
-  }, /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
-  }, titleText), /*#__PURE__*/React.createElement(Heading$1, {
-    variant: "h5",
-    weight: "700",
-    as: "h1"
-  }, displayCurrency(total)))) : /*#__PURE__*/React.createElement(Heading$1, {
+  }, /*#__PURE__*/React.createElement(Title$1, {
+    weight: FONT_WEIGHT_BOLD,
     as: "h1",
-    variant: "h3",
-    weight: "700",
-    margin: "1rem 0 0 0"
+    extraStyles: "font-size: 1.375rem;",
+    id: "payment-details-title"
+  }, titleText), /*#__PURE__*/React.createElement(Title$1, {
+    weight: FONT_WEIGHT_BOLD,
+    as: "p",
+    extraStyles: "font-size: 1.375rem;"
+  }, displayCurrency(total)))) : /*#__PURE__*/React.createElement(Title$1, {
+    as: "h1",
+    weight: FONT_WEIGHT_BOLD,
+    margin: "1rem 0 0 0",
+    extraStyles: "font-size: 1.75rem;",
+    id: "payment-details-title"
   }, titleText);
   return isCollapsible ? /*#__PURE__*/React.createElement(Collapsible, {
     title: title,
@@ -41169,7 +41231,8 @@ var TermsAndConditionsModal = function TermsAndConditionsModal(_ref) {
     tabIndex: "0",
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
-    hoverStyles: themeValues.modalLinkHoverFocus
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    extraStyles: "display: inline-block; width: fit-content;"
   }, link));
 };