@storybook/design-system/dist/components/ProgressDots.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ProgressDots = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _styles = require("./shared/styles");

var _animation = require("./shared/animation");

var _excluded = ["isLoading", "steps", "progress", "size"];
var ProgressWrapper = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1aitjok1"
} : {
  target: "e1aitjok1",
  label: "ProgressWrapper"
})("display:inline-block;height:", function (props) {
  return props.size === 'small' ? 4 : 5;
}, "px;");
var Dot = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e1aitjok0"
} : {
  target: "e1aitjok0",
  label: "Dot"
})("background:", _styles.color.medium, ";display:inline-block;vertical-align:top;width:", function (props) {
  return props.size === 'small' ? 4 : 5;
}, "px;height:", function (props) {
  return props.size === 'small' ? 4 : 5;
}, "px;border-radius:3em;margin:0 ", function (props) {
  return props.size === 'small' ? 2 : 3;
}, "px;", function (props) {
  return props.active && /*#__PURE__*/(0, _theming.css)("background:", _styles.color.mediumdark, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Dot;"));
}, ";", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("animation:", _animation.glow, " 1.5s ease-in-out infinite;&:nth-child(1){animation-delay:0s;}&:nth-child(2){animation-delay:0.3s;}&:nth-child(3){animation-delay:0.6s;}&:nth-child(4){animation-delay:0.9s;}" + (process.env.NODE_ENV === "production" ? "" : ";label:Dot;"));
}, ";");

var ProgressDots = function ProgressDots(_ref) {
  var _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$steps = _ref.steps,
      steps = _ref$steps === void 0 ? 4 : _ref$steps,
      _ref$progress = _ref.progress,
      progress = _ref$progress === void 0 ? 0 : _ref$progress,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'small' : _ref$size,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var dots = [];

  for (var i = 0; i < steps; i += 1) {
    dots.push( /*#__PURE__*/_react["default"].createElement(Dot, {
      isLoading: isLoading,
      active: i === progress - 1,
      key: i,
      size: size
    }));
  }

  return /*#__PURE__*/_react["default"].createElement(ProgressWrapper, (0, _extends2["default"])({
    size: size,
    role: "status",
    "aria-live": "polite",
    "aria-label": "Content is loading ..."
  }, rest), dots);
};

exports.ProgressDots = ProgressDots;