@splunk/react-ui 4.13.0 → 4.15.0

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 229);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,21 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 176:
+/***/ 10:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/keys");
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 229:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -119,20 +133,25 @@ 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"
-var external_lodash_ = __webpack_require__(4);
+// EXTERNAL MODULE: external "lodash/keys"
+var keys_ = __webpack_require__(10);
+var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
+
+// EXTERNAL MODULE: external "lodash/omit"
+var omit_ = __webpack_require__(5);
+var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Animation"
-var Animation_ = __webpack_require__(31);
+var Animation_ = __webpack_require__(43);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/focus"
-var focus_ = __webpack_require__(26);
+var focus_ = __webpack_require__(35);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(32);
+var style_ = __webpack_require__(40);
 
 // EXTERNAL MODULE: external "react-spring"
-var external_react_spring_ = __webpack_require__(19);
+var external_react_spring_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -195,6 +214,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 var propTypes = {
   animation: external_prop_types_default.a.oneOf(['slideFromTop', 'slideFromRight', 'slideFromBottom', 'slideFromLeft', 'expandHeight', 'expandWidth', 'none']),
   animateOnMount: external_prop_types_default.a.bool,
@@ -208,6 +228,7 @@ var propTypes = {
   outerClassName: external_prop_types_default.a.string,
   outerId: external_prop_types_default.a.string,
   outerStyle: external_prop_types_default.a.object,
+  renderChildrenWhenCollapsed: external_prop_types_default.a.bool,
   retainFocus: external_prop_types_default.a.bool,
   takeFocus: external_prop_types_default.a.bool
 };
@@ -217,6 +238,7 @@ var defaultProps = {
   innerStyle: {},
   open: false,
   outerStyle: {},
+  renderChildrenWhenCollapsed: false,
   retainFocus: false,
   takeFocus: false
 };
@@ -307,7 +329,8 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
           open = _this$props2.open,
           outerClassName = _this$props2.outerClassName,
           outerId = _this$props2.outerId,
-          outerStyle = _this$props2.outerStyle;
+          outerStyle = _this$props2.outerStyle,
+          renderChildrenWhenCollapsed = _this$props2.renderChildrenWhenCollapsed;
       var animating = _this.state.animating;
       var dimension;
 
@@ -330,6 +353,27 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
 
         }
       }
+
+      if (!open && !animating && renderChildrenWhenCollapsed) {
+        return /*#__PURE__*/external_react_default.a.createElement(Styled, {
+          $hideOverflow: false,
+          className: Object(style_["toClassName"])(className, outerClassName),
+          style: _objectSpread(_objectSpread({}, outerStyle), dimension && _defineProperty({}, dimension, value)),
+          id: outerId
+        }, /*#__PURE__*/external_react_default.a.createElement(StyledInner, _extends({
+          "data-test": "transition-open"
+        }, omit_default()(_this.props, keys_default()(TransitionOpen.propTypes)), {
+          ref: _this.handleMount,
+          tabIndex: -1,
+          className: innerClassName,
+          id: id,
+          onKeyDown: _this.props.retainFocus ? _this.handleTab : undefined,
+          style: _objectSpread(_objectSpread({}, innerStyle), {}, {
+            transform: transform,
+            display: 'none'
+          })
+        }), children));
+      }
       /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 
@@ -340,7 +384,7 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
         id: outerId
       }, (open || animating) && /*#__PURE__*/external_react_default.a.createElement(StyledInner, _extends({
         "data-test": "transition-open"
-      }, Object(external_lodash_["omit"])(_this.props, Object(external_lodash_["keys"])(TransitionOpen.propTypes)), {
+      }, omit_default()(_this.props, keys_default()(TransitionOpen.propTypes)), {
         ref: _this.handleMount,
         tabIndex: -1,
         className: innerClassName,
@@ -466,52 +510,45 @@ _defineProperty(TransitionOpen_TransitionOpen, "getDerivedStateFromProps", funct
 
 /***/ }),
 
-/***/ 19:
+/***/ 26:
 /***/ (function(module, exports) {
 
 module.exports = require("react-spring");
 
 /***/ }),
 
-/***/ 2:
+/***/ 3:
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 26:
+/***/ 35:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/focus");
 
 /***/ }),
 
