@splunk/react-ui 4.14.0 → 4.16.0

package/Typography.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 186);
+/******/ 	return __webpack_require__(__webpack_require__.s = 235);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -94,7 +94,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 186:
+/***/ 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__(59);
+var mixins_ = __webpack_require__(80);
 var mixins_default = /*#__PURE__*/__webpack_require__.n(mixins_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -144,7 +152,7 @@ var propTypes = {
   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']),
+  color: external_prop_types_default.a.oneOf(['active', 'default', 'disabled', 'inverted', 'muted', 'inherit']),
   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
 };
@@ -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");
 
 /***/ }),
 
-/***/ 59:
+/***/ 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 = 181);
+/******/ 	return __webpack_require__(__webpack_require__.s = 230);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -101,7 +101,14 @@ module.exports = require("prop-types");
 
 /***/ }),
 
-/***/ 181:
+/***/ 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__(38);
+var AnimationToggle_ = __webpack_require__(48);
 
 // 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);
@@ -265,13 +272,6 @@ WaitSpinner.propTypes = propTypes;
 // CONCATENATED MODULE: ./src/WaitSpinner/index.ts
 
 
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
 /***/ }),
 
 /***/ 3:
@@ -281,17 +281,17 @@ module.exports = require("styled-components");
 
 /***/ }),
 
-/***/ 38:
+/***/ 4:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/react-ui/AnimationToggle");
+module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
 
-/***/ 5:
+/***/ 48:
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/ui-utils/i18n");
+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,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.14.0",
+  "version": "4.16.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -9,7 +9,8 @@
     "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",
@@ -37,9 +38,9 @@
     "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "^3.3.0",
-    "@splunk/themes": "^0.13.0",
-    "@splunk/ui-utils": "^1.5.1",
+    "@splunk/react-icons": "^3.3.1",
+    "@splunk/themes": "^0.14.0",
+    "@splunk/ui-utils": "^1.5.2",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
     "@types/react": "^16.9.38",
@@ -52,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"
   },
@@ -67,13 +68,13 @@
     "@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.2",
     "@splunk/eslint-config": "^4.0.0",
-    "@splunk/react-docs": "^0.11.0",
+    "@splunk/react-docs": "1.0.0-beta.2",
     "@splunk/stylelint-config": "^4.0.0",
-    "@splunk/test-runner-utils": "^0.4.0",
+    "@splunk/test-runner-utils": "^0.4.1",
     "@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",
@@ -100,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",
@@ -141,7 +143,6 @@
     "stylelint": "^13.0.0",
     "ts-loader": "^6.2.1",
     "typescript": "^4.0.5",
-    "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",

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,24 +19,28 @@ module.exports = {
         '^.+\\.examples\\.[jt]sx?$': '@storybook/test-runner/playwright/transform',
         '^.+\\.tsx?$': 'babel-jest',
     },
-    snapshotResolver: '<rootDir>/.storybook-visual/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_A11Y === 'false' ? 'visual' : 'a11y'
-                }/${process.env.STORYBOOK_TEST_BROWSER}-${process.env.STORYBOOK_THEME_FAMILY}`,
+                }/${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_TEST_BROWSER} ${
-                    process.env.STORYBOOK_THEME_FAMILY
+                } 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_TEST_BROWSER} ${
-                    process.env.STORYBOOK_THEME_FAMILY
+                } Test Report - ${process.env.STORYBOOK_THEME_FAMILY}${
+                    process.env.JOB_BROWSER ? `-${process.env.JOB_BROWSER}` : ''
                 }`,
                 hidePending: true,
                 resultHtml:

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/Button.d.ts

@@ -12,7 +12,7 @@ interface ButtonPropsBase {
     /** Returns a value on click. Use when composing or testing. */
     action?: string;
     /** Changes the style of the button.
-     * @themeNotes Enterprise themes support the following appearances:`default`, `primary`, `secondary`, and `pill`. Prisma themes support the `default`, `primary`, `secondary`, `destructive`, `toggle` and `flat` appearances.
+     * @themeNotes Enterprise themes support the following appearances:`default`, `primary`, `secondary`, `destructive` and `pill`. Prisma themes support the `default`, `primary`, `secondary`, `destructive`, `toggle` and `flat` appearances.
      */
     appearance?: 'default' | 'secondary' | 'primary' | 'destructive' | 'pill' | 'toggle' | 'flat';
     /** Removes the right border and border-radius of the button so you can
@@ -29,7 +29,9 @@ interface ButtonPropsBase {
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /** Turns the button red. If you use this prop, apply other error
      * indicators, such as an error message, to meet accessibility
-     * requirements. */
+     * requirements.
+     * @deprecated
+     * */
     error?: boolean;
     /** Applies the text that displays on the button. */
     label?: React.ReactNode;
@@ -68,6 +70,7 @@ declare class Button extends Component<ButtonProps> {
     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 [legacyRefMode]: boolean;
+    constructor(props: Readonly<ButtonProps>);
     private handleClick;
     private handleMount;
     /**

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

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

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;