@elastic/eui 74.1.0 → 75.1.0

package/test-env/components/steps/sub_steps.js

@@ -17,6 +17,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
+var _sub_steps = require("./sub_steps.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className"];
@@ -26,8 +30,12 @@ var EuiSubSteps = function EuiSubSteps(_ref) {
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSubSteps', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _sub_steps.euiSubStepsStyles)(euiTheme);
+  var cssStyles = [styles.euiSubSteps];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 

package/test-env/components/steps/sub_steps.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSubStepsStyles = void 0;
+
+var _react = 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.
+ */
+var euiSubStepsStyles = function euiSubStepsStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+  };
+};
+
+exports.euiSubStepsStyles = euiSubStepsStyles;

package/test-env/components/tour/tour_step_indicator.js

@@ -51,7 +51,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isActive) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isActive,
         color: "success",
         "aria-current": "step"
@@ -64,7 +63,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isComplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isComplete,
         color: "subdued"
       });
@@ -76,7 +74,6 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     }, function (isIncomplete) {
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
-        className: "euiStepNumber__icon",
         "aria-label": isIncomplete,
         color: "subdued"
       });

package/test-env/global_styling/utility/animations.js

@@ -5,13 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideX = exports.euiAnimSlideInUp = exports.euiAnimScale = exports.euiAnimFadeIn = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
 exports.euiAnimFadeIn = euiAnimFadeIn;
@@ -23,7 +23,9 @@ var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
 exports.euiAnimSlideInUp = euiAnimSlideInUp;
 
 var euiAnimSlideX = function euiAnimSlideX(size) {
-  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n"])), size);
+  return (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    transform: translateX(", ");\n  }\n\n  100% {\n    transform: translateX(0);\n\n  }\n"])), size);
 };
 
-exports.euiAnimSlideX = euiAnimSlideX;
+exports.euiAnimSlideX = euiAnimSlideX;
+var euiAnimScale = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  1% {\n    opacity: 0;\n    transform: scale(0);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n"])));
+exports.euiAnimScale = euiAnimScale;

package/src/components/steps/_index.scss

@@ -1,7 +0,0 @@
-@import 'variables';
-@import 'mixins';
-
-@import 'step_number';
-@import 'steps';
-@import 'sub_steps';
-@import 'steps_horizontal';

package/src/components/steps/_mixins.scss

@@ -1,12 +0,0 @@
-@mixin createStepsNumber($size: $euiStepNumberSize, $fontSize: $euiFontSize) {
-  @include size($size);
-
-  display: inline-block;
-  line-height: $size;
-  border-radius: $size;
-  text-align: center;
-  color: $euiColorEmptyShade;
-  background-color: $euiColorPrimary;
-  font-size: $fontSize;
-  font-weight: $euiFontWeightMedium;
-}

package/src/components/steps/_step_number.scss

@@ -1,52 +0,0 @@
-.euiStepNumber {
-  @include createStepsNumber;
-
-  .euiStepNumber__icon {
-    vertical-align: middle;
-    position: relative;
-    top: -2px;
-  }
-
-  &--small {
-    @include createStepsNumber($euiStepNumberSmallSize, $euiFontSizeXS);
-
-    .euiStepNumber__icon {
-      top: -1px;
-    }
-  }
-
-  &--complete {
-    // Thicken the checkmark by adding a slight stroke.
-    .euiStepNumber__icon {
-      stroke: currentColor;
-      stroke-width: .5px;
-    }
-  }
-
-  @include euiCanAnimate {
-    &--complete,
-    &--warning,
-    &--danger {
-      animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
-    }
-  }
-
-  &--loading {
-    background: transparent;
-  }
-
-  // Create modifiers based upon the map
-  @each $name, $color in $euiStepStatusColorsToFade {
-    &--#{$name} {
-      $backgroundColor: $color;
-      @if (saturation($color) > 0%) {
-        $backgroundColor: tintOrShade($color, 90%, 70%);
-      }
-
-      $textColor: makeHighContrastColor($color, $backgroundColor);
-
-      color: $textColor;
-      background-color: $backgroundColor;
-    }
-  }
-}

package/src/components/steps/_steps.scss

