@hig/progress-ring - npm Package Compare versions

Comparing version 0.1.0-alpha.fc17111c to 0.1.0

build/index.es.js

@@ -1,5 +0,964 @@
-import { ProgressRing } from 'hig-react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
 
-ProgressRing.displayName = "ProgressRing";
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var MAX_INCREASE_PER_MS = 1 / 1000;
+
+var ProgressRingDeterminateBehavior = function (_Component) {
+  _inherits(ProgressRingDeterminateBehavior, _Component);
+
+  function ProgressRingDeterminateBehavior(props) {
+    _classCallCheck(this, ProgressRingDeterminateBehavior);
+
+    var _this = _possibleConstructorReturn(this, (ProgressRingDeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingDeterminateBehavior)).call(this, props));
+
+    _this.state = {
+      cssTransitionState: null,
+      transitionEnter: true
+    };
+
+    _this.step = function (timestamp) {
+      if (_this.state.cssTransitionState === "entering" || _this.state.cssTransitionState === "exiting") {
+        _this.wait();
+        return;
+      }
+
+      if (_this.state.cssTransitionState === "exited" && _this.value !== _this.targetValue) {
+        _this.enter();
+        return;
+      }
+
+      if (_this.targetValue === 1 && _this.value === 1 && _this.state.cssTransitionState !== "exited") {
+        _this.exit();
+        return;
+      }
+
+      _this.progressTowardTarget(timestamp);
+    };
+
+    _this.handleEntering = function () {
+      _this.setState({ cssTransitionState: "entering" });
+    };
+
+    _this.handleEntered = function () {
+      _this.setState({ cssTransitionState: "entered" });
+      _this.setProgress(_this.props.percentComplete);
+    };
+
+    _this.handleExiting = function () {
+      _this.setState({ cssTransitionState: "exiting" });
+    };
+
+    _this.handleExited = function () {
+      _this.setState({ cssTransitionState: "exited" });
+    };
+
+    _this.refContainer = function (containerRef) {
+      _this.containerRef = containerRef;
+    };
+
+    _this.value = 0;
+    _this.prevTimestamp = 0;
+    return _this;
+  }
+
+  _createClass(ProgressRingDeterminateBehavior, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.state.cssTransitionState === "entered" || this.state.cssTransitionState === "exited") {
+        this.initSegments();
+        this.setProgress(this.props.percentComplete);
+      }
+    }
+  }, {
+    key: "setProgress",
+    value: function setProgress(percent) {
+      this.targetValue = percent / 100;
+
+      if (!this.prevTimestamp) {
+        this.prevTimestamp = window.performance.now();
+      }
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "setSegmentOpacities",
+    value: function setSegmentOpacities(value) {
+      var _this2 = this;
+
+      this.segments.forEach(function (segment, i) {
+        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
+        var eachSegment = segment;
+        eachSegment.style.opacity = _this2.opacityForSegment(index, value);
+      });
+    }
+  }, {
+    key: "initSegments",
+    value: function initSegments() {
+      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
+      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
+      this.SEGMENT_COUNT = this.segments.length;
+      this.FADE_DELAY_FACTOR = 1 / this.SEGMENT_COUNT;
+    }
+  }, {
+    key: "progressTowardTarget",
+    value: function progressTowardTarget(timestamp) {
+      var elapsed = timestamp - this.prevTimestamp;
+
+      var valueDiff = void 0;
+      if (this.targetValue > this.value) {
+        valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
+      } else if (this.targetValue < this.value) {
+        valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
+      } else {
+        if (this.state.cssTransitionState !== "exited") {
+          this.setSegmentOpacities(this.value);
+        }
+        this.prevTimestamp = undefined;
+        return;
+      }
+
+      var interrumValue = this.value + valueDiff;
+
+      this.setSegmentOpacities(interrumValue);
+
+      this.prevTimestamp = timestamp;
+      this.value = interrumValue;
+
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "enter",
+    value: function enter() {
+      this.segments.forEach(function (segment) {
+        var eachSegment = segment;
+        eachSegment.style.opacity = 0;
+      });
+      this.setState({ transitionEnter: true });
+      this.wait();
+    }
+  }, {
+    key: "exit",
+    value: function exit() {
+      this.segments.forEach(function (segment) {
+        var eachSegment = segment;
+        eachSegment.style.opacity = null;
+      });
+      this.setState({ transitionEnter: false });
+      this.wait();
+    }
+  }, {
+    key: "wait",
+    value: function wait() {
+      this.prevTimestamp = window.performance.now();
+      window.requestAnimationFrame(this.step);
+    }
+    /**
+     * @param {HTMLDivElement} containerRef
+     */
+
+
+    /** @type {HTMLDivElement} */
+
+  }, {
+    key: "opacityForSegment",
+    value: function opacityForSegment(index, value) {
+      var fadeStartValue = index * this.FADE_DELAY_FACTOR;
+      return (value - fadeStartValue) / this.FADE_DELAY_FACTOR;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var innerRef = this.refContainer,
+          percentComplete = this.percentComplete;
+
+
+      return React.createElement(
+        CSSTransition,
+        {
+          "in": this.state.transitionEnter,
+          timeout: { enter: 650, exit: 466 },
+          appear: true,
+          classNames: {
+            appear: "hig__progress-ring--entering",
+            appearActive: "hig__progress-ring--entering",
+            enter: "hig__progress-ring--entering",
+            enterDone: "hig__progress-ring--entered",
+            exitActive: "hig__progress-ring--exiting",
+            exitDone: "hig__progress-ring--exited"
+          },
+          onEntering: this.handleEntering,
+          onEntered: this.handleEntered,
+          onExiting: this.handleExiting,
+          onExited: this.handleExited
+        },
+        this.props.children({
+          innerRef: innerRef,
+          percentComplete: percentComplete
+        })
+      );
+    }
+  }]);
+
+  return ProgressRingDeterminateBehavior;
+}(Component);
+
+ProgressRingDeterminateBehavior.propTypes = {
+  /**
+   * An integer from 0 to 100 representing the percent the delayed operation has completed
+   */
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Render prop */
+  children: PropTypes.func.isRequired
+};
+ProgressRingDeterminateBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingDeterminateBehavior",
+  "props": {
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "An integer from 0 to 100 representing the percent the delayed operation has completed"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "Render prop"
+    }
+  }
+};
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var CYCLE_DURATION = 1000;
+var FADE_DURATION = 416;
+
+var ProgressRingIndeterminateBehavior = function (_Component) {
+  _inherits$1(ProgressRingIndeterminateBehavior, _Component);
+
+  function ProgressRingIndeterminateBehavior(props) {
+    _classCallCheck$1(this, ProgressRingIndeterminateBehavior);
+
+    var _this = _possibleConstructorReturn$1(this, (ProgressRingIndeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingIndeterminateBehavior)).call(this, props));
+
+    _this.state = {
+      cssTransitionState: null
+    };
+
+    _this.step = function (timestamp) {
+      if (!_this.playing) {
+        return;
+      }
+      if (_this.state.cssTransitionState !== "entered") {
+        window.requestAnimationFrame(_this.step);
+        return;
+      }
+
+      if (!_this.startTime) _this.startTime = timestamp;
+      var elapsed = timestamp - _this.startTime;
+      var elapsedThisCycle = elapsed % CYCLE_DURATION;
+
+      _this.setSegmentOpacities(elapsedThisCycle);
+
+      window.requestAnimationFrame(_this.step);
+    };
+
+    _this.handleEntering = function () {
+      _this.setState({ cssTransitionState: "entering" });
+    };
+
+    _this.handleEntered = function () {
+      _this.setState({ cssTransitionState: "entered" });
+      _this.start();
+    };
+
+    _this.handleExiting = function () {
+      _this.setState({ cssTransitionState: "exiting" });
+    };
+
+    _this.handleExited = function () {
+      _this.setState({ cssTransitionState: "exited" });
+    };
+
+    _this.refContainer = function (containerRef) {
+      _this.containerRef = containerRef;
+    };
+
+    _this.startTime = undefined;
+    return _this;
+  }
+
+  _createClass$1(ProgressRingIndeterminateBehavior, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.initSegments();
+      this.step(1);
+    }
+  }, {
+    key: "setSegmentOpacities",
+    value: function setSegmentOpacities(elapsedThisCycle) {
+      var _this2 = this;
+
+      this.segments.forEach(function (segment, i) {
+        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
+        var eachSegment = segment;
+
+        eachSegment.style.opacity = _this2.opacityForSegment(index, elapsedThisCycle);
+      });
+    }
+  }, {
+    key: "initSegments",
+    value: function initSegments() {
+      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
+
+      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
+      this.SEGMENT_COUNT = this.segments.length;
+      this.SEGMENT_DELAY_FACTOR = CYCLE_DURATION / this.SEGMENT_COUNT;
+    }
+
+    /**
+     * @param {HTMLDivElement} containerRef
+     */
+
+
+    /** @type {HTMLDivElement} */
+
+  }, {
+    key: "opacityForSegment",
+    value: function opacityForSegment(index, elapsedThisCycle) {
+      var segmentFadeStartTime = index * this.SEGMENT_DELAY_FACTOR;
+
+      // Fade continuing from previous cycle
+      if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
+        return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
+      }
+
+      // Fade has finished
+      if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
+        return 0;
+      }
+
+      // Fading
+      return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      this.playing = true;
+      this.startTime = undefined;
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var innerRef = this.refContainer;
+
+
+      return React.createElement(
+        CSSTransition,
+        {
+          "in": true,
+          timeout: { enter: 650, exit: 466 },
+          appear: true,
+          classNames: {
+            appearActive: "hig__progress-ring--entering",
+            enterDone: "hig__progress-ring--entered",
+            exitActive: "hig__progress-ring--exiting",
+            exitDone: "hig__progress-ring--exited"
+          },
+          onEntering: this.handleEntering,
+          onEntered: this.handleEntered,
+          onExiting: this.handleExiting,
+          onExited: this.handleExited
+        },
+        this.props.children({
+          innerRef: innerRef
+        })
+      );
+    }
+  }]);
+
+  return ProgressRingIndeterminateBehavior;
+}(Component);
+
+ProgressRingIndeterminateBehavior.propTypes = {
+  /** Render prop */
+  children: PropTypes.func.isRequired
+};
+ProgressRingIndeterminateBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingIndeterminateBehavior",
+  "props": {
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "Render prop"
+    }
+  }
+};
+
+function SVGPresenter(props) {
+  var height = props.height,
+      width = props.width,
+      original = props.original,
+      svgData = props.svgData;
+
+  var polygons = svgData.map(function (item) {
+    return React.createElement("polygon", {
+      key: item.points,
+      className: item.className,
+      fill: item.fill,
+      fillRule: item.fillRule,
+      points: item.points
+    });
+  });
+
+  return React.createElement(
+    "svg",
+    {
+      width: width,
+      height: height,
+      viewBox: "0 0 " + original + " " + original,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink"
+    },
+    polygons
+  );
+}
+
+SVGPresenter.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+  original: PropTypes.number,
+  svgData: PropTypes.arrayOf(PropTypes.object)
+};
+SVGPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "SVGPresenter",
+  "props": {
+    "height": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "width": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "original": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "svgData": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "object"
+        }
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+var smallSVG = [{
+  className: "hig__progress-ring__background",
+  points: "22.49 5.51 14 2 5.51 5.51 2 14 5.51 22.49 14 26 22.49 22.49 26 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 5.52 14 6.33 14 2"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 5.52 8.58 8.58 14 6.33"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "2 14 8.58 8.58 5.52 5.52"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "2 14 6.33 14 8.58 8.58"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 22.48 6.33 14 2 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 22.48 8.58 19.42 6.33 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 26 8.58 19.42 5.52 22.48"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 26 14 21.67 8.58 19.42"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 22.48 14 21.67 14 26"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 22.48 19.42 19.42 14 21.67"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "26 14 19.42 19.42 22.48 22.48"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "26 14 21.67 14 19.42 19.42"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 5.52 21.67 14 26 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 5.52 19.42 8.58 21.67 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 2 19.42 8.58 22.48 5.52"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 2 14 6.33 19.42 8.58"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  fillRule: "nonzero",
+  points: "19.42 19.42 14 21.67 8.58 19.42 6.33 14 8.58 8.58 14 6.33 19.42 8.58 21.67 14"
+}];
+
+var mediumSVG = [{
+  className: "hig__progress-ring__background",
+  points: "54.81 10.11 36 4 17.19 10.11 5.57 26.11 5.57 45.89 17.19 61.89 36 68 54.81 61.89 66.43 45.89 66.43 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "36 10.31 36 4 17.19 10.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "36 10.31 17.19 10.11 20.9 15.215"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "20.9 15.215 17.19 10.11 5.565 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "20.9 15.215 5.565 26.11 11.565 28.06"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "11.565 28.06 5.565 26.11 5.565 45.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "11.565 28.06 5.565 45.89 11.565 43.94"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "11.565 43.94 5.565 45.89 17.19 61.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "11.565 43.94 17.19 61.89 20.9 56.785"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "20.9 56.785 17.19 61.89 36 68"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "20.9 56.785 36 68 36 61.69"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "36 61.69 36 68 54.81 61.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "36 61.69 54.81 61.89 51.1 56.785"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "51.1 56.785 54.81 61.89 66.435 45.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "51.1 56.785 66.435 45.89 60.435 43.94"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "60.435 43.94 66.435 45.89 66.435 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "60.435 43.94 66.435 26.11 60.435 28.06"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "60.435 28.06 66.435 26.11 54.81 10.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "60.435 28.06 54.81 10.11 51.1 15.215"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "51.1 15.215 54.81 10.11 36 4"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "51.1 15.215 36 4 36 10.31"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  fillRule: "nonzero",
+  points: "60.43 43.94 51.1 56.78 36 61.69 20.9 56.78 11.57 43.94 11.57 28.06 20.9 15.22 36 10.31 51.1 15.22 60.43 28.07"
+}];
+
+var xsmallSVG = [{
+  className: "hig__progress-ring__background",
+  fillRule: "nonzero",
+  points: "10 2 10 2 3.07 6 3.07 14 3.07 14 10 18 10 18 16.93 14 16.93 14 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 5.46 10 2 3.07 6 3.07 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 7.73 10 5.46 3.07 6 3.07 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 7.73 3.07 6 3.07 14 3.07 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 12.27 6.07 7.73 3.07 14 3.07 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 12.27 3.07 14 10 18 10 18"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 14.54 6.07 12.27 10 18 10 18"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 14.54 10 18 16.93 14 16.93 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 12.27 10 14.54 16.93 14 16.93 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 12.27 16.93 14 16.93 6 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 7.73 13.93 12.27 16.93 6 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 7.73 16.93 6 10 2 10 2"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 5.46 13.93 7.73 10 2 10 2"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  points: "13.93 12.27 10 14.54 6.07 12.27 6.07 7.73 10 5.46 13.93 7.73"
+}];
+
+var availableSizes = ["xs", "s", "m", "l", "xl"];
+
+var sizes = {
+  xs: {
+    svg: xsmallSVG,
+    size: 20
+  },
+  s: {
+    svg: smallSVG,
+    size: 28
+  },
+  m: {
+    svg: mediumSVG,
+    size: 72
+  },
+  l: {
+    svg: mediumSVG,
+    size: 144
+  },
+  xl: {
+    svg: mediumSVG,
+    size: 242
+  }
+};
+
+function ProgressRingPresenter(props) {
+  var innerRef = props.innerRef,
+      percentComplete = props.percentComplete,
+      size = props.size;
+
+  var SVG = sizes[size].svg;
+  var originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
+
+  return React.createElement(
+    "div",
+    {
+      className: "hig__progress-ring",
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": percentComplete,
+      ref: innerRef
+    },
+    React.createElement(SVGPresenter, {
+      height: sizes[size].size,
+      width: sizes[size].size,
+      original: originalSize,
+      svgData: SVG
+    })
+  );
+}
+
+ProgressRingPresenter.defaultProps = { size: "m" };
+
+ProgressRingPresenter.propTypes = {
+  innerRef: PropTypes.func,
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(availableSizes)
+};
+ProgressRingPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingPresenter",
+  "props": {
+    "innerRef": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "availableSizes"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"m\"",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProgressRing = function (_Component) {
+  _inherits$2(ProgressRing, _Component);
+
+  function ProgressRing() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$2(this, ProgressRing);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).call.apply(_ref, [this].concat(args))), _this), _this.defaultProps = {
+      size: "m"
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
+  }
+
+  _createClass$2(ProgressRing, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          percentComplete = _props.percentComplete,
+          size = _props.size;
+
+      var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
+      var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
+
+      return React.createElement(
+        ProgressRingBehavior,
+        behaviorProps,
+        function (_ref2) {
+          var innerRef = _ref2.innerRef;
+          return React.createElement(ProgressRingPresenter, {
+            innerRef: innerRef,
+            percentComplete: percentComplete,
+            size: size
+          });
+        }
+      );
+    }
+  }]);
+
+  return ProgressRing;
+}(Component);
+
+ProgressRing.propTypes = {
+  /**
+   * An integer from 0 to 100 representing the percent the delayed operation has completed.
+   * If left blank or this prop is omitted you will have the indeterminate progress ring
+   */
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * {xs, s, m, l, xl} the size of the progress indicator
+   */
+  size: PropTypes.oneOf(availableSizes)
+};
+ProgressRing.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRing",
+  "props": {
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "An integer from 0 to 100 representing the percent the delayed operation has completed.\nIf left blank or this prop is omitted you will have the indeterminate progress ring"
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "availableSizes"
+      },
+      "required": false,
+      "description": "{xs, s, m, l, xl} the size of the progress indicator",
+      "defaultValue": {
+        "value": "\"m\"",
+        "computed": false
+      }
+    }
+  }
+};
+
 export default ProgressRing;

