@splunk/react-ui 4.3.0 → 4.5.0

package/StepBar.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 113);
+/******/ 	return __webpack_require__(__webpack_require__.s = 117);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 113:
+/***/ 117:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -142,7 +142,7 @@ var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(exte
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Error"
-var Error_ = __webpack_require__(63);
+var Error_ = __webpack_require__(66);
 var Error_default = /*#__PURE__*/__webpack_require__.n(Error_);
 
 // EXTERNAL MODULE: ./src/icons/ThemedIcon.tsx
@@ -179,7 +179,7 @@ function AlertFilled(props) {
   }, props));
 }
 // EXTERNAL MODULE: external "@splunk/react-icons/Success"
-var Success_ = __webpack_require__(64);
+var Success_ = __webpack_require__(67);
 var Success_default = /*#__PURE__*/__webpack_require__.n(Success_);
 
 // CONCATENATED MODULE: ./src/icons/Success.tsx
@@ -214,6 +214,8 @@ function SuccessFilled(props) {
 
 
 
+var primaryBackgroundColor = '#1A8929'; // SUI-2439 to meet WCAG AA compliance
+
 var iconWrapper = Object(external_styled_components_["css"])(["align-items:center;height:24px;width:24px;margin:0 14px 0 16px;"]);
 var StyledSuccess = external_styled_components_default()(SuccessFilled).withConfig({
   displayName: "StepStyles__StyledSuccess",
@@ -265,17 +267,24 @@ var StyledSvg = external_styled_components_default.a.svg.withConfig({
 var StyledPrevOrActiveRect = external_styled_components_default.a.rect.withConfig({
   displayName: "StepStyles__StyledPrevOrActiveRect",
   componentId: "sc-756fxp-4"
-})(["fill:", ";"], themes_["variables"].interactiveColorPrimary);
+})(["fill:", ";"], primaryBackgroundColor);
 var StyledPrevOrActiveCircle = StyledPrevOrActiveRect.withComponent('circle');
 var StyledGray = external_styled_components_default.a.rect.withConfig({
   displayName: "StepStyles__StyledGray",
   componentId: "sc-756fxp-5"
-})(["fill:", ";"], themes_["variables"].textDisabledColor);
+})(["fill:", ";"], themes_["variables"].gray60);
 var StyledNext = external_styled_components_default.a.circle.withConfig({
   displayName: "StepStyles__StyledNext",
   componentId: "sc-756fxp-6"
-})(["stroke:", ";stroke-width:3px;fill:", ";"], themes_["variables"].textDisabledColor, themes_["variables"].backgroundColor);
+})(["stroke:", ";stroke-width:3px;fill:", ";"], themes_["variables"].gray60, themes_["variables"].backgroundColor);
+
+// CONCATENATED MODULE: ./src/StepBar/StepBarContext.tsx
 
+var StepBarContext = /*#__PURE__*/Object(external_react_["createContext"])({
+  activeStepId: 0
+});
+StepBarContext.displayName = 'StepBar';
+/* harmony default export */ var StepBar_StepBarContext = (StepBarContext);
 // CONCATENATED MODULE: ./src/StepBar/Step.tsx
 function Step_extends() { Step_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return Step_extends.apply(this, arguments); }
 
@@ -287,14 +296,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
+
 var propTypes = {
   children: external_prop_types_default.a.node,
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   error: external_prop_types_default.a.bool,
-  idCounter: external_prop_types_default.a.string,
-  isFirst: external_prop_types_default.a.bool,
-  isLast: external_prop_types_default.a.bool,
-  status: external_prop_types_default.a.oneOf(['prev', 'active', 'next']),
   stepId: external_prop_types_default.a.any
 };
 