-/***/ 3:
+/***/ 40:
 /***/ (function(module, exports) {
 
-module.exports = require("styled-components");
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 31:
+/***/ 43:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 32:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/style");
-
-/***/ }),
-
-/***/ 4:
+/***/ 5:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("lodash/omit");
 
 /***/ })
 

package/Typography.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Typography';
+export * from './types/src/Typography';

package/Typography.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 182);
+/******/ 	return __webpack_require__(__webpack_require__.s = 235);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 182:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 235:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -113,11 +120,12 @@ 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"
-var external_lodash_ = __webpack_require__(4);
+// 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__(57);
+var mixins_ = __webpack_require__(80);
 var mixins_default = /*#__PURE__*/__webpack_require__.n(mixins_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -177,7 +185,7 @@ function Typography(_ref2) {
 
   // @docs-props-type TypographyPropsBase
   var variant = otherProps.variant;
-  var typographyParams = Object(external_lodash_["pick"])(otherProps, keys);
+  var typographyParams = pick_default()(otherProps, keys);
   return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
     as: as,
     ref: elementRef,
@@ -192,13 +200,6 @@ Typography.propTypes = propTypes;
 
 
 
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
 /***/ }),
 
 /***/ 3:
@@ -208,14 +209,14 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 4:
+/***/ 34:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("lodash/pick");
 
 /***/ }),
 
-/***/ 57:
+/***/ 80:
 /***/ (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 = 177);
+/******/ 	return __webpack_require__(__webpack_require__.s = 230);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 177:
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 230:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,13 +127,13 @@ var external_prop_types_ = __webpack_require__(1);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/AnimationToggle"
-var AnimationToggle_ = __webpack_require__(36);
+var AnimationToggle_ = __webpack_require__(47);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(5);
+var i18n_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(3);
@@ -198,9 +205,6 @@ var StyledEnterpriseCircle = external_styled_components_default.a.circle.withCon
   enterprise: Object(external_styled_components_["css"])(["stroke-dasharray:34 19;"])
 }));
 
-// EXTERNAL MODULE: ./src/useIsSsr/index.ts + 1 modules
-var useIsSsr = __webpack_require__(80);
-
 // CONCATENATED MODULE: ./src/WaitSpinner/WaitSpinner.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); }
 
