From 41a0639c38ea310d523ba3f0bfa3e013f244fa92 Mon Sep 17 00:00:00 2001 From: ganeshkumar1989 Date: Wed, 4 Jul 2018 20:58:27 +0530 Subject: [PATCH 1/8] feat(oui-progress): add oui-progress component (#192) * fix(oui-progress): progress component implementation Added progress component * feat(oui-progress): progress component implementation updated to match the latest UI spec * chore(oui-progress): review files structure * chore(oui-progress): update for compatibility support * chore(oui-progress): add unit tests --- packages/oui-angular/src/index.js | 4 +- packages/oui-angular/src/index.spec.js | 1 + packages/oui-progress/README.md | 134 ++++++++++++++ .../src/bar/progress-bar.component.js | 15 ++ .../src/bar/progress-bar.controller.js | 55 ++++++ .../oui-progress/src/bar/progress-bar.html | 3 + packages/oui-progress/src/index.js | 8 + packages/oui-progress/src/index.spec.js | 163 ++++++++++++++++++ .../oui-progress/src/progress.component.js | 10 ++ .../oui-progress/src/progress.controller.js | 34 ++++ .../threshold/progress-threshold.component.js | 11 ++ .../progress-threshold.controller.js | 16 ++ 12 files changed, 453 insertions(+), 1 deletion(-) create mode 100644 packages/oui-progress/README.md create mode 100644 packages/oui-progress/src/bar/progress-bar.component.js create mode 100644 packages/oui-progress/src/bar/progress-bar.controller.js create mode 100644 packages/oui-progress/src/bar/progress-bar.html create mode 100644 packages/oui-progress/src/index.js create mode 100644 packages/oui-progress/src/index.spec.js create mode 100644 packages/oui-progress/src/progress.component.js create mode 100644 packages/oui-progress/src/progress.controller.js create mode 100644 packages/oui-progress/src/threshold/progress-threshold.component.js create mode 100644 packages/oui-progress/src/threshold/progress-threshold.controller.js diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js index 214320dd..471a1e6e 100644 --- a/packages/oui-angular/src/index.js +++ b/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" ]); diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js index 624cda3e..3014b647 100644 --- a/packages/oui-angular/src/index.spec.js +++ b/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); diff --git a/packages/oui-progress/README.md b/packages/oui-progress/README.md new file mode 100644 index 00000000..c639db5c --- /dev/null +++ b/packages/oui-progress/README.md @@ -0,0 +1,134 @@ +# oui-progress + + + +## Usage + +### Simple + +```html:preview + + + + + + + + + + + + + + + +``` + +### With custom labels + +```html:preview + + + + +``` + +### Custom max value + +```html:preview + + + + +``` + +### Stacked + +```html:preview + + + + +``` + +### Thresholds + +```html:preview + + + + + + + + + + + + + + + + + + +``` + +### Compact mode + +```html:preview + + + + + + + + + + + + + + + + + + + +``` + +## API + +### oui-progress + +| Attribute | Type | Binding | One-time binding | Values | default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| compact | Boolean | { + 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)); + } + }); + } +} diff --git a/packages/oui-progress/src/bar/progress-bar.html b/packages/oui-progress/src/bar/progress-bar.html new file mode 100644 index 00000000..9970e2a6 --- /dev/null +++ b/packages/oui-progress/src/bar/progress-bar.html @@ -0,0 +1,3 @@ + + diff --git a/packages/oui-progress/src/index.js b/packages/oui-progress/src/index.js new file mode 100644 index 00000000..f6cb9fa3 --- /dev/null +++ b/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); diff --git a/packages/oui-progress/src/index.spec.js b/packages/oui-progress/src/index.spec.js new file mode 100644 index 00000000..532b28de --- /dev/null +++ b/packages/oui-progress/src/index.spec.js @@ -0,0 +1,163 @@ +describe("ouiProgress", () => { + let TestUtils; + let $timeout; + + const progressClass = "oui-progress"; + const progressBarClass = `${progressClass}__bar`; + const progressLabelClass = `${progressClass}__label`; + const progressThresholdClass = `${progressClass}__threshold`; + + beforeEach(angular.mock.module("oui.progress")); + beforeEach(angular.mock.module("oui.test-utils")); + + beforeEach(inject((_TestUtils_, _$timeout_) => { + TestUtils = _TestUtils_; + $timeout = _$timeout_; + })); + + describe("ouiProgress Component", () => { + function getProgressBarComponent (element, type) { + if (type) { + return angular.element(element[0].querySelector(`.${progressBarClass}_${type}`)); + } + + return angular.element(element[0].querySelector(`.${progressBarClass}`)); + } + + function getProgressBarLabel (element) { + return angular.element(element[0].querySelector(`.${progressLabelClass}`)); + } + + function getProgressThreshold (element) { + return angular.element(element[0].querySelector(`.${progressThresholdClass}`)); + } + + it("should display a progress", () => { + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(element.hasClass(progressClass)).toBeTruthy(); + expect(getProgressBarComponent(element).length).toBe(1); + }); + + it("should display a compact progress bar", () => { + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(element.hasClass(`${progressClass}_compact`)).toBeTruthy(); + }); + + it("should set type info by default", () => { + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarComponent(element, "info").length).toBe(1); + }); + + it("should display a progress bar of each type", () => { + const element = TestUtils.compileTemplate(` + + + + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarComponent(element, "info").length).toBe(1); + expect(getProgressBarComponent(element, "success").length).toBe(1); + expect(getProgressBarComponent(element, "warning").length).toBe(1); + expect(getProgressBarComponent(element, "error").length).toBe(1); + }); + + it("should have the correct width set", () => { + const value = 5; + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarComponent(element).css("width")).toBe(`${value}%`); + }); + + it("should have the correct width when max-value is used", () => { + const value = 10; + const expectedWidth = value / 2; + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarComponent(element).css("width")).toBe(`${expectedWidth}%`); + }); + + it("should have the correct default label", () => { + const value = 5; + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarLabel(element).text()).toBe(`${value}%`); + }); + + it("should have the correct label", () => { + const value = 5; + const text = `Progress: ${value}%`; + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + expect(getProgressBarLabel(element).text()).toBe(text); + }); + + describe("ouiProgressThreshold Component", () => { + it("should have the correct position according to value", () => { + const value = 10; + const maxValue = 200; + const leftPosition = value / (maxValue / 100); + const element = TestUtils.compileTemplate(` + + + ` + ); + + $timeout.flush(); + + const thresholdEl = getProgressThreshold(element); + expect(thresholdEl.length).toBe(1); + expect(thresholdEl.css("left")).toBe(`${leftPosition}%`); + }); + }); + }); +}); diff --git a/packages/oui-progress/src/progress.component.js b/packages/oui-progress/src/progress.component.js new file mode 100644 index 00000000..ee84eb62 --- /dev/null +++ b/packages/oui-progress/src/progress.component.js @@ -0,0 +1,10 @@ +import controller from "./progress.controller"; + +export default { + controller, + bindings: { + compact: " { + this.$element.addClass("oui-progress"); + + if (this.compact) { + this.$element.addClass("oui-progress_compact"); + } + }); + } + + getPercentageValue (value) { + const percent = 100; + const minValue = this.minValue; + const maxValue = Math.max(this.maxValue - this.minValue, minValue); + const currentValue = Math.max(value - this.minValue, minValue); + + return `${(currentValue / maxValue) * percent}%`; + } +} diff --git a/packages/oui-progress/src/threshold/progress-threshold.component.js b/packages/oui-progress/src/threshold/progress-threshold.component.js new file mode 100644 index 00000000..ff6c68ef --- /dev/null +++ b/packages/oui-progress/src/threshold/progress-threshold.component.js @@ -0,0 +1,11 @@ +import controller from "./progress-threshold.controller"; + +export default { + controller, + bindings: { + value: "<" + }, + require: { + progressCtrl: "^^ouiProgress" + } +}; diff --git a/packages/oui-progress/src/threshold/progress-threshold.controller.js b/packages/oui-progress/src/threshold/progress-threshold.controller.js new file mode 100644 index 00000000..9f1b64fa --- /dev/null +++ b/packages/oui-progress/src/threshold/progress-threshold.controller.js @@ -0,0 +1,16 @@ +export default class { + constructor ($element, $timeout) { + "ngInject"; + + this.$element = $element; + this.$timeout = $timeout; + } + + $postLink () { + this.$timeout(() => + this.$element + .addClass("oui-progress__threshold") + .css("left", this.progressCtrl.getPercentageValue(this.value)) + ); + } +} From d496e19b8bdb2a3be2e25d7c322ac60e02b28fa5 Mon Sep 17 00:00:00 2001 From: varun257 Date: Wed, 4 Jul 2018 21:12:17 +0530 Subject: [PATCH 2/8] feat(oui-switch): add oui-switch component (#191) * feat(oui switch): add oui-switch component * docs(oui-switch): fix validation example --- packages/oui-angular/src/index.js | 4 +- packages/oui-angular/src/index.spec.js | 1 + packages/oui-field/README.md | 12 ++ packages/oui-switch/README.md | 68 +++++++ packages/oui-switch/src/index.js | 4 + packages/oui-switch/src/index.spec.js | 195 +++++++++++++++++++ packages/oui-switch/src/switch.component.js | 15 ++ packages/oui-switch/src/switch.controller.js | 27 +++ packages/oui-switch/src/switch.html | 8 + 9 files changed, 333 insertions(+), 1 deletion(-) create mode 100644 packages/oui-switch/README.md create mode 100644 packages/oui-switch/src/index.js create mode 100644 packages/oui-switch/src/index.spec.js create mode 100644 packages/oui-switch/src/switch.component.js create mode 100644 packages/oui-switch/src/switch.controller.js create mode 100644 packages/oui-switch/src/switch.html diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js index 471a1e6e..4b7bd45c 100644 --- a/packages/oui-angular/src/index.js +++ b/packages/oui-angular/src/index.js @@ -35,6 +35,7 @@ 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"; +import "@oui-angular/oui-switch/src"; angular.module("oui", [ "oui.button", @@ -73,5 +74,6 @@ angular.module("oui", [ "oui.tile", "oui.guide-menu", "oui.header-tabs", - "oui.progress" + "oui.progress", + "oui.switch" ]); diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js index 3014b647..e24586f1 100644 --- a/packages/oui-angular/src/index.spec.js +++ b/packages/oui-angular/src/index.spec.js @@ -36,6 +36,7 @@ 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))$/)); +loadTests(require.context("../../oui-switch/src/", true, /.*((\.spec)|(index))$/)); function loadTests (context) { context.keys().forEach(context); diff --git a/packages/oui-field/README.md b/packages/oui-field/README.md index be2e0e15..d20fcc7f 100644 --- a/packages/oui-field/README.md +++ b/packages/oui-field/README.md @@ -83,6 +83,18 @@ ``` +### Switch + +```html:preview +
+ + + +
+``` ### Radio diff --git a/packages/oui-switch/README.md b/packages/oui-switch/README.md new file mode 100644 index 00000000..e1170745 --- /dev/null +++ b/packages/oui-switch/README.md @@ -0,0 +1,68 @@ +# Switch + + + +## Usage + +### Basic + +```html:preview + + + + +``` + +### Disabled + +```html:preview + + + + +``` + +### On change + +**Note:** Model will not be refreshed until the `on-change` callback as not finished. If you want to access the new model inside the `on-change` callback you need to use the `modelValue` variable as below. + +```html:preview +
+ + +
+Last onChange value: {{ $ctrl.lastOnChangeValue || ($ctrl.lastOnChangeValue === false && "false") || "undefined" }} +``` + +### Validation in form + +```html:preview +
+
+ + +
+ Is this form valid? : {{ switchForm.$valid ? "yes" : "no" }} +
+``` + +## API + +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| disabled | boolean | { + let TestUtils; + let $timeout; + + beforeEach(angular.mock.module("oui.switch")); + beforeEach(angular.mock.module("oui.test-utils")); + + beforeEach(inject((_TestUtils_, _$timeout_) => { + TestUtils = _TestUtils_; + $timeout = _$timeout_; + })); + + const getSwitchInputElement = (element) => element[0].querySelector("input[type=checkbox]"); + + describe("Component", () => { + + describe("input checkbox", () => { + it("should display a input (checkbox) element", () => { + const element = TestUtils.compileTemplate(""); + $timeout.flush(); + expect(getSwitchInputElement(element)).toBeTruthy(); + }); + }); + + describe("id attribute", () => { + it("should generate an id for the input when undefined", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("id")).toMatch(/^ouiSwitch\d+$/); + }); + + it("should set the id for the input when defined", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("id")).toBe("test"); + }); + }); + + describe("name attribute", () => { + it("should set the name attribute on input when defined", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("name")).toBe("test"); + }); + }); + + describe("model attribute", () => { + it("should display an unchecked switch when no model", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("checked")).toBe(false); + }); + + it("should display a on switch when true", () => { + const element = TestUtils.compileTemplate("", { + checked: true + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("checked")).toBe(true); + }); + + it("should display a an off switch when false", () => { + const element = TestUtils.compileTemplate("", { + checked: false + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("checked")).toBe(false); + }); + + it("should be updated when clicked", () => { + const element = TestUtils.compileTemplate("", { + currentModel: false + }); + + $timeout.flush(); + const $ctrl = TestUtils.getElementController(element); + const checkboxElement = getSwitchInputElement(element); + const $checkboxElement = angular.element(checkboxElement); + $checkboxElement.prop("checked", true); + $checkboxElement.triggerHandler("click"); + expect($ctrl.currentModel).toBe(true); + }); + }); + + describe("disabled attribute", () => { + it("should display an active switch when no attribute", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("disabled")).toBe(false); + }); + + it("should display a disabled switch when defined but no value", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("disabled")).toBe(true); + }); + + it("should display a disabled switch when true", () => { + const element = TestUtils.compileTemplate("", { + disabled: true + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("disabled")).toBe(true); + }); + }); + + describe("on-change attribute", () => { + it("should trigger callback when the switch is clicked", () => { + const onChangeSpy = jasmine.createSpy("onChangeSpy"); + + const element = TestUtils.compileTemplate("", { + onChange: onChangeSpy + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + const $checkboxElement = angular.element(checkboxElement); + $checkboxElement.prop("checked", true); + $checkboxElement.triggerHandler("click"); + expect(onChangeSpy).toHaveBeenCalledWith(true); + }); + }); + + describe("Validation", () => { + it("should apply a required validation with the required attribute without value", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("required")).toBe(true); + }); + + it("should apply a required validation with the required attribute when true", () => { + const element = TestUtils.compileTemplate(` + + `, { + isRequired: true + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("required")).toBe(true); + }); + + it("should not apply a required validation with the required attribute when false", () => { + const element = TestUtils.compileTemplate(` + + `, { + isRequired: false + }); + + $timeout.flush(); + const checkboxElement = getSwitchInputElement(element); + expect(angular.element(checkboxElement).prop("required")).toBe(false); + }); + + it("should be done if required attribute is defined", () => { + const element = TestUtils.compileTemplate(`
+ +
+ `, { + isRequired: true + }); + + $timeout.flush(); + const form = element.scope().form; + const checkboxElement = getSwitchInputElement(element); + const $checkboxElement = angular.element(checkboxElement); + expect(form.$valid).toBeFalsy(); + + $checkboxElement.prop("checked", true); + $checkboxElement.triggerHandler("click"); + expect(form.$valid).toBeTruthy(); + }); + }); + }); +}); diff --git a/packages/oui-switch/src/switch.component.js b/packages/oui-switch/src/switch.component.js new file mode 100644 index 00000000..39e639e3 --- /dev/null +++ b/packages/oui-switch/src/switch.component.js @@ -0,0 +1,15 @@ +import controller from "./switch.controller"; +import template from "./switch.html"; + +export default { + controller, + template, + bindings: { + disabled: " + this.$element + .addClass("oui-switch") + .removeAttr("id") + .removeAttr("name") + ); + } +} diff --git a/packages/oui-switch/src/switch.html b/packages/oui-switch/src/switch.html new file mode 100644 index 00000000..56e2d2ec --- /dev/null +++ b/packages/oui-switch/src/switch.html @@ -0,0 +1,8 @@ + From cbb7f2a3dd088d54dd78622b41956ec2257bdf35 Mon Sep 17 00:00:00 2001 From: Marie JONES <14836007+marie-j@users.noreply.github.com> Date: Tue, 17 Jul 2018 16:48:37 +0200 Subject: [PATCH 3/8] fix(oui-action-menu): allow to disable action menu dynamically (#232) --- packages/oui-action-menu/src/action-menu.component.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/oui-action-menu/src/action-menu.component.js b/packages/oui-action-menu/src/action-menu.component.js index 05d7b936..3cb5758f 100644 --- a/packages/oui-action-menu/src/action-menu.component.js +++ b/packages/oui-action-menu/src/action-menu.component.js @@ -8,7 +8,8 @@ export default { text: "@", align: "@?", ariaLabel: "@?", - compact: " Date: Tue, 17 Jul 2018 17:30:01 +0200 Subject: [PATCH 4/8] fix(oui-popover): update style to specs (#229) --- packages/oui-field/src/field.html | 2 +- packages/oui-popover/README.md | 2 +- packages/oui-tile/src/definition/tile-definition.html | 2 +- packages/oui-tile/src/index.spec.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/oui-field/src/field.html b/packages/oui-field/src/field.html index a99dab65..9f8a460d 100644 --- a/packages/oui-field/src/field.html +++ b/packages/oui-field/src/field.html @@ -11,7 +11,7 @@ ng-bind="::$ctrl.label"> - +
diff --git a/packages/oui-popover/README.md b/packages/oui-popover/README.md index 7d018b0a..77efeba1 100644 --- a/packages/oui-popover/README.md +++ b/packages/oui-popover/README.md @@ -64,7 +64,7 @@ ```html:preview
- + This is an awesome popover content.
diff --git a/packages/oui-tile/src/definition/tile-definition.html b/packages/oui-tile/src/definition/tile-definition.html index fa6b1bc3..03f030de 100644 --- a/packages/oui-tile/src/definition/tile-definition.html +++ b/packages/oui-tile/src/definition/tile-definition.html @@ -2,7 +2,7 @@
- +
diff --git a/packages/oui-tile/src/index.spec.js b/packages/oui-tile/src/index.spec.js index 0c2fdee0..7458c6a6 100644 --- a/packages/oui-tile/src/index.spec.js +++ b/packages/oui-tile/src/index.spec.js @@ -112,7 +112,7 @@ describe("ouiTile", () => { `); - const popoverButton = angular.element(element[0].querySelector(".oui-popover__help-button")); + const popoverButton = angular.element(element[0].querySelector(".oui-popover-button")); const popoverContent = angular.element(element[0].querySelector("oui-popover-content")); expect(popoverButton).toBeDefined(); From 8fd418b674efc4d6703d8f99909e4e9e51600316 Mon Sep 17 00:00:00 2001 From: JeremyDec <34273689+JeremyDec@users.noreply.github.com> Date: Fri, 20 Jul 2018 11:22:48 +0200 Subject: [PATCH 5/8] feat(oui-tile): add external link handle (#234) --- packages/oui-tile/README.md | 1 + .../oui-tile/src/button/tile-button.component.js | 3 ++- .../oui-tile/src/button/tile-button.controller.js | 6 ++++++ packages/oui-tile/src/button/tile-button.html | 10 ++++++++-- packages/oui-tile/src/index.spec.js | 14 ++++++++++++++ 5 files changed, 31 insertions(+), 3 deletions(-) diff --git a/packages/oui-tile/README.md b/packages/oui-tile/README.md index fe1c44db..2525d83a 100644 --- a/packages/oui-tile/README.md +++ b/packages/oui-tile/README.md @@ -89,6 +89,7 @@ | `href` | string | @? | yes | | | button link url | | `on-click` | funcion | &? | | | | button action callback | | `aria-label` | string | @? | | | `null` | accessibility label | +| `external` | boolean | {{ :: $ctrl.text }} - + {{ :: $ctrl.text }} - + + diff --git a/packages/oui-tile/src/index.spec.js b/packages/oui-tile/src/index.spec.js index 7458c6a6..792cbfa0 100644 --- a/packages/oui-tile/src/index.spec.js +++ b/packages/oui-tile/src/index.spec.js @@ -65,6 +65,20 @@ describe("ouiTile", () => { expect(button.attr("href")).toBe(url); }); + it("should add rel and target attributes if tile button is external link", () => { + const relAttr = "noopener"; + const targetAttr = "_blank"; + const element = TestUtils.compileTemplate( + ` + + `); + + const button = getTileButton(element); + + expect(button.attr("rel")).toBe(relAttr); + expect(button.attr("target")).toBe(targetAttr); + }); + it("should handle click in a button tile", () => { const clickSpy = jasmine.createSpy("click"); const element = TestUtils.compileTemplate( From 9a93f31e83f02820e57ecc3aed7a3c794cde3ac6 Mon Sep 17 00:00:00 2001 From: Axel Peter <15101925+AxelPeter@users.noreply.github.com> Date: Tue, 24 Jul 2018 15:37:47 +0200 Subject: [PATCH 6/8] chore: optimize for webpack (#236) * feat: add export default on modules * fix: optimize lodash import --- packages/oui-action-menu/src/index.js | 6 +- packages/oui-angular/src/index.js | 152 +++++++++--------- packages/oui-back-button/src/index.js | 5 +- packages/oui-button/src/index.js | 5 +- .../oui-calendar/src/calendar.provider.js | 2 +- packages/oui-calendar/src/index.js | 5 +- packages/oui-checkbox/src/index.js | 5 +- packages/oui-chips/src/index.js | 5 +- packages/oui-chips/src/index.spec.js | 2 +- .../oui-clipboard/src/clipboard.provider.js | 2 +- packages/oui-clipboard/src/index.js | 14 +- packages/oui-collapsible/src/index.js | 6 +- .../src/criteria-adder.controller.js | 2 +- packages/oui-criteria-adder/src/index.js | 5 +- packages/oui-criteria-adder/src/index.spec.js | 2 +- .../src/criteria-container.controller.js | 2 +- packages/oui-criteria-container/src/index.js | 6 +- .../oui-datagrid/src/datagrid.controller.js | 2 +- .../src/filter/comparator-resolver.js | 3 +- packages/oui-datagrid/src/filter/date.js | 3 +- packages/oui-datagrid/src/filter/filter.js | 3 +- packages/oui-datagrid/src/index.js | 5 +- packages/oui-field/src/index.js | 6 +- packages/oui-field/src/index.spec.js | 2 +- packages/oui-form-actions/src/index.js | 6 +- packages/oui-guide-menu/src/index.js | 6 +- packages/oui-header-tabs/src/index.js | 6 +- packages/oui-message/src/index.js | 5 +- packages/oui-message/src/index.spec.js | 2 +- packages/oui-modal/src/index.js | 5 +- packages/oui-navbar/src/index.js | 5 +- packages/oui-numeric/src/index.js | 5 +- .../oui-numeric/src/numeric.controller.js | 2 +- packages/oui-page-header/src/index.js | 6 +- packages/oui-pagination/src/index.js | 6 +- packages/oui-popover/src/index.js | 6 +- packages/oui-progress/src/index.js | 6 +- packages/oui-radio-group/src/index.js | 9 +- packages/oui-radio-toggle-group/src/index.js | 11 +- packages/oui-radio/src/index.js | 5 +- packages/oui-search/src/index.js | 5 +- packages/oui-search/src/search.controller.js | 2 +- packages/oui-select-picker/src/index.js | 5 +- .../src/select-picker.controller.js | 2 +- packages/oui-select/src/index.js | 13 +- packages/oui-select/src/index.spec.js | 2 +- packages/oui-skeleton/src/index.js | 10 +- packages/oui-slideshow/src/index.js | 6 +- packages/oui-spinner/src/index.js | 5 +- packages/oui-stepper/src/index.js | 6 +- packages/oui-stepper/src/stepper.provider.js | 2 +- packages/oui-switch/src/index.js | 10 +- packages/oui-textarea/src/index.js | 6 +- packages/oui-tile/src/index.js | 6 +- packages/oui-tooltip/src/index.js | 6 +- 55 files changed, 256 insertions(+), 171 deletions(-) diff --git a/packages/oui-action-menu/src/index.js b/packages/oui-action-menu/src/index.js index 98e60542..9796c87c 100644 --- a/packages/oui-action-menu/src/index.js +++ b/packages/oui-action-menu/src/index.js @@ -2,7 +2,9 @@ import ActionMenu from "./action-menu.component.js"; import DropdownDivider from "../../oui-dropdown/src/divider/dropdown-divider.component"; import DropdownItem from "../../oui-dropdown/src/item/dropdown-item.component"; -angular.module("oui.action-menu", []) +export default angular + .module("oui.action-menu", []) .component("ouiActionMenu", ActionMenu) .component("ouiActionMenuDivider", DropdownDivider) - .component("ouiActionMenuItem", DropdownItem); + .component("ouiActionMenuItem", DropdownItem) + .name; diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js index 4b7bd45c..f5987913 100644 --- a/packages/oui-angular/src/index.js +++ b/packages/oui-angular/src/index.js @@ -1,79 +1,79 @@ -import "@oui-angular/oui-button/src"; -import "@oui-angular/oui-calendar/src"; -import "@oui-angular/oui-checkbox/src"; -import "@oui-angular/oui-collapsible/src"; -import "@oui-angular/oui-radio/src"; -import "@oui-angular/oui-message/src"; -import "@oui-angular/oui-spinner/src"; -import "@oui-angular/oui-back-button/src"; -import "@oui-angular/oui-dropdown/src"; -import "@oui-angular/oui-action-menu/src"; -import "@oui-angular/oui-tooltip/src"; -import "@oui-angular/oui-numeric/src"; -import "@oui-angular/oui-pagination/src"; -import "@oui-angular/oui-datagrid/src"; -import "@oui-angular/oui-navbar/src"; -import "@oui-angular/oui-modal/src"; -import "@oui-angular/oui-field/src"; -import "@oui-angular/oui-radio-group/src"; -import "@oui-angular/oui-radio-toggle-group/src"; -import "@oui-angular/oui-select/src"; -import "@oui-angular/oui-select-picker/src"; -import "@oui-angular/oui-textarea/src"; -import "@oui-angular/oui-form-actions/src"; -import "@oui-angular/oui-search/src"; -import "@oui-angular/oui-criteria-container/src"; -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"; -import "@oui-angular/oui-clipboard/src"; -import "@oui-angular/oui-slideshow/src"; -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"; -import "@oui-angular/oui-switch/src"; +import ActionMenu from "@oui-angular/oui-action-menu/src"; +import BackButton from "@oui-angular/oui-back-button/src"; +import Button from "@oui-angular/oui-button/src"; +import Calendar from "@oui-angular/oui-calendar/src"; +import Checkbox from "@oui-angular/oui-checkbox/src"; +import Chips from "@oui-angular/oui-chips/src"; +import Clipboard from "@oui-angular/oui-clipboard/src"; +import Collapsible from "@oui-angular/oui-collapsible/src"; +import CriteriaAdder from "@oui-angular/oui-criteria-adder/src"; +import CriteriaContainer from "@oui-angular/oui-criteria-container/src"; +import Datagrid from "@oui-angular/oui-datagrid/src"; +import Dropdown from "@oui-angular/oui-dropdown/src"; +import Field from "@oui-angular/oui-field/src"; +import FormActions from "@oui-angular/oui-form-actions/src"; +import GuideMenu from "@oui-angular/oui-guide-menu/src"; +import HeaderTabs from "@oui-angular/oui-header-tabs/src"; +import Message from "@oui-angular/oui-message/src"; +import Modal from "@oui-angular/oui-modal/src"; +import Navbar from "@oui-angular/oui-navbar/src"; +import Numeric from "@oui-angular/oui-numeric/src"; +import PageHeader from "@oui-angular/oui-page-header/src"; +import Pagination from "@oui-angular/oui-pagination/src"; +import Popover from "@oui-angular/oui-popover/src"; +import Progress from "@oui-angular/oui-progress/src"; +import Radio from "@oui-angular/oui-radio/src"; +import RadioGroup from "@oui-angular/oui-radio-group/src"; +import RadioToggleGroup from "@oui-angular/oui-radio-toggle-group/src"; +import Search from "@oui-angular/oui-search/src"; +import Select from "@oui-angular/oui-select/src"; +import SelectPicker from "@oui-angular/oui-select-picker/src"; +import Skeleton from "@oui-angular/oui-skeleton/src"; +import Slideshow from "@oui-angular/oui-slideshow/src"; +import Spinner from "@oui-angular/oui-spinner/src"; +import Stepper from "@oui-angular/oui-stepper/src"; +import Switch from "@oui-angular/oui-switch/src"; +import Textarea from "@oui-angular/oui-textarea/src"; +import Tile from "@oui-angular/oui-tile/src"; +import Tooltip from "@oui-angular/oui-tooltip/src"; angular.module("oui", [ - "oui.button", - "oui.calendar", - "oui.checkbox", - "oui.collapsible", - "oui.radio", - "oui.message", - "oui.spinner", - "oui.back-button", - "oui.dropdown", - "oui.action-menu", - "oui.tooltip", - "oui.numeric", - "oui.pagination", - "oui.datagrid", - "oui.navbar", - "oui.modal", - "oui.field", - "oui.radio-group", - "oui.select", - "oui.select-picker", - "oui.textarea", - "oui.form-actions", - "oui.search", - "oui.criteria-container", - "oui.radio-toggle-group", - "oui.criteria-adder", - "oui.chips", - "oui.popover", - "oui.stepper", - "oui.skeleton", - "oui.clipboard", - "oui.slideshow", - "oui.page-header", - "oui.tile", - "oui.guide-menu", - "oui.header-tabs", - "oui.progress", - "oui.switch" + ActionMenu, + BackButton, + Button, + Calendar, + Checkbox, + Chips, + Clipboard, + Collapsible, + CriteriaAdder, + CriteriaContainer, + Datagrid, + Dropdown, + Field, + FormActions, + GuideMenu, + HeaderTabs, + Message, + Modal, + Navbar, + Numeric, + PageHeader, + Pagination, + Popover, + Progress, + Radio, + RadioGroup, + RadioToggleGroup, + Search, + Select, + SelectPicker, + Skeleton, + Slideshow, + Spinner, + Stepper, + Switch, + Textarea, + Tile, + Tooltip ]); diff --git a/packages/oui-back-button/src/index.js b/packages/oui-back-button/src/index.js index 3e6a459d..d77cfd04 100644 --- a/packages/oui-back-button/src/index.js +++ b/packages/oui-back-button/src/index.js @@ -1,3 +1,6 @@ import BackButton from "./back-button.component.js"; -angular.module("oui.back-button", []).component("ouiBackButton", BackButton); +export default angular + .module("oui.back-button", []) + .component("ouiBackButton", BackButton) + .name; diff --git a/packages/oui-button/src/index.js b/packages/oui-button/src/index.js index ed981de8..3fb8900b 100644 --- a/packages/oui-button/src/index.js +++ b/packages/oui-button/src/index.js @@ -1,3 +1,6 @@ import Button from "./button.component.js"; -angular.module("oui.button", []).component("ouiButton", Button); +export default angular + .module("oui.button", []) + .component("ouiButton", Button) + .name; diff --git a/packages/oui-calendar/src/calendar.provider.js b/packages/oui-calendar/src/calendar.provider.js index 06988107..2b8f1950 100644 --- a/packages/oui-calendar/src/calendar.provider.js +++ b/packages/oui-calendar/src/calendar.provider.js @@ -9,7 +9,7 @@ import "flatpickr/dist/l10n/nl.js"; import "flatpickr/dist/l10n/pl.js"; import "flatpickr/dist/l10n/pt.js"; import "flatpickr/dist/l10n/sk.js"; -import { merge } from "lodash"; +import merge from "lodash/merge"; export default class { constructor () { diff --git a/packages/oui-calendar/src/index.js b/packages/oui-calendar/src/index.js index 24a7936c..c0a06bfc 100644 --- a/packages/oui-calendar/src/index.js +++ b/packages/oui-calendar/src/index.js @@ -1,7 +1,8 @@ import Calendar from "./calendar.component.js"; import CalendarProvider from "./calendar.provider"; -angular +export default angular .module("oui.calendar", []) .component("ouiCalendar", Calendar) - .provider("ouiCalendarConfiguration", CalendarProvider); + .provider("ouiCalendarConfiguration", CalendarProvider) + .name; diff --git a/packages/oui-checkbox/src/index.js b/packages/oui-checkbox/src/index.js index 39a52dc2..42d4dcd2 100644 --- a/packages/oui-checkbox/src/index.js +++ b/packages/oui-checkbox/src/index.js @@ -1,3 +1,6 @@ import Checkbox from "./checkbox.component.js"; -angular.module("oui.checkbox", []).component("ouiCheckbox", Checkbox); +export default angular + .module("oui.checkbox", []) + .component("ouiCheckbox", Checkbox) + .name; diff --git a/packages/oui-chips/src/index.js b/packages/oui-chips/src/index.js index 4d7aa3a3..20596ff8 100644 --- a/packages/oui-chips/src/index.js +++ b/packages/oui-chips/src/index.js @@ -1,3 +1,6 @@ import Chips from "./chips.component.js"; -angular.module("oui.chips", []).component("ouiChips", Chips); +export default angular + .module("oui.chips", []) + .component("ouiChips", Chips) + .name; diff --git a/packages/oui-chips/src/index.spec.js b/packages/oui-chips/src/index.spec.js index c5b57faa..804c167b 100644 --- a/packages/oui-chips/src/index.spec.js +++ b/packages/oui-chips/src/index.spec.js @@ -1,4 +1,4 @@ -import { cloneDeep } from "lodash"; +import cloneDeep from "lodash/cloneDeep"; import mockData from "./index.spec.data.json"; describe("ouiChips", () => { diff --git a/packages/oui-clipboard/src/clipboard.provider.js b/packages/oui-clipboard/src/clipboard.provider.js index 5564aa7a..edd9ee49 100644 --- a/packages/oui-clipboard/src/clipboard.provider.js +++ b/packages/oui-clipboard/src/clipboard.provider.js @@ -1,4 +1,4 @@ -import { merge } from "lodash"; +import merge from "lodash/merge"; export default class { constructor () { this.translations = { diff --git a/packages/oui-clipboard/src/index.js b/packages/oui-clipboard/src/index.js index 7173ae55..54c8785b 100644 --- a/packages/oui-clipboard/src/index.js +++ b/packages/oui-clipboard/src/index.js @@ -1,6 +1,8 @@ -import Clipboard from "./clipboard.component.js"; -import ClipboardProvider from "./clipboard.provider.js"; - -angular - .module("oui.clipboard", []).component("ouiClipboard", Clipboard) - .provider("ouiClipboardConfiguration", ClipboardProvider); +import Clipboard from "./clipboard.component.js"; +import ClipboardProvider from "./clipboard.provider.js"; + +export default angular + .module("oui.clipboard", []) + .component("ouiClipboard", Clipboard) + .provider("ouiClipboardConfiguration", ClipboardProvider) + .name; diff --git a/packages/oui-collapsible/src/index.js b/packages/oui-collapsible/src/index.js index 447637a1..2a2f65a1 100644 --- a/packages/oui-collapsible/src/index.js +++ b/packages/oui-collapsible/src/index.js @@ -1,4 +1,6 @@ import Collapsible from "./collapsible.component.js"; -angular.module("oui.collapsible", []) - .component("ouiCollapsible", Collapsible); +export default angular + .module("oui.collapsible", []) + .component("ouiCollapsible", Collapsible) + .name; diff --git a/packages/oui-criteria-adder/src/criteria-adder.controller.js b/packages/oui-criteria-adder/src/criteria-adder.controller.js index fee4d2e6..df738e89 100644 --- a/packages/oui-criteria-adder/src/criteria-adder.controller.js +++ b/packages/oui-criteria-adder/src/criteria-adder.controller.js @@ -1,5 +1,5 @@ import { addDefaultParameter } from "@oui-angular/common/component-utils"; -import { get } from "lodash"; +import get from "lodash/get"; export default class { constructor ($attrs, $element, $scope, $timeout, ouiCriteriaAdderConfiguration) { diff --git a/packages/oui-criteria-adder/src/index.js b/packages/oui-criteria-adder/src/index.js index 016db6ee..f51b5754 100644 --- a/packages/oui-criteria-adder/src/index.js +++ b/packages/oui-criteria-adder/src/index.js @@ -1,7 +1,8 @@ import CriteriaAdder from "./criteria-adder.component"; import CriteriaAdderProvider from "./criteria-adder.provider"; -angular +export default angular .module("oui.criteria-adder", []) .component("ouiCriteriaAdder", CriteriaAdder) - .provider("ouiCriteriaAdderConfiguration", CriteriaAdderProvider); + .provider("ouiCriteriaAdderConfiguration", CriteriaAdderProvider) + .name; diff --git a/packages/oui-criteria-adder/src/index.spec.js b/packages/oui-criteria-adder/src/index.spec.js index 0b8896fa..6c504fb9 100644 --- a/packages/oui-criteria-adder/src/index.spec.js +++ b/packages/oui-criteria-adder/src/index.spec.js @@ -1,4 +1,4 @@ -import { find } from "lodash"; +import find from "lodash/find"; import mockData from "./index.spec.data.json"; const getValueComponent = $element => $element[0].querySelector("[name=barValue]"); diff --git a/packages/oui-criteria-container/src/criteria-container.controller.js b/packages/oui-criteria-container/src/criteria-container.controller.js index efe2fdf1..37fa3ce6 100644 --- a/packages/oui-criteria-container/src/criteria-container.controller.js +++ b/packages/oui-criteria-container/src/criteria-container.controller.js @@ -1,4 +1,4 @@ -import { findIndex } from "lodash"; +import findIndex from "lodash/findIndex"; export default class CriteriaController { $onInit () { diff --git a/packages/oui-criteria-container/src/index.js b/packages/oui-criteria-container/src/index.js index 295491b9..e6d31978 100644 --- a/packages/oui-criteria-container/src/index.js +++ b/packages/oui-criteria-container/src/index.js @@ -1,4 +1,6 @@ import CriteriaContainer from "./criteria-container.component"; -angular.module("oui.criteria-container", []) - .component("ouiCriteriaContainer", CriteriaContainer); +export default angular + .module("oui.criteria-container", []) + .component("ouiCriteriaContainer", CriteriaContainer) + .name; diff --git a/packages/oui-datagrid/src/datagrid.controller.js b/packages/oui-datagrid/src/datagrid.controller.js index 1037a922..024c1b2d 100644 --- a/packages/oui-datagrid/src/datagrid.controller.js +++ b/packages/oui-datagrid/src/datagrid.controller.js @@ -1,5 +1,5 @@ import { addBooleanParameter } from "@oui-angular/common/component-utils"; -import { find } from "lodash"; +import find from "lodash/find"; import { hasProperty } from "./util"; import template from "./datagrid.html"; diff --git a/packages/oui-datagrid/src/filter/comparator-resolver.js b/packages/oui-datagrid/src/filter/comparator-resolver.js index 9e27ea8d..4d7d7eed 100644 --- a/packages/oui-datagrid/src/filter/comparator-resolver.js +++ b/packages/oui-datagrid/src/filter/comparator-resolver.js @@ -1,6 +1,7 @@ -import { endsWith, negate } from "lodash"; import BasicComparators from "./basic"; import DateComparators from "./date"; +import endsWith from "lodash/endsWith"; +import negate from "lodash/negate"; import NumberComparators from "./number"; import StringComparators from "./string"; diff --git a/packages/oui-datagrid/src/filter/date.js b/packages/oui-datagrid/src/filter/date.js index 439140b6..c7f545ca 100644 --- a/packages/oui-datagrid/src/filter/date.js +++ b/packages/oui-datagrid/src/filter/date.js @@ -1,4 +1,5 @@ -import { isDate, isNaN } from "lodash"; +import isDate from "lodash/isDate"; +import isNaN from "lodash/isNaN"; export default class DateComparators { static is (subject, value) { diff --git a/packages/oui-datagrid/src/filter/filter.js b/packages/oui-datagrid/src/filter/filter.js index 8d6be956..61153578 100644 --- a/packages/oui-datagrid/src/filter/filter.js +++ b/packages/oui-datagrid/src/filter/filter.js @@ -1,5 +1,6 @@ -import { find, get } from "lodash"; import ComparatorResolver from "./comparator-resolver"; +import find from "lodash/find"; +import get from "lodash/get"; import StringComparators from "./string"; export default class Filter { diff --git a/packages/oui-datagrid/src/index.js b/packages/oui-datagrid/src/index.js index 1c54bf56..e21aaf88 100644 --- a/packages/oui-datagrid/src/index.js +++ b/packages/oui-datagrid/src/index.js @@ -7,7 +7,7 @@ import DatagridParameters from "./parameters/datagrid-parameters.component"; import DatagridProvider from "./datagrid.provider"; import DatagridService from "./datagrid.service"; -angular +export default angular .module("oui.datagrid", [ "oui.pagination", "oui.dropdown", @@ -22,4 +22,5 @@ angular .service("ouiDatagridPaging", DatagridPaging) .provider("ouiDatagridConfiguration", DatagridProvider) .service("ouiDatagridService", DatagridService) - .component("ouiDatagridParameters", DatagridParameters); + .component("ouiDatagridParameters", DatagridParameters) + .name; diff --git a/packages/oui-field/src/index.js b/packages/oui-field/src/index.js index e7aa4883..cf820e93 100644 --- a/packages/oui-field/src/index.js +++ b/packages/oui-field/src/index.js @@ -1,6 +1,8 @@ import Field from "./field.component.js"; import FieldConfigurationProvider from "./field.provider.js"; -angular.module("oui.field", []) +export default angular + .module("oui.field", []) .component("ouiField", Field) - .provider("ouiFieldConfiguration", FieldConfigurationProvider); + .provider("ouiFieldConfiguration", FieldConfigurationProvider) + .name; diff --git a/packages/oui-field/src/index.spec.js b/packages/oui-field/src/index.spec.js index d2134f91..f7ff759d 100644 --- a/packages/oui-field/src/index.spec.js +++ b/packages/oui-field/src/index.spec.js @@ -1,4 +1,4 @@ -import { noop } from "lodash"; +import noop from "lodash/noop"; describe("ouiField", () => { let $timeout; diff --git a/packages/oui-form-actions/src/index.js b/packages/oui-form-actions/src/index.js index 37c8a5c8..ae1b805a 100644 --- a/packages/oui-form-actions/src/index.js +++ b/packages/oui-form-actions/src/index.js @@ -1,6 +1,8 @@ import FormActions from "./form-actions.component"; import FormActionsProvider from "./form-actions.provider"; -angular.module("oui.form-actions", []) +export default angular + .module("oui.form-actions", []) .component("ouiFormActions", FormActions) - .provider("ouiFormActionsConfiguration", FormActionsProvider); + .provider("ouiFormActionsConfiguration", FormActionsProvider) + .name; diff --git a/packages/oui-guide-menu/src/index.js b/packages/oui-guide-menu/src/index.js index 702e02ff..72e95219 100644 --- a/packages/oui-guide-menu/src/index.js +++ b/packages/oui-guide-menu/src/index.js @@ -3,8 +3,10 @@ import DropdownGroup from "../../oui-dropdown/src/group/dropdown-group.component import DropdownItem from "../../oui-dropdown/src/item/dropdown-item.component"; import GuideMenu from "./guide-menu.component"; -angular.module("oui.guide-menu", []) +export default angular + .module("oui.guide-menu", []) .component("ouiGuideMenu", GuideMenu) .component("ouiGuideMenuDivider", DropdownDivider) .component("ouiGuideMenuGroup", DropdownGroup) - .component("ouiGuideMenuItem", DropdownItem); + .component("ouiGuideMenuItem", DropdownItem) + .name; diff --git a/packages/oui-header-tabs/src/index.js b/packages/oui-header-tabs/src/index.js index fe249a96..418027dc 100644 --- a/packages/oui-header-tabs/src/index.js +++ b/packages/oui-header-tabs/src/index.js @@ -3,8 +3,10 @@ import HeaderTabsDivider from "../../oui-dropdown/src/divider/dropdown-divider.c import HeaderTabsDropdown from "./header-tabs-dropdown.component"; import HeaderTabsItem from "./header-tabs-item.component"; -angular.module("oui.header-tabs", []) +export default angular + .module("oui.header-tabs", []) .component("ouiHeaderTabs", HeaderTabs) .component("ouiHeaderTabsDivider", HeaderTabsDivider) .component("ouiHeaderTabsDropdown", HeaderTabsDropdown) - .component("ouiHeaderTabsItem", HeaderTabsItem); + .component("ouiHeaderTabsItem", HeaderTabsItem) + .name; diff --git a/packages/oui-message/src/index.js b/packages/oui-message/src/index.js index db58592b..c1a1fb6e 100644 --- a/packages/oui-message/src/index.js +++ b/packages/oui-message/src/index.js @@ -1,3 +1,6 @@ import Message from "./message.component.js"; -angular.module("oui.message", []).component("ouiMessage", Message); +export default angular + .module("oui.message", []) + .component("ouiMessage", Message) + .name; diff --git a/packages/oui-message/src/index.spec.js b/packages/oui-message/src/index.spec.js index d2d1266e..3c40f398 100644 --- a/packages/oui-message/src/index.spec.js +++ b/packages/oui-message/src/index.spec.js @@ -1,4 +1,4 @@ -import { filter } from "lodash"; +import filter from "lodash/filter"; describe("ouiMessage", () => { diff --git a/packages/oui-modal/src/index.js b/packages/oui-modal/src/index.js index 82cd54fa..646887c1 100644 --- a/packages/oui-modal/src/index.js +++ b/packages/oui-modal/src/index.js @@ -1,3 +1,6 @@ import Modal from "./modal.component.js"; -angular.module("oui.modal", []).component("ouiModal", Modal); +export default angular + .module("oui.modal", []) + .component("ouiModal", Modal) + .name; diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js index 04aec141..abddba4c 100644 --- a/packages/oui-navbar/src/index.js +++ b/packages/oui-navbar/src/index.js @@ -6,7 +6,7 @@ import NavbarGroupService from "./group/navbar-group.service"; import NavbarMenu from "./menu/navbar-menu.component"; import NavbarService from "./navbar.service"; -angular +export default angular .module("oui.navbar", [ "ngAria", "ngSanitize" @@ -17,4 +17,5 @@ angular .component("ouiNavbarMenu", NavbarMenu) .provider("ouiNavbarConfiguration", NavbarConfigurationProvider) .service("NavbarService", NavbarService) - .service("NavbarGroupService", NavbarGroupService); + .service("NavbarGroupService", NavbarGroupService) + .name; diff --git a/packages/oui-numeric/src/index.js b/packages/oui-numeric/src/index.js index 6b31f455..6f90d288 100644 --- a/packages/oui-numeric/src/index.js +++ b/packages/oui-numeric/src/index.js @@ -1,3 +1,6 @@ import Numeric from "./numeric.component.js"; -angular.module("oui.numeric", []).component("ouiNumeric", Numeric); +export default angular + .module("oui.numeric", []) + .component("ouiNumeric", Numeric) + .name; diff --git a/packages/oui-numeric/src/numeric.controller.js b/packages/oui-numeric/src/numeric.controller.js index fa2ba733..8d3ca2f3 100644 --- a/packages/oui-numeric/src/numeric.controller.js +++ b/packages/oui-numeric/src/numeric.controller.js @@ -1,4 +1,4 @@ -import { clamp } from "lodash"; +import clamp from "lodash/clamp"; // By design, value is restricted to [0, 99999] interval const MIN_VALUE = 0; diff --git a/packages/oui-page-header/src/index.js b/packages/oui-page-header/src/index.js index 1f50380c..5265351f 100644 --- a/packages/oui-page-header/src/index.js +++ b/packages/oui-page-header/src/index.js @@ -1,4 +1,6 @@ import PageHeader from "./page-header.component"; -angular.module("oui.page-header", []) - .component("ouiPageHeader", PageHeader); +export default angular + .module("oui.page-header", []) + .component("ouiPageHeader", PageHeader) + .name; diff --git a/packages/oui-pagination/src/index.js b/packages/oui-pagination/src/index.js index 6e19bd59..d9369aa6 100644 --- a/packages/oui-pagination/src/index.js +++ b/packages/oui-pagination/src/index.js @@ -1,6 +1,8 @@ import Pagination from "./pagination.component"; import PaginationConfigurationProvider from "./pagination.provider"; -angular.module("oui.pagination", []) +export default angular + .module("oui.pagination", []) .component("ouiPagination", Pagination) - .provider("ouiPaginationConfiguration", PaginationConfigurationProvider); + .provider("ouiPaginationConfiguration", PaginationConfigurationProvider) + .name; diff --git a/packages/oui-popover/src/index.js b/packages/oui-popover/src/index.js index 54efa546..97a7648c 100644 --- a/packages/oui-popover/src/index.js +++ b/packages/oui-popover/src/index.js @@ -2,7 +2,9 @@ import Popover from "./popover.component.js"; import PopoverContent from "./popover-content.directive"; import PopoverTrigger from "./popover-trigger.directive"; -angular.module("oui.popover", []) +export default angular + .module("oui.popover", []) .component("ouiPopover", Popover) .directive("ouiPopoverContent", PopoverContent) - .directive("ouiPopoverTrigger", PopoverTrigger); + .directive("ouiPopoverTrigger", PopoverTrigger) + .name; diff --git a/packages/oui-progress/src/index.js b/packages/oui-progress/src/index.js index f6cb9fa3..f4a43ad3 100644 --- a/packages/oui-progress/src/index.js +++ b/packages/oui-progress/src/index.js @@ -2,7 +2,9 @@ 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", []) +export default angular + .module("oui.progress", []) .component("ouiProgress", Progress) .component("ouiProgressBar", ProgressBar) - .component("ouiProgressThreshold", ProgressThreshold); + .component("ouiProgressThreshold", ProgressThreshold) + .name; diff --git a/packages/oui-radio-group/src/index.js b/packages/oui-radio-group/src/index.js index 65a4a8fa..8a055f7b 100644 --- a/packages/oui-radio-group/src/index.js +++ b/packages/oui-radio-group/src/index.js @@ -1,6 +1,9 @@ import "@oui-angular/oui-radio/src"; import RadioGroup from "./radio-group.component.js"; -angular.module("oui.radio-group", [ - "oui.radio" -]).component("ouiRadioGroup", RadioGroup); +export default angular + .module("oui.radio-group", [ + "oui.radio" + ]) + .component("ouiRadioGroup", RadioGroup) + .name; diff --git a/packages/oui-radio-toggle-group/src/index.js b/packages/oui-radio-toggle-group/src/index.js index 3a88329d..f89dd3c6 100644 --- a/packages/oui-radio-toggle-group/src/index.js +++ b/packages/oui-radio-toggle-group/src/index.js @@ -2,7 +2,10 @@ import "@oui-angular/oui-radio/src"; import "@oui-angular/oui-radio-group/src"; import RadioToggleGroup from "./radio-toggle-group.component.js"; -angular.module("oui.radio-toggle-group", [ - "oui.radio", - "oui.radio-group" -]).component("ouiRadioToggleGroup", RadioToggleGroup); +export default angular + .module("oui.radio-toggle-group", [ + "oui.radio", + "oui.radio-group" + ]) + .component("ouiRadioToggleGroup", RadioToggleGroup) + .name; diff --git a/packages/oui-radio/src/index.js b/packages/oui-radio/src/index.js index 42e01243..566d134b 100644 --- a/packages/oui-radio/src/index.js +++ b/packages/oui-radio/src/index.js @@ -1,3 +1,6 @@ import Radio from "./radio.component.js"; -angular.module("oui.radio", []).component("ouiRadio", Radio); +export default angular + .module("oui.radio", []) + .component("ouiRadio", Radio) + .name; diff --git a/packages/oui-search/src/index.js b/packages/oui-search/src/index.js index d199fdcf..07403c56 100644 --- a/packages/oui-search/src/index.js +++ b/packages/oui-search/src/index.js @@ -1,5 +1,6 @@ import Search from "./search.component"; -angular +export default angular .module("oui.search", []) - .component("ouiSearch", Search); + .component("ouiSearch", Search) + .name; diff --git a/packages/oui-search/src/search.controller.js b/packages/oui-search/src/search.controller.js index fa9d48a5..42b6d083 100644 --- a/packages/oui-search/src/search.controller.js +++ b/packages/oui-search/src/search.controller.js @@ -1,5 +1,5 @@ import { addBooleanParameter } from "@oui-angular/common/component-utils"; -import { debounce } from "lodash"; +import debounce from "lodash/debounce"; const componentClass = "oui-search"; diff --git a/packages/oui-select-picker/src/index.js b/packages/oui-select-picker/src/index.js index a1719675..dd9bd26f 100644 --- a/packages/oui-select-picker/src/index.js +++ b/packages/oui-select-picker/src/index.js @@ -1,3 +1,6 @@ import SelectPicker from "./select-picker.component.js"; -angular.module("oui.select-picker", []).component("ouiSelectPicker", SelectPicker); +export default angular + .module("oui.select-picker", []) + .component("ouiSelectPicker", SelectPicker) + .name; diff --git a/packages/oui-select-picker/src/select-picker.controller.js b/packages/oui-select-picker/src/select-picker.controller.js index 434b1ff9..a941ca0a 100644 --- a/packages/oui-select-picker/src/select-picker.controller.js +++ b/packages/oui-select-picker/src/select-picker.controller.js @@ -1,5 +1,5 @@ import { addBooleanParameter, addDefaultParameter } from "@oui-angular/common/component-utils"; -import { get } from "lodash"; +import get from "lodash/get"; export default class SelectPickerController { constructor ($scope, $element, $attrs, $timeout, $transclude) { diff --git a/packages/oui-select/src/index.js b/packages/oui-select/src/index.js index 6e288c8c..d51f28c2 100644 --- a/packages/oui-select/src/index.js +++ b/packages/oui-select/src/index.js @@ -1,8 +1,11 @@ import "./ui-select"; import Select from "./select.directive"; -angular.module("oui.select", [ - "oui.field", - "ui.select", - "ngSanitize" -]).directive("ouiSelect", Select); +export default angular + .module("oui.select", [ + "oui.field", + "ui.select", + "ngSanitize" + ]) + .directive("ouiSelect", Select) + .name; diff --git a/packages/oui-select/src/index.spec.js b/packages/oui-select/src/index.spec.js index dd1b1c6d..f10e119f 100644 --- a/packages/oui-select/src/index.spec.js +++ b/packages/oui-select/src/index.spec.js @@ -1,5 +1,5 @@ import data from "./index.spec.data"; -import { uniq } from "lodash"; +import uniq from "lodash/uniq"; describe("ouiSelect", () => { let TestUtils; diff --git a/packages/oui-skeleton/src/index.js b/packages/oui-skeleton/src/index.js index 1e021f6e..4bf3daed 100644 --- a/packages/oui-skeleton/src/index.js +++ b/packages/oui-skeleton/src/index.js @@ -1,4 +1,6 @@ -import Skeleton from "./skeleton.component.js"; - -angular.module("oui.skeleton", []) - .component("ouiSkeleton", Skeleton); +import Skeleton from "./skeleton.component.js"; + +export default angular + .module("oui.skeleton", []) + .component("ouiSkeleton", Skeleton) + .name; diff --git a/packages/oui-slideshow/src/index.js b/packages/oui-slideshow/src/index.js index f0fc033f..e0b4883a 100644 --- a/packages/oui-slideshow/src/index.js +++ b/packages/oui-slideshow/src/index.js @@ -1,6 +1,8 @@ import Slideshow from "./slideshow.component"; import SlideshowPanel from "./slideshow-panel.component"; -angular.module("oui.slideshow", []) +export default angular + .module("oui.slideshow", []) .component("ouiSlideshow", Slideshow) - .component("ouiSlideshowPanel", SlideshowPanel); + .component("ouiSlideshowPanel", SlideshowPanel) + .name; diff --git a/packages/oui-spinner/src/index.js b/packages/oui-spinner/src/index.js index 483126bb..a59ecd0e 100644 --- a/packages/oui-spinner/src/index.js +++ b/packages/oui-spinner/src/index.js @@ -1,3 +1,6 @@ import Spinner from "./spinner.component.js"; -angular.module("oui.spinner", []).component("ouiSpinner", Spinner); +export default angular + .module("oui.spinner", []) + .component("ouiSpinner", Spinner) + .name; diff --git a/packages/oui-stepper/src/index.js b/packages/oui-stepper/src/index.js index f1543ffa..95f608ba 100644 --- a/packages/oui-stepper/src/index.js +++ b/packages/oui-stepper/src/index.js @@ -2,7 +2,9 @@ import StepForm from "./step-form/step-form.component"; import Stepper from "./stepper.component"; import StepperProvider from "./stepper.provider"; -angular.module("oui.stepper", []) +export default angular + .module("oui.stepper", []) .component("ouiStepper", Stepper) .component("ouiStepForm", StepForm) - .provider("ouiStepperConfiguration", StepperProvider); + .provider("ouiStepperConfiguration", StepperProvider) + .name; diff --git a/packages/oui-stepper/src/stepper.provider.js b/packages/oui-stepper/src/stepper.provider.js index 74be80e6..66ae4cc5 100644 --- a/packages/oui-stepper/src/stepper.provider.js +++ b/packages/oui-stepper/src/stepper.provider.js @@ -1,4 +1,4 @@ -import { merge } from "lodash"; +import merge from "lodash/merge"; export default class { constructor () { diff --git a/packages/oui-switch/src/index.js b/packages/oui-switch/src/index.js index 8c2eafae..a6eea2b7 100644 --- a/packages/oui-switch/src/index.js +++ b/packages/oui-switch/src/index.js @@ -1,4 +1,6 @@ -import Switch from "./switch.component.js"; - -angular.module("oui.switch", []) - .component("ouiSwitch", Switch); +import Switch from "./switch.component.js"; + +export default angular + .module("oui.switch", []) + .component("ouiSwitch", Switch) + .name; diff --git a/packages/oui-textarea/src/index.js b/packages/oui-textarea/src/index.js index 84495bed..d1729c3c 100644 --- a/packages/oui-textarea/src/index.js +++ b/packages/oui-textarea/src/index.js @@ -1,6 +1,8 @@ import Textarea from "./textarea.component.js"; import TextareaProvider from "./textarea.provider.js"; -angular.module("oui.textarea", []) +export default angular + .module("oui.textarea", []) .component("ouiTextarea", Textarea) - .provider("ouiTextareaConfiguration", TextareaProvider); + .provider("ouiTextareaConfiguration", TextareaProvider) + .name; diff --git a/packages/oui-tile/src/index.js b/packages/oui-tile/src/index.js index 9207d7b8..046e5acb 100644 --- a/packages/oui-tile/src/index.js +++ b/packages/oui-tile/src/index.js @@ -2,7 +2,9 @@ import Tile from "./tile.component.js"; import TileButton from "./button/tile-button.component.js"; import TileDefinition from "./definition/tile-definition.component.js"; -angular.module("oui.tile", []) +export default angular + .module("oui.tile", []) .component("ouiTile", Tile) .component("ouiTileButton", TileButton) - .component("ouiTileDefinition", TileDefinition); + .component("ouiTileDefinition", TileDefinition) + .name; diff --git a/packages/oui-tooltip/src/index.js b/packages/oui-tooltip/src/index.js index 1aba1870..2b81f7d0 100644 --- a/packages/oui-tooltip/src/index.js +++ b/packages/oui-tooltip/src/index.js @@ -1,4 +1,6 @@ import Tooltip from "./tooltip.directive"; -angular.module("oui.tooltip", []) - .directive("ouiTooltip", Tooltip); +export default angular + .module("oui.tooltip", []) + .directive("ouiTooltip", Tooltip) + .name; From 15ff94922a26e7d8e711a6bcd8a70fa282e4e47e Mon Sep 17 00:00:00 2001 From: Axel Peter <15101925+AxelPeter@users.noreply.github.com> Date: Wed, 25 Jul 2018 10:15:37 +0200 Subject: [PATCH 7/8] feat(oui-navbar): add new components (#235) * feat(oui-navbar): add brand and toggler component * feat(oui-navbar): add link component * feat(oui-navbar): add notification component * feat(oui-navbar): add dropdown component * chore(oui-navbar): update navigation for new components * chore(oui-navbar): add unit tests * chore: code review --- packages/oui-header-tabs/README.md | 2 +- packages/oui-navbar/README.md | 417 ++++++++++++++---- .../src/brand/navbar-brand.component.js | 28 ++ .../oui-navbar/src/brand/navbar-brand.html | 16 + .../menu/navbar-dropdown-menu.component.js | 25 ++ .../src/dropdown/navbar-dropdown.component.js | 19 + .../dropdown/navbar-dropdown.controller.js | 16 + .../src/dropdown/navbar-dropdown.html | 18 + .../src/group/navbar-group.controller.js | 54 ++- .../src/group/navbar-group.directive.js | 3 + .../src/group/navbar-group.service.js | 69 --- packages/oui-navbar/src/index.js | 21 +- packages/oui-navbar/src/index.spec.js | 416 ++++++++++++++++- .../oui-navbar/src/keyboard-keys.constant.js | 4 +- .../src/link/navbar-link.component.js | 19 + .../src/link/navbar-link.controller.js | 20 + packages/oui-navbar/src/link/navbar-link.html | 27 ++ .../src/menu/navbar-menu.component.js | 9 +- .../src/menu/navbar-menu.controller.js | 38 +- packages/oui-navbar/src/menu/navbar-menu.html | 29 +- packages/oui-navbar/src/navbar.component.js | 8 +- packages/oui-navbar/src/navbar.controller.js | 75 +++- packages/oui-navbar/src/navbar.html | 244 +++------- packages/oui-navbar/src/navbar.provider.js | 6 +- packages/oui-navbar/src/navbar.service.js | 28 -- .../navbar-notification.component.js | 22 + .../navbar-notification.controller.js | 39 ++ .../src/notification/navbar-notification.html | 119 +++++ .../src/toggler/navbar-toggler.component.js | 13 + .../src/toggler/navbar-toggler.controller.js | 8 + .../src/toggler/navbar-toggler.html | 23 + 31 files changed, 1402 insertions(+), 433 deletions(-) create mode 100644 packages/oui-navbar/src/brand/navbar-brand.component.js create mode 100644 packages/oui-navbar/src/brand/navbar-brand.html create mode 100644 packages/oui-navbar/src/dropdown/menu/navbar-dropdown-menu.component.js create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.component.js create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.controller.js create mode 100644 packages/oui-navbar/src/dropdown/navbar-dropdown.html delete mode 100644 packages/oui-navbar/src/group/navbar-group.service.js create mode 100644 packages/oui-navbar/src/link/navbar-link.component.js create mode 100644 packages/oui-navbar/src/link/navbar-link.controller.js create mode 100644 packages/oui-navbar/src/link/navbar-link.html delete mode 100644 packages/oui-navbar/src/navbar.service.js create mode 100644 packages/oui-navbar/src/notification/navbar-notification.component.js create mode 100644 packages/oui-navbar/src/notification/navbar-notification.controller.js create mode 100644 packages/oui-navbar/src/notification/navbar-notification.html create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.component.js create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.controller.js create mode 100644 packages/oui-navbar/src/toggler/navbar-toggler.html diff --git a/packages/oui-header-tabs/README.md b/packages/oui-header-tabs/README.md index 8abb0d32..7e2d249c 100644 --- a/packages/oui-header-tabs/README.md +++ b/packages/oui-header-tabs/README.md @@ -92,7 +92,7 @@ | ---- | ---- | ---- | ---- | ---- | ---- | ---- | `text` | string | @ | yes | | | display the menu item with this text | `href` | string | @? | yes | | | href of the menu item -| `state` | boolean | @? | yes | | | state of the menu item +| `state` | string | @? | yes | | | state of the menu item | `stateParams` | object | - ``` -Note: All children menus have `.oui-navbar-menu_fixed`. The component is intended to be used in `fixed` mode. To avoid being hidden by the documentation navbar, this example is not `fixed`. +### Advanced -## API +```html:preview + + + + + + + + + + + + + + +``` + +## Brand -| Attribute | Type | Binding | One-time Binding | Values | Default | Description | -| ---- | ---- | ---- | ---- | ---- | ---- | ---- | -| brand | object | + +``` ### Properties of attribute `brand` -- `label` _(optional)_: define `aria-label` of the brand link. -- `title`: _(optional)_: define the brand text. +- `label` **(optional)**: define `aria-label` of the brand link. +- `title`: **(optional)**: define the brand text. - `url`: define `href` of the brand link. #### Set a brand icon with a CSS class (for `oui-icon`) @@ -41,8 +101,6 @@ Note: All children menus have `.oui-navbar-menu_fixed`. The component is intende The brand icon will be set as a ``. -###### Example - ```json { "label": String, @@ -54,14 +112,12 @@ The brand icon will be set as a ``. #### Set a brand icon with an image -- `iconAlt` _(optional)_: define `alt` of the brand icon. -- `iconClass` _(optional)_: define `class` of the brand icon. +- `iconAlt` **(optional)**: define `alt` of the brand icon. +- `iconClass` **(optional)**: define `class` of the brand icon. - `iconSrc`: define `src` of the brand icon. The brand icon will be set as a ``. -###### Example - ```json { "label": String, @@ -73,17 +129,30 @@ The brand icon will be set as a ``. } ``` +### With component `oui-navbar-brand` + +```html:preview + + + +``` + +## Links + ### Common properties of attributes `*-links` - `name`: define the navigation name of a menu. -- `class` _(optional)_: define `class` of the menu item (only used for root links). -- `label` _(optional)_: define `aria-label` of the menu item. +- `class` **(optional)**: define `class` of the menu item (only used for root links). +- `label` **(optional)**: define `aria-label` of the menu item. - `title`: define the menu item text. -- `headerTitle` _(optional)_: define the title of the menu header (default text is `title`). -- `headerBreadcrumb` _(optional)_: define the breadcrumb of the menu header. -- `headerTemplate` _(optional)_: define the HTML template of the menu header. -- `isActive` _(optional)_: define if the menu item has active variant `.oui-navbar-menu__item_active`. -- `acknowledged` _(optional)_: define if the menu item is acknowledged. +- `headerTitle` **(optional)**: define the title of the menu header (default text is `title`). +- `headerBreadcrumb` **(optional)**: define the breadcrumb of the menu header. +- `headerTemplate` **(optional)**: define the HTML template of the menu header. +- `isActive` **(optional)**: define if the menu item has active variant `.oui-navbar-menu__item_active`. +- `acknowledged` **(optional)**: define if the menu item is acknowledged. If `headerTemplate` is defined, `headerBreadcrumb` and `headerTitle` are not used. @@ -93,8 +162,6 @@ If `headerTemplate` is defined, `headerBreadcrumb` and `headerTitle` are not use The menu item will be set as a ``. -##### Example - ```json { "name": String, @@ -108,12 +175,10 @@ The menu item will be set as a ``. #### Set a menu item as a link for ui-router - `state`: define `ui-sref` of the menu item. The menu item will be set as a ``, `click` and `url` will be ignored. -- `stateParams` _(optional)_: define parameters for `state`. +- `stateParams` **(optional)**: define parameters for `state`. The menu item will be set as a ``. -##### Example - ```json { "name": String, @@ -131,8 +196,6 @@ The menu item will be set as a ``. The menu item will be set as a ` +
diff --git a/packages/oui-navbar/src/group/navbar-group.controller.js b/packages/oui-navbar/src/group/navbar-group.controller.js index f603a64e..176afce1 100644 --- a/packages/oui-navbar/src/group/navbar-group.controller.js +++ b/packages/oui-navbar/src/group/navbar-group.controller.js @@ -1,11 +1,57 @@ export default class { - constructor ($attrs, $element, ouiNavbarConfiguration, NavbarGroupService) { + constructor ($attrs, $element, ouiNavbarConfiguration, KEYBOARD_KEYS) { "ngInject"; this.$attrs = $attrs; this.$element = $element; this.config = ouiNavbarConfiguration; - this.navbarGroupService = NavbarGroupService; + + this.KEYBOARD_KEYS = KEYBOARD_KEYS; + } + + bindGroup (groupName) { + const keys = {}; + const keysRegex = new RegExp([ + this.KEYBOARD_KEYS.TAB, + this.KEYBOARD_KEYS.SHIFT + ].join("|")); + + const tabbableItems = this.navbarCtrl.getGroup(groupName); + const lastIndex = tabbableItems.length - 1; + const focusElement = (e, groupIndex) => { + let index = groupIndex; + keys[e.which] = true; + + if (keys[this.KEYBOARD_KEYS.TAB] && !keys[this.KEYBOARD_KEYS.SHIFT]) { + // Move Down + index = index >= lastIndex ? 0 : index + 1; + } else if (keys[this.KEYBOARD_KEYS.TAB] && keys[this.KEYBOARD_KEYS.SHIFT]) { + // Move Up + index = index <= 0 ? lastIndex : index - 1; + } + + // Check if element is visible + if (tabbableItems[index].clientHeight) { + tabbableItems[index].focus(); + } else { + focusElement(e, index); + } + }; + + angular.element(tabbableItems) + .on("keydown", (e) => { + if (keysRegex.test(e.which) && this.isOpen(groupName)) { + e.preventDefault(); + focusElement(e, this.navbarCtrl.getGroup(groupName).indexOf(e.target)); + } + }) + .on("keyup", (e) => { + delete keys[e.which]; + }); + } + + isOpen (state) { + return this.navbarCtrl.navigation && this.navbarCtrl.navigation[state]; } $onInit () { @@ -16,11 +62,11 @@ export default class { } $postLink () { - this.navbarGroupService.addItemToGroup(this.$element[0], this.groupName); + this.navbarCtrl.addItemToGroup(this.$element[0], this.groupName); // Bind items when it's the last item if (this.isLast) { - this.navbarGroupService.bindGroup(this.groupName); + this.bindGroup(this.groupName); } } } diff --git a/packages/oui-navbar/src/group/navbar-group.directive.js b/packages/oui-navbar/src/group/navbar-group.directive.js index 54cdbee9..d476a6e2 100644 --- a/packages/oui-navbar/src/group/navbar-group.directive.js +++ b/packages/oui-navbar/src/group/navbar-group.directive.js @@ -2,6 +2,9 @@ import controller from "./navbar-group.controller"; export default () => ({ restrict: "A", + require: { + navbarCtrl: "^ouiNavbar" + }, bindToController: { groupName: "@ouiNavbarGroup", isLast: " { - let index = groupIndex; - keys[e.which] = true; - - if (keys[this.KEYBOARD_KEYS.ALT] && !keys[this.KEYBOARD_KEYS.TAB]) { - // Move Down - index = index >= lastIndex ? 0 : index + 1; - } else if (keys[this.KEYBOARD_KEYS.ALT] && keys[this.KEYBOARD_KEYS.TAB]) { - // Move Up - index = index <= 0 ? lastIndex : index - 1; - } - - // Check if element is visible - if (tabbableItems[index].clientHeight) { - tabbableItems[index].focus(); - } else { - focusElement(e, index); - } - }; - - angular.element(tabbableItems) - .on("keydown", (e) => { - if (keysRegex.test(e.which) && this.navbarService.isOpen(groupName)) { - e.preventDefault(); - focusElement(e, this.keyboardNav[groupName].indexOf(e.target)); - } - }) - .on("keyup", (e) => { - delete keys[e.which]; - }); - } - - // Set focus to an item of a group - setFocusTo (groupName, index) { - // Add a delay to force focus - const delay = 50; - this.$timeout(() => this.keyboardNav[groupName][index] && this.keyboardNav[groupName][index].focus(), delay); - } -} diff --git a/packages/oui-navbar/src/index.js b/packages/oui-navbar/src/index.js index abddba4c..99b858bc 100644 --- a/packages/oui-navbar/src/index.js +++ b/packages/oui-navbar/src/index.js @@ -1,10 +1,15 @@ import KEYBOARD_KEYS from "./keyboard-keys.constant"; + import Navbar from "./navbar.component"; -import NavbarConfigurationProvider from "./navbar.provider.js"; +import NavbarBrand from "./brand/navbar-brand.component"; +import NavbarConfigurationProvider from "./navbar.provider"; +import NavbarDropdown from "./dropdown/navbar-dropdown.component"; +import NavbarDropdownMenu from "./dropdown/menu/navbar-dropdown-menu.component"; import NavbarGroup from "./group/navbar-group.directive"; -import NavbarGroupService from "./group/navbar-group.service"; +import NavbarLink from "./link/navbar-link.component"; import NavbarMenu from "./menu/navbar-menu.component"; -import NavbarService from "./navbar.service"; +import NavbarNotification from "./notification/navbar-notification.component"; +import NavbarToggler from "./toggler/navbar-toggler.component"; export default angular .module("oui.navbar", [ @@ -13,9 +18,13 @@ export default angular ]) .constant("KEYBOARD_KEYS", KEYBOARD_KEYS) .component("ouiNavbar", Navbar) - .directive("ouiNavbarGroup", NavbarGroup) + .component("ouiNavbarBrand", NavbarBrand) + .component("ouiNavbarDropdown", NavbarDropdown) + .component("ouiNavbarDropdownMenu", NavbarDropdownMenu) + .component("ouiNavbarLink", NavbarLink) .component("ouiNavbarMenu", NavbarMenu) + .component("ouiNavbarNotification", NavbarNotification) + .component("ouiNavbarToggler", NavbarToggler) + .directive("ouiNavbarGroup", NavbarGroup) .provider("ouiNavbarConfiguration", NavbarConfigurationProvider) - .service("NavbarService", NavbarService) - .service("NavbarGroupService", NavbarGroupService) .name; diff --git a/packages/oui-navbar/src/index.spec.js b/packages/oui-navbar/src/index.spec.js index 8fd210be..c3e67f15 100644 --- a/packages/oui-navbar/src/index.spec.js +++ b/packages/oui-navbar/src/index.spec.js @@ -2,29 +2,255 @@ import mockData from "./index.spec.data.json"; describe("ouiNavbar", () => { let testUtils; + let $document; + let $timeout; + let configuration; beforeEach(angular.mock.module("oui.navbar")); + beforeEach(angular.mock.module("oui.navbar.configuration")); beforeEach(angular.mock.module("oui.test-utils")); - beforeEach(inject((_TestUtils_) => { + beforeEach(inject((_$document_, _$timeout_, _TestUtils_) => { + $document = _$document_; + $timeout = _$timeout_; testUtils = _TestUtils_; })); + describe("Provider", () => { + angular.module("oui.navbar.configuration", [ + "oui.navbar" + ]).config(ouiNavbarConfigurationProvider => { + ouiNavbarConfigurationProvider.setTranslations({ + foo: "bar" + }); + }); + + beforeEach(inject(_ouiNavbarConfiguration_ => { + configuration = _ouiNavbarConfiguration_; + })); + + it("should have custom options", () => { + expect(configuration.translations.foo).toEqual("bar"); + }); + }); + describe("Component", () => { + const navbarClass = "oui-navbar"; + const navbarFixedClass = `${navbarClass}_fixed`; + const navbarDropdownClass = `${navbarClass}-dropdown`; + const navbarMenuClass = `${navbarClass}-menu`; + const navbarMenuFixedClass = `${navbarMenuClass}_fixed`; + const navbarMenuEndClass = `${navbarMenuClass}_end`; + const navbarListItemClass = `${navbarClass}-list__item`; + + it("should display a navbar", () => { + const component = testUtils.compileTemplate(` + + `, { + brand: mockData.brand, + activeLink: mockData.mainLinks[0].name, + mainLinks: mockData.mainLinks, + asideLinks: mockData.asideLinks, + togglerLinks: mockData.togglerLinks + }); + const controller = component.controller("ouiNavbar"); + + $timeout.flush(); + + expect(angular.copy(controller.brand)).toEqual(mockData.brand); + expect(angular.copy(controller.activeLink)).toEqual(mockData.mainLinks[0].name); + expect(angular.copy(controller.mainLinks)).toEqual(mockData.mainLinks); + expect(angular.copy(controller.asideLinks)).toEqual(mockData.asideLinks); + expect(angular.copy(controller.togglerLinks)).toEqual(mockData.togglerLinks); + }); + + describe("Navbar", () => { + const item = "foo"; + const groupName = "bar"; + const menuName = "lorem"; + const internalMenuName = "ipsum"; + + let component; + let controller; + + beforeEach(() => { + component = testUtils.compileTemplate(""); + controller = component.controller("ouiNavbar"); + + $timeout.flush(); + }); + + it("should have default classname", () => { + expect(component.hasClass(navbarClass)).toBeTruthy(); + expect(component.hasClass(navbarFixedClass)).toBeFalsy(); + }); + + it("should have role 'navigation'", () => { + expect(component.attr("role")).toBe("navigation"); + }); + + it("should add item 'foo' to group 'bar'", () => { + controller.addItemToGroup(item, groupName); + + expect(Array.isArray(controller.keyboardNav[groupName])).toBeTruthy(); + expect(controller.keyboardNav[groupName].length).toBe(1); + expect(controller.keyboardNav[groupName][0]).toBe(item); + }); + + it("should return group 'bar'", () => { + controller.addItemToGroup(item, groupName); + const group = controller.getGroup(groupName); + + expect(Array.isArray(group)).toBeTruthy(); + expect(group.length).toBe(1); + expect(group[0]).toBe(item); + }); + + it("should toggle navigation state of Menu 'lorem' ", () => { + expect(controller.navigation).toBeUndefined(); + + controller.toggleMenu(menuName); + expect(controller.navigation[menuName]).toBeTruthy(); + + controller.toggleMenu(menuName); + expect(controller.navigation).toBeNull(); + }); + + it("should toggle navigation state of internal Menu 'lorem'", () => { + controller.toggleMenu(menuName); + controller.toggleMenu(internalMenuName, true); + expect(controller.navigation[internalMenuName]).toBeTruthy(); + + controller.toggleMenu(internalMenuName, true); + expect(controller.navigation[internalMenuName]).toBeFalsy(); + }); + + it("should clear navigation", () => { + controller.toggleMenu(menuName); + controller.toggleMenu(internalMenuName, true); + controller.toggleMenu(); + expect(controller.navigation).toBeNull(); + + // Simulate external click + controller.toggleMenu(menuName); + controller.toggleMenu(internalMenuName, true); + $document.triggerHandler("click"); + + $timeout.flush(); + expect(controller.navigation).toBeNull(); + + // Simulate ESC keydown + controller.toggleMenu(menuName); + controller.toggleMenu(internalMenuName, true); + $document.triggerHandler({ + type: "keydown", + which: controller.KEYBOARD_KEYS.ESC + }); + + $timeout.flush(); + expect(controller.navigation).toBeNull(); + }); + + it("should not clear navigation", () => { + controller.toggleMenu(menuName); + controller.toggleMenu(internalMenuName, true); + + const navigation = controller.navigation; + component.triggerHandler("click"); + + $timeout.flush(); + expect(controller.navigation).toEqual(navigation); + }); + + it("should be fixed", () => { + // Test without value, should be true + component = testUtils.compileTemplate(""); + controller = component.controller("ouiNavbar"); + + $timeout.flush(); + + expect(component.hasClass(navbarFixedClass)).toBeTruthy(); + expect(controller.fixed).toBeTruthy(); + + // Test with value + component = testUtils.compileTemplate(''); + controller = component.controller("ouiNavbar"); + + $timeout.flush(); + + expect(component.hasClass(navbarFixedClass)).toBeTruthy(); + expect(controller.fixed).toBeTruthy(); + }); + + it("should not be fixed", () => { + component = testUtils.compileTemplate(''); + controller = component.controller("ouiNavbar"); + + $timeout.flush(); + + expect(component.hasClass(navbarFixedClass)).toBeFalsy(); + expect(controller.fixed).toBeFalsy(); + }); + + it("should focus element when menu is opened", () => { + const name = mockData.asideLinks[0].name; + component = testUtils.compileTemplate('', { + asideLinks: mockData.asideLinks + }); + controller = component.controller("ouiNavbar"); + + const button = controller.keyboardNav[name][0]; + spyOn(button, "focus"); + controller.toggleMenu(name); + + $timeout.flush(); + expect(button.focus).toHaveBeenCalled(); + }); + + it("should have mainLinks equal togglerLinks", () => { + component = testUtils.compileTemplate('', { + mainLinks: mockData.mainLinks + }); + controller = component.controller("ouiNavbar"); + + expect(controller.mainLinks).toEqual(controller.togglerLinks); + }); + }); describe("Brand", () => { const data = mockData.brand; - let component; let brand; + let component; + let controller; beforeEach(() => { - component = testUtils.compileTemplate('', { + component = testUtils.compileTemplate(` + + + + `, { brand: data }); + controller = component.find("oui-navbar-brand").controller("ouiNavbarBrand"); + + $timeout.flush(); + brand = angular.element(component[0].querySelector(".oui-navbar__brand")); }); + it("should remove aria-label", () => { + expect(controller.$element.attr("aria-label")).toBeUndefined(); + }); + it("should create a link", () => { expect(brand.length).toEqual(1); expect(brand[0].tagName).toBe("A"); @@ -42,6 +268,181 @@ describe("ouiNavbar", () => { }); }); + describe("Dropdown", () => { + let component; + + beforeEach(() => { + component = testUtils.compileTemplate(` + + + + + + + + `, { + name: "foo", + title: "bar", + label: "lorem", + badge: 5, + icon: "oui-icon oui-icon-help_circle", + text: "Lorem ipsum" + }); + + $timeout.flush(); + }); + + it("should have default classname", () => { + const dropdown = component.find("oui-navbar-dropdown"); + const dropdownMenu = component.find("oui-navbar-dropdown-menu"); + + expect(dropdown.hasClass(navbarDropdownClass)).toBeTruthy(); + expect(dropdown.hasClass(navbarListItemClass)).toBeTruthy(); + + expect(dropdownMenu.hasClass(navbarMenuClass)).toBeTruthy(); + expect(dropdownMenu.hasClass(navbarMenuFixedClass)).toBeTruthy(); + }); + + it("should have content transcluded", () => { + const dropdownMenu = component.find("oui-navbar-dropdown-menu"); + + expect(dropdownMenu.text()).toBe("Lorem ipsum"); + }); + + it("should have alignment 'end'", () => { + component = testUtils.compileTemplate(` + + + + + + + + `, { + name: "foo", + title: "bar", + label: "lorem", + badge: 5, + icon: "oui-icon oui-icon-help_circle", + text: "Lorem ipsum" + }); + const dropdownMenu = component.find("oui-navbar-dropdown-menu"); + + $timeout.flush(); + + expect(dropdownMenu.hasClass(navbarMenuEndClass)).toBeTruthy(); + }); + }); + + describe("Menu", () => { + const data = mockData.asideLinks[0]; + + let component; + let menu; + + beforeEach(() => { + component = testUtils.compileTemplate(` + + + + + + + + `, { + name: data.name, + title: data.title, + headerTitle: data.headerTitle, + subLinks: data.subLinks + }); + + $timeout.flush(); + + menu = component.find("oui-navbar-menu"); + }); + + it("should have default classname", () => { + expect(menu.hasClass(navbarMenuClass)).toBeTruthy(); + expect(menu.hasClass(navbarMenuFixedClass)).toBeFalsy(); + expect(menu.hasClass(navbarMenuEndClass)).toBeFalsy(); + }); + + it("should have role 'menu'", () => { + expect(menu.attr("role")).toBe("menu"); + }); + + it("should have alignment", () => { + component = testUtils.compileTemplate(` + + + + + + + + `, { + name: data.name, + title: data.title, + headerTitle: data.headerTitle, + subLinks: data.subLinks + }); + + $timeout.flush(); + + menu = component.find("oui-navbar-menu"); + expect(menu.hasClass(navbarMenuEndClass)).toBeTruthy(); + }); + + it("should be fixed", () => { + component = testUtils.compileTemplate(` + + + + + + + + `, { + name: data.name, + title: data.title, + headerTitle: data.headerTitle, + subLinks: data.subLinks + }); + + $timeout.flush(); + + menu = component.find("oui-navbar-menu"); + expect(menu.hasClass(navbarMenuFixedClass)).toBeTruthy(); + }); + }); + describe("Main links", () => { const data = mockData.mainLinks; const activeIndex = 0; @@ -55,6 +456,8 @@ describe("ouiNavbar", () => { mainLinks: data }); + $timeout.flush(); + menu = angular.element(component[0].querySelector(".oui-navbar-list_main")); links = menu.children("li"); }); @@ -98,6 +501,9 @@ describe("ouiNavbar", () => { component = testUtils.compileTemplate('', { asideLinks: data }); + + $timeout.flush(); + menu = angular.element(component[0].querySelector(".oui-navbar-list_aside")); links = menu.children("li"); }); @@ -154,6 +560,8 @@ describe("ouiNavbar", () => { togglerLinks: data }); + $timeout.flush(); + toggler = angular.element(component[0].querySelector(".oui-navbar-toggler")); responsiveMenu = angular.element(component[0].querySelector(".oui-navbar-menu_toggle")); }); @@ -185,6 +593,8 @@ describe("ouiNavbar", () => { mainLinks: data }); + $timeout.flush(); + backdrop = angular.element(component[0].querySelector(".oui-navbar-backdrop")); toggler = angular.element(component[0].querySelector(".oui-navbar-toggler")); }); diff --git a/packages/oui-navbar/src/keyboard-keys.constant.js b/packages/oui-navbar/src/keyboard-keys.constant.js index 7a757d5e..88461f3f 100644 --- a/packages/oui-navbar/src/keyboard-keys.constant.js +++ b/packages/oui-navbar/src/keyboard-keys.constant.js @@ -1,5 +1,5 @@ export default { - ALT: 9, - TAB: 16, + TAB: 9, + SHIFT: 16, ESC: 27 }; diff --git a/packages/oui-navbar/src/link/navbar-link.component.js b/packages/oui-navbar/src/link/navbar-link.component.js new file mode 100644 index 00000000..65f2e78f --- /dev/null +++ b/packages/oui-navbar/src/link/navbar-link.component.js @@ -0,0 +1,19 @@ +import controller from "./navbar-link.controller"; +import template from "./navbar-link.html"; + +export default { + require: { + navbarCtrl: "^^ouiNavbar" + }, + bindings: { + name: "@", + text: "@", + href: "@?", + state: "@?", + stateParams: " + this.$element + .addClass("oui-navbar-list__item") + ); + } + + // Return value of "ui-sref" + getFullSref () { + return `${this.state}(${JSON.stringify(this.stateParams)})`; + } +} diff --git a/packages/oui-navbar/src/link/navbar-link.html b/packages/oui-navbar/src/link/navbar-link.html new file mode 100644 index 00000000..2c1e4fae --- /dev/null +++ b/packages/oui-navbar/src/link/navbar-link.html @@ -0,0 +1,27 @@ + + + + diff --git a/packages/oui-navbar/src/menu/navbar-menu.component.js b/packages/oui-navbar/src/menu/navbar-menu.component.js index d2e25b66..6cba4db1 100644 --- a/packages/oui-navbar/src/menu/navbar-menu.component.js +++ b/packages/oui-navbar/src/menu/navbar-menu.component.js @@ -2,17 +2,18 @@ import controller from "./navbar-menu.controller"; import template from "./navbar-menu.html"; export default { + require: { + navbarCtrl: "^^ouiNavbar" + }, bindings: { backButton: "

-