@thecb/components 5.5.0 → 5.6.2

package/dist/index.esm.js

@@ -6036,6 +6036,9 @@ var displayCurrency = function displayCurrency(cents) {
 var convertCentsToMoneyInt = function convertCentsToMoneyInt(n) {
   return (n / 100).toFixed(0);
 };
+var formatPercent = function formatPercent(decimal) {
+  return Number.parseFloat(decimal).toFixed(2);
+};
 
 var createUniqueId = function createUniqueId() {
   return "_" + Math.random().toString(36).substr(2, 9);
@@ -6110,6 +6113,7 @@ var general = /*#__PURE__*/Object.freeze({
   noop: noop,
   displayCurrency: displayCurrency,
   convertCentsToMoneyInt: convertCentsToMoneyInt,
+  formatPercent: formatPercent,
   safeChildren: safeChildren,
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
@@ -12163,6 +12167,11 @@ var ReelStyled = styled.div.withConfig({
 });
 
 var _excluded$g = ["childGap", "height", "childWidth", "padding", "justifyContent", "disableScroll", "useOrderedList", "useUnorderedList", "children"];
+/*
+  Safari has a bug where it refuses to recognize <ul /> tags as lists when list-style: none is used
+  This affects the apple voice over (mainly used on iOS devices)
+  The solution is to explicitly include "role=List"
+*/
 
 var Reel = function Reel(_ref) {
   var _ref$childGap = _ref.childGap,
@@ -12195,7 +12204,9 @@ var Reel = function Reel(_ref) {
     as: elementType,
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
-  }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
+  }, rest, {
+    role: useOrderedList || useUnorderedList ? "list" : "section"
+  }), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
 /*
@@ -16999,7 +17010,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     return /*#__PURE__*/React.createElement(Fragment, {
       key: "breadcrumb-".concat(linkText)
     }, /*#__PURE__*/React.createElement(InternalLink, {
-      "aria-current": index === breadcrumbsList.length - 1 && "location",
+      "aria-current": index === breadcrumbsList.length - 1 ? "location" : "",
       to: linkDestination,
       active: isActive.toString(),
       color: themeValues.color,
@@ -17008,7 +17019,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       fontWeight: themeValues.fontWeight,
       margin: themeValues.margin,
       extraStyles: "\n                          text-transform: uppercase;\n                          ".concat(isActive.toString() === "true" && "pointer-events: none;\n                             color: ".concat(themeValues.activeBreadcrumbColor, ";\n                            "), "\n                          &:first-child {\n                            margin-left: 0;\n                          }\n                          &:active {\n                            color: ").concat(themeValues.activeColor, "; \n                          }")
-    }, linkText), index < breadcrumbsList.length - 1 && /*#__PURE__*/React.createElement(IconChevron, null));
+    }, linkText), index < breadcrumbsList.length - 1 ? /*#__PURE__*/React.createElement(IconChevron, null) : /*#__PURE__*/React.createElement(Fragment, null));
   })));
 };
 
@@ -18861,7 +18872,8 @@ var Card = function Card(_ref2) {
   }, heading), /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS"
   }, text)))), /*#__PURE__*/React.createElement(Box, {
-    padding: "0.5rem 1rem 1rem"
+    padding: "0.5rem 1rem 1rem",
+    extraStyles: "display: flex; justify-content: center;"
   }, /*#__PURE__*/React.createElement(ButtonWithAction, {
     variant: "smallPrimary",
     text: buttonText,
@@ -22152,7 +22164,7 @@ var ProcessingFee = function ProcessingFee(_ref) {
     hiddenStyles: hide
   }, /*#__PURE__*/React.createElement(Alert$1, {
     heading: "Processing Fee",
-    text: "There is a processing fee of ".concat(feeType === "FLAT" ? "".concat(displayCurrency(feeValue)) : "".concat(feeValue * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
+    text: "There is a processing fee of ".concat(feeType === "FLAT" ? "".concat(displayCurrency(feeValue)) : "".concat(formatPercent(feeValue * 100), "%"), " ").concat(ifElse(isNil, always(""), function (a) {
       return "with a minimum of ".concat(displayCurrency(a), " ");
     })(feeMinimum), "on all ").concat(feeName, " payments."),
     variant: "info",
@@ -35802,8 +35814,9 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       borderSize: "3px",
       borderColor: highlightIndex == i ? themeValues.textColor : "transparent",
       borderWidthOverride: "0 0 3px 0",
-      extraStyles: "text-align: center;",
-      as: "li"
+      extraStyles: "text-align: center; display: block;",
+      as: "li",
+      "aria-current": highlightIndex == i ? "step" : ""
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       textAlign: "center",
@@ -41407,7 +41420,8 @@ var WorkflowTile = function WorkflowTile(_ref) {
     text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "justify-content: center;"
   }))));
 };