@@ -214,7 +218,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var propTypes = {
   elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
   screenReaderText: external_prop_types_default.a.string,
@@ -236,12 +239,6 @@ function WaitSpinner(_ref) {
       isPrisma = _useSplunkTheme.isPrisma;
 
   var viewBox = isPrisma ? '0 0 40 40' : '0 0 19 19';
-  var isSsr = Object(useIsSsr["default"])();
-
-  if (isSsr) {
-    return null;
-  }
-
   return /*#__PURE__*/external_react_default.a.createElement(Styled, _extends({
     "data-test": "wait-spinner"
   }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledSvg, {
@@ -275,13 +272,6 @@ WaitSpinner.propTypes = propTypes;
 // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
 
 
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
 /***/ }),
 
 /***/ 3:
@@ -291,73 +281,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 36:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/AnimationToggle");
-
-/***/ }),
-
-/***/ 5:
+/***/ 4:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 80:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_useIsSsr_useIsSsr; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2);
-
-// CONCATENATED MODULE: ./src/useIsSsr/useIsSsr.tsx
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-
-/**
- * This is a private component not intended for use outside @splunk/react-ui
- *
- * Checks if the application is server side rendered and returns boolean
- * to be used in components that utilize "window" or "document" objects.
- */
-
-var useIsSsr_useIsSsr = function useIsSsr() {
-  // we always start off in "SSR mode", to ensure our initial browser render
-  var _useState = Object(external_react_["useState"])(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      isSsr = _useState2[0],
-      setIsSsr = _useState2[1];
-
-  Object(external_react_["useEffect"])(function () {
-    // `useEffect` never runs on the server, so we must be on the client if
-    // we hit this block
-    setIsSsr(false);
-  }, []);
-  return isSsr;
-};
-
-/* harmony default export */ var src_useIsSsr_useIsSsr = (useIsSsr_useIsSsr);
-// CONCATENATED MODULE: ./src/useIsSsr/index.ts
-
+/***/ 47:
+/***/ (function(module, exports) {
 
+module.exports = require("@splunk/react-ui/AnimationToggle");
 
 /***/ })
 

package/docker-compose.yml

@@ -0,0 +1,42 @@
+version: "3.9"
+services:
+  prisma-storybook:
+    build: 
+      context: .
+      dockerfile: Dockerfile.prisma.storybook
+    command: npx http-server storybook-static-visual --port 6007
+    ports:
+      - "6007:6007"
+  enterprise-storybook:
+    build: 
+      context: .
+      dockerfile: Dockerfile.enterprise.storybook
+    command: npx http-server storybook-static-visual-enterprise --port 6008
+    ports:
+      - "6008:6008"
+  prisma-visual-test:
+    build: 
+      context: .
+      dockerfile: Dockerfile.visual
+    env_file:
+      - ./.storybook-visual/config/.env.visual
+    working_dir: /react-ui
+    volumes:
+      - "./src:/react-ui/src"
+      - "./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"
+  enterprise-visual-test:
+    build: 
+      context: .
+      dockerfile: Dockerfile.visual
+    env_file:
+      - ./.storybook-visual/config/.env.visual
+    working_dir: /react-ui
+    volumes:
+      - "./src:/react-ui/src"
+      - "./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"

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.13.0",
+  "version": "4.15.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack && yarn types:build && yarn build-storybook",
+    "build": "cross-env NODE_ENV=production webpack && yarn types:build",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
     "docs:publish": "cicd-publish-docs docs --force",
     "docs:publish:external": "cicd-publish-docs docs-external --force --suffix=public",
-    "docs:start": "webpack serve --config docs.gen.webpack.config.js",
+    "docs:start": "INTERNAL=true webpack serve --config docs.gen.webpack.config.js",
+    "docs:start:external": "webpack serve --config docs.gen.webpack.config.js",
     "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "eslint:ci": "yarn run eslint -f junit -o test-reports/lint-results.xml",
@@ -17,20 +18,17 @@
     "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/scripts/test.sh",
-    "storybook:test:all": "./.storybook/scripts/test.sh --all",
-    "storybook:build": "./.storybook/scripts/build.sh",
+    "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:build": "yarn build-storybook",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
-    "test:functional": "splunk-wdio-functional-test-runner functional.local.conf.js",
-    "test:functional:coverage": "cross-env NODE_ENV=test-coverage splunk-wdio-functional-test-runner functional.local.conf.js --coverage",
-    "test:functional:ci": "cross-env NODE_ENV=test-coverage splunk-wdio-functional-test-runner functional.ci.conf.js --coverage-maps",
-    "test:functional:cloud": "splunk-wdio-functional-test-runner functional.cloud.conf.js",
     "test:cypress": "yarn cypress open-ct",
     "test:cypress:ci": "yarn cypress run-ct",
-    "test:visual:cloud": "splunk-wdio-functional-test-runner functional.visual.conf.js",
     "types:build": "tsc --emitDeclarationOnly --declaration --declarationDir ./types && node ./scripts/pruneTypes.js",
     "types:start": "yarn types:build --watch"
   },
@@ -40,9 +38,9 @@
     "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "^3.2.0",
-    "@splunk/themes": "^0.13.0",
-    "@splunk/ui-utils": "^1.5.1",
+    "@splunk/react-icons": "^3.3.1",
+    "@splunk/themes": "^0.13.1",
+    "@splunk/ui-utils": "^1.5.2",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
     "@types/react": "^16.9.38",
@@ -55,11 +53,11 @@
     "commonmark-react-renderer": "^4.3.2",
     "decimal.js-light": "^2.2.3",
     "lodash": "^4.17.14",
-    "moment": "^2.22.2",
+    "moment": "^2.29.4",
     "prop-types": "^15.6.2",
     "react-resize-detector": "^3.2.1",
     "react-sortable-hoc": "^1.11.0",
-    "react-spring": "^9.2.4",
+    "react-spring": "9.2.4",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
   },