build/index.js

 'use strict';
 
-var higReact = require('hig-react');
+Object.defineProperty(exports, '__esModule', { value: true });
 
-higReact.ProgressRing.displayName = "ProgressRing";
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-module.exports = higReact.ProgressRing;
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var reactTransitionGroup = require('react-transition-group');
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var MAX_INCREASE_PER_MS = 1 / 1000;
+
+var ProgressRingDeterminateBehavior = function (_Component) {
+  _inherits(ProgressRingDeterminateBehavior, _Component);
+
+  function ProgressRingDeterminateBehavior(props) {
+    _classCallCheck(this, ProgressRingDeterminateBehavior);
+
+    var _this = _possibleConstructorReturn(this, (ProgressRingDeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingDeterminateBehavior)).call(this, props));
+
+    _this.state = {
+      cssTransitionState: null,
+      transitionEnter: true
+    };
+
+    _this.step = function (timestamp) {
+      if (_this.state.cssTransitionState === "entering" || _this.state.cssTransitionState === "exiting") {
+        _this.wait();
+        return;
+      }
+
+      if (_this.state.cssTransitionState === "exited" && _this.value !== _this.targetValue) {
+        _this.enter();
+        return;
+      }
+
+      if (_this.targetValue === 1 && _this.value === 1 && _this.state.cssTransitionState !== "exited") {
+        _this.exit();
+        return;
+      }
+
+      _this.progressTowardTarget(timestamp);
+    };
+
+    _this.handleEntering = function () {
+      _this.setState({ cssTransitionState: "entering" });
+    };
+
+    _this.handleEntered = function () {
+      _this.setState({ cssTransitionState: "entered" });
+      _this.setProgress(_this.props.percentComplete);
+    };
+
+    _this.handleExiting = function () {
+      _this.setState({ cssTransitionState: "exiting" });
+    };
+
+    _this.handleExited = function () {
+      _this.setState({ cssTransitionState: "exited" });
+    };
+
+    _this.refContainer = function (containerRef) {
+      _this.containerRef = containerRef;
+    };
+
+    _this.value = 0;
+    _this.prevTimestamp = 0;
+    return _this;
+  }
+
+  _createClass(ProgressRingDeterminateBehavior, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.state.cssTransitionState === "entered" || this.state.cssTransitionState === "exited") {
+        this.initSegments();
+        this.setProgress(this.props.percentComplete);
+      }
+    }
+  }, {
+    key: "setProgress",
+    value: function setProgress(percent) {
+      this.targetValue = percent / 100;
+
+      if (!this.prevTimestamp) {
+        this.prevTimestamp = window.performance.now();
+      }
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "setSegmentOpacities",
+    value: function setSegmentOpacities(value) {
+      var _this2 = this;
+
+      this.segments.forEach(function (segment, i) {
+        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
+        var eachSegment = segment;
+        eachSegment.style.opacity = _this2.opacityForSegment(index, value);
+      });
+    }
+  }, {
+    key: "initSegments",
+    value: function initSegments() {
+      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
+      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
+      this.SEGMENT_COUNT = this.segments.length;
+      this.FADE_DELAY_FACTOR = 1 / this.SEGMENT_COUNT;
+    }
+  }, {
+    key: "progressTowardTarget",
+    value: function progressTowardTarget(timestamp) {
+      var elapsed = timestamp - this.prevTimestamp;
+
+      var valueDiff = void 0;
+      if (this.targetValue > this.value) {
+        valueDiff = Math.min(elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
+      } else if (this.targetValue < this.value) {
+        valueDiff = Math.max(-elapsed * MAX_INCREASE_PER_MS, this.targetValue - this.value);
+      } else {
+        if (this.state.cssTransitionState !== "exited") {
+          this.setSegmentOpacities(this.value);
+        }
+        this.prevTimestamp = undefined;
+        return;
+      }
+
+      var interrumValue = this.value + valueDiff;
+
+      this.setSegmentOpacities(interrumValue);
+
+      this.prevTimestamp = timestamp;
+      this.value = interrumValue;
+
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "enter",
+    value: function enter() {
+      this.segments.forEach(function (segment) {
+        var eachSegment = segment;
+        eachSegment.style.opacity = 0;
+      });
+      this.setState({ transitionEnter: true });
+      this.wait();
+    }
+  }, {
+    key: "exit",
+    value: function exit() {
+      this.segments.forEach(function (segment) {
+        var eachSegment = segment;
+        eachSegment.style.opacity = null;
+      });
+      this.setState({ transitionEnter: false });
+      this.wait();
+    }
+  }, {
+    key: "wait",
+    value: function wait() {
+      this.prevTimestamp = window.performance.now();
+      window.requestAnimationFrame(this.step);
+    }
+    /**
+     * @param {HTMLDivElement} containerRef
+     */
+
+
+    /** @type {HTMLDivElement} */
+
+  }, {
+    key: "opacityForSegment",
+    value: function opacityForSegment(index, value) {
+      var fadeStartValue = index * this.FADE_DELAY_FACTOR;
+      return (value - fadeStartValue) / this.FADE_DELAY_FACTOR;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var innerRef = this.refContainer,
+          percentComplete = this.percentComplete;
+
+
+      return React__default.createElement(
+        reactTransitionGroup.CSSTransition,
+        {
+          "in": this.state.transitionEnter,
+          timeout: { enter: 650, exit: 466 },
+          appear: true,
+          classNames: {
+            appear: "hig__progress-ring--entering",
+            appearActive: "hig__progress-ring--entering",
+            enter: "hig__progress-ring--entering",
+            enterDone: "hig__progress-ring--entered",
+            exitActive: "hig__progress-ring--exiting",
+            exitDone: "hig__progress-ring--exited"
+          },
+          onEntering: this.handleEntering,
+          onEntered: this.handleEntered,
+          onExiting: this.handleExiting,
+          onExited: this.handleExited
+        },
+        this.props.children({
+          innerRef: innerRef,
+          percentComplete: percentComplete
+        })
+      );
+    }
+  }]);
+
+  return ProgressRingDeterminateBehavior;
+}(React.Component);
+
+ProgressRingDeterminateBehavior.propTypes = {
+  /**
+   * An integer from 0 to 100 representing the percent the delayed operation has completed
+   */
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Render prop */
+  children: PropTypes.func.isRequired
+};
+ProgressRingDeterminateBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingDeterminateBehavior",
+  "props": {
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "An integer from 0 to 100 representing the percent the delayed operation has completed"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "Render prop"
+    }
+  }
+};
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var CYCLE_DURATION = 1000;
+var FADE_DURATION = 416;
+
+var ProgressRingIndeterminateBehavior = function (_Component) {
+  _inherits$1(ProgressRingIndeterminateBehavior, _Component);
+
+  function ProgressRingIndeterminateBehavior(props) {
+    _classCallCheck$1(this, ProgressRingIndeterminateBehavior);
+
+    var _this = _possibleConstructorReturn$1(this, (ProgressRingIndeterminateBehavior.__proto__ || Object.getPrototypeOf(ProgressRingIndeterminateBehavior)).call(this, props));
+
+    _this.state = {
+      cssTransitionState: null
+    };
+
+    _this.step = function (timestamp) {
+      if (!_this.playing) {
+        return;
+      }
+      if (_this.state.cssTransitionState !== "entered") {
+        window.requestAnimationFrame(_this.step);
+        return;
+      }
+
+      if (!_this.startTime) _this.startTime = timestamp;
+      var elapsed = timestamp - _this.startTime;
+      var elapsedThisCycle = elapsed % CYCLE_DURATION;
+
+      _this.setSegmentOpacities(elapsedThisCycle);
+
+      window.requestAnimationFrame(_this.step);
+    };
+
+    _this.handleEntering = function () {
+      _this.setState({ cssTransitionState: "entering" });
+    };
+
+    _this.handleEntered = function () {
+      _this.setState({ cssTransitionState: "entered" });
+      _this.start();
+    };
+
+    _this.handleExiting = function () {
+      _this.setState({ cssTransitionState: "exiting" });
+    };
+
+    _this.handleExited = function () {
+      _this.setState({ cssTransitionState: "exited" });
+    };
+
+    _this.refContainer = function (containerRef) {
+      _this.containerRef = containerRef;
+    };
+
+    _this.startTime = undefined;
+    return _this;
+  }
+
+  _createClass$1(ProgressRingIndeterminateBehavior, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.initSegments();
+      this.step(1);
+    }
+  }, {
+    key: "setSegmentOpacities",
+    value: function setSegmentOpacities(elapsedThisCycle) {
+      var _this2 = this;
+
+      this.segments.forEach(function (segment, i) {
+        var index = Math.abs(i - _this2.SEGMENT_COUNT) - 1;
+        var eachSegment = segment;
+
+        eachSegment.style.opacity = _this2.opacityForSegment(index, elapsedThisCycle);
+      });
+    }
+  }, {
+    key: "initSegments",
+    value: function initSegments() {
+      this.segments = Array.from(this.containerRef.querySelectorAll(".hig__progress-ring__segment"));
+
+      this.containerRef.querySelector(".hig__progress-ring__mask").style.opacity = null;
+      this.SEGMENT_COUNT = this.segments.length;
+      this.SEGMENT_DELAY_FACTOR = CYCLE_DURATION / this.SEGMENT_COUNT;
+    }
+
+    /**
+     * @param {HTMLDivElement} containerRef
+     */
+
+
+    /** @type {HTMLDivElement} */
+
+  }, {
+    key: "opacityForSegment",
+    value: function opacityForSegment(index, elapsedThisCycle) {
+      var segmentFadeStartTime = index * this.SEGMENT_DELAY_FACTOR;
+
+      // Fade continuing from previous cycle
+      if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
+        return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
+      }
+
+      // Fade has finished
+      if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
+        return 0;
+      }
+
+      // Fading
+      return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
+    }
+  }, {
+    key: "start",
+    value: function start() {
+      this.playing = true;
+      this.startTime = undefined;
+      window.requestAnimationFrame(this.step);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var innerRef = this.refContainer;
+
+
+      return React__default.createElement(
+        reactTransitionGroup.CSSTransition,
+        {
+          "in": true,
+          timeout: { enter: 650, exit: 466 },
+          appear: true,
+          classNames: {
+            appearActive: "hig__progress-ring--entering",
+            enterDone: "hig__progress-ring--entered",
+            exitActive: "hig__progress-ring--exiting",
+            exitDone: "hig__progress-ring--exited"
+          },
+          onEntering: this.handleEntering,
+          onEntered: this.handleEntered,
+          onExiting: this.handleExiting,
+          onExited: this.handleExited
+        },
+        this.props.children({
+          innerRef: innerRef
+        })
+      );
+    }
+  }]);
+
+  return ProgressRingIndeterminateBehavior;
+}(React.Component);
+
+ProgressRingIndeterminateBehavior.propTypes = {
+  /** Render prop */
+  children: PropTypes.func.isRequired
+};
+ProgressRingIndeterminateBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingIndeterminateBehavior",
+  "props": {
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": "Render prop"
+    }
+  }
+};
+
+function SVGPresenter(props) {
+  var height = props.height,
+      width = props.width,
+      original = props.original,
+      svgData = props.svgData;
+
+  var polygons = svgData.map(function (item) {
+    return React__default.createElement("polygon", {
+      key: item.points,
+      className: item.className,
+      fill: item.fill,
+      fillRule: item.fillRule,
+      points: item.points
+    });
+  });
+
+  return React__default.createElement(
+    "svg",
+    {
+      width: width,
+      height: height,
+      viewBox: "0 0 " + original + " " + original,
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink"
+    },
+    polygons
+  );
+}
+
+SVGPresenter.propTypes = {
+  height: PropTypes.number,
+  width: PropTypes.number,
+  original: PropTypes.number,
+  svgData: PropTypes.arrayOf(PropTypes.object)
+};
+SVGPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "SVGPresenter",
+  "props": {
+    "height": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "width": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "original": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": ""
+    },
+    "svgData": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "object"
+        }
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+var smallSVG = [{
+  className: "hig__progress-ring__background",
+  points: "22.49 5.51 14 2 5.51 5.51 2 14 5.51 22.49 14 26 22.49 22.49 26 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 5.52 14 6.33 14 2"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 5.52 8.58 8.58 14 6.33"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "2 14 8.58 8.58 5.52 5.52"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "2 14 6.33 14 8.58 8.58"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 22.48 6.33 14 2 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "5.52 22.48 8.58 19.42 6.33 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 26 8.58 19.42 5.52 22.48"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 26 14 21.67 8.58 19.42"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 22.48 14 21.67 14 26"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 22.48 19.42 19.42 14 21.67"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "26 14 19.42 19.42 22.48 22.48"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "26 14 21.67 14 19.42 19.42"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 5.52 21.67 14 26 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "22.48 5.52 19.42 8.58 21.67 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 2 19.42 8.58 22.48 5.52"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "14 2 14 6.33 19.42 8.58"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  fillRule: "nonzero",
+  points: "19.42 19.42 14 21.67 8.58 19.42 6.33 14 8.58 8.58 14 6.33 19.42 8.58 21.67 14"
+}];
+
+var mediumSVG = [{
+  className: "hig__progress-ring__background",
+  points: "54.81 10.11 36 4 17.19 10.11 5.57 26.11 5.57 45.89 17.19 61.89 36 68 54.81 61.89 66.43 45.89 66.43 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "36 10.31 36 4 17.19 10.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "36 10.31 17.19 10.11 20.9 15.215"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "20.9 15.215 17.19 10.11 5.565 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "20.9 15.215 5.565 26.11 11.565 28.06"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "11.565 28.06 5.565 26.11 5.565 45.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "11.565 28.06 5.565 45.89 11.565 43.94"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "11.565 43.94 5.565 45.89 17.19 61.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "11.565 43.94 17.19 61.89 20.9 56.785"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "20.9 56.785 17.19 61.89 36 68"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "20.9 56.785 36 68 36 61.69"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "36 61.69 36 68 54.81 61.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "36 61.69 54.81 61.89 51.1 56.785"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "51.1 56.785 54.81 61.89 66.435 45.89"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "51.1 56.785 66.435 45.89 60.435 43.94"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "60.435 43.94 66.435 45.89 66.435 26.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "60.435 43.94 66.435 26.11 60.435 28.06"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "60.435 28.06 66.435 26.11 54.81 10.11"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "60.435 28.06 54.81 10.11 51.1 15.215"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "51.1 15.215 54.81 10.11 36 4"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0CA899",
+  fillRule: "nonzero",
+  points: "51.1 15.215 36 4 36 10.31"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  fillRule: "nonzero",
+  points: "60.43 43.94 51.1 56.78 36 61.69 20.9 56.78 11.57 43.94 11.57 28.06 20.9 15.22 36 10.31 51.1 15.22 60.43 28.07"
+}];
+
+var xsmallSVG = [{
+  className: "hig__progress-ring__background",
+  fillRule: "nonzero",
+  points: "10 2 10 2 3.07 6 3.07 14 3.07 14 10 18 10 18 16.93 14 16.93 14 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 5.46 10 2 3.07 6 3.07 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 7.73 10 5.46 3.07 6 3.07 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 7.73 3.07 6 3.07 14 3.07 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 12.27 6.07 7.73 3.07 14 3.07 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "6.07 12.27 3.07 14 10 18 10 18"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 14.54 6.07 12.27 10 18 10 18"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 14.54 10 18 16.93 14 16.93 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 12.27 10 14.54 16.93 14 16.93 14"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 12.27 16.93 14 16.93 6 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 7.73 13.93 12.27 16.93 6 16.93 6"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "13.93 7.73 16.93 6 10 2 10 2"
+}, {
+  className: "hig__progress-ring__segment",
+  fill: "#0ED3BE",
+  fillRule: "nonzero",
+  points: "10 5.46 13.93 7.73 10 2 10 2"
+}, {
+  className: "hig__progress-ring__mask",
+  fill: "#FFFFFF",
+  points: "13.93 12.27 10 14.54 6.07 12.27 6.07 7.73 10 5.46 13.93 7.73"
+}];
+
+var availableSizes = ["xs", "s", "m", "l", "xl"];
+
+var sizes = {
+  xs: {
+    svg: xsmallSVG,
+    size: 20
+  },
+  s: {
+    svg: smallSVG,
+    size: 28
+  },
+  m: {
+    svg: mediumSVG,
+    size: 72
+  },
+  l: {
+    svg: mediumSVG,
+    size: 144
+  },
+  xl: {
+    svg: mediumSVG,
+    size: 242
+  }
+};
+
+function ProgressRingPresenter(props) {
+  var innerRef = props.innerRef,
+      percentComplete = props.percentComplete,
+      size = props.size;
+
+  var SVG = sizes[size].svg;
+  var originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
+
+  return React__default.createElement(
+    "div",
+    {
+      className: "hig__progress-ring",
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": percentComplete,
+      ref: innerRef
+    },
+    React__default.createElement(SVGPresenter, {
+      height: sizes[size].size,
+      width: sizes[size].size,
+      original: originalSize,
+      svgData: SVG
+    })
+  );
+}
+
+ProgressRingPresenter.defaultProps = { size: "m" };
+
+ProgressRingPresenter.propTypes = {
+  innerRef: PropTypes.func,
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  size: PropTypes.oneOf(availableSizes)
+};
+ProgressRingPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRingPresenter",
+  "props": {
+    "innerRef": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": ""
+    },
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": ""
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "availableSizes"
+      },
+      "required": false,
+      "description": "",
+      "defaultValue": {
+        "value": "\"m\"",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ProgressRing = function (_Component) {
+  _inherits$2(ProgressRing, _Component);
+
+  function ProgressRing() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$2(this, ProgressRing);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = ProgressRing.__proto__ || Object.getPrototypeOf(ProgressRing)).call.apply(_ref, [this].concat(args))), _this), _this.defaultProps = {
+      size: "m"
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
+  }
+
+  _createClass$2(ProgressRing, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          percentComplete = _props.percentComplete,
+          size = _props.size;
+
+      var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
+      var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
+
+      return React__default.createElement(
+        ProgressRingBehavior,
+        behaviorProps,
+        function (_ref2) {
+          var innerRef = _ref2.innerRef;
+          return React__default.createElement(ProgressRingPresenter, {
+            innerRef: innerRef,
+            percentComplete: percentComplete,
+            size: size
+          });
+        }
+      );
+    }
+  }]);
+
+  return ProgressRing;
+}(React.Component);
+
+ProgressRing.propTypes = {
+  /**
+   * An integer from 0 to 100 representing the percent the delayed operation has completed.
+   * If left blank or this prop is omitted you will have the indeterminate progress ring
+   */
+  percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * {xs, s, m, l, xl} the size of the progress indicator
+   */
+  size: PropTypes.oneOf(availableSizes)
+};
+ProgressRing.__docgenInfo = {
+  "description": "",
+  "displayName": "ProgressRing",
+  "props": {
+    "percentComplete": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false,
+      "description": "An integer from 0 to 100 representing the percent the delayed operation has completed.\nIf left blank or this prop is omitted you will have the indeterminate progress ring"
+    },
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "availableSizes"
+      },
+      "required": false,
+      "description": "{xs, s, m, l, xl} the size of the progress indicator",
+      "defaultValue": {
+        "value": "\"m\"",
+        "computed": false
+      }
+    }
+  }
+};
+
+exports.default = ProgressRing;

