@elastic/eui 74.0.0 → 74.1.0

package/optimize/lib/components/form/range/range.a11y.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dual_range = require("./dual_range");
+
+var _range = require("./range");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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"/>
+describe('Single EuiRange', function () {
+  var SingleRange = function SingleRange() {
+    var _useState = (0, _react.useState)('100'),
+        _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+        value = _useState2[0],
+        setValue = _useState2[1];
+
+    var onChange = function onChange(e) {
+      setValue(e.currentTarget.value);
+    };
+
+    return (0, _react2.jsx)(_range.EuiRange, {
+      id: "cy-range-single",
+      min: 100,
+      max: 200,
+      value: value,
+      onChange: onChange,
+      showLabels: true,
+      showRange: true,
+      showValue: true,
+      valuePrepend: "100 - ",
+      "aria-label": "An example of EuiRange with valuePrepend prop"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(SingleRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range slider is increased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowRight', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 110');
+      cy.checkAxe();
+    });
+    it('has zero violations when the range slider is decreased', function () {
+      cy.realPress('Tab');
+      cy.get('input#cy-range-single').should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 10);
+      cy.get('output.euiRangeTooltip__value').contains('100 - 100');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Dual EuiRange', function () {
+  var DualRange = function DualRange() {
+    var _useState3 = (0, _react.useState)(['100', '150']),
+        _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+        dualValue = _useState4[0],
+        setDualValue = _useState4[1];
+
+    var onDualChange = function onDualChange(value) {
+      setDualValue(value);
+    };
+
+    return (0, _react2.jsx)(_dual_range.EuiDualRange, {
+      id: "cy-range-dual",
+      min: 0,
+      max: 300,
+      step: 10,
+      value: dualValue,
+      onChange: onDualChange,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange"
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(DualRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the range sliders are adjusted', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuenow').should('eq', '70');
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').last().should('have.focus');
+      cy.repeatRealPress('ArrowRight', 3);
+      cy.get('div[role="slider"]').last().invoke('attr', 'aria-valuenow').should('eq', '180');
+      cy.checkAxe();
+    });
+  });
+});
+describe('Highlight Area EuiRange', function () {
+  var DraggableRange = function DraggableRange() {
+    var _useState5 = (0, _react.useState)(['40', '60']),
+        _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+        dualValue = _useState6[0],
+        setDualValue = _useState6[1];
+
+    return (0, _react2.jsx)(_dual_range.EuiDualRange, {
+      id: "cy-range-draggable",
+      min: 0,
+      max: 100,
+      step: 1,
+      value: dualValue,
+      onChange: setDualValue,
+      showLabels: true,
+      "aria-label": "An example of EuiDualRange with isDraggable='true'",
+      isDraggable: true
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(DraggableRange, null));
+    cy.get('div.euiRangeWrapper').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when the highlight area is adjusted using arrow keys', function () {
+      cy.realPress('Tab');
+      cy.get('div[role="slider"]').first().should('have.focus');
+      cy.repeatRealPress('ArrowLeft', 3);
+      cy.get('div[role="slider"]').first().invoke('attr', 'aria-valuetext').should('eq', '37, 57');
+      cy.checkAxe();
+    });
+  });
+  describe('Drag and drop accessibility check', function () {
+    it('has zero violations when the higlight area is dragged using a mouse', function () {
+      cy.get('.euiRangeDraggable__inner').realMouseDown({
+        position: 'center'
+      }).realMouseMove(100, 0, {}).realMouseUp();
+      cy.checkAxe();
+    });
+  });
+  describe('EuiRange in a dropdown', function () {
+    var InputWithRange = function InputWithRange() {
+      var _useState7 = (0, _react.useState)('20'),
+          _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+          value = _useState8[0],
+          setValue = _useState8[1];
+
+      return (0, _react2.jsx)(_range.EuiRange, {
+        id: "cy-range-in-dropdown",
+        min: 0,
+        max: 100,
+        value: value,
+        onChange: function onChange(e) {
+          return setValue(e.currentTarget.value);
+        },
+        showInput: "inputWithPopover",
+        showLabels: true,
+        "aria-label": "An example of EuiRange with showInput prop"
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(1024, 768); // medium breakpoint
+
+      cy.realMount((0, _react2.jsx)(InputWithRange, null));
+      cy.get('input#cy-range-in-dropdown').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations on first render', function () {
+        cy.checkAxe();
+      });
+    });
+    describe('Keyboard accessibility check', function () {
+      it('updates the range value using arrow keys with input[type="number"]', function () {
+        cy.realPress('Tab');
+        cy.get('input#cy-range-in-dropdown').should('have.focus');
+        cy.repeatRealPress('ArrowUp', 10);
+        cy.get('input[type="range"]').first().invoke('attr', 'value').should('eq', '30');
+        cy.checkAxe();
+      });
+    });
+  });
+});

