orcs-design-system/es/components/ProgressBar/index.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["containerWidth", "fillWidth", "gradient", "theme", "ariaLabel"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef, useEffect, useState } from "react";
import PropTypes from "prop-types";
import styled, { css, keyframes, ThemeProvider } from "styled-components";
import { space, layout } from "styled-system";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx } from "react/jsx-runtime";
const expandWidth = /*#__PURE__*/keyframes(["0%{width:0;}"]);
const Background = /*#__PURE__*/styled.div.withConfig({
  displayName: "Background",
  componentId: "sc-q9qaaf-0"
})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;width:", ";"], space, layout, props => themeGet("colors.greyLighter")(props), props => props.containerWidth ? props.containerWidth + "%" : "100%");
const Fill = /*#__PURE__*/styled.div.withConfig({
  displayName: "Fill",
  componentId: "sc-q9qaaf-1"
})(["width:", ";position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], props => {
  if (props.fillWidth && props.containerWidthPx) {
    const sixPxInPercentage = 6 / props.containerWidthPx * 100;
    const minPixelValue = 1; // Minimum pixel value for visibility
    const minPercentageValue = minPixelValue / props.containerWidthPx * 100;
    const calculatedWidth = "calc(".concat(props.fillWidth, "% - ").concat(sixPxInPercentage, "%)");
    return "max(".concat(calculatedWidth, ", ").concat(minPercentageValue, "%)");
  }
  return "0";
}, expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));

/**
 * Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.
 *
 * A percentage width of the container (grey background) can be specified using the containerWidth prop, in most cases this should be 100. If not set the container is rendered without a CSS width property.
 *
 * A percentage width of the fill (coloured element) can be specified using the fillWidth prop. On page load the fill will animate from 0 to set value, and on change of the fillWidth prop value the fill will automatically animate to the new width value.
 */

export default function ProgressBar(_ref) {
  let {
      containerWidth = "100%",
      fillWidth,
      gradient,
      theme,
      ariaLabel = "Progress"
    } = _ref,
    props = _objectWithoutProperties(_ref, _excluded);
  const backgroundRef = useRef(null);
  const [containerWidthPx, setContainerWidthPx] = useState(0);
  useEffect(() => {
    if (backgroundRef.current) {
      setContainerWidthPx(backgroundRef.current.offsetWidth);
    }
  }, [containerWidth]);
  const component = /*#__PURE__*/_jsx(Background, _objectSpread(_objectSpread({
    ref: backgroundRef,
    containerWidth: containerWidth
  }, props), {}, {
    "aria-label": ariaLabel,
    "aria-valuenow": fillWidth,
    "aria-valuemin": "0",
    "aria-valuemax": "100",
    children: /*#__PURE__*/_jsx(Fill, {
      containerWidthPx: containerWidthPx,
      gradient: gradient,
      fillWidth: fillWidth
    })
  }));
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
}
ProgressBar.propTypes = {
  /** Sets the percentage width of the parent container */
  containerWidth: PropTypes.number,
  /** Sets the percentage width of the fill */
  fillWidth: PropTypes.number,
  /** Changes fill to have a gradient */
  gradient: PropTypes.bool,
  /** Specifies the system design theme. */
  theme: PropTypes.object,
  /** Specifies the aria-label for the progress bar */
  ariaLabel: PropTypes.string
};
ProgressBar.__docgenInfo = {
  "description": "Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.\n\nA percentage width of the container (grey background) can be specified using the containerWidth prop, in most cases this should be 100. If not set the container is rendered without a CSS width property.\n\nA percentage width of the fill (coloured element) can be specified using the fillWidth prop. On page load the fill will animate from 0 to set value, and on change of the fillWidth prop value the fill will automatically animate to the new width value.",
  "methods": [],
  "displayName": "ProgressBar",
  "props": {
    "containerWidth": {
      "defaultValue": {
        "value": "\"100%\"",
        "computed": false
      },
      "description": "Sets the percentage width of the parent container",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "ariaLabel": {
      "defaultValue": {
        "value": "\"Progress\"",
        "computed": false
      },
      "description": "Specifies the aria-label for the progress bar",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "fillWidth": {
      "description": "Sets the percentage width of the fill",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "gradient": {
      "description": "Changes fill to have a gradient",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "theme": {
      "description": "Specifies the system design theme.",
      "type": {
        "name": "object"
      },
      "required": false
    }
  }
};