@splunk/react-ui 4.16.2 → 4.17.0

package/Tooltip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 201);
+/******/ 	return __webpack_require__(__webpack_require__.s = 209);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,28 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 11:
+/***/ 10:
 /***/ (function(module, exports) {
 
 module.exports = require("lodash/has");
 
 /***/ }),
 
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ }),
-
-/***/ 14:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
 
 /***/ }),
 
-/***/ 16:
+/***/ 14:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
@@ -136,7 +129,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 201:
+/***/ 209:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -155,7 +148,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/has"
-var has_ = __webpack_require__(11);
+var has_ = __webpack_require__(10);
 var has_default = /*#__PURE__*/__webpack_require__.n(has_);
 
 // EXTERNAL MODULE: external "lodash/throttle"
@@ -163,25 +156,25 @@ var throttle_ = __webpack_require__(31);
 var throttle_default = /*#__PURE__*/__webpack_require__.n(throttle_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(23);
+var Popover_ = __webpack_require__(21);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(16);
+var ScreenReaderContent_ = __webpack_require__(14);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(13);
+var id_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
 var i18n_ = __webpack_require__(4);
 
-// EXTERNAL MODULE: external "@splunk/react-icons/SVG"
-var SVG_ = __webpack_require__(32);
-var SVG_default = /*#__PURE__*/__webpack_require__.n(SVG_);
+// EXTERNAL MODULE: external "@splunk/react-icons/SVGEnterprise"
+var SVGEnterprise_ = __webpack_require__(32);
+var SVGEnterprise_default = /*#__PURE__*/__webpack_require__.n(SVGEnterprise_);
 
 // CONCATENATED MODULE: ./src/Tooltip/InfoIcon.tsx
 function _extends() { _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 _extends.apply(this, arguments); }
@@ -197,7 +190,7 @@ function InfoCircle(props) {
       density = _useSplunkTheme.density;
 
   if (family === 'enterprise') {
-    return /*#__PURE__*/external_react_default.a.createElement(SVG_default.a, _extends({
+    return /*#__PURE__*/external_react_default.a.createElement(SVGEnterprise_default.a, _extends({
       screenReaderText: Object(i18n_["_"])('Info Circle'),
       viewBox: "0 0 24 24"
     }, props), /*#__PURE__*/external_react_default.a.createElement("path", {
@@ -228,7 +221,7 @@ var external_styled_components_ = __webpack_require__(3);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(14);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Tooltip/TooltipStyles.ts
@@ -283,10 +276,6 @@ var StyledButton = external_styled_components_default()(Clickable_default.a).wit
     compact: Object(external_styled_components_["css"])(["padding:6px;"])
   }
 }), themes_["variables"].focusShadow);
-var StyledHitArea = external_styled_components_default.a.svg.withConfig({
-  displayName: "TooltipStyles__StyledHitArea",
-  componentId: "sc-67fvgm-6"
-})(["position:absolute;pointer-events:none;path{pointer-events:auto;stroke-width:0;stroke:transparent;fill:transparent;}"]);
 
 // CONCATENATED MODULE: ./src/Tooltip/Tooltip.tsx
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
@@ -416,8 +405,6 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
 
       _this.setState({
         popoverEl: el
-      }, function () {
-        return _this.updateHitArea;
       });
     });
 
@@ -562,94 +549,6 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
       }, finalDelay);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "updateHitArea", function () {
-      var placementInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var placement = placementInfo.placement;
-
-      _this.setState(function (_ref) {
-        var anchorEl = _ref.anchorEl,
-            popoverEl = _ref.popoverEl,
-            statePopoverPlacement = _ref.popoverPlacement;
-        var popoverPlacement = placement != null ? placement : statePopoverPlacement;
-
-        if (anchorEl != null && popoverEl != null && popoverPlacement != null) {
-          var anchorRect = anchorEl.getBoundingClientRect();
-          var menuRect = popoverEl.getBoundingClientRect();
-
-          if (popoverPlacement === 'above' || popoverPlacement === 'below') {
-            var anchorLeftEdge = anchorRect.x - menuRect.x;
-            var verticalStart = anchorRect.height;
-            var verticalEnd = 0;
-
-            if (popoverPlacement === 'above') {
-              verticalStart = 0;
-              verticalEnd = anchorRect.height;
-            }
-
-            var menuStart = "0 ".concat(verticalStart);
-            var menuEnd = "".concat(menuRect.width, " ").concat(verticalStart);
-            var anchorStartNear = "".concat(anchorLeftEdge, " ").concat(verticalStart);
-            var anchorStartFar = "".concat(anchorLeftEdge, " ").concat(verticalEnd);
-            var anchorEndNear = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalStart);
-            var anchorEndFar = "".concat(anchorLeftEdge + anchorRect.width, " ").concat(verticalEnd);
-            var hitAreaPath = "\n                        M ".concat(menuStart, "\n                        S ").concat(anchorStartNear, " , ").concat(anchorStartFar, "\n                        L ").concat(anchorStartNear, "\n                        L ").concat(anchorEndNear, "\n                        L ").concat(anchorEndFar, "\n                        S ").concat(anchorEndNear, " , ").concat(menuEnd, "\n                    ");
-            return {
-              popoverPlacement: popoverPlacement,
-              hitAreaPath: hitAreaPath,
-              hitAreaStyle: {
-                left: menuRect.left - anchorRect.left,
-                top: 0,
-                width: menuRect.width,
-                height: anchorRect.height
-              }
-            };
-          }
-
-          if (popoverPlacement === 'left' || popoverPlacement === 'right') {
-            var anchorTopEdge = anchorRect.top - menuRect.top;
-            var horizontalStart = 0;
-            var horizontalEnd = anchorRect.width;
-
-            if (popoverPlacement === 'right') {
-              horizontalStart = anchorRect.width;
-              horizontalEnd = 0;
-            }
-
-            var _menuStart = "".concat(horizontalStart, " 0");
-
-            var _menuEnd = "".concat(horizontalStart, " ").concat(menuRect.height);
-
-            var _anchorStartNear = "".concat(horizontalStart, " ").concat(anchorTopEdge);
-
-            var _anchorStartFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge);
-
-            var _anchorEndNear = "".concat(horizontalStart, " ").concat(anchorTopEdge + anchorRect.height);
-
-            var _anchorEndFar = "".concat(horizontalEnd, " ").concat(anchorTopEdge + anchorRect.height);
-
-            var _hitAreaPath = "\n                        M ".concat(_menuStart, "\n                        S ").concat(_anchorStartNear, " , ").concat(_anchorStartFar, "\n                        L ").concat(_anchorStartNear, "\n                        L ").concat(_anchorEndNear, "\n                        L ").concat(_anchorEndFar, "\n                        S ").concat(_anchorEndNear, " , ").concat(_menuEnd, "\n                    ");
-
-            return {
-              popoverPlacement: popoverPlacement,
-              hitAreaPath: _hitAreaPath,
-              hitAreaStyle: {
-                left: 0,
-                top: menuRect.top - anchorRect.top,
-                width: anchorRect.width,
-                height: menuRect.height
-              }
-            };
-          }
-        }
-
-        return {
-          popoverPlacement: popoverPlacement,
-          hitAreaPath: null,
-          hitAreaStyle: {}
-        };
-      });
-    });
-
     _this.controlledExternally = has_default()(props, 'open');
     _this.popoverId = Object(id_["createDOMID"])('popover');
     _this.ariaId = Object(id_["createDOMID"])('aria-id');