package/optimize/lib/components/form/super_select/super_select.js

@@ -302,7 +302,7 @@ var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         id: this.describedById
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiSuperSelect.screenReaderAnnouncement",
-        default: "You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close."
+        default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
       }))), (0, _react2.jsx)("div", {
         "aria-labelledby": this.labelledById,
         "aria-describedby": this.describedById,

package/optimize/lib/components/icon/assets/alert.js

@@ -36,8 +36,9 @@ var EuiIconAlert = function EuiIconAlert(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M7.59 10.059L7.35 5.18h1.3L8.4 10.06h-.81zm.394 1.901a.61.61 0 01-.448-.186.606.606 0 01-.186-.444c0-.174.062-.323.186-.446a.614.614 0 01.448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 01-.189.446.607.607 0 01-.437.184zM2 14a1 1 0 01-.878-1.479l6-11a1 1 0 011.756 0l6 11A1 1 0 0114 14H2zm0-1h12L8 2 2 13z"
+    d: "M8.55 9.502l.35-3.507a.905.905 0 10-1.8 0l.35 3.507a.552.552 0 001.1 0zM9 12a1 1 0 11-2 0 1 1 0 012 0z"
+  }), (0, _react2.jsx)("path", {
+    d: "M8.864 1.496a1 1 0 00-1.728 0l-7 12A1 1 0 001 15h14a1 1 0 00.864-1.504l-7-12zM1 14L8 2l7 12H1z"
   }));
 };
 

package/optimize/lib/components/icon/assets/error.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["title", "titleId"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var EuiIconError = function EuiIconError(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M10 1a1 1 0 01.707.293l4 4A1 1 0 0115 6v5a1 1 0 01-.293.707l-4 4A1 1 0 0110 16H5a1 1 0 01-.707-.293l-4-4A1 1 0 010 11V6a1 1 0 01.293-.707l4-4A1 1 0 015 1h5zM4.146 5.146a.5.5 0 01.708 0L7.5 7.793l2.646-2.647a.5.5 0 01.708.708L8.207 8.5l2.647 2.646a.5.5 0 01-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 01-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 010-.708z"
+  }));
+};
+
+var icon = EuiIconError;
+exports.icon = icon;

package/optimize/lib/components/icon/icon_map.js

@@ -133,6 +133,7 @@ var typeToPathMap = {
   emsApp: 'app_ems',
   eql: 'eql',
   eraser: 'eraser',
+  error: 'error',
   exit: 'exit',
   expand: 'expand',
   expandMini: 'expandMini',

package/optimize/lib/components/icon/svgs/alert.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M7.58960784,10.0585714 L7.35,5.18142857 L8.65,5.18142857 L8.40019608,10.0585714 L7.58960784,10.0585714 Z M7.98428571,11.96 C7.80999913,11.96 7.66071491,11.8978578 7.53642857,11.7735714 C7.41214224,11.6492851 7.35,11.5014294 7.35,11.33 C7.35,11.1557134 7.41214224,11.0071435 7.53642857,10.8842857 C7.66071491,10.761428 7.80999913,10.7 7.98428571,10.7 C8.15285799,10.7 8.29928509,10.7607137 8.42357143,10.8821429 C8.54785776,11.003572 8.61,11.1528563 8.61,11.33 C8.61,11.5042866 8.54714349,11.6528565 8.42142857,11.7757143 C8.29571366,11.898572 8.15000083,11.96 7.98428571,11.96 Z M2,14 C1.24094086,14 0.758627342,13.1875225 1.12210443,12.5211479 L7.12210443,1.52114787 C7.50112106,0.826284044 8.49887894,0.826284044 8.87789557,1.52114787 L14.8778956,12.5211479 C15.2413727,13.1875225 14.7590591,14 14,14 L2,14 Z M2,13 L14,13 L8,2 L2,13 Z"/>
+  <path d="m8.55 9.502.35-3.507a.905.905 0 1 0-1.8 0l.35 3.507a.552.552 0 0 0 1.1 0ZM9 12a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
+  <path d="M8.864 1.496a1 1 0 0 0-1.728 0l-7 12A1 1 0 0 0 1 15h14a1 1 0 0 0 .864-1.504l-7-12ZM1 14 8 2l7 12H1Z"/>
 </svg>

package/optimize/lib/components/icon/svgs/error.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"/>
+</svg>

package/optimize/lib/components/index.js

@@ -888,6 +888,19 @@ Object.keys(_side_nav).forEach(function (key) {
   });
 });
 
