@splunk/react-ui 4.9.0 → 4.12.0

package/Tooltip.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 149);
+/******/ 	return __webpack_require__(__webpack_require__.s = 146);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -108,7 +108,7 @@ module.exports = require("@splunk/ui-utils/id");
 
 /***/ }),
 
-/***/ 11:
+/***/ 12:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Clickable");
@@ -122,7 +122,7 @@ module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
 
-/***/ 149:
+/***/ 146:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -144,7 +144,7 @@ var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_pr
 var external_lodash_ = __webpack_require__(4);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(16);
+var Popover_ = __webpack_require__(17);
 var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -209,7 +209,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__(11);
+var Clickable_ = __webpack_require__(12);
 var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
 
 // CONCATENATED MODULE: ./src/Tooltip/TooltipStyles.ts
@@ -417,6 +417,12 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
+      _this.handleRequestClose(e, {
+        reason: 'toggleClick'
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
       _this.handleRequestOpen(e, {
         reason: 'focusToggle'
@@ -449,6 +455,10 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
           });
         }
 
+        _this.setState({
+          lastCloseReason: data.reason
+        });
+
         (_this$props$onRequest = (_this$props = _this.props).onRequestClose) === null || _this$props$onRequest === void 0 ? void 0 : _this$props$onRequest.call(_this$props, e, data);
       }, closeDelay);
     });
@@ -549,6 +559,7 @@ var Tooltip_Tooltip = /*#__PURE__*/function (_Component) {
         "data-test-popover-id": this.popoverId,
         ref: elementRef
       }, otherProps), /*#__PURE__*/external_react_default.a.createElement(StyledToggleComp, {
+        onClick: this.handleClick,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         ref: this.handleMount,
@@ -599,7 +610,7 @@ TooltipWithTheme.propTypes = Tooltip_Tooltip.propTypes;
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/Popover");

package/TransitionOpen.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 175);
+/******/ 	return __webpack_require__(__webpack_require__.s = 173);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 175:
+/***/ 173:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -129,7 +129,7 @@ var Animation_ = __webpack_require__(30);
 var focus_ = __webpack_require__(26);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/style"
-var style_ = __webpack_require__(40);
+var style_ = __webpack_require__(31);
 
 // EXTERNAL MODULE: external "react-spring"
 var external_react_spring_ = __webpack_require__(18);
@@ -234,6 +234,8 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "allowAnimationUpdates", true);
+
     _defineProperty(_assertThisInitialized(_this), "getValue", function (el) {
       var animation = _this.props.animation;
       var value = 0;
@@ -277,9 +279,11 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleRest", function () {
       var _this$props$onAnimati, _this$props;
 
-      _this.setState({
-        animating: false
-      });
+      if (_this.allowAnimationUpdates) {
+        _this.setState({
+          animating: false
+        });
+      }
 
       (_this$props$onAnimati = (_this$props = _this.props).onAnimationEnd) === null || _this$props$onAnimati === void 0 ? void 0 : _this$props$onAnimati.call(_this$props);
     });
@@ -420,6 +424,11 @@ var TransitionOpen_TransitionOpen = /*#__PURE__*/function (_Component) {
         }); // eslint-disable-line react/no-did-update-set-state
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.allowAnimationUpdates = false;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -454,6 +463,7 @@ _defineProperty(TransitionOpen_TransitionOpen, "getDerivedStateFromProps", funct
 // CONCATENATED MODULE: ./src/TransitionOpen/index.ts
 
 
+
 /***/ }),
 
 /***/ 18:
@@ -491,17 +501,17 @@ module.exports = require("@splunk/react-ui/Animation");
 
 /***/ }),
 
-/***/ 4:
+/***/ 31:
 /***/ (function(module, exports) {
 
-module.exports = require("lodash");
+module.exports = require("@splunk/ui-utils/style");
 
 /***/ }),
 
-/***/ 40:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/style");
+module.exports = require("lodash");
 
 /***/ })
 

package/Typography.js

