feat(oui-progress): progress component implementation

packages/oui-angular/src/index.js

@@ -34,6 +34,7 @@ import "@oui-angular/oui-page-header/src";
 import "@oui-angular/oui-tile/src";
 import "@oui-angular/oui-guide-menu/src";
 import "@oui-angular/oui-header-tabs/src";
+import "@oui-angular/oui-progress/src";
 
 angular.module("oui", [
     "oui.button",
@@ -71,5 +72,6 @@ angular.module("oui", [
     "oui.page-header",
     "oui.tile",
     "oui.guide-menu",
-    "oui.header-tabs"
+    "oui.header-tabs",
+    "oui.progress"
 ]);

packages/oui-angular/src/index.spec.js

@@ -35,6 +35,7 @@ loadTests(require.context("../../oui-page-header/src/", true, /.*((\.spec)|(inde
 loadTests(require.context("../../oui-tile/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-guide-menu/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-header-tabs/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/));
 
 function loadTests (context) {
     context.keys().forEach(context);

packages/oui-progress/README.md

@@ -0,0 +1,134 @@
+# oui-progress
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Simple
+
+```html:preview
+<oui-progress>
+    <oui-progress-bar type="info" value="$ctrl.progressData.value1"></oui-progress-bar>
+</oui-progress>
+
+<oui-progress>
+    <oui-progress-bar type="success" value="$ctrl.progressData.value2"></oui-progress-bar>
+</oui-progress>
+
+<oui-progress>
+    <oui-progress-bar type="warning" value="$ctrl.progressData.value3"></oui-progress-bar>
+</oui-progress>
+
+<oui-progress>
+    <oui-progress-bar type="error" value="$ctrl.progressData.value4"></oui-progress-bar>
+</oui-progress>
+```
+
+### With custom labels
+
+```html:preview
+<oui-progress>
+    <oui-progress-bar type="info"
+        value="$ctrl.progressData.value1"
+        text="Progress: {{$ctrl.progressData.value1}}%">
+    </oui-progress-bar>
+</oui-progress>
+```
+
+### Custom max value
+
+```html:preview
+<oui-progress max-value="200">
+    <oui-progress-bar type="success"
+        value="150"
+        text="Installing components: 150/200">
+    </oui-progress-bar>
+</oui-progress>
+```
+
+### Stacked
+
+```html:preview
+<oui-progress>
+    <oui-progress-bar type="success" value="30"></oui-progress-bar>
+    <oui-progress-bar type="error" value="15"></oui-progress-bar>
+</oui-progress>
+```
+
+### Thresholds
+
+```html:preview
+<oui-progress max-value="200">
+    <oui-progress-bar type="success"
+        value="139"
+        text="Installing components: 139/200">
+    </oui-progress-bar>
+    <oui-progress-threshold value="25"></oui-progress-threshold>
+    <oui-progress-threshold value="50"></oui-progress-threshold>
+    <oui-progress-threshold value="75"></oui-progress-threshold>
+    <oui-progress-threshold value="100"></oui-progress-threshold>
+    <oui-progress-threshold value="125"></oui-progress-threshold>
+    <oui-progress-threshold value="150"></oui-progress-threshold>
+    <oui-progress-threshold value="175"></oui-progress-threshold>
+</oui-progress>
+
+<oui-progress>
+    <oui-progress-bar type="error" value="60"></oui-progress-bar>
+    <oui-progress-threshold value="20"></oui-progress-threshold>
+    <oui-progress-threshold value="50"></oui-progress-threshold>
+    <oui-progress-threshold value="80"></oui-progress-threshold>
+</oui-progress>
+```
+
+### Compact mode
+
+```html:preview
+<oui-progress compact>
+    <oui-progress-bar type="info"
+        value="$ctrl.progressData.value1"
+        text="{{$ctrl.progressData.value1}}% complete">
+    </oui-progress-bar>
+</oui-progress>
+
+<oui-progress compact>
+    <oui-progress-bar type="success"
+        value="$ctrl.progressData.value2">
+    </oui-progress-bar>
+</oui-progress>
+
+<oui-progress compact>
+    <oui-progress-bar type="warning"
+        value="$ctrl.progressData.value3">
+    </oui-progress-bar>
+</oui-progress>
+
+<oui-progress compact>
+    <oui-progress-bar type="error"
+        value="$ctrl.progressData.value4"
+        text="{{$ctrl.progressData.value4}}% complete">
+    </oui-progress-bar>
+</oui-progress>
+```
+
+## API
+
+### oui-progress
+
+| Attribute | Type      | Binding | One-time binding    | Values                                 | default  | Description
+| ----      | ----      | ----    | ----                | ----                                   | ----     | ----
+| compact   | Boolean   | <?      | yes                 |                                        | false    | compact mode flag
+| min-value | Number    | @?      | yes                 |                                        | 0        | min value of progress component
+| max-value | Number    | @?      | yes                 |                                        | 100      | max value of progress component
+
+### oui-progress-bar
+| Attribute | Type      | Binding | One-time binding    | Values                                 | default  | Description
+| ----      | ----      | ----    | ----                | ----                                   | ----     | ----
+| type      | String    | @       | yes                 | `info`, `success`, `warning`, `error`  | `info`   | type of the progress bar
+| value     | Number    | <       | no                  |                                        |          | current value of progress bar
+| text      | String    | @?      | yes                 |                                        | value%   | text of progress bar. If undefined, the current value is display as a percentage.
+
+### oui-progress-threshold
+
+| Attribute | Type      | Binding | One-time binding    | Values    | default   | Description
+| ----      | ----      | ----    | ----                | ----      | ----      | ----
+| value     | Number    | <       | yes                 |           |           | value at which the threshold should appear

packages/oui-progress/src/bar/progress-bar.component.js

@@ -0,0 +1,15 @@
+import controller from "./progress-bar.controller";
+import template from "./progress-bar.html";
+
+export default {
+    template,
+    controller,
+    bindings: {
+        type: "@",
+        value: "<",
+        text: "@?"
+    },
+    require: {
+        progressCtrl: "^^ouiProgress"
+    }
+};

packages/oui-progress/src/bar/progress-bar.controller.js

@@ -0,0 +1,55 @@
+import { addDefaultParameter } from "@oui-angular/common/component-utils";
+import get from "lodash/get";
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $onInit () {
+        addDefaultParameter(this, "type", "info");
+
+        this.compact = this.progressCtrl.compact;
+        this.minValue = this.progressCtrl.minValue;
+        this.maxValue = this.progressCtrl.maxValue;
+    }
+
+    $onChanges (changes) {
+        const value = get(changes, "value.currentValue");
+
+        this.$timeout(() => {
+            this.$element
+                .attr("ariaValuenow", value);
+
+            if (!this.compact) {
+                this.$element
+                    .css("width", this.progressCtrl.getPercentageValue(value));
+            }
+        });
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element
+                .addClass("oui-progress__bar")
+                .addClass(`oui-progress__bar_${this.type}`)
+                .attr("ariaValuenow", this.value)
+                .attr("ariaValuemin", this.minValue)
+                .attr("ariaValuemax", this.maxValue)
+                .attr("role", "progressbar");
+
+            if (this.text) {
+                this.$element
+                    .attr("ariaValuetext", this.text);
+            }
+
+            if (!this.compact) {
+                this.$element
+                    .css("width", this.progressCtrl.getPercentageValue(this.value));
+            }
+        });
+    }
+}

packages/oui-progress/src/bar/progress-bar.html

@@ -0,0 +1,3 @@
+<span class="oui-progress__label"
+    ng-bind="!!$ctrl.text ? $ctrl.text : ($ctrl.value + '%')">
+</span>

packages/oui-progress/src/index.js

@@ -0,0 +1,8 @@
+import Progress from "./progress.component.js";
+import ProgressBar from "./bar/progress-bar.component.js";
+import ProgressThreshold from "./threshold/progress-threshold.component.js";
+
+angular.module("oui.progress", [])
+    .component("ouiProgress", Progress)
+    .component("ouiProgressBar", ProgressBar)
+    .component("ouiProgressThreshold", ProgressThreshold);