+var _skeleton = require("./skeleton");
+
+Object.keys(_skeleton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _skeleton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _skeleton[key];
+    }
+  });
+});
+
 var _spacer = require("./spacer");
 
 Object.keys(_spacer).forEach(function (key) {

package/optimize/lib/components/loading/loading_content.js

@@ -7,49 +7,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiLoadingContent = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _services = require("../../services");
-
-var _loading_strings = require("./_loading_strings");
-
-var _loading_content = require("./loading_content.styles");
+var _skeleton = require("../skeleton");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["lines", "className", "aria-label"];
-
-var EuiLoadingContent = function EuiLoadingContent(_ref) {
-  var _ref$lines = _ref.lines,
-      lines = _ref$lines === void 0 ? 3 : _ref$lines,
-      className = _ref.className,
-      ariaLabel = _ref['aria-label'],
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _loading_content.euiLoadingContentStyles)(euiTheme);
-  var lineCssStyles = [styles.euiLoadingContent__singleLine];
-  var defaultLabel = (0, _loading_strings.useLoadingAriaLabel)();
-  var classes = (0, _classnames.default)('euiLoadingContent', className);
-  var lineElements = [];
-
-  for (var i = 0; i < lines; i++) {
-    lineElements.push((0, _react2.jsx)("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
-
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
-    className: classes,
-    role: "progressbar",
-    "aria-label": ariaLabel || defaultLabel
-  }, rest), lineElements);
+/*
+ * 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.
+ */
+
+/**
+ * @deprecated Use `EuiSkeletonText` instead
+ */
+var EuiLoadingContent = function EuiLoadingContent(props) {
+  return (0, _react2.jsx)(_skeleton.EuiSkeletonText, props);
 };
 
 exports.EuiLoadingContent = EuiLoadingContent;

package/optimize/lib/components/popover/popover.js

@@ -481,7 +481,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
             id: this.descriptionId
           }, ownFocus && (0, _react.jsx)(_i18n.EuiI18n, {
             token: "euiPopover.screenReaderAnnouncement",
-            default: "You are in a dialog. To close this dialog, hit escape."
+            default: "You are in a dialog. Press Escape, or tap/click outside the dialog to close."
           }), popoverScreenReaderText));
         }
 

package/optimize/lib/components/progress/progress.a11y.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _progress = require("./progress");
+
+var _spacer = require("../spacer");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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"/>
+var ProgressCommonProps = {
+  color: 'success',
+  max: 100
+};
+
+var ProgressBars = function ProgressBars() {
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-1"
+  }, (0, _react2.jsx)(_progress.EuiProgress, (0, _extends2.default)({
+    valueText: true,
+    size: "xs",
+    value: 0
+  }, ProgressCommonProps))), (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-2"
+  }, (0, _react2.jsx)(_progress.EuiProgress, (0, _extends2.default)({
+    valueText: true,
+    size: "s",
+    value: 33
+  }, ProgressCommonProps))), (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-3"
+  }, (0, _react2.jsx)(_progress.EuiProgress, (0, _extends2.default)({
+    valueText: true,
+    size: "m",
+    value: 66
+  }, ProgressCommonProps))), (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-4"
+  }, (0, _react2.jsx)(_progress.EuiProgress, (0, _extends2.default)({
+    valueText: true,
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-5"
+  }, (0, _react2.jsx)(_progress.EuiProgress, (0, _extends2.default)({
+    valueText: true,
+    label: "Basic percentage",
+    size: "l",
+    value: 100
+  }, ProgressCommonProps))), (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "m"
+  }), (0, _react2.jsx)("div", {
+    "data-test-subj": "cy-progress-infinite"
+  }, (0, _react2.jsx)(_progress.EuiProgress, {
+    valueText: true,
+    size: "l",
+    color: "success"
+  })));
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount((0, _react2.jsx)(ProgressBars, null));
+  cy.get('div[data-test-subj="cy-progress-1"]').should('exist');
+});
+describe('EuiProgress', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('displays correct progress values and labels', function () {
+      cy.get('div[data-test-subj="cy-progress-1"] span.euiProgress__valueText').contains('0');
+      cy.get('div[data-test-subj="cy-progress-2"] span.euiProgress__valueText').contains('33');
+      cy.get('div[data-test-subj="cy-progress-3"] span.euiProgress__valueText').contains('66');
+      cy.get('div[data-test-subj="cy-progress-4"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__label').contains('Basic percentage');
+      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-infinite"] span.euiProgress__valueText').should('not.exist');
+    });
+  });
+});