@@ -70,19 +68,19 @@
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/cicd-tools": "^0.5.0",
-    "@splunk/docs-gen": "^0.11.2",
+    "@splunk/docs-gen": "1.0.0-beta.1",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "^0.11.0",
+    "@splunk/react-docs": "1.0.0-beta.1",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/test-runner-utils": "^0.4.0",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
-    "@splunk/webpack-configs": "^5.0.0",
+    "@splunk/webpack-configs": "^6.0.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
     "@storybook/csf": "^0.0.1",
     "@storybook/react": "^6.5.9",
-    "@storybook/test-runner": "^0.4.0",
+    "@storybook/test-runner": "^0.9.0",
     "@storybook/testing-react": "^1.3.0",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.1",
@@ -103,6 +101,7 @@
     "babel-loader": "^8.0.4",
     "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-require-context": "^0.1.1",
     "chai": "^3.5.0",
     "core-js": "^3.6.4",
@@ -125,6 +124,7 @@
     "fs-readdir-recursive": "^1.0.0",
     "glob": "^7.1.6",
     "html-webpack-plugin": "^3.2.0",
+    "http-server": "^14.1.1",
     "jest": "^25.1.0",
     "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",

package/test-runner-jest.config.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-undef */
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { getJestConfig } = require('@storybook/test-runner');
 
 // if component is passed to storybook:test then test will run for only that component
@@ -18,17 +19,34 @@ module.exports = {
         '^.+\\.examples\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
         '^.+\\.tsx?$': 'babel-jest',
     },
-    snapshotResolver: '<rootDir>/.storybook/config/snapshotResolver.js',
+    // used for a11y DOM snapshots, currently disabled
+    // snapshotResolver: '<rootDir>/.storybook-visual/config/snapshotResolver.js',
     reporters: [
         'default',
+        'jest-junit',
         [
             'jest-stare',
             {
-                resultDir: `./test-reports/${process.env.STORYBOOK_TEST_BROWSER}-${process.env.STORYBOOK_THEME_FAMILY}`,
-                reportTitle: `Visual A11y Test Report - ${process.env.STORYBOOK_TEST_BROWSER} ${process.env.STORYBOOK_THEME_FAMILY}`,
-                reportHeadline: `Visual A11y Test Report - ${process.env.STORYBOOK_TEST_BROWSER} ${process.env.STORYBOOK_THEME_FAMILY}`,
+                resultDir: `./test-reports/${
+                    process.env.STORYBOOK_TEST_A11Y === 'false' ? 'visual' : 'a11y'
+                }/${process.env.STORYBOOK_THEME_FAMILY}${
+                    process.env.JOB_BROWSER ? `-${process.env.JOB_BROWSER}` : ''
+                }`,
+                reportTitle: `${
+                    process.env.STORYBOOK_TEST_A11Y === 'false' ? 'Visual' : 'A11y'
+                } Test Report - ${process.env.STORYBOOK_THEME_FAMILY}${
+                    process.env.JOB_BROWSER ? `-${process.env.JOB_BROWSER}` : ''
+                }`,
+                reportHeadline: `${
+                    process.env.STORYBOOK_TEST_A11Y === 'false' ? 'Visual' : 'A11y'
+                } Test Report - ${process.env.STORYBOOK_THEME_FAMILY}${
+                    process.env.JOB_BROWSER ? `-${process.env.JOB_BROWSER}` : ''
+                }`,
                 hidePending: true,
-                resultHtml: `visual-report.html`,
+                resultHtml:
+                    process.env.STORYBOOK_TEST_A11Y === 'false'
+                        ? 'visual-report.html'
+                        : 'a11y-report.html',
             },
         ],
     ],

package/types/src/Accordion/AccordionContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { CollapsiblePanelRequestCloseHandler, CollapsiblePanelRequestOpenHandler } from '@splunk/react-ui/CollapsiblePanel';
 export interface AccordionContext {
     onRequestClose?: CollapsiblePanelRequestCloseHandler;

package/types/src/Button/docs/examples/Selected.d.ts

@@ -1,2 +1,2 @@
-declare function Buttons(): JSX.Element;
-export default Buttons;
+declare function Selected(): JSX.Element;
+export default Selected;

package/types/src/ButtonGroup/ButtonGroupContext.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface ButtonGroupContext {
     inline?: boolean;
     role?: string;