@@ -658,10 +557,7 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
       open: false,
       popoverEl: null,
       popoverOuterEl: null,
-      popoverPlacement: null,
-      hitAreaEl: null,
-      hitAreaPath: null,
-      hitAreaStyle: {}
+      hitAreaEl: null
     };
     return _this;
   }
@@ -705,10 +601,7 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
           contentRelationship = _this$props3.contentRelationship,
           otherProps = _objectWithoutProperties(_this$props3, ["appearance", "children", "content", "defaultPlacement", "elementRef", "inline", "onRequestClose", "onRequestOpen", "splunkTheme", "contentRelationship"]);
 
-      var _this$state = this.state,
-          anchorEl = _this$state.anchorEl,
-          hitAreaPath = _this$state.hitAreaPath,
-          hitAreaStyle = _this$state.hitAreaStyle;
+      var anchorEl = this.state.anchorEl;
       var hasContent = !!content;
       var openRender = this.isOpen();
       var StyledComp = inline ? StyledInline : Styled;
@@ -753,13 +646,9 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
       }) : /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, /*#__PURE__*/external_react_default.a.createElement("span", {
         "aria-hidden": "true"
       }, "?"), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('More info')))), hasContent && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
+        "aria-hidden": "true",
         id: this.ariaId
-      }, content)), openRender && hitAreaPath != null && /*#__PURE__*/external_react_default.a.createElement(StyledHitArea, {
-        style: hitAreaStyle
-      }, /*#__PURE__*/external_react_default.a.createElement("path", {
-        d: hitAreaPath,
-        ref: this.handleHitAreaMount
-      })), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
+      }, content)), /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
         role: "tooltip",
         align: "center",
         anchor: anchorEl // override Popver's default animation to make it faster