@@ -303,20 +309,35 @@ function Step(_ref) {
       elementRef = _ref.elementRef,
       _ref$error = _ref.error,
       error = _ref$error === void 0 ? false : _ref$error,
-      idCounter = _ref.idCounter,
-      _ref$isFirst = _ref.isFirst,
-      isFirst = _ref$isFirst === void 0 ? false : _ref$isFirst,
-      _ref$isLast = _ref.isLast,
-      isLast = _ref$isLast === void 0 ? false : _ref$isLast,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? 'next' : _ref$status,
       stepId = _ref.stepId,
-      otherProps = _objectWithoutProperties(_ref, ["children", "elementRef", "error", "idCounter", "isFirst", "isLast", "status", "stepId"]);
+      otherProps = _objectWithoutProperties(_ref, ["children", "elementRef", "error", "stepId"]);
 
   // @docs-props-type StepPropsBase
+  var _useContext = Object(external_react_["useContext"])(StepBarContext),
+      activeStepIdContext = _useContext.activeStepId,
+      idCounterContext = _useContext.idCounter,
+      lastChildIndexContext = _useContext.lastChildIndex;
+
   var _useSplunkTheme = useSplunkTheme_default()(),
       family = _useSplunkTheme.family;
 
+  var status = 'next';
+  var active = activeStepIdContext === stepId;
+  var isFirst = stepId === 0;
+  var isLast = stepId === lastChildIndexContext;
+
+  if (stepId < activeStepIdContext) {
+    status = 'prev';
+  }
+
+  if (active && !error) {
+    status = 'active';
+  }
+
+  if (active && error) {
+    status = 'error';
+  }
+
   if (family === 'enterprise') {
     return /*#__PURE__*/external_react_default.a.createElement(Styled, Step_extends({
       $status: status,
@@ -368,7 +389,7 @@ function Step(_ref) {
     "data-test-status": status,
     "data-test": "step",
     "data-test-step-id": stepId,
-    $idCounter: idCounter,
+    $idCounter: idCounterContext,
     ref: elementRef
   }, otherProps), status === 'prev' && /*#__PURE__*/external_react_default.a.createElement(StyledSuccess, null), status === 'error' && /*#__PURE__*/external_react_default.a.createElement(StyledAlert, null), children);
 }
@@ -403,6 +424,7 @@ function StepBar_objectWithoutPropertiesLoose(source, excluded) { if (source ==
 
 
 
+
 var StepBar_propTypes = {
   activeStepId: external_prop_types_default.a.any.isRequired,
   children: external_prop_types_default.a.node,
@@ -423,44 +445,20 @@ function StepBar(_ref) {
       idCounter = _useRef.current;
 
   var activeIndex = 0;
-  var foundActive = false;
   var validChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]);
   var lastChildIndex = validChildren.length - 1;
   var clonedChildren = validChildren.map(function (child, idx) {
     var stepId = child.props.stepId || idx;
     var error = child.props.error;
-    var active = activeStepId === stepId;
-    var childProps = {
-      status: 'prev',
-      stepId: stepId,
-      idCounter: idCounter
-    };
-
-    if (foundActive) {
-      childProps.status = 'next';
-    }
-
-    if (active && !error) {
-      childProps.status = 'active';
-      foundActive = true;
-      activeIndex = idx;
-    }
 
-    if (active && error) {
-      childProps.status = 'error';
-      foundActive = true;
+    if (stepId === activeStepId) {
       activeIndex = idx;
     }
 
-    if (idx === 0) {
-      childProps.isFirst = true;
-    }
-
-    if (idx === lastChildIndex) {
-      childProps.isLast = true;
-    }
-
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(child, childProps);
+    return /*#__PURE__*/Object(external_react_["cloneElement"])(child, {
+      stepId: stepId,
+      error: error
+    });
   });
   return /*#__PURE__*/external_react_default.a.createElement(StepBarStyles_Styled, StepBar_extends({
     $inline: inline,
@@ -473,7 +471,13 @@ function StepBar(_ref) {
     "aria-valuenow": activeIndex + 1,
     $idCounter: idCounter,
     ref: elementRef
-  }, otherProps), clonedChildren);
+  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StepBar_StepBarContext.Provider, {
+    value: {
+      idCounter: idCounter,
+      lastChildIndex: lastChildIndex,
+      activeStepId: activeStepId
+    }
+  }, clonedChildren));
 }
 
 StepBar.propTypes = StepBar_propTypes;
@@ -532,14 +536,14 @@ function SVG(props) {
 
 /***/ }),
 
-/***/ 63:
+/***/ 66:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Error");
 
 /***/ }),
 
-/***/ 64:
+/***/ 67:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Success");

package/Switch.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 134);
+/******/ 	return __webpack_require__(__webpack_require__.s = 141);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,14 +108,14 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 134:
+/***/ 141:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -138,7 +138,7 @@ var AnimationToggle_ = __webpack_require__(34);
 var AnimationToggle_default = /*#__PURE__*/__webpack_require__.n(AnimationToggle_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
+var ScreenReaderContent_ = __webpack_require__(15);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
@@ -148,7 +148,7 @@ var i18n_ = __webpack_require__(5);
 var id_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "@splunk/react-icons/Check"
-var Check_ = __webpack_require__(44);
+var Check_ = __webpack_require__(45);
 var Check_default = /*#__PURE__*/__webpack_require__.n(Check_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
@@ -196,7 +196,7 @@ var Box_ = __webpack_require__(8);
 var Box_default = /*#__PURE__*/__webpack_require__.n(Box_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Switch/SwitchStyles.ts
@@ -726,7 +726,7 @@ _defineProperty(Switch_Switch, "defaultProps", defaultProps);
 
 /***/ }),
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -754,7 +754,7 @@ module.exports = require("@splunk/react-ui/AnimationToggle");
 
 /***/ }),
 
-/***/ 44:
+/***/ 45:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-icons/Check");