From 55f9b60523ec50a4fd387c6e1f26be284b213291 Mon Sep 17 00:00:00 2001 From: varun shivaprasad Date: Fri, 18 May 2018 11:36:48 +0530 Subject: [PATCH 1/7] feat: oui skeleton add oui skeleton component add examples and test case cui skeleton to oui --- packages/oui-angular/src/index.js | 4 ++- packages/oui-angular/src/index.spec.js | 1 + packages/oui-skeleton/README.md | 28 +++++++++++++++++++ packages/oui-skeleton/src/index.js | 4 +++ packages/oui-skeleton/src/index.spec.js | 25 +++++++++++++++++ .../oui-skeleton/src/skeleton.component.js | 13 +++++++++ .../oui-skeleton/src/skeleton.controller.js | 11 ++++++++ packages/oui-skeleton/src/skeleton.html | 6 ++++ 8 files changed, 91 insertions(+), 1 deletion(-) create mode 100644 packages/oui-skeleton/README.md create mode 100644 packages/oui-skeleton/src/index.js create mode 100644 packages/oui-skeleton/src/index.spec.js create mode 100644 packages/oui-skeleton/src/skeleton.component.js create mode 100644 packages/oui-skeleton/src/skeleton.controller.js create mode 100644 packages/oui-skeleton/src/skeleton.html diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js index 135bbb79..4ee5a2d2 100644 --- a/packages/oui-angular/src/index.js +++ b/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" ]); diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js index b85f44e0..ad53e8f7 100644 --- a/packages/oui-angular/src/index.spec.js +++ b/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); diff --git a/packages/oui-skeleton/README.md b/packages/oui-skeleton/README.md new file mode 100644 index 00000000..497dd178 --- /dev/null +++ b/packages/oui-skeleton/README.md @@ -0,0 +1,28 @@ +# Skeleton + + + +## Usage + +### Default +```html:preview + + + + + + +``` +### With transclude +```html:preview + + + +``` + +## API + +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| width | string | @ | | | random (<100 or >30) | width of the element in percentage ("30%") +| loading | boolean | < | | true, false | | boolean to indicate to show or hide the component diff --git a/packages/oui-skeleton/src/index.js b/packages/oui-skeleton/src/index.js new file mode 100644 index 00000000..1e021f6e --- /dev/null +++ b/packages/oui-skeleton/src/index.js @@ -0,0 +1,4 @@ +import Skeleton from "./skeleton.component.js"; + +angular.module("oui.skeleton", []) + .component("ouiSkeleton", Skeleton); diff --git a/packages/oui-skeleton/src/index.spec.js b/packages/oui-skeleton/src/index.spec.js new file mode 100644 index 00000000..285d7055 --- /dev/null +++ b/packages/oui-skeleton/src/index.spec.js @@ -0,0 +1,25 @@ +describe("ouiSkeleton", () => { + let TestUtils; + + beforeEach(angular.mock.module("oui.skeleton")); + beforeEach(angular.mock.module("oui.test-utils")); + + beforeEach(inject(_TestUtils_ => { + TestUtils = _TestUtils_; + })); + + describe("Component", () => { + it("should display a oui skeleton div", () => { + const element = TestUtils.compileTemplate(` + { + const element = TestUtils.compileTemplate(` + + +
+ From 1c7ed91c8245421a49ec9b3eedf4dd4e71fa0f75 Mon Sep 17 00:00:00 2001 From: varun shivaprasad Date: Fri, 18 May 2018 16:11:58 +0530 Subject: [PATCH 2/7] feat: oui skeleton add default parameter bind loading in readme cui skeleton to oui --- packages/oui-skeleton/README.md | 2 +- packages/oui-skeleton/src/skeleton.controller.js | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/oui-skeleton/README.md b/packages/oui-skeleton/README.md index 497dd178..8c11921a 100644 --- a/packages/oui-skeleton/README.md +++ b/packages/oui-skeleton/README.md @@ -15,7 +15,7 @@ ``` ### With transclude ```html:preview - + ``` diff --git a/packages/oui-skeleton/src/skeleton.controller.js b/packages/oui-skeleton/src/skeleton.controller.js index a591610d..a7173f1c 100644 --- a/packages/oui-skeleton/src/skeleton.controller.js +++ b/packages/oui-skeleton/src/skeleton.controller.js @@ -1,11 +1,15 @@ +import { addDefaultParameter } from "@oui-angular/common/component-utils"; + export default class { - constructor () { + constructor ($attrs) { "ngInject"; + + this.$attrs = $attrs; this.max = 100; this.min = 30; } $onInit () { - this.width = this.width || `${Math.round((Math.random() * (this.max - this.min + 1)) + this.min)}%`; + addDefaultParameter(this, "width", `${Math.round((Math.random() * (this.max - this.min + 1)) + this.min)}%`); } } From 90bc9045d050768e11a825c0a01a629cf47dd7f7 Mon Sep 17 00:00:00 2001 From: varun shivaprasad Date: Fri, 18 May 2018 17:16:48 +0530 Subject: [PATCH 3/7] feat: oui skeleton remove controllerAs ng if used instead of ng show cui skeleton to oui --- packages/oui-skeleton/src/skeleton.component.js | 1 - packages/oui-skeleton/src/skeleton.html | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/oui-skeleton/src/skeleton.component.js b/packages/oui-skeleton/src/skeleton.component.js index 7f600541..de2161df 100644 --- a/packages/oui-skeleton/src/skeleton.component.js +++ b/packages/oui-skeleton/src/skeleton.component.js @@ -3,7 +3,6 @@ import template from "./skeleton.html"; export default { controller, - controllerAs: "$ctrl", template, bindings: { loading: "<", diff --git a/packages/oui-skeleton/src/skeleton.html b/packages/oui-skeleton/src/skeleton.html index fd6c6937..d3f7cc53 100644 --- a/packages/oui-skeleton/src/skeleton.html +++ b/packages/oui-skeleton/src/skeleton.html @@ -1,6 +1,6 @@
-
+
From caa854d31963df95e92b2f64c575505261756441 Mon Sep 17 00:00:00 2001 From: varun shivaprasad Date: Mon, 21 May 2018 14:44:05 +0530 Subject: [PATCH 4/7] feat: oui skeleton remove loading in skeleton remove width calculation add size attr to skeleton cui skeleton to oui --- packages/oui-skeleton/README.md | 32 +++++++++++-------- .../oui-skeleton/src/skeleton.component.js | 7 ++-- .../oui-skeleton/src/skeleton.controller.js | 11 +++---- packages/oui-skeleton/src/skeleton.html | 7 +--- 4 files changed, 27 insertions(+), 30 deletions(-) diff --git a/packages/oui-skeleton/README.md b/packages/oui-skeleton/README.md index 8c11921a..619a4168 100644 --- a/packages/oui-skeleton/README.md +++ b/packages/oui-skeleton/README.md @@ -1,28 +1,34 @@ # Skeleton - + ## Usage ### Default ```html:preview - - - - - - + + ``` -### With transclude +### Size ```html:preview - - - + + + + + + +``` + +### With custom width (gets precedence over size) +```html:preview + + + ``` ## API | Attribute | Type | Binding | One-time Binding | Values | Default | Description | ---- | ---- | ---- | ---- | ---- | ---- | ---- -| width | string | @ | | | random (<100 or >30) | width of the element in percentage ("30%") -| loading | boolean | < | | true, false | | boolean to indicate to show or hide the component +| width | string | @ | | | `auto` | width of the element in percentage +| size | String | @? | yes | `xs`, `s`, `m`, `l`, `xl`| `auto` | width of the element diff --git a/packages/oui-skeleton/src/skeleton.component.js b/packages/oui-skeleton/src/skeleton.component.js index de2161df..1cdf1096 100644 --- a/packages/oui-skeleton/src/skeleton.component.js +++ b/packages/oui-skeleton/src/skeleton.component.js @@ -5,8 +5,7 @@ export default { controller, template, bindings: { - loading: "<", - width: "@" - }, - transclude: true + width: "@", + size: "@" + } }; diff --git a/packages/oui-skeleton/src/skeleton.controller.js b/packages/oui-skeleton/src/skeleton.controller.js index a7173f1c..61dfe389 100644 --- a/packages/oui-skeleton/src/skeleton.controller.js +++ b/packages/oui-skeleton/src/skeleton.controller.js @@ -1,15 +1,12 @@ -import { addDefaultParameter } from "@oui-angular/common/component-utils"; - export default class { - constructor ($attrs) { + constructor ($element) { "ngInject"; - this.$attrs = $attrs; - this.max = 100; - this.min = 30; + this.$element = $element; } $onInit () { - addDefaultParameter(this, "width", `${Math.round((Math.random() * (this.max - this.min + 1)) + this.min)}%`); + this.size = this.size || "auto"; + this.$element.addClass(`oui-skeleton oui-skeleton_${this.size}`); } } diff --git a/packages/oui-skeleton/src/skeleton.html b/packages/oui-skeleton/src/skeleton.html index d3f7cc53..63da9442 100644 --- a/packages/oui-skeleton/src/skeleton.html +++ b/packages/oui-skeleton/src/skeleton.html @@ -1,6 +1 @@ -
- -
-
+
From b5544e1b25ace95c00011765d64a6a7bf1817226 Mon Sep 17 00:00:00 2001 From: Axel Peter Date: Mon, 21 May 2018 16:32:34 +0200 Subject: [PATCH 5/7] chore(oui-skeleton): update attributes and tests --- packages/oui-skeleton/README.md | 60 ++++++++----------- packages/oui-skeleton/src/index.spec.js | 47 +++++++-------- .../oui-skeleton/src/skeleton.component.js | 21 ++++--- .../oui-skeleton/src/skeleton.controller.js | 34 +++++++---- packages/oui-skeleton/src/skeleton.html | 2 +- 5 files changed, 81 insertions(+), 83 deletions(-) diff --git a/packages/oui-skeleton/README.md b/packages/oui-skeleton/README.md index 619a4168..a6809c44 100644 --- a/packages/oui-skeleton/README.md +++ b/packages/oui-skeleton/README.md @@ -1,34 +1,26 @@ -# Skeleton - - - -## Usage - -### Default -```html:preview - - -``` -### Size -```html:preview - - - - - - -``` - -### With custom width (gets precedence over size) -```html:preview - - - -``` - -## API - -| Attribute | Type | Binding | One-time Binding | Values | Default | Description -| ---- | ---- | ---- | ---- | ---- | ---- | ---- -| width | string | @ | | | `auto` | width of the element in percentage -| size | String | @? | yes | `xs`, `s`, `m`, `l`, `xl`| `auto` | width of the element +# Skeleton + + + +## Usage + +### Default +```html:preview + +``` + +### Size +```html:preview + + + + + + +``` + +## API + +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| size | String | @? | yes | `xs`, `s`, `m`, `l`, `xl` | `auto` | Skeleton size diff --git a/packages/oui-skeleton/src/index.spec.js b/packages/oui-skeleton/src/index.spec.js index 285d7055..ddcac03b 100644 --- a/packages/oui-skeleton/src/index.spec.js +++ b/packages/oui-skeleton/src/index.spec.js @@ -1,25 +1,22 @@ -describe("ouiSkeleton", () => { - let TestUtils; - - beforeEach(angular.mock.module("oui.skeleton")); - beforeEach(angular.mock.module("oui.test-utils")); - - beforeEach(inject(_TestUtils_ => { - TestUtils = _TestUtils_; - })); - - describe("Component", () => { - it("should display a oui skeleton div", () => { - const element = TestUtils.compileTemplate(` - { - const element = TestUtils.compileTemplate(` - { + let TestUtils; + + beforeEach(angular.mock.module("oui.skeleton")); + beforeEach(angular.mock.module("oui.test-utils")); + + beforeEach(inject(_TestUtils_ => { + TestUtils = _TestUtils_; + })); + + describe("Component", () => { + it("should display a oui-skeleton", () => { + const element = TestUtils.compileTemplate(" { + const element = TestUtils.compileTemplate(" + this.$element + .addClass(`oui-skeleton oui-skeleton_${this.size}`) + ); + } +} diff --git a/packages/oui-skeleton/src/skeleton.html b/packages/oui-skeleton/src/skeleton.html index 63da9442..0baae047 100644 --- a/packages/oui-skeleton/src/skeleton.html +++ b/packages/oui-skeleton/src/skeleton.html @@ -1 +1 @@ -
+
From aa29fa45840c5eb639cf28b799c35a2f18b87187 Mon Sep 17 00:00:00 2001 From: Axel Peter Date: Mon, 28 May 2018 14:41:49 +0200 Subject: [PATCH 6/7] chore(oui-skeleton): add flush --- packages/oui-skeleton/src/index.spec.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/oui-skeleton/src/index.spec.js b/packages/oui-skeleton/src/index.spec.js index ddcac03b..ec94f376 100644 --- a/packages/oui-skeleton/src/index.spec.js +++ b/packages/oui-skeleton/src/index.spec.js @@ -1,11 +1,13 @@ describe("ouiSkeleton", () => { let TestUtils; + let $timeout; beforeEach(angular.mock.module("oui.skeleton")); beforeEach(angular.mock.module("oui.test-utils")); - beforeEach(inject(_TestUtils_ => { + beforeEach(inject((_TestUtils_, _$timeout_) => { TestUtils = _TestUtils_; + $timeout = _$timeout_; })); describe("Component", () => { @@ -16,6 +18,8 @@ describe("ouiSkeleton", () => { it("should display a oui skeleton div", () => { const element = TestUtils.compileTemplate(" Date: Mon, 28 May 2018 16:00:53 +0200 Subject: [PATCH 7/7] feat(oui-skeleton): add randomized width --- packages/oui-skeleton/README.md | 16 +++++++++++++--- packages/oui-skeleton/src/index.spec.js | 11 +++++++++-- .../oui-skeleton/src/skeleton.component.js | 3 ++- .../oui-skeleton/src/skeleton.controller.js | 19 ++++++++++++++----- 4 files changed, 38 insertions(+), 11 deletions(-) diff --git a/packages/oui-skeleton/README.md b/packages/oui-skeleton/README.md index a6809c44..5e97be40 100644 --- a/packages/oui-skeleton/README.md +++ b/packages/oui-skeleton/README.md @@ -19,8 +19,18 @@ ``` +### Randomized width +```html:preview + + + + + +``` + ## API -| Attribute | Type | Binding | One-time Binding | Values | Default | Description -| ---- | ---- | ---- | ---- | ---- | ---- | ---- -| size | String | @? | yes | `xs`, `s`, `m`, `l`, `xl` | `auto` | Skeleton size +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| size | String | @? | yes | `xs`, `s`, `m`, `l`, `xl` | `auto` | Skeleton size +| randomized | Boolean | { describe("Component", () => { it("should display a oui-skeleton", () => { const element = TestUtils.compileTemplate(" { const element = TestUtils.compileTemplate(" { + const element = TestUtils.compileTemplate(" - this.$element - .addClass(`oui-skeleton oui-skeleton_${this.size}`) - ); + 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}%`); + } + }); } }