@@ -1,57 +0,0 @@
-/**
- * 1. Ensure that the step number vertically aligns with the title text
- */
-
-.euiStep {
-  // Create border on all but the last step
-  &:not(:last-of-type) {
-    // stylelint-disable indentation
-    background-image: linear-gradient(
-                        to right,
-                        transparent 0,
-                        transparent ($euiSize - 1),
-                        $euiBorderColor ($euiSize - 1),
-                        $euiBorderColor ($euiSize + 1),
-                        transparent ($euiSize + 1),
-                        transparent 100%
-                      );
-    // stylelint-enable indentation
-    background-repeat: no-repeat;
-    background-position: left $euiSizeXXL;
-  }
-
-  &--small {
-    &:not(:last-of-type) {
-      background-position: left -#{$euiSizeXS} top $euiSizeXL;
-    }
-
-    .euiStep__content {
-      // Align the content's contents with the title
-      padding-left: ($euiStepNumberSmallSize / 2) + $euiStepNumberMargin;
-
-      // Align content border to horizontal center of step number
-      margin-left: ($euiStepNumberSmallSize / 2);
-    }
-  }
-}
-
-.euiStep__titleWrapper {
-  display: flex;
-}
-
-.euiStep__circle {
-  flex-shrink: 0;
-  margin-right: $euiStepNumberMargin;
-  vertical-align: top; /* 1 */
-}
-
-.euiStep__content {
-  padding: $euiSize $euiSize $euiSizeXL;
-  margin: $euiSizeS 0;
-
-  // Align the content's contents with the title
-  padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin;
-
-  // Align content border to horizontal center of step number
-  margin-left: ($euiStepNumberSize / 2);
-}

package/src/components/steps/_steps_horizontal.scss

@@ -1,135 +0,0 @@
-@mixin makeLineProgress {
-  height: 2px;
-  background-color: $euiColorPrimary;
-}
-
-/**
- * 1. Ensure the connecting lines stays behind the number
- * 2. Make each step the same width
- * 3. Make the content of each step align to the top, even if the steps are of varying heights,
- *    e.g. due to some of their titles wrapping to multiple lines
- */
-
-.euiStepsHorizontal {
-  display: flex;
-  align-items: stretch;
-  background: transparentize($euiColorLightestShade, .5);
-}
-
-.euiStepHorizontal__item {
-  flex-grow: 1; /* 2 */
-  flex-basis: 0%; /* 2 */
-
-  // Remove the respective lines if the first or last child
-  &:first-of-type > .euiStepHorizontal::before,
-  &:last-of-type > .euiStepHorizontal::after {
-    display: none;
-  }
-}
-
-// Button containing item
-.euiStepHorizontal {
-  padding: $euiSizeL $euiSize $euiSize;
-  display: flex; /* 3 */
-  flex-direction: column; /* 3 */
-  align-items: center; /* 3 */
-  justify-content: flex-start; /* 3 */
-  cursor: pointer;
-  position: relative;
-  width: 100%;
-
-  // focus & hover state
-  &:focus:not(.euiStepHorizontal-isDisabled),
-  &:hover:not(.euiStepHorizontal-isDisabled) {
-    .euiStepHorizontal__title {
-      text-decoration: underline;
-    }
-  }
-
-  &:focus:not(.euiStepHorizontal-isDisabled) {
-    outline: none;
-
-    .euiStepHorizontal__number {
-      @include euiFocusRing(large);
-    }
-  }
-
-  // disabled state
-  &.euiStepHorizontal-isDisabled {
-    cursor: not-allowed;
-  }
-
-  // create the connecting lines
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    width: calc(50% - #{$euiStepNumberSize / 2});
-    height: 1px;
-    top: $euiSizeL + ($euiStepNumberSize / 2);
-    background-color: $euiColorLightShade;
-    z-index: $euiZLevel0; /* 1 */
-  }
-
-  &::before {
-    left: 0;
-  }
-
-  &::after {
-    right: 0;
-  }
-}
-
-.euiStepHorizontal__number {
-  position: relative; /* 1 */
-  z-index: $euiZLevel0 + 1; /* 1 */
-  transition: all $euiAnimSpeedFast ease-in-out;
-}
-
-.euiStepHorizontal__title {
-  @include euiTitle('xs');
-  margin-top: $euiSizeS;
-  font-weight: $euiFontWeightRegular;
-  text-align: center;
-
-  .euiStepHorizontal-isDisabled & {
-    color: $euiColorDarkShade;
-  }
-}
-
-// Complete state
-.euiStepHorizontal-isComplete {
-  &::before,
-  &::after {
-    @include makeLineProgress;
-  }
-}
-
-// Selected state
-.euiStepHorizontal-isSelected {
-  .euiStepHorizontal__number:not([class*='danger']):not([class*='warning']):not([class*='loading']) {
-    @include euiSlightShadow(desaturate($euiColorPrimary, 20%));
-  }
-
-  &::before {
-    @include makeLineProgress;
-  }
-}
-
-// RESPONSIVE
-@include euiBreakpoint('xs', 's') {
-  .euiStepHorizontal {
-    // reduce top padding and shift lines
-    padding-top: $euiSize;
-
-    &::before,
-    &::after {
-      top: $euiSize + $euiStepNumberSize / 2;
-    }
-  }
-
-  // hide titles
-  .euiStepHorizontal__title {
-    display: none;
-  }
-}

