feat: oui skeleton

packages/oui-angular/src/index.js

@@ -26,6 +26,7 @@ import "@oui-angular/oui-criteria-adder/src";
 import "@oui-angular/oui-chips/src";
 import "@oui-angular/oui-popover/src";
 import "@oui-angular/oui-stepper/src";
+import "@oui-angular/oui-skeleton/src";
 
 angular.module("oui", [
     "oui.button",
@@ -55,5 +56,6 @@ angular.module("oui", [
     "oui.criteria-adder",
     "oui.chips",
     "oui.popover",
-    "oui.stepper"
+    "oui.stepper",
+    "oui.skeleton"
 ]);

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

@@ -27,6 +27,7 @@ loadTests(require.context("../../oui-criteria-adder/src/", true, /.*((\.spec)|(i
 loadTests(require.context("../../oui-chips/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/));
 loadTests(require.context("../../oui-stepper/src/", true, /.*((\.spec)|(index))$/));
+loadTests(require.context("../../oui-skeleton/src/", true, /.*((\.spec)|(index))$/));
 
 function loadTests (context) {
     context.keys().forEach(context);

packages/oui-skeleton/README.md

@@ -0,0 +1,36 @@
+# Skeleton
+
+<component-status cx-design="complete" ux="rc"></component-status>
+
+## Usage
+
+### Default
+```html:preview
+<oui-skeleton></oui-skeleton>
+```
+
+### Size
+```html:preview
+<oui-skeleton size="xs"></oui-skeleton>
+<oui-skeleton size="s"></oui-skeleton>
+<oui-skeleton size="m"></oui-skeleton>
+<oui-skeleton size="l"></oui-skeleton>
+<oui-skeleton size="xl"></oui-skeleton>
+<oui-skeleton size="auto"></oui-skeleton>
+```
+
+### Randomized width
+```html:preview
+<oui-skeleton randomized></oui-skeleton>
+<oui-skeleton randomized></oui-skeleton>
+<oui-skeleton randomized></oui-skeleton>
+<oui-skeleton randomized></oui-skeleton>
+<oui-skeleton randomized></oui-skeleton>
+```
+
+## API
+
+| Attribute     | Type      | Binding | One-time Binding | Values                     | Default   | Description
+| ----          | ----      | ----    | ----             | ----                       | ----      | ----
+| size          | String    | @?      | yes              | `xs`, `s`, `m`, `l`, `xl`  | `auto`    | Skeleton size
+| randomized    | Boolean   | <?      | yes              |                            | `false`   | Randomized width flag

packages/oui-skeleton/src/index.js

@@ -0,0 +1,4 @@
+import Skeleton from "./skeleton.component.js";
+
+angular.module("oui.skeleton", [])
+    .component("ouiSkeleton", Skeleton);

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

@@ -0,0 +1,33 @@
+describe("ouiSkeleton", () => {
+    let TestUtils;
+    let $timeout;
+
+    beforeEach(angular.mock.module("oui.skeleton"));
+    beforeEach(angular.mock.module("oui.test-utils"));
+
+    beforeEach(inject((_TestUtils_, _$timeout_) => {
+        TestUtils = _TestUtils_;
+        $timeout = _$timeout_;
+    }));
+
+    describe("Component", () => {
+        it("should display a oui-skeleton", () => {
+            const element = TestUtils.compileTemplate("<oui-skeleton></oui-skeleton");
+            expect(element).toBeTruthy();
+        });
+
+        it("should display a oui skeleton div", () => {
+            const element = TestUtils.compileTemplate("<oui-skeleton size=\"m\"></oui-skeleton");
+
+            $timeout.flush();
+            expect(element.hasClass("oui-skeleton_m")).toBeTruthy();
+        });
+
+        it("should display a oui skeleton div with a randomized width", () => {
+            const element = TestUtils.compileTemplate("<oui-skeleton randomized></oui-skeleton");
+
+            $timeout.flush();
+            expect(!!element.css("width")).toBeTruthy();
+        });
+    });
+});

packages/oui-skeleton/src/skeleton.component.js

@@ -0,0 +1,11 @@
+import controller from "./skeleton.controller";
+import template from "./skeleton.html";
+
+export default {
+    controller,
+    template,
+    bindings: {
+        size: "@?",
+        randomized: "<?"
+    }
+};

packages/oui-skeleton/src/skeleton.controller.js

@@ -0,0 +1,31 @@
+import { addBooleanParameter, addDefaultParameter } from "@oui-angular/common/component-utils";
+
+export default class {
+    constructor ($attrs, $element, $timeout) {
+        "ngInject";
+
+        this.$attrs = $attrs;
+        this.$element = $element;
+        this.$timeout = $timeout;
+    }
+
+    $onInit () {
+        addDefaultParameter(this, "size", "auto");
+        addBooleanParameter(this, "randomized");
+    }
+
+    $postLink () {
+        this.$timeout(() => {
+            this.$element.addClass(`oui-skeleton oui-skeleton_${this.size}`);
+
+            if (this.randomized) {
+                // Needed for eslint
+                const minWidth = 30;
+                const maxWidth = 100;
+                const randomWidth = Math.round((Math.random() * (maxWidth - minWidth)) + minWidth);
+
+                this.$element.css("width", `${randomWidth}%`);
+            }
+        });
+    }
+}

packages/oui-skeleton/src/skeleton.html

@@ -0,0 +1 @@
+<div class="oui-skeleton__loader"></div>