@@ -774,9 +663,9 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
         defaultPlacement: defaultPlacement === 'theme' ? placement : defaultPlacement,
         id: this.popoverId,
         open: openRender,
-        onReposition: this.updateHitArea,
         onRequestClose: this.handlePopoverOnRequestClose,
         elementRef: this.handlePopoverMount,
+        hitAreaRef: this.handleHitAreaMount,
         outerRef: this.handlePopoverOuterMount
       }, /*#__PURE__*/external_react_default.a.createElement(StyledContent, {
         $isLabel: contentRelationship === 'label'
@@ -800,7 +689,7 @@ TooltipWithTheme.propTypes = Tooltip_Tooltip.propTypes;
 
 /***/ }),
 
-/***/ 23:
+/***/ 21:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");
@@ -824,7 +713,7 @@ module.exports = require("lodash/throttle");
 /***/ 32:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-icons/SVG");
+module.exports = require("@splunk/react-icons/SVGEnterprise");
 
 /***/ }),
 
@@ -833,6 +722,13 @@ module.exports = require("@splunk/react-icons/SVG");
 
 module.exports = require("@splunk/ui-utils/i18n");
 
+/***/ }),
+
+/***/ 8:
+/***/ (function(module, exports) {
+
+module.exports = require("@splunk/ui-utils/id");
+
 /***/ })
 
 /******/ });

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 229);
+/******/ 	return __webpack_require__(__webpack_require__.s = 234);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,13 +101,6 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 10:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/keys");
-
-/***/ }),
-
 /***/ 2:
 /***/ (function(module, exports) {
 
@@ -115,7 +108,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 229:
+/***/ 234:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -134,7 +127,7 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "lodash/keys"
-var keys_ = __webpack_require__(10);
+var keys_ = __webpack_require__(9);
 var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
 
 // EXTERNAL MODULE: external "lodash/omit"
@@ -142,16 +135,16 @@ var omit_ = __webpack_require__(5);
 var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
-var Animation_ = __webpack_require__(43);
+var Animation_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(35);
+var focus_ = __webpack_require__(29);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(40);
+var style_ = __webpack_require__(37);
 
 // EXTERNAL MODULE: external "react-spring"
-var external_react_spring_ = __webpack_require__(26);
+var external_react_spring_ = __webpack_require__(24);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -510,35 +503,35 @@ _defineProperty(TransitionOpen_TransitionOpen, "getDerivedStateFromProps", funct
 
 /***/ }),
 
-/***/ 26:
+/***/ 24:
 /***/ (function(module, exports) {
 
 module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 3:
+/***/ 29:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/ui-utils/focus");
 
 /***/ }),
 
-/***/ 35:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/focus");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 40:
+/***/ 37:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 43:
+/***/ 40:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Animation");
@@ -550,6 +543,13 @@ module.exports = require("@splunk/react-ui/Animation");
 
 module.exports = require("lodash/omit");
 
+/***/ }),
+
+/***/ 9:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/keys");
+
 /***/ })
 
 /******/ });