@@ -0,0 +1,225 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 179);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 1:
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+
+/***/ 179:
+/***/ (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 */ Typography_Typography; });
+__webpack_require__.d(__webpack_exports__, "Typography", function() { return /* reexport */ Typography; });
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+
+// EXTERNAL MODULE: external "prop-types"
+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 "@splunk/themes/mixins"
+var mixins_ = __webpack_require__(56);
+var mixins_default = /*#__PURE__*/__webpack_require__.n(mixins_);
+
+// EXTERNAL MODULE: external "styled-components"
+var external_styled_components_ = __webpack_require__(3);
+var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
+
+// CONCATENATED MODULE: ./src/Typography/Typography.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); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+
+
+
+
+
+var propTypes = {
+  children: external_prop_types_default.a.node.isRequired,
+  as: external_prop_types_default.a.string.isRequired,
+  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
+  family: external_prop_types_default.a.oneOf(['sansSerif', 'monospace']),
+  variant: external_prop_types_default.a.oneOf(mixins_["typographyVariants"]),
+  size: external_prop_types_default.a.number,
+  lineHeight: external_prop_types_default.a.number,
+  color: external_prop_types_default.a.oneOf(['active', 'default', 'disabled', 'inverted', 'muted']),
+  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"
+})(["", ""], function (_ref) {
+  var $variant = _ref.$variant,
+      $typographyParams = _ref.$typographyParams;
+  return $variant ? mixins_default.a.typography($variant, $typographyParams) : mixins_default.a.typography($typographyParams);
+});
+/**
+ * Typography renders text content with styling based on the Splunk Design System.
+ */
+
+function Typography(_ref2) {
+  var children = _ref2.children,
+      as = _ref2.as,
+      elementRef = _ref2.elementRef,
+      otherProps = _objectWithoutProperties(_ref2, ["children", "as", "elementRef"]);
+
+  // @docs-props-type TypographyPropsBase
+  var variant = otherProps.variant;
+  var typographyParams = Object(external_lodash_["pick"])(otherProps, keys);
+  return /*#__PURE__*/external_react_default.a.createElement(StyledTypography, _extends({
+    as: as,
+    ref: elementRef,
+    "data-test": "typography",
+    $variant: variant,
+    $typographyParams: typographyParams
+  }, otherProps), children);
+}
+Typography.propTypes = propTypes;
+/* harmony default export */ var Typography_Typography = (Typography);
+// CONCATENATED MODULE: ./src/Typography/index.ts
+
+
+
+/***/ }),
+
+/***/ 2:
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+
+/***/ 3:
+/***/ (function(module, exports) {
+
+module.exports = require("styled-components");
+
+/***/ }),
+
+/***/ 4:
+/***/ (function(module, exports) {
+
+module.exports = require("lodash");
+
+/***/ }),
+
+/***/ 56:
+/***/ (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 = 176);
+/******/ 	return __webpack_require__(__webpack_require__.s = 174);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,7 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 176:
+/***/ 174:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -120,7 +120,7 @@ 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__(34);
+var AnimationToggle_ = __webpack_require__(36);
 
 // EXTERNAL MODULE: external "@splunk/themes"
 var themes_ = __webpack_require__(0);
@@ -281,7 +281,7 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 34:
+/***/ 36:
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/react-ui/AnimationToggle");

package/cypress.json

@@ -5,6 +5,7 @@
   "fixturesFolder": false,
   "video": false,
   "videoUploadOnPasses": false,
+  "chromeWebSecurity": false,
   "component": {
     "componentFolder": "src",
     "testFiles": "**/**/tests/*.spec.tsx"

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.9.0",
+  "version": "4.12.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",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
+    "docs:publish": "cicd-publish-docs docs --force",
     "docs:start": "webpack serve --config docs.gen.webpack.config.js",
     "eslint": "eslint src .storybook --ext \".ts,.tsx,.js,.jsx\"",
     "eslint:fix": "yarn run eslint --fix",
@@ -15,6 +16,8 @@
     "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",
     "stylelint": "stylelint \"src/**/*.{ts,tsx,js,jsx}\" --config stylelint.config.js",
     "test": "jest",
@@ -37,8 +40,8 @@
   },
   "dependencies": {
     "@splunk/react-icons": "^3.2.0",
-    "@splunk/themes": "^0.11.0",
-    "@splunk/ui-utils": "^1.4.0",
+    "@splunk/themes": "^0.13.0",
+    "@splunk/ui-utils": "^1.5.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
     "@types/react": "^16.9.38",
@@ -46,6 +49,7 @@
     "@types/react-resize-detector": "^3.1.1",
     "@types/styled-components": "^5.1.0",
     "@types/tinycolor2": "^1.4.2",
+    "axe-html-reporter": "^2.2.3",
     "commonmark": "^0.27.0",
     "commonmark-react-renderer": "^4.3.2",
     "decimal.js-light": "^2.2.3",
@@ -54,15 +58,17 @@
     "prop-types": "^15.6.2",
     "react-resize-detector": "^3.2.1",
     "react-sortable-hoc": "^1.11.0",
-    "react-spring": "^9.2.2",
+    "react-spring": "^9.2.4",
     "tinycolor2": "^1.4.1",
     "use-typed-event-listener": "^3.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.18.6",
     "@cypress/react": "^5.12.4",
     "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
+    "@splunk/cicd-tools": "^0.4.0",
     "@splunk/docs-gen": "^0.11.2",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/react-docs": "^0.11.0",
@@ -70,11 +76,13 @@
     "@splunk/test-runner-utils": "^0.4.0",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
     "@splunk/webpack-configs": "^5.0.0",
-    "@storybook/addon-a11y": "^6.3.0",
-    "@storybook/addon-essentials": "^6.3.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.3.0",
-    "@storybook/testing-react": "^1.2.3",
+    "@storybook/react": "^6.5.9",
+    "@storybook/test-runner": "^0.4.0",
+    "@storybook/testing-react": "^1.3.0",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
@@ -90,9 +98,11 @@
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
+    "axe-playwright": "^1.1.11",
     "babel-loader": "^8.0.4",
     "babel-plugin-istanbul": "^5.1.0",
     "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-transform-require-context": "^0.1.1",
     "chai": "^3.5.0",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
@@ -115,8 +125,11 @@
     "glob": "^7.1.6",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^25.1.0",
+    "jest-image-snapshot": "^5.1.0",
     "jest-junit": "^10.0.0",
+    "jest-stare": "^2.4.1",
     "mkdirp": "^0.5.1",
+    "playwright": "^1.23.3",
     "prismjs": "^1.25.0",
     "prompt": "^1.0.0",
     "raw-loader": "^0.5.1",

package/stubs-splunkui.d.ts

@@ -98,3 +98,16 @@ declare module '@splunk/wdio-functional-test-runner/testUtils' {
         options?: { click?: boolean }
     );
 }