package/src/components/steps/_sub_steps.scss

@@ -1,15 +0,0 @@
-.euiSubSteps {
-  padding: $euiSize;
-  background-color: $euiColorLightestShade;
-  margin-bottom: $euiSize;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  // change ordered list from numbers to lowercase letters
-  .euiText & ol,
-  & ol {
-    list-style-type: lower-alpha;
-  }
-}

package/src/components/steps/_variables.scss

@@ -1,11 +0,0 @@
-$euiStepNumberSize: $euiSizeXL !default;
-$euiStepNumberSmallSize: $euiSizeL !default;
-$euiStepNumberMargin: $euiSize !default;
-
-// Modifier naming and colors.
-$euiStepStatusColorsToFade: (
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-  disabled: $euiColorDarkShade,
-  incomplete: $euiColorDarkShade,
-) !default;

package/src/themes/amsterdam/global_styling/variables/_steps.scss

@@ -1,8 +0,0 @@
-// Modifier naming and colors for step status'
-// Disabled/Loading/Incomplete are handled manually
-$euiStepStatusColors: (
-  default: $euiColorPrimary,
-  complete: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);

package/src/themes/amsterdam/overrides/_steps.scss

@@ -1,101 +0,0 @@
-// Make the disabled step title the same disabled text color
-.euiStepHorizontal-isDisabled .euiStepHorizontal__title,
-.euiStep-isDisabled .euiStep__title {
-  color: $euiColorDisabledText;
-}
-
-// STEP NUMBER CHANGES
-
-.euiStepNumber {
-  outline-color: $euiColorPrimary;
-
-  .euiStepNumber__icon {
-    position: relative;
-    top: -1px;
-  }
-
-  &--small {
-    .euiStepNumber__icon {
-      top: -1px;
-    }
-  }
-
-  &--complete,
-  &--danger {
-    // Thicken the checkmark by adding a slight stroke.
-    .euiStepNumber__icon {
-      stroke: currentColor;
-      stroke-width: .5px;
-    }
-  }
-
-  // Create modifiers based upon the map
-  @each $name, $color in $euiStepStatusColors {
-    &--#{$name} {
-      background-color: $color;
-      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-      outline-color: chooseLightOrDarkText($color, $color, $euiColorInk) !important; // stylelint-disable-line declaration-no-important
-    }
-  }
-
-  &.euiStepNumber--incomplete {
-    background-color: transparent;
-    color: $euiTextColor;
-    border: $euiBorderThick;
-
-    // Don't hide the step number when "hollow"
-    .euiStepNumber__number {
-      display: unset;
-      position: relative;
-      top: -2px;
-    }
-  }
-}
-
-.euiStepNumber--disabled {
-  $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
-  background-color: transparentize($euiButtonColorDisabled, .9);
-  color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
-}
-
-.euiStepHorizontal__title {
-  font-weight: $euiFontWeightBold;
-}
-
-.euiStepHorizontal {
-  // create the connecting lines
-  &::before,
-  &::after {
-    @include makeLineProgress;
-    background-color: $euiBorderColor;
-  }
-}
-
-// Make the line connect to the numbers
-
-.euiStep {
-  &:not(:last-of-type) {
-    background-position: left $euiSizeXL;
-  }
-
-  &--small {
-    &:not(:last-of-type) {
-      background-position: -#{$euiSizeXS} $euiSizeL;
-    }
-  }
-}
-
-.euiStep__content {
-  padding-bottom: ($euiSizeXL + $euiSizeS);
-  margin-bottom: 0;
-}
-
-// Remove forced background from horizontal steps
-.euiStepsHorizontal {
-  background: none;
-}
-
-// Fix outline in Chrome for horizontal steps
-.euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) {
-  outline: $euiFocusRingSize solid $euiColorPrimary;
-}