@thecb/components 5.6.5 → 5.6.9

package/dist/cb-components.umd.js

@@ -0,0 +1,81 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components'], factory) :
+  (global = global || self, factory(global['cb-components'] = {}, global.React, global.styled));
+}(this, (function (exports, React, styled) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  /*
+  Need to add a new color? Visit http://chir.ag/projects/name-that-color to generate a color name.
+
+  Name already taken? If you can't use the existing color, then use thesaurus.com to pick a similar name
+  to the one generated by name-that-color.
+  */
+  var PEWTER_GREY = "#DFE1E4";
+  var MARINER_BLUE = "#2E75D2";
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  height: 16px;\n  width: 16px;\n  background-color: ", ";\n  border-radius: 8px;\n"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  border: 1px solid\n    ", ";\n  border-radius: 12px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 10px;\n  min-width: 24px;\n  min-height: 24px;\n"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var defaultTheme = {
+    theme: {
+      accentColor: MARINER_BLUE,
+      inactiveColor: PEWTER_GREY
+    }
+  };
+  var RadioButtonBorder = styled.div(_templateObject(), function (_ref) {
+    var isSelected = _ref.isSelected,
+        theme = _ref.theme;
+    return isSelected ? theme.accentColor : theme.inactiveColor;
+  });
+  RadioButtonBorder.defaultProps = defaultTheme;
+  var RadioButtonCenter = styled.div(_templateObject2(), function (_ref2) {
+    var theme = _ref2.theme;
+    return theme.accentColor;
+  });
+  RadioButtonCenter.defaultProps = defaultTheme;
+
+  var RadioButton = function RadioButton(_ref3) {
+    var isSelected = _ref3.isSelected,
+        name = _ref3.name;
+    return React.createElement(RadioButtonBorder, {
+      isSelected: isSelected,
+      name: name
+    }, isSelected && React.createElement(RadioButtonCenter, null));
+  };
+
+  exports.RadioButton = RadioButton;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

package/dist/index.cjs.js

@@ -6115,6 +6115,16 @@ var checkDeniedCards = function checkDeniedCards(name) {
       return "";
   }
 };
+/*
+  An optional style for layout atoms that positions the atom completely off screen
+  This will *not* be visible or accessible to sighted users
+  Use to contain text content or a11y interactive content (skip links when not visible)
+  that is only for users of assistive technologies (screen readers)
+
+  Currently implemented on the Box atom via the srOnly prop
+*/
+
+var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
 
 var general = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6126,7 +6136,8 @@ var general = /*#__PURE__*/Object.freeze({
   generateClickHandler: generateClickHandler,
   checkCardBrand: checkCardBrand,
   displayCardBrand: displayCardBrand,
-  checkDeniedCards: checkDeniedCards
+  checkDeniedCards: checkDeniedCards,
+  screenReaderOnlyStyle: screenReaderOnlyStyle
 });
 
 var _excluded$1 = ["themeValues", "weight", "color", "extraStyles", "hoverStyles", "onClick", "onKeyPress", "as", "dataQa", "children"];
@@ -6269,10 +6280,13 @@ var BoxWrapper = styled__default(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "dataQa", "children"];
+var _excluded$3 = ["padding", "borderSize", "borderColor", "borderRadius", "boxShadow", "background", "color", "minHeight", "width", "minWidth", "maxWidth", "borderWidthOverride", "border", "textAlign", "hoverStyles", "activeStyles", "disabledStyles", "variant", "as", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onTouchEnd", "theme", "hiddenStyles", "extraStyles", "srOnly", "dataQa", "children"];
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
 */
 
 var Box = function Box(_ref) {
@@ -6309,6 +6323,8 @@ var Box = function Box(_ref) {
       theme = _ref.theme,
       hiddenStyles = _ref.hiddenStyles,
       extraStyles = _ref.extraStyles,
+      _ref$srOnly = _ref.srOnly,
+      srOnly = _ref$srOnly === void 0 ? false : _ref$srOnly,
       dataQa = _ref.dataQa,
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded$3);
@@ -6335,7 +6351,7 @@ var Box = function Box(_ref) {
     onClick: onClick,
     hiddenStyles: hiddenStyles,
     onKeyDown: onKeyDown,
-    extraStyles: extraStyles,
+    extraStyles: srOnly ? "".concat(screenReaderOnlyStyle).concat(extraStyles) : extraStyles,
     theme: theme,
     textAlign: textAlign,
     "data-qa": dataQa,
@@ -6401,17 +6417,17 @@ var ClusterWrapper = styled__default(function (_ref) {
   var overflow = _ref2.overflow;
   return overflow ? "visible" : "hidden";
 }, function (_ref3) {
-  var justifySelf = _ref3.justifySelf;
-  return justifySelf;
+  var $justifySelf = _ref3.$justifySelf;
+  return $justifySelf;
 }, function (_ref4) {
-  var alignSelf = _ref4.alignSelf;
-  return alignSelf;
+  var $alignSelf = _ref4.$alignSelf;
+  return $alignSelf;
 }, function (_ref5) {
-  var flexGrow = _ref5.flexGrow;
-  return flexGrow;
+  var $flexGrow = _ref5.$flexGrow;
+  return $flexGrow;
 }, function (_ref6) {
-  var extraStyles = _ref6.extraStyles;
-  return extraStyles;
+  var $extraStyles = _ref6.$extraStyles;
+  return $extraStyles;
 });
 var ClusterInnerWrapper = styled__default.div.withConfig({
   displayName: "Clusterstyled__ClusterInnerWrapper",
@@ -6468,10 +6484,10 @@ var Cluster = function Cluster(_ref) {
   return /*#__PURE__*/React__default.createElement(ClusterWrapper, _extends({
     overflow: overflow
   }, rest, {
-    justifySelf: justifySelf,
-    alignSelf: alignSelf,
-    flexGrow: flexGrow,
-    extraStyles: extraStyles
+    $justifySelf: justifySelf,
+    $alignSelf: alignSelf,
+    $flexGrow: flexGrow,
+    $extraStyles: extraStyles
   }), /*#__PURE__*/React__default.createElement(ClusterInnerWrapper, {
     justify: justify,
     align: align,
@@ -21063,8 +21079,8 @@ var InputField = styled__default.input.withConfig({
       themeValues = _ref.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
 }, function (_ref2) {
-  var customHeight = _ref2.customHeight;
-  return customHeight ? customHeight : "48px";
+  var $customHeight = _ref2.$customHeight;
+  return $customHeight ? $customHeight : "48px";
 }, FONT_WEIGHT_REGULAR, function (_ref3) {
   var themeValues = _ref3.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
@@ -21079,8 +21095,8 @@ var InputField = styled__default.input.withConfig({
   var disabled = _ref6.disabled;
   return disabled && styled.css(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
-  return styled.css(["", ""], extraStyles);
+  var $extraStyles = _ref7.$extraStyles;
+  return styled.css(["", ""], $extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
 var FormattedInputField = styled__default(function (_ref8) {
@@ -21098,8 +21114,8 @@ var FormattedInputField = styled__default(function (_ref8) {
       themeValues = _ref9.themeValues;
   return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
 }, function (_ref10) {
-  var customHeight = _ref10.customHeight;
-  return customHeight ? customHeight : "48px";
+  var $customHeight = _ref10.$customHeight;
+  return $customHeight ? $customHeight : "48px";
 }, FONT_WEIGHT_REGULAR, function (_ref11) {
   var themeValues = _ref11.themeValues;
   return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
@@ -21209,8 +21225,8 @@ var FormInput = function FormInput(_ref15) {
     showErrors: showErrors,
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
-    customHeight: customHeight,
-    extraStyles: extraStyles
+    $customHeight: customHeight,
+    $extraStyles: extraStyles
   }, props)) : /*#__PURE__*/React__default.createElement(InputField, _extends({
     "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
     onChange: function onChange(e) {
@@ -21225,8 +21241,8 @@ var FormInput = function FormInput(_ref15) {
     "data-qa": labelTextWhenNoError,
     themeValues: themeValues,
     background: background,
-    customHeight: customHeight,
-    extraStyles: extraStyles
+    $customHeight: customHeight,
+    $extraStyles: extraStyles
   }, props))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -33310,12 +33326,12 @@ const MATCHES_FIELD_ERROR$1 = "error/MATCHES_FIELD";
 const matchesField = createValidator(MATCHES_FIELD, MATCHES_FIELD_ERROR$1);
 validatorFns[MATCHES_FIELD] = (value, args, form) => {
   const dependentField = form[args[0]];
-  const dependentFieldValue = dependentField?.rawValue ?? "";
   if (dependentField === undefined) {
     throw new Error(
       `${args[0]} was passed to matchesField, but that field does not exist in the form`
     );
   }
+  const dependentFieldValue = dependentField.rawValue;
   return value === dependentFieldValue;
 };
 
@@ -41115,9 +41131,11 @@ var Tabs = function Tabs(_ref) {
     className: "tab-list"
   }, tabsDisplayMode == HORIZONTAL ? showHorozontal(tabsConfig, activeTab) : showVertical(tabsConfig, activeTab)), /*#__PURE__*/React__default.createElement(Box, {
     className: "tab-content"
-  }, /*#__PURE__*/React__default.createElement(Box, null, tabsConfig.tabs.map(function (tab) {
+  }, /*#__PURE__*/React__default.createElement(Box, null, tabsConfig.tabs.map(function (tab, idx) {
     if (tab.label !== activeTab) return undefined;
-    return tab.content;
+    return /*#__PURE__*/React__default.createElement(React.Fragment, {
+      key: idx
+    }, tab.content);
   }))));
 };
 
@@ -41444,6 +41462,119 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }))));
 };
 
+var DashboardIframe = styled__default.iframe.withConfig({
+  displayName: "PeriscopeDashboardIframestyled__DashboardIframe",
+  componentId: "sc-j0cucj-0"
+})(["border:none;box-shadow:0 0 5px 0 ", ";display:none;"], ALTO_GREY);
+
+/**
+ * Component: PeriscopeDashboardIframe
+ *
+ * Used for rendering Citybase's periscope reporting dashboards in iframes.
+ * Receives action props to trigger a request on mount for the iframe's url.
+ * Receives a string prop if/when we receive the url result.
+ * And receives action props to emit errors from failed iframe loading.
+ *
+ * The logic and api client methods to handle requests/response,
+ * store the url, etc. should be provided from the app consuming this library.
+ *
+ * If the url request is pending, render a spinner.
+ * If the url request failed, render a UI error state.
+ **/
+
+var DASHBOARD_SIZE_MESSAGE_TYPE = "dashboard_resize";
+var PERISCOPE_ORIGIN = "https://app.periscopedata.com";
+
+var isValidMessage = function isValidMessage(message) {
+  return message.isTrusted && message.origin === PERISCOPE_ORIGIN && message.data && message.data.event_type === DASHBOARD_SIZE_MESSAGE_TYPE;
+};
+
+var PeriscopeDashboardIframe = function PeriscopeDashboardIframe(_ref) {
+  var url = _ref.url,
+      requestDashboardUrl = _ref.requestDashboardUrl,
+      periscopeDataPending = _ref.periscopeDataPending,
+      periscopeDataSuccess = _ref.periscopeDataSuccess,
+      periscopeDataFailure = _ref.periscopeDataFailure,
+      periscopeDataRequestSuccess = _ref.periscopeDataRequestSuccess,
+      periscopeDataRequestFailure = _ref.periscopeDataRequestFailure;
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var time = {
+    timer: null
+  };
+  React.useEffect(function () {
+    time.timer = setTimeout(function () {
+      periscopeDataRequestFailure();
+    }, 10000);
+  }, []);
+
+  var Dashboard = function Dashboard(height) {
+    return function (url) {
+      return /*#__PURE__*/React__default.createElement(DashboardIframe, {
+        src: url,
+        width: "100%",
+        height: height,
+        "data-qa": "DashboardIframe",
+        onLoad: function onLoad() {
+          var iframe = document.querySelector("iframe");
+          iframe.style.display = "initial";
+        }
+      });
+    };
+  };
+
+  var validatePeriscope = function validatePeriscope(message) {
+    if (isValidMessage(message)) {
+      setHeight(message.data.dashboard_height + 100);
+      clearTimeout(time.timer);
+      periscopeDataRequestSuccess();
+    }
+  };
+
+  React.useLayoutEffect(function () {
+    window.addEventListener("message", validatePeriscope);
+    requestDashboardUrl();
+    return function () {
+      return window.removeEventListener("message", validatePeriscope);
+    };
+  }, [requestDashboardUrl]);
+  return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(BoxWithShadow$1, {
+    padding: "0",
+    minWidth: "100%",
+    minHeight: "592px",
+    variant: "baseStandard",
+    background: "#fff",
+    borderRadius: "4px",
+    extraStyles: "display: flex; justify-content: center; align-items: center; flex-direction: column;"
+  }, periscopeDataPending && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Cover, {
+    minHeight: "100%",
+    singleChild: true
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Spinner$2, {
+    size: "100"
+  }))), periscopeDataFailure && !periscopeDataSuccess && /*#__PURE__*/React__default.createElement(Box, {
+    padding: "64px"
+  }, /*#__PURE__*/React__default.createElement(Center, {
+    intrinsic: true
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0 0 2rem"
+  }, /*#__PURE__*/React__default.createElement(PeriscopeFailedIcon, null)), /*#__PURE__*/React__default.createElement(Heading$1, {
+    variant: "h3",
+    weight: "700"
+  }, "Something Went Wrong"), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "There was an issue trying to load the dashboard."), /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    variant: "p",
+    extraStyles: "text-align: center;"
+  }, "Your organization may not have a dashboard configured."))), !periscopeDataFailure && url && Dashboard(height)(url)));
+};
+
 var pageBackground = "#F6F6F9";
 var fallbackValues$H = {
   pageBackground: pageBackground
@@ -41822,6 +41953,7 @@ exports.PaymentMethodIcon = PaymentMethodIcon$1;
 exports.PaymentSearchIcon = PaymentSearchIcon;
 exports.PaymentsIconSmall = PaymentsIconSmall$1;
 exports.PendingIcon = PendingIcon;
+exports.PeriscopeDashboardIframe = PeriscopeDashboardIframe;
 exports.PeriscopeFailedIcon = PeriscopeFailedIcon;
 exports.PhoneForm = PhoneForm;
 exports.Placeholder = Placeholder$1;