package/Typography.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 235);
+/******/ 	return __webpack_require__(__webpack_require__.s = 240);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 235:
+/***/ 240:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,12 +120,8 @@ var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_)
 var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
-// EXTERNAL MODULE: external "lodash/pick"
-var pick_ = __webpack_require__(34);
-var pick_default = /*#__PURE__*/__webpack_require__.n(pick_);
-
 // EXTERNAL MODULE: external "@splunk/themes/mixins"
-var mixins_ = __webpack_require__(80);
+var mixins_ = __webpack_require__(79);
 var mixins_default = /*#__PURE__*/__webpack_require__.n(mixins_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -143,7 +139,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var propTypes = {
   children: external_prop_types_default.a.node.isRequired,
   as: external_prop_types_default.a.string.isRequired,
@@ -156,15 +151,6 @@ var propTypes = {
   weight: external_prop_types_default.a.oneOf([300, 400, 500, 600, 700, 800, 900, 'light', 'normal', 'semiBold', 'bold', 'extraBold', 'heavy']),
   withReset: external_prop_types_default.a.bool
 };
-var paramsToExtract = {
-  family: true,
-  size: true,
-  lineHeight: true,
-  color: true,
-  weight: true,
-  withReset: true
-};
-var keys = Object.keys(paramsToExtract);
 var StyledTypography = external_styled_components_default.a.p.withConfig({
   displayName: "Typography__StyledTypography",
   componentId: "cgxs34-0"
@@ -173,6 +159,15 @@ var StyledTypography = external_styled_components_default.a.p.withConfig({
       $typographyParams = _ref.$typographyParams;
   return $variant ? mixins_default.a.typography($variant, $typographyParams) : mixins_default.a.typography($typographyParams);
 });
+var weightNumberToWeightVariable = {
+  300: 'light',
+  400: 'normal',
+  500: 'semiBold',
+  600: 'semiBold',
+  700: 'bold',
+  800: 'extraBold',
+  900: 'heavy'
+};
 /**
  * Typography renders text content with styling based on the Splunk Design System.
  */
@@ -181,11 +176,27 @@ function Typography(_ref2) {
   var children = _ref2.children,
       as = _ref2.as,
       elementRef = _ref2.elementRef,
-      otherProps = _objectWithoutProperties(_ref2, ["children", "as", "elementRef"]);
+      variant = _ref2.variant,
+      family = _ref2.family,
+      size = _ref2.size,
+      lineHeight = _ref2.lineHeight,
+      color = _ref2.color,
+      weight = _ref2.weight,
+      withReset = _ref2.withReset,
+      otherProps = _objectWithoutProperties(_ref2, ["children", "as", "elementRef", "variant", "family", "size", "lineHeight", "color", "weight", "withReset"]);
 
   // @docs-props-type TypographyPropsBase
-  var variant = otherProps.variant;
-  var typographyParams = pick_default()(otherProps, keys);
+  // TODO: Remove in next major version (SUI-5350)
+  if (false) {}
+
+  var typographyParams = {
+    family: family,
+    size: size,
+    lineHeight: lineHeight,
+    color: color,
+    withReset: withReset,
+    weight: typeof weight === 'number' ? weightNumberToWeightVariable[weight] : weight
+  };
   return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
     as: as,
     ref: elementRef,
@@ -209,14 +220,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 34:
-/***/ (function(module, exports) {
-
-module.exports = require("lodash/pick");
-
-/***/ }),
-
-/***/ 80:
+/***/ 79:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/themes/mixins");

package/WaitSpinner.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 230);
+/******/ 	return __webpack_require__(__webpack_require__.s = 235);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("react");
 
 /***/ }),
 
-/***/ 230:
+/***/ 235:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/docker-compose.yml

@@ -3,21 +3,31 @@ services:
   prisma-storybook:
     build: 
       context: .
-      dockerfile: Dockerfile.prisma.storybook
-    command: npx http-server storybook-static-visual --port 6007
+      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+      args:
+        port: 6007
+        storybookfolder: storybook-static-visual-prisma
+        workdir: /react-ui
+    command: npx http-server storybook-static-visual-prisma --port 6007
     ports:
       - "6007:6007"
   enterprise-storybook:
     build: 
       context: .
-      dockerfile: Dockerfile.enterprise.storybook
+      dockerfile: ../../infra/visual-tests/Dockerfile.storybook
+      args:
+        port: 6008
+        storybookfolder: storybook-static-visual-enterprise
+        workdir: /react-ui
     command: npx http-server storybook-static-visual-enterprise --port 6008
     ports:
       - "6008:6008"
   prisma-visual-test:
     build: 
       context: .
-      dockerfile: Dockerfile.visual
+      dockerfile: ../../infra/visual-tests/Dockerfile.visual
+      args:
+        workdir: /react-ui
     env_file:
       - ./.storybook-visual/config/.env.visual
     working_dir: /react-ui
@@ -26,11 +36,13 @@ services:
       - "./test-reports:/react-ui/test-reports"
     depends_on:
       - prisma-storybook
-    command: /bin/sh -c "npx wait-on http://prisma-storybook:6007 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} --url http://prisma-storybook:6007 --no-index-json"
+    command: /bin/sh -c "npx wait-on http://prisma-storybook:6007 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://prisma-storybook:6007 --no-index-json"
   enterprise-visual-test:
     build: 
       context: .
-      dockerfile: Dockerfile.visual
+      dockerfile: ../../infra/visual-tests/Dockerfile.visual
+      args:
+        workdir: /react-ui
     env_file:
       - ./.storybook-visual/config/.env.visual
     working_dir: /react-ui
@@ -39,4 +51,4 @@ services:
       - "./test-reports:/react-ui/test-reports"
     depends_on:
       - enterprise-storybook
-    command: /bin/sh -c "npx wait-on http://enterprise-storybook:6008 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} --url http://enterprise-storybook:6008 --no-index-json"
+    command: /bin/sh -c "npx wait-on http://enterprise-storybook:6008 && yarn cache clean && yarn test-storybook -c .storybook-visual --browsers $${STORYBOOK_BROWSER} $${STORYBOOK_UPDATE_SNAPSHOT} $${STORYBOOK_MAX_WORKERS} --url http://enterprise-storybook:6008 --no-index-json"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.16.2",
+  "version": "4.17.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -18,10 +18,10 @@
     "lint:ci": "yarn run eslint:ci && yarn run stylelint",
     "start": "cross-env NODE_ENV=development webpack --watch",
     "storybook": "start-storybook -p 6006",
-    "storybook:test": "./.storybook-visual/scripts/test.sh",
-    "storybook:test:all": "./.storybook-visual/scripts/test.sh --all",
-    "storybook:a11y": "./.storybook-visual/scripts/test.sh --a11y",
-    "storybook:a11y:all": "./.storybook-visual/scripts/test.sh --a11y --all",
+    "storybook:test": "node ../../infra/visual-tests/test.js",
+    "storybook:test:all": "yarn storybook:test --all",
+    "storybook:a11y": "yarn storybook:test --a11y",
+    "storybook:a11y:all": "yarn storybook:test --all --a11y",
     "storybook:build": "yarn build-storybook",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
@@ -38,9 +38,9 @@
     "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "3.3.1",
-    "@splunk/themes": "^0.15.0",
-    "@splunk/ui-utils": "^1.5.2",
+    "@splunk/react-icons": "^4.0.0",
+    "@splunk/themes": "^0.16.0",
+    "@splunk/ui-utils": "^1.6.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
     "@types/react": "^16.9.38",
@@ -67,12 +67,11 @@
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/cicd-tools": "^0.5.0",
-    "@splunk/docs-gen": "1.0.0-beta.2",
+    "@splunk/docs-gen": "1.0.0-beta.4",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "1.0.0-beta.2",
+    "@splunk/react-docs": "1.0.0-beta.4",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
-    "@splunk/wdio-functional-test-runner": "^10.1.0",
     "@splunk/webpack-configs": "^6.0.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",