feat(ProgressBar): add ProgressBar component

src/ProgressBar/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ProgressBar = ({ totalWidth = 120, percentComplete = 0 }) => {
+  return (
+    <div
+      className="nds-progressbar"
+      style={{ width: `${totalWidth}px`, height: "18px" }}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg">
+        <line
+          x1="0%"
+          y1="50%"
+          x2={`${percentComplete}%`}
+          y2="50%"
+          strokeWidth="100%"
+        />
+      </svg>
+    </div>
+  );
+};
+
+ProgressBar.propTypes = {
+  /**
+   * Total width of progress bar
+   */
+  totalWidth: PropTypes.number,
+  /**
+   * Percent complete
+   */
+  percentComplete: PropTypes.number.isRequired,
+};
+
+export default ProgressBar;

src/ProgressBar/index.scss

@@ -0,0 +1,15 @@
+.nds-progressbar {
+  border: 1px solid var(--theme-primary);
+  border-radius: var(--border-radius-default);
+  //overflow: hidden;
+}
+
+.nds-progressbar svg {
+  height: 100%;
+  width: 100%;
+}
+
+.nds-progressbar line {
+  stroke: var(--theme-primary);
+  transition: all 0.5s ease-in-out;
+}

src/ProgressBar/index.stories.js

@@ -0,0 +1,14 @@
+import React from "react";
+import ProgressBar from "./";
+
+const Template = (args) => <ProgressBar {...args} />;
+
+export const Overview = Template.bind({});
+Overview.args = {
+  percentComplete: 25,
+};
+
+export default {
+  title: "Components/ProgressBar",
+  component: ProgressBar,
+};

src/index.js

@@ -20,6 +20,7 @@ import LoadingSkeleton from "./LoadingSkeleton";
 import MenuButton from "./MenuButton";
 import Pagination from "./Pagination";
 import PlainButton from "./PlainButton";
+import ProgressBar from "./Pagination";
 import Popover from "./Popover";
 import RadioButtons from "./RadioButtons";
 import ResponsiveFlex from "./ResponsiveFlex";
@@ -59,6 +60,7 @@ export {
   MenuButton,
   Pagination,
   PlainButton,
+  ProgressBar,
   Popover,
   RadioButtons,
   ResponsiveFlex,

src/index.scss

@@ -69,6 +69,7 @@
 @import "TruncatedAccount/";
 @import "Row/";
 @import "Pagination/";
+@import "ProgressBar/";
 @import "Select/";
 @import "SeparatorList/";
 @import "Sidebar/";