feat: new ProgressBar component

packages/kpn-style-react/src/ProgressBar.js

@@ -0,0 +1,49 @@
+import PropTypes from "prop-types";
+import React from "react";
+import classNames from "classnames";
+
+const propTypes = {
+  value: PropTypes.number,
+  children: PropTypes.node,
+  text: PropTypes.string,
+  blocking: PropTypes.bool,
+  hidden: PropTypes.bool,
+  className: PropTypes.string
+};
+
+const defaultProps = {
+  value: 0,
+  blocking: false,
+  hidden: false
+};
+
+const Progress = ({
+  className,
+  value,
+  text,
+  blocking,
+  hidden,
+  children,
+  ...attributes
+}) => {
+  const classes = classNames(
+    "progress-bar",
+    blocking ? "progress-bar--blocking" : null,
+    className
+  );
+
+  return (
+    <div {...attributes} className={classes}>
+      <div className={classNames("progress-bar__meter", hidden ? "hidden" : null)}>
+        <div className="progress-bar__value" style={{ width: `${value}%` }} />
+        {text && <div className="progress-bar__text">{text}</div>}
+      </div>
+      {!!children && <>{children}</>}
+    </div>
+  );
+};
+
+Progress.propTypes = propTypes;
+Progress.defaultProps = defaultProps;
+
+export default Progress;

packages/kpn-style-react/src/index.js

@@ -86,6 +86,7 @@ import PaginationSelectField from "./PaginationSelectField";
 import Pitch from "./Pitch";
 import PitchBody from "./PitchBody";
 import PitchTitle from "./PitchTitle";
+import ProgressBar from "./ProgressBar";
 import Row from "./Row";
 import SideBar from "./SideBar";
 import SideBarActionMenu from "./SideBarActionMenu";
@@ -202,6 +203,7 @@ export {
   Pitch,
   PitchBody,
   PitchTitle,
+  ProgressBar,
   Row,
   SideBar,
   SideBarActionMenu,

packages/kpn-style-react/stories/ProgressBar.stories.js

@@ -0,0 +1,130 @@
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
+  Col,
+  ProgressBar,
+  Row
+} from "@kpn-style/react";
+import { boolean, number, text, withKnobs } from "@storybook/addon-knobs";
+
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { updateKnob } from "./utils";
+
+const stories = storiesOf("Components.ProgressBar", module).addDecorator(
+  withKnobs
+);
+
+stories.add("Simple", () => {
+  const options = {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1
+  };
+  const value = number("value", 0, options);
+  const _text = text("text", "Please wait");
+  return <ProgressBar value={value} text={_text} />;
+});
+
+stories.add("Animated", () => {
+  const options = {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1
+  };
+  const _text = text("text");
+  const value = number("value", 0, options);
+  const delayInMilliseconds = 100; //1 second
+  setTimeout(function() {
+    if (value <= 95) {
+      updateKnob("value", value + 5);
+    } else {
+      updateKnob("value", 0);
+    }
+  }, delayInMilliseconds);
+  return <ProgressBar value={value} text={_text} />;
+});
+
+stories.add("Blocking content", () => {
+  const options = {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1
+  };
+  const value = number("value", 0, options);
+  const _text = text("text", "Please wait");
+  const blocking = boolean("blocking", true);
+  const hidden = boolean("hidden", false);
+  return (
+    <Row>
+      <Col xs={4}>
+        <ProgressBar
+          value={value}
+          text={_text}
+          blocking={blocking}
+          hidden={hidden}
+        >
+          <Card>
+            <CardBody>Hello</CardBody>
+          </Card>
+        </ProgressBar>
+      </Col>
+    </Row>
+  );
+});
+
+stories.add("Animated Blocking content", () => {
+  const options = {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 1
+  };
+  const value = number("value", 0, options);
+  const _text = text("text", "Please wait");
+  const blocking = boolean("blocking", true);
+  const delayInMilliseconds = 100; //1 second
+  const timer = () => {
+    const ti = setTimeout(function() {
+      updateKnob("value", value + 10);
+      if (value > 89) {
+        updateKnob("blocking", false);
+        stop()
+      }
+
+    }, delayInMilliseconds);
+
+    function stop() {
+      clearTimeout(ti)
+
+    }
+  };
+  if (value < 100) {
+    timer();
+  }
+  return (
+    <Row>
+      <Col xs={4}>
+        <ProgressBar
+          value={value}
+          text={_text}
+          blocking={blocking}
+          hidden={!blocking}
+        >
+          <Card>
+            <CardHeader>
+              <CardTitle>Welcome</CardTitle>
+            </CardHeader>
+            <CardBody>Hello to this fantastic place</CardBody>
+          </Card>
+          <small>Terms and conditions may apply</small>
+        </ProgressBar>
+      </Col>
+    </Row>
+  );
+});