@carbon/ibm-products 1.11.0 → 1.11.1

package/lib/components/LoadingBar/LoadingBar.js

@@ -1,170 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LoadingBar = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _settings = require("../../settings");
-
-var _excluded = ["active", "ariaLabel", "className", "id", "percentage", "percentageIndicatorText", "showPercentageIndicator", "small"];
-
-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; }
-
-// Carbon and package components we use.
-
-/* @import(s) of carbon components and other package components. */
-// The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(_settings.pkg.prefix, "--loading-bar");
-var componentName = 'LoadingBar'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
-
-var defaults = {
-  active: true,
-  percentage: undefined,
-  ariaLabel: 'Active loading indicator'
-};
-/**
- * The LoadingBar component provides a way to communicate the loading state to users.
- * It is intended to fill the space of where it's used, and should persist until the
- * loading action is complete. Once complete, the active prop may be set to false to
- * hide the LoadingBar.
- * The LoadingBar has two modes of operation: Indeterminate and Determinate.
- * If no percentage is provided to the component, the LoadingBar behaves in indeterminate
- * mode, with the bar moving from side to side, to indicate loading in progress.
- * If a percentage prop is provided, the determinate mode of operation is used and the
- * loading bar fills until the specified percentage to indicate current progress to
- * the user.
- */
-
-var LoadingBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _cx2, _cx3;
-
-  var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? defaults.active : _ref$active,
-      _ref$ariaLabel = _ref.ariaLabel,
-      ariaLabel = _ref$ariaLabel === void 0 ? defaults.ariaLabel : _ref$ariaLabel,
-      className = _ref.className,
-      id = _ref.id,
-      _ref$percentage = _ref.percentage,
-      percentage = _ref$percentage === void 0 ? defaults.percentage : _ref$percentage,
-      percentageIndicatorText = _ref.percentageIndicatorText,
-      showPercentageIndicator = _ref.showPercentageIndicator,
-      small = _ref.small,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  function usePrevious(value) {
-    var ref = (0, _react.useRef)();
-    (0, _react.useEffect)(function () {
-      // Store current value in ref
-      ref.current = value;
-    }, [value]); // Only re-run if value changes
-    // Return previous value (happens before update in useEffect above)
-
-    return ref.current;
-  }
-
-  var prevActive = usePrevious(active);
-  var isDeterminate = percentage !== undefined;
-  var percentProgress = isDeterminate ? percentage > 100 ? "100%" : percentage + '%' : 0;
-  var actuallyShowPercentageIndicator = isDeterminate && showPercentageIndicator; // switch classes dependant on props
-
-  var loadingWrapper = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__preload"), !prevActive && !active));
-  var loadingClassName = (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__inner"), true), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__small"), small), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__linear-stop"), !active && isDeterminate), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__indefinite-stop"), !active && !isDeterminate), _cx2));
-  var animationClassName = (0, _classnames.default)((_cx3 = {}, (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__linear-progress"), isDeterminate), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__stop-progress"), !active && !isDeterminate), (0, _defineProperty2.default)(_cx3, "".concat(blockClass, "__indefinite-progress"), active && !isDeterminate), _cx3));
-  var loadingId = id && "loading-bar-id-".concat(id);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(loadingWrapper, // Apply any supplied class names to the main HTML element.
-    className, blockClass),
-    ref: ref,
-    role: "progressbar",
-    "aria-label": ariaLabel,
-    "aria-atomic": "true",
-    "aria-labelledby": loadingId,
-    "aria-live": active ? 'assertive' : 'off',
-    id: loadingId
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: loadingClassName
-  }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, isDeterminate && {
-    style: {
-      width: percentProgress
-    }
-  }, {
-    className: "".concat(blockClass, "__progress")
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: animationClassName
-  }))), actuallyShowPercentageIndicator && /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__indicator-wrapper")
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__indicator")
-  }, active && percentageIndicatorText)));
-}); // Return a placeholder if not released and not enabled by feature flag
-
-
-exports.LoadingBar = LoadingBar;
-exports.LoadingBar = LoadingBar = _settings.pkg.checkComponentEnabled(LoadingBar, componentName); // The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-
-LoadingBar.displayName = componentName; // The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-
-LoadingBar.propTypes = {
-  /**
-   * Specify whether you want the loading bar indicator to be active or not
-   */
-  active: _propTypes.default.bool,
-
-  /**
-   * Specify a ariaLabel that would be used to best describe the active loading state
-   */
-  ariaLabel: _propTypes.default.string,
-
-  /**
-   * Provide an optional className to be applied to the containing node
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * ID for loading bar
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * Leave undefined for indeterminate duration or specify percentage complete that the determinate bar should indicate (0-100).
-   */
-  percentage: _propTypes.default.number,
-
-  /**
-   * In determinate mode, provide text to be shown on percentage indicator
-   */
-  percentageIndicatorText: _propTypes.default.string,
-
-  /**
-   * In determinate mode, specify whether to show the percentage indicator.
-   */
-  showPercentageIndicator: _propTypes.default.bool,
-
-  /**
-   * Specify whether you would like the small variant of this component
-   */
-  small: _propTypes.default.bool
-};

