@splunk/react-ui 4.5.3 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -22,6 +22,8 @@
     "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": "tsc --emitDeclarationOnly --declaration --declarationDir ./types --watch"
@@ -29,11 +31,11 @@
   "peerDependencies": {
     "react": "^16.8",
     "react-dom": "^16.8",
-    "styled-components": "^5.1"
+    "styled-components": "5.1.1"
   },
   "dependencies": {
-    "@splunk/react-icons": "^3.1.0",
-    "@splunk/themes": "^0.10.0",
+    "@splunk/react-icons": "^3.2.0",
+    "@splunk/themes": "^0.10.1",
     "@splunk/ui-utils": "^1.4.0",
     "@types/commonmark": "^0.27.0",
     "@types/lodash": "^4.14.156",
@@ -56,6 +58,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
+    "@cypress/react": "^5.12.4",
+    "@cypress/webpack-dev-server": "^1.8.2",
     "@splunk/babel-preset": "^3.0.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
@@ -66,6 +70,8 @@
     "@storybook/addon-essentials": "^6.3.0",
     "@storybook/csf": "^0.0.1",
     "@storybook/react": "^6.3.0",
+    "@storybook/testing-react": "^1.2.3",
+    "@testing-library/cypress": "^8.0.2",
     "@types/chai": "^3.5.2",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.1",
@@ -83,12 +89,14 @@
     "chai": "^3.5.0",
     "core-js": "^3.6.4",
     "cross-env": "^6.0.3",
+    "cypress": "^9.5.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-import-resolver-webpack": "^0.13.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
@@ -114,6 +122,7 @@
     "wdio-image-comparison-service": "^1.9.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^4.1.3"
   },
   "engines": {

package/types/src/Clickable/Clickable.d.ts

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { legacyRefMode } from '@splunk/react-ui/Dropdown';
 import { NavigationProviderClickHandler } from './NavigationProvider';
 import { ClassComponentProps } from '../utils/types';
-export declare const isInternalLink: (to: string) => boolean;
+export declare const isInternalLink: (to: string | undefined) => boolean;
 interface ClickablePropsBase {
     children?: React.ReactNode;
     /**
@@ -25,6 +25,13 @@ interface ClickablePropsBase {
      * Ignored if not in link mode.
      */
     openInNewContext?: boolean;
+    /**
+     * The text representation of the navigational link.
+     * This should be provided if child content is not a string.
+     *
+     * Ignored if not in link mode.
+     */
+    navigationLabel?: string;
     /**
      * A URL for a link. If set and not disabled, an `a` element is used instead
      * of a `button` element (link mode).
@@ -41,7 +48,10 @@ declare type ClickableProps = ClickableButtonProps | ClickableLinkProps;
  */
 declare class Clickable extends Component<ClickableProps> {
     private el;
-    static contextType: React.Context<NavigationProviderClickHandler | undefined>;
+    static contextType: React.Context<{
+        onClick?: NavigationProviderClickHandler | undefined;
+        prefix?: string | undefined;
+    }>;
     static propTypes: React.WeakValidationMap<ClassComponentProps<ClickablePropsBase, Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>, "button", never>> | React.WeakValidationMap<ClassComponentProps<ClickablePropsBase, Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>, "a", "href">>;
     static defaultProps: Required<Pick<ClickablePropsBase, "disabled" | "openInNewContext">>;
     static [legacyRefMode]: boolean;

package/types/src/Clickable/NavigationProvider.d.ts

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 declare type NavigationProviderClickHandler = (event: React.MouseEvent<HTMLAnchorElement>, data: {
     openInNewContext?: boolean;
     to: string;
+    label?: string;
 }) => void;
 interface NavigationProviderProps {
     children?: React.ReactNode;
@@ -12,17 +13,26 @@ interface NavigationProviderProps {
      * The function takes the event and an options argument with `to` and `openInNewContext`
      */
     onClick?: NavigationProviderClickHandler;
+    /**
+     * If set, all links that use the NavigationProvider's context will have this prepended to them.
+     */
+    prefix?: string;
 }
-declare const NavigationContext: React.Context<NavigationProviderClickHandler | undefined>;
+declare type NavigationContextValue = {
+    onClick?: NavigationProviderClickHandler;
+    prefix?: string;
+};
+declare const NavigationContext: React.Context<NavigationContextValue>;
 /**
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */
-declare function NavigationProvider({ children, onClick }: NavigationProviderProps): JSX.Element;
+declare function NavigationProvider({ children, onClick, prefix }: NavigationProviderProps): JSX.Element;
 declare namespace NavigationProvider {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        prefix: PropTypes.Requireable<string>;
     };
 }
 export { NavigationContext, NavigationProvider, NavigationProviderClickHandler };