+
+declare module '@splunk/react-docs/DocExample' {
+    function getDependencyVersions(
+        packageJSON: Record<string, unknown>,
+        additionalDependencies?: string[],
+        packageVersion?: string
+    ): Record<string, unknown>;
+}
+
+declare module '!!raw-loader!*' {
+    const contents: string;
+    export = contents;
+}

package/test-runner-jest.config.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+const { getJestConfig } = require('@storybook/test-runner');
+
+// if component is passed to storybook:test then test will run for only that component
+const testMatch = process.env.STORYBOOK_TEST_COMPONENT
+    ? [
+          `**/${process.env.STORYBOOK_TEST_COMPONENT}.stories.[jt]s?(x)`,
+          `**/${process.env.STORYBOOK_TEST_COMPONENT}.examples.[jt]s?(x)`,
+      ]
+    : ['**/*.stories.[jt]s?(x)', '**/*.examples.[jt]s?(x)'];
+
+module.exports = {
+    // The default configuration comes from @storybook/test-runner
+    ...getJestConfig(),
+    testMatch,
+    transform: {
+        '^.+\\.stories\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
+        '^.+\\.examples\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
+        '^.+\\.tsx?$': 'babel-jest',
+    },
+    snapshotResolver: '<rootDir>/.storybook/config/snapshotResolver.js',
+    reporters: [
+        'default',
+        [
+            '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}`,
+                hidePending: true,
+                resultHtml: `visual-report.html`,
+            },
+        ],
+    ],
+    globals: {
+        __DEV__: true,
+    },
+};

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

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

package/types/src/Button/Button.d.ts

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { legacyRefMode } from '@splunk/react-ui/Dropdown';
-import { ButtonGroupContext } from '../ButtonGroup/ButtonGroupContext';
 import { ClassComponentProps } from '../utils/types';
 /** @public */
 declare type ButtonClickHandler = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, data: {
@@ -68,7 +67,6 @@ declare class Button extends Component<ButtonProps> {
     private component;
     static propTypes: React.WeakValidationMap<ClassComponentProps<ButtonPropsBase, Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>, "button", never>> | React.WeakValidationMap<ClassComponentProps<ButtonPropsBase, Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>, "a", "href">>;
     static defaultProps: Required<Pick<ButtonPropsBase, "disabled" | "selected" | "appearance" | "inline" | "error" | "openInNewContext" | "append" | "prepend" | "isMenu">>;
-    static contextType: React.Context<ButtonGroupContext>;
     static [legacyRefMode]: boolean;
     private handleClick;
     private handleMount;

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

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

package/types/src/Card/Body.d.ts

@@ -7,16 +7,21 @@ interface BodyPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * When true renders the `Card.Body` with padding. When false renders the `Card.Body` without padding. Default to true.
+     */
+    inset?: boolean;
 }
 declare type BodyProps = ComponentProps<BodyPropsBase, 'div'>;
 /**
  * A styled container for `Card` body content.
  */
-declare function Body({ children, ...otherProps }: BodyProps): JSX.Element;
+declare function Body({ children, inset, ...otherProps }: BodyProps): JSX.Element;
 declare namespace Body {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
+        inset: PropTypes.Requireable<boolean>;
     };
 }
 export default Body;