@elastic/eui 71.0.0 → 72.0.0

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -1,14 +1,7 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["applyTime"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,177 +10,160 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { Component, Fragment } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
 import { EuiTitle } from '../../../title';
-import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { EuiText } from '../../../text';
+import { useEuiI18n } from '../../../i18n';
 import { EuiQuickSelect } from './quick_select';
 import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
 import { EuiRecentlyUsed } from './recently_used';
 import { EuiRefreshInterval } from '../../auto_refresh/refresh_interval';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
-  _inherits(EuiQuickSelectPopover, _Component);
-
-  var _super = _createSuper(EuiQuickSelectPopover);
-
-  function EuiQuickSelectPopover() {
-    var _this;
-
-    _classCallCheck(this, EuiQuickSelectPopover);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
-      _this.setState({
-        isOpen: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "togglePopover", function () {
-      _this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "applyTime", function (_ref) {
-      var start = _ref.start,
-          end = _ref.end,
-          quickSelect = _ref.quickSelect,
-          _ref$keepPopoverOpen = _ref.keepPopoverOpen,
-          keepPopoverOpen = _ref$keepPopoverOpen === void 0 ? false : _ref$keepPopoverOpen;
-
-      _this.props.applyTime({
-        start: start,
-        end: end
-      });
-
-      if (quickSelect) {
-        _this.setState({
-          prevQuickSelect: quickSelect
-        });
-      }
-
-      if (!keepPopoverOpen) {
-        _this.closePopover();
-      }
+export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
+  var _applyTime = _ref.applyTime,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevQuickSelect = _useState2[0],
+      setQuickSelect = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var closePopover = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  var togglePopover = useCallback(function () {
+    return setIsOpen(function (isOpen) {
+      return !isOpen;
     });
-
-    _defineProperty(_assertThisInitialized(_this), "renderDateTimeSections", function () {
-      var _this$props = _this.props,
-          commonlyUsedRanges = _this$props.commonlyUsedRanges,
-          dateFormat = _this$props.dateFormat,
-          end = _this$props.end,
-          recentlyUsedRanges = _this$props.recentlyUsedRanges,
-          start = _this$props.start,
-          timeOptions = _this$props.timeOptions;
-      var prevQuickSelect = _this.state.prevQuickSelect;
-      return ___EmotionJSX(Fragment, null, ___EmotionJSX(EuiQuickSelect, {
-        applyTime: _this.applyTime,
-        start: start,
-        end: end,
-        prevQuickSelect: prevQuickSelect,
-        timeOptions: timeOptions
-      }), commonlyUsedRanges.length > 0 && ___EmotionJSX(EuiHorizontalRule, {
-        margin: "s"
-      }), ___EmotionJSX(EuiCommonlyUsedTimeRanges, {
-        applyTime: _this.applyTime,
-        commonlyUsedRanges: commonlyUsedRanges
-      }), recentlyUsedRanges.length > 0 && ___EmotionJSX(EuiHorizontalRule, {
-        margin: "s"
-      }), ___EmotionJSX(EuiRecentlyUsed, {
-        applyTime: _this.applyTime,
-        commonlyUsedRanges: commonlyUsedRanges,
-        dateFormat: dateFormat,
-        recentlyUsedRanges: recentlyUsedRanges
-      }), _this.renderCustomQuickSelectPanels());
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderCustomQuickSelectPanels", function () {
-      var customQuickSelectPanels = _this.props.customQuickSelectPanels;
-
-      if (!customQuickSelectPanels) {
-        return null;
-      }
-
-      return customQuickSelectPanels.map(function (_ref2) {
-        var title = _ref2.title,
-            content = _ref2.content;
-        return ___EmotionJSX(Fragment, {
-          key: title
-        }, ___EmotionJSX(EuiHorizontalRule, {
-          margin: "s"
-        }), ___EmotionJSX(EuiTitle, {
-          size: "xxxs"
-        }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiText, {
-          size: "s",
-          className: "euiQuickSelectPopover__section"
-        }, /*#__PURE__*/React.cloneElement(content, {
-          applyTime: _this.applyTime
-        })));
-      });
+  }, []);
+  var applyTime = useCallback(function (_ref2) {
+    var start = _ref2.start,
+        end = _ref2.end,
+        quickSelect = _ref2.quickSelect,
+        _ref2$keepPopoverOpen = _ref2.keepPopoverOpen,
+        keepPopoverOpen = _ref2$keepPopoverOpen === void 0 ? false : _ref2$keepPopoverOpen;
+
+    _applyTime({
+      start: start,
+      end: end
     });
 
-    return _this;
-  }
-
-  _createClass(EuiQuickSelectPopover, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          applyRefreshInterval = _this$props2.applyRefreshInterval,
-          isDisabled = _this$props2.isDisabled,
-          isPaused = _this$props2.isPaused,
-          refreshInterval = _this$props2.refreshInterval;
-      var isOpen = this.state.isOpen;
-
-      var quickSelectButton = ___EmotionJSX(EuiButtonEmpty, {
-        className: "euiFormControlLayout__prepend",
-        textProps: {
-          className: 'euiQuickSelectPopover__buttonText'
-        },
-        onClick: this.togglePopover,
-        "aria-label": "Date quick select",
-        size: "xs",
-        iconType: "arrowDown",
-        iconSide: "right",
-        isDisabled: isDisabled,
-        "data-test-subj": "superDatePickerToggleQuickMenuButton"
-      }, ___EmotionJSX(EuiIcon, {
-        type: "calendar"
-      }));
+    if (quickSelect) {
+      setQuickSelect(quickSelect);
+    }
 
-      return ___EmotionJSX(EuiPopover, {
-        button: quickSelectButton,
-        isOpen: isOpen,
-        closePopover: this.closePopover,
-        anchorPosition: "downLeft",
-        anchorClassName: "euiQuickSelectPopover__anchor"
-      }, ___EmotionJSX("div", {
-        className: "euiQuickSelectPopover__content",
-        "data-test-subj": "superDatePickerQuickMenu"
-      }, this.renderDateTimeSections(), applyRefreshInterval && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiHorizontalRule, {
-        margin: "s"
-      }), ___EmotionJSX(EuiRefreshInterval, {
-        onRefreshChange: applyRefreshInterval,
-        isPaused: isPaused,
-        refreshInterval: refreshInterval
-      }))));
+    if (!keepPopoverOpen) {
+      closePopover();
+    }
+  }, [_applyTime, closePopover]);
+  var buttonlabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+
+  var quickSelectButton = ___EmotionJSX(EuiButtonEmpty, {
+    className: "euiFormControlLayout__prepend",
+    textProps: {
+      className: 'euiQuickSelectPopover__buttonText'
+    },
+    onClick: togglePopover,
+    "aria-label": buttonlabel,
+    title: buttonlabel,
+    size: "xs",
+    iconType: "arrowDown",
+    iconSide: "right",
+    isDisabled: props.isDisabled,
+    "data-test-subj": "superDatePickerToggleQuickMenuButton"
+  }, ___EmotionJSX(EuiIcon, {
+    type: "calendar"
+  }));
+
+  return ___EmotionJSX(EuiPopover, {
+    button: quickSelectButton,
+    isOpen: isOpen,
+    closePopover: closePopover,
+    anchorPosition: "downLeft",
+    anchorClassName: "euiQuickSelectPopover__anchor"
+  }, ___EmotionJSX(EuiQuickSelectPanels, _extends({}, props, {
+    applyTime: applyTime,
+    prevQuickSelect: prevQuickSelect
+  })));
+};
+export var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
+  var start = _ref3.start,
+      end = _ref3.end,
+      dateFormat = _ref3.dateFormat,
+      timeOptions = _ref3.timeOptions,
+      commonlyUsedRanges = _ref3.commonlyUsedRanges,
+      recentlyUsedRanges = _ref3.recentlyUsedRanges,
+      customQuickSelectPanels = _ref3.customQuickSelectPanels,
+      customQuickSelectRender = _ref3.customQuickSelectRender,
+      isPaused = _ref3.isPaused,
+      refreshInterval = _ref3.refreshInterval,
+      applyRefreshInterval = _ref3.applyRefreshInterval,
+      applyTime = _ref3.applyTime,
+      prevQuickSelect = _ref3.prevQuickSelect;
+
+  var quickSelectElement = ___EmotionJSX(EuiQuickSelect, {
+    applyTime: applyTime,
+    start: start,
+    end: end,
+    prevQuickSelect: prevQuickSelect,
+    timeOptions: timeOptions
+  });
+
+  var commonlyUsedElement = ___EmotionJSX(EuiCommonlyUsedTimeRanges, {
+    applyTime: applyTime,
+    commonlyUsedRanges: commonlyUsedRanges
+  });
+
+  var recentlyUsedElement = ___EmotionJSX(EuiRecentlyUsed, {
+    applyTime: applyTime,
+    commonlyUsedRanges: commonlyUsedRanges,
+    dateFormat: dateFormat,
+    recentlyUsedRanges: recentlyUsedRanges
+  });
+
+  var refreshIntervalElement = applyRefreshInterval && ___EmotionJSX(EuiRefreshInterval, {
+    onRefreshChange: applyRefreshInterval,
+    isPaused: isPaused,
+    refreshInterval: refreshInterval
+  });
+
+  var customQuickSelectPanelsElement = useMemo(function () {
+    if (!customQuickSelectPanels) {
+      return null;
     }
-  }]);
 
-  return EuiQuickSelectPopover;
-}(Component);
+    return customQuickSelectPanels.map(function (_ref4) {
+      var title = _ref4.title,
+          content = _ref4.content;
+      return ___EmotionJSX("div", {
+        key: title,
+        className: "euiQuickSelectPopover__panel"
+      }, ___EmotionJSX(EuiTitle, {
+        size: "xxxs"
+      }, ___EmotionJSX("span", null, title)), ___EmotionJSX(EuiText, {
+        size: "s",
+        className: "euiQuickSelectPopover__section"
+      }, /*#__PURE__*/React.cloneElement(content, {
+        applyTime: applyTime
+      })));
+    });
+  }, [customQuickSelectPanels, applyTime]);
+  return ___EmotionJSX("div", {
+    className: "euiQuickSelectPopover__content",
+    "data-test-subj": "superDatePickerQuickMenu"
+  }, customQuickSelectRender ? customQuickSelectRender({
+    quickSelect: quickSelectElement,
+    commonlyUsedRanges: commonlyUsedElement,
+    recentlyUsedRanges: recentlyUsedElement,
+    refreshInterval: refreshIntervalElement,
+    customQuickSelectPanels: customQuickSelectPanelsElement
+  }) : ___EmotionJSX(React.Fragment, null, quickSelectElement, commonlyUsedElement, recentlyUsedElement, refreshIntervalElement, customQuickSelectPanelsElement));
+};

package/optimize/es/components/date_picker/super_date_picker/quick_select_popover/recently_used.js

@@ -47,10 +47,13 @@ export var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
       dateFormat: dateFormat
     })));
   });
-  return ___EmotionJSX("fieldset", null, ___EmotionJSX(EuiTitle, {
+  return ___EmotionJSX("fieldset", {
+    className: "euiQuickSelectPopover__panel"
+  }, ___EmotionJSX(EuiTitle, {
     size: "xxxs"
   }, ___EmotionJSX("legend", {
-    id: legendId
+    id: legendId,
+    className: "euiQuickSelectPopover__panelTitle"
   }, ___EmotionJSX(EuiI18n, {
     token: "euiRecentlyUsed.legend",
     default: "Recently used date ranges"

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -384,6 +384,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           commonlyUsedRanges = _this$props5.commonlyUsedRanges,
           timeOptions = _this$props5.timeOptions,
           customQuickSelectPanels = _this$props5.customQuickSelectPanels,
+          customQuickSelectRender = _this$props5.customQuickSelectRender,
           dateFormat = _this$props5.dateFormat,
           end = _this$props5.end,
           isAutoRefreshOnly = _this$props5.isAutoRefreshOnly,
@@ -415,6 +416,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         applyTime: this.applyQuickTime,
         commonlyUsedRanges: commonlyUsedRanges,
         customQuickSelectPanels: customQuickSelectPanels,
+        customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
         isDisabled: isDisabled,

package/optimize/es/components/delay_hide/delay_hide.a11y.js

@@ -0,0 +1,96 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiDelayHide } from './delay_hide';
+import { EuiCheckbox, EuiFieldNumber, EuiFormRow } from '../form';
+import { EuiFlexItem } from '../flex';
+import { EuiLoadingSpinner } from '../loading';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var DelayHide = function DelayHide() {
+  var _useState = useState(1000),
+      _useState2 = _slicedToArray(_useState, 2),
+      minimumDuration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hide = _useState4[0],
+      setHide = _useState4[1];
+
+  var onChangeMinimumDuration = function onChangeMinimumDuration(event) {
+    setDuration(parseInt(event.target.value, 10));
+  };
+
+  var onChangeHide = function onChangeHide(event) {
+    setHide(event.target.checked);
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiCheckbox, {
+    id: "dummy-id",
+    checked: hide,
+    onChange: onChangeHide,
+    label: "Hide child"
+  })), ___EmotionJSX(EuiFormRow, {
+    label: "Minimum duration"
+  }, ___EmotionJSX(EuiFieldNumber, {
+    value: minimumDuration,
+    onChange: onChangeMinimumDuration
+  })), ___EmotionJSX(EuiFormRow, {
+    label: "Child to render"
+  }, ___EmotionJSX(EuiDelayHide, {
+    hide: hide,
+    minimumDuration: minimumDuration,
+    render: function render() {
+      return ___EmotionJSX(EuiLoadingSpinner, {
+        size: "m"
+      });
+    }
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(DelayHide, null));
+});
+describe('EuiHideRender', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is checked', function () {
+      cy.get('input.euiCheckbox__input').realClick();
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('not.exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is pressed', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('not.exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is toggled', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]').should('not.exist');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/delay_render/delay_render.a11y.js

@@ -0,0 +1,96 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiDelayRender } from './delay_render';
+import { EuiCheckbox, EuiFieldNumber, EuiFormRow } from '../form';
+import { EuiFlexItem } from '../flex';
+import { EuiLoadingSpinner } from '../loading';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var DelayRender = function DelayRender() {
+  var _useState = useState(1000),
+      _useState2 = _slicedToArray(_useState, 2),
+      minimumDelay = _useState2[0],
+      setDelay = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      render = _useState4[0],
+      setRender = _useState4[1];
+
+  var onChangeMinimumDelay = function onChangeMinimumDelay(event) {
+    setDelay(parseInt(event.target.value, 10));
+  };
+
+  var onChangeHide = function onChangeHide(event) {
+    setRender(event.target.checked);
+  };
+
+  var status = render ? 'showing' : 'hidden';
+  var label = "Child (".concat(status, ")");
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiCheckbox, {
+    id: "dummy-id",
+    checked: render,
+    onChange: onChangeHide,
+    label: "Show child"
+  })), ___EmotionJSX(EuiFormRow, {
+    label: "Minimum delay"
+  }, ___EmotionJSX(EuiFieldNumber, {
+    value: minimumDelay,
+    onChange: onChangeMinimumDelay
+  })), ___EmotionJSX(EuiFormRow, {
+    label: label
+  }, render ? ___EmotionJSX(EuiDelayRender, {
+    delay: minimumDelay
+  }, ___EmotionJSX(EuiLoadingSpinner, {
+    size: "m"
+  })) : ___EmotionJSX(React.Fragment, null))));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(DelayRender, null));
+});
+describe('EuiDelayRender', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the show child input is checked', function () {
+      cy.get('input.euiCheckbox__input').realClick();
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the show child input is pressed', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the show child input is toggled', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      });
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/empty_prompt/empty_prompt.a11y.js

@@ -0,0 +1,63 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiButton } from '../button';
+import { EuiEmptyPrompt } from './empty_prompt';
+import { EuiLink } from '../link';
+import { EuiTitle } from '../title';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EmptyPrompt = function EmptyPrompt(_ref) {
+  var addCaseSpy = _ref.addCaseSpy,
+      addLinkSpy = _ref.addLinkSpy;
+  return ___EmotionJSX(EuiEmptyPrompt, {
+    iconType: "logoSecurity",
+    title: ___EmotionJSX("h2", null, "Start adding cases"),
+    body: ___EmotionJSX("p", null, "Add a new case or change your filter settings."),
+    actions: ___EmotionJSX(EuiButton, {
+      color: "primary",
+      onClick: addCaseSpy,
+      fill: true
+    }, "Add a case"),
+    footer: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiTitle, {
+      size: "xxs"
+    }, ___EmotionJSX("h3", null, "Want to learn more?")), ___EmotionJSX(EuiLink, {
+      href: "#",
+      onClick: addLinkSpy
+    }, "Read the docs"))
+  });
+};
+
+beforeEach(function () {
+  var addCaseSpy = cy.spy().as('addCaseSpy');
+  var addLinkSpy = cy.spy().as('addLinkSpy');
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(EmptyPrompt, {
+    addCaseSpy: addCaseSpy,
+    addLinkSpy: addLinkSpy
+  }));
+});
+describe('EuiEmptyPrompt', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after clicking Add a case button', function () {
+      cy.get('button.euiButton').contains('Add a case').realClick();
+      cy.get('@addCaseSpy').should('have.been.called');
+      cy.checkAxe();
+    });
+    it('has zero violations after clicking Read the docs link', function () {
+      cy.get('a.euiLink').contains('Read the docs').realClick();
+      cy.get('@addLinkSpy').should('have.been.called');
+      cy.checkAxe();
+    });
+  });
+});