package.json

 {
   "name": "@hig/progress-ring",
-  "version": "0.1.0-alpha.fc17111c",
+  "version": "0.1.0",
   "description": "HIG Progress Ring",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Autodesk/hig.git"
+  },
   "publishConfig": {
@@ -18,18 +22,22 @@ "access": "public"
     "classnames": "^2.2.5",
-    "hig-react": "0.29.0-alpha.fc17111c",
-    "react-lifecycles-compat": "^3.0.2"
+    "prop-types": "^15.6.1",
+    "react-lifecycles-compat": "^3.0.4",
+    "react-transition-group": "^2.4.0"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.10",
     "react": "^15.4.1 || ^16.3.2"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fc17111c",
-    "@hig/eslint-config": "0.2.0-alpha.fc17111c",
-    "@hig/scripts": "0.2.0-alpha.fc17111c",
-    "@hig/styles": "0.2.0-alpha.fc17111c"
+    "@hig/babel-preset": "^0.1.0",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.2.3"
   },
   "scripts": {
     "build": "hig-scripts-build",
-    "lint": "eslint src --color --ext .js,.jsx"
+    "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
+    "release": "hig-scripts-release"
   },
@@ -39,2 +47,8 @@ "eslintConfig": {
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
   "babel": {
@@ -41,0 +55,0 @@ "env": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

66373

decreased by-76.61%

Dev dependency count

6

increased by50%

Number of downloads

49

decreased by-20.97%

Lines of code

1904

decreased by-76.73%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.1

• + Addedreact-transition-group@^2.4.0

• - [e-mail]17111c

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removed@hig/[e-mail]17111c(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - [e-mail]17111c(transitive)

• - [e-mail]17111c(transitive)

• - [e-mail]17111c(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.0(transitive)

• - Removedreact-dom@15.7.0(transitive)

• - Removedreact-flip-move@3.0.5(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedreact-lifecycles-compat@^3.0.4