package/lib/components/LoadingBar/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "LoadingBar", {
-  enumerable: true,
-  get: function get() {
-    return _LoadingBar.LoadingBar;
-  }
-});
-
-var _LoadingBar = require("./LoadingBar");

package/scss/components/LoadingBar/_index.scss

@@ -1,8 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import './loading-bar';

package/scss/components/LoadingBar/_loading-bar.scss

@@ -1,224 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-// Standard imports.
-@import '../../global/styles/project-settings';
-
-$loading-bar__height: 8px;
-$loading-bar__small-height: 4px;
-
-// Define all component styles in a mixin which is then exported using
-// the Carbon import-once mechanism.
-@mixin loading-bar {
-  // The block part of our conventional BEM class names (blockClass__E--M).
-  $block-class: #{$pkg-prefix}--loading-bar;
-
-  @keyframes progress-indeterminate {
-    0% {
-      right: auto;
-      left: 0;
-      width: 0%;
-    }
-
-    20% {
-      right: auto;
-      left: 0;
-      width: 100%;
-    }
-
-    28% {
-      right: 0;
-      left: auto;
-      width: 100%;
-    }
-
-    51% {
-      right: 0;
-      left: auto;
-      width: 0%;
-    }
-
-    58% {
-      right: 0;
-      left: auto;
-      width: 0%;
-    }
-
-    82% {
-      right: 0;
-      left: auto;
-      width: 100%;
-    }
-
-    83% {
-      right: auto;
-      left: 0;
-      width: 100%;
-    }
-
-    96% {
-      right: auto;
-      left: 0;
-      width: 0%;
-    }
-
-    100% {
-      right: auto;
-      left: 0;
-      width: 0%;
-    }
-  }
-
-  @keyframes progress-linear {
-    0% {
-      right: auto;
-      left: 0;
-      width: 0%;
-    }
-
-    100% {
-      right: auto;
-      left: 0;
-      width: 100%;
-    }
-  }
-
-  @keyframes progress-stop {
-    0% {
-      right: auto;
-      left: 0;
-      width: 0%;
-    }
-
-    92% {
-      right: auto;
-      left: 0;
-      width: 100%;
-    }
-
-    100% {
-      right: auto;
-      left: 0;
-      width: 100%;
-    }
-  }
-
-  @keyframes loading-bar-stop {
-    0% {
-      opacity: 1;
-    }
-
-    92% {
-      opacity: 1;
-    }
-
-    100% {
-      display: none;
-      opacity: 0;
-    }
-  }
-
-  .#{$block-class} .#{$block-class}__inner {
-    position: relative;
-    width: 100%;
-    height: $loading-bar__height;
-    padding: 0;
-    border: none;
-    background-color: $hover-ui;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    pointer-events: none;
-  }
-
-  .#{$block-class} .#{$block-class}__inner:hover,
-  .#{$block-class} .#{$block-class}__inner:focus,
-  .#{$block-class} .#{$block-class}__inner:active {
-    border: none;
-    cursor: default;
-    outline: none;
-  }
-
-  .#{$block-class}__preload {
-    opacity: 0;
-  }
-
-  .#{$block-class}__progress {
-    position: relative;
-    height: $loading-bar__height;
-    transition: width $duration--slow-02 cubic-bezier(0.4, 0.14, 0.3, 1); // Expansion duration - carbon value from _motion.scss
-  }
-
-  .#{$block-class}__indicator-wrapper {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  .#{$block-class}__indicator {
-    @include carbon--type-style('body-short-01');
-
-    padding-top: $spacing-05;
-    padding-bottom: $spacing-03;
-    color: $text-01;
-  }
-
-  .#{$block-class}__small {
-    height: $loading-bar__small-height;
-  }
-
-  .#{$block-class}__small .#{$block-class}__progress {
-    height: $loading-bar__small-height;
-  }
-
-  .#{$block-class}__linear-stop {
-    display: none;
-  }
-
-  .#{$block-class}__indefinite-stop {
-    // stylelint-disable-next-line carbon/motion-token-use
-    animation: 1800ms ease-in-out loading-bar-stop forwards;
-  }
-
-  .#{$block-class}__stop-progress:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 100%;
-    // stylelint-disable-next-line carbon/motion-token-use
-    animation: 1800ms ease-in-out progress-stop forwards;
-    background-color: $interactive-01;
-    content: '';
-  }
-
-  .#{$block-class}__indefinite-progress:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 100%;
-    // stylelint-disable-next-line carbon/motion-token-use
-    animation: 3000ms ease-in-out progress-indeterminate infinite;
-    background-color: $interactive-01;
-    content: '';
-  }
-
-  .#{$block-class}__linear-progress:before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 100%;
-    // stylelint-disable-next-line carbon/motion-token-use
-    animation: 1000ms ease-in-out progress-linear forwards;
-    background-color: $interactive-01;
-    content: '';
-  }
-}
-
-@include exports('loading-bar') {
-  @include loading-bar;
-}

package/scss/components/LoadingBar/_storybook-styles.scss

@@ -1,14 +0,0 @@
-//
-// Copyright IBM Corp. 2021, 2021
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../global/styles/project-settings';
-
-// add any additional styles used by LoadingBar.stories.js
-.loading-bar-story-wrapper {
-  width: 24rem;
-  margin: $spacing-07 $spacing-05 $spacing-05 $spacing-05;
-}