package/optimize/lib/components/resizable_container/resizable_container.a11y.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _resizable_container = require("./resizable_container");
+
+var _text = require("../text");
+
+var _faker = require("@faker-js/faker");
+
+var _react2 = require("@emotion/react");
+
+/*
+ * 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"/>
+var text = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("p", null, _faker.faker.lorem.paragraphs()), (0, _react2.jsx)("p", null, _faker.faker.lorem.paragraphs()), (0, _react2.jsx)("p", null, _faker.faker.lorem.paragraphs()));
+describe('Horizontal EuiResizableContainer', function () {
+  var HorizontalContainer = function HorizontalContainer() {
+    return (0, _react2.jsx)(_resizable_container.EuiResizableContainer, {
+      style: {
+        height: '200px'
+      }
+    }, function (EuiResizablePanel, EuiResizableButton) {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(EuiResizablePanel, {
+        initialSize: 50,
+        minSize: "30%",
+        tabIndex: 0
+      }, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("div", null, text), (0, _react2.jsx)("a", {
+        href: "#",
+        "data-test-subj": "hello-world-link"
+      }, "Hello world"))), (0, _react2.jsx)(EuiResizableButton, null), (0, _react2.jsx)(EuiResizablePanel, {
+        initialSize: 50,
+        minSize: "200px",
+        tabIndex: 0
+      }, (0, _react2.jsx)(_text.EuiText, null, text)));
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(HorizontalContainer, null));
+    cy.get('div.euiResizablePanel').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility check', function () {
+    it('has zero violations when first panel is scrolled vertically', function () {
+      cy.realPress('Tab');
+      cy.get('div.euiPanel').first().should('have.focus');
+      cy.realPress('End');
+      cy.get('a[data-test-subj="hello-world-link"]').should('be.visible');
+      cy.checkAxe();
+    });
+    it('has zero violations when second panel is scrolled vertically', function () {
+      cy.repeatRealPress('Tab', 4);
+      cy.get('div.euiPanel').last().should('have.focus');
+      cy.realPress('End');
+      cy.realPress('Home');
+      cy.checkAxe();
+    });
+    it('has zero violations when the horizontal panels are resized', function () {
+      cy.repeatRealPress('Tab', 3);
+      cy.get('button.euiResizableButton').should('have.focus');
+      cy.repeatRealPress('ArrowRight', 10);
+      cy.checkAxe();
+    });
+  });
+});
+describe('Vertical EuiResizableContainer', function () {
+  var VerticalContainer = function VerticalContainer() {
+    return (0, _react2.jsx)(_resizable_container.EuiResizableContainer, {
+      style: {
+        height: '400px'
+      },
+      direction: "vertical"
+    }, function (EuiResizablePanel, EuiResizableButton) {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(EuiResizablePanel, {
+        initialSize: 60,
+        minSize: "40%",
+        tabIndex: 0
+      }, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("div", null, text))), (0, _react2.jsx)(EuiResizableButton, null), (0, _react2.jsx)(EuiResizablePanel, {
+        initialSize: 40,
+        minSize: "10%",
+        tabIndex: 0
+      }, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)("div", null, text))));
+    });
+  };
+
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+
+    cy.realMount((0, _react2.jsx)(VerticalContainer, null));
+    cy.get('div.euiResizablePanel').should('exist');
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the vertical panels are resized', function () {
+      cy.repeatRealPress('Tab');
+      cy.get('button.euiResizableButton').should('have.focus');
+      cy.repeatRealPress('ArrowDown', 10);
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/lib/components/skeleton/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiSkeletonCircle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_circle.EuiSkeletonCircle;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonLoading", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_loading.EuiSkeletonLoading;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonRectangle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_rectangle.EuiSkeletonRectangle;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonText", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_text.EuiSkeletonText;
+  }
+});
+Object.defineProperty(exports, "EuiSkeletonTitle", {
+  enumerable: true,
+  get: function get() {
+    return _skeleton_title.EuiSkeletonTitle;
+  }
+});
+
+var _skeleton_loading = require("./skeleton_loading");
+
+var _skeleton_circle = require("./skeleton_circle");
+
+var _skeleton_text = require("./skeleton_text");
+
+var _skeleton_rectangle = require("./skeleton_rectangle");
+
+var _skeleton_title = require("./skeleton_title");