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: " { 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/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-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-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/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 | { 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/README.md b/packages/oui-navbar/README.md index 2670d2d3..eb8f3eba 100644 --- a/packages/oui-navbar/README.md +++ b/packages/oui-navbar/README.md @@ -4,8 +4,9 @@ ## Usage +### Basic + ```html:preview -
-
``` -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 04aec141..99b858bc 100644 --- a/packages/oui-navbar/src/index.js +++ b/packages/oui-navbar/src/index.js @@ -1,20 +1,30 @@ 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"; -angular +export default angular .module("oui.navbar", [ "ngAria", "ngSanitize" ]) .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: "

-
    +
    • + ng-class="::{ 'oui-navbar-menu__item_active': !!menuLink.isActive }" + ui-sref-active="oui-navbar-menu__item_active"> 'oui-navbar_desktop-only': !!menuLink.subLinks, 'oui-navbar-link_external': !!menuLink.isExternal }" - ng-click="$ctrl.toggleMenu()" + ng-click="$ctrl.navbarCtrl.toggleMenu()" ng-href="{{::menuLink.url}}" - ng-init="::$last && $ctrl.setFirstFocus()" oui-navbar-group="{{::$ctrl.menuName}}" oui-navbar-group-last="::$last"> @@ -44,7 +42,7 @@

      - + ng-class="::{ 'oui-navbar_desktop-only': !!menuLink.subLinks }" - ng-click="$ctrl.toggleMenu()" + ng-click="$ctrl.navbarCtrl.toggleMenu()" ng-bind="::menuLink.title" ui-sref="{{::$ctrl.constructor.getFullSref(menuLink)}}" - ng-init="::$last && $ctrl.setFocus()" oui-navbar-group="{{::$ctrl.menuName}}" oui-navbar-group-last="::$last"> @@ -68,7 +65,6 @@

      ng-attr-title="{{::!!menuLink.label ? menuLink.label : null}}" ng-click="$ctrl.closeMenuWithCallback($event, menuLink.click)" ng-bind="::menuLink.title" - ng-init="::$last && $ctrl.setFocus()" oui-navbar-group="{{::$ctrl.menuName}}" oui-navbar-group-last="::$last"> @@ -76,16 +72,15 @@

      @@ -94,15 +89,13 @@

      + align="{{::$ctrl.align}}" + fixed="::$ctrl.fixed" + back-button> diff --git a/packages/oui-navbar/src/navbar.component.js b/packages/oui-navbar/src/navbar.component.js index b3dd175c..9db97d51 100644 --- a/packages/oui-navbar/src/navbar.component.js +++ b/packages/oui-navbar/src/navbar.component.js @@ -12,5 +12,11 @@ export default { fixed: " { + if (get(this.keyboardNav, `${groupName}[${index}]`)) { + this.keyboardNav[groupName][index].focus(); + } + }, delay); + } + toggleMenu (state, isInternalNav) { - // Update navbar navigation - this.navigation = this.navbarService.toggleMenu(state, isInternalNav); + if (state) { + // Reset navigation if not internal navigation + if (!isInternalNav && (!this.navigation || !this.navigation[state])) { + this.navigation = {}; + } + + if (isInternalNav || !this.navigation[state]) { + // Toggle menu if internal navigation or state is undefined + this.navigation[state] = !this.navigation[state]; + } else if (this.navigation[state]) { + // Else close all menus + this.navigation = null; + } + + // Focus first list item when opened + if (this.navigation && this.navigation[state]) { + // Add a little delay to avoid transition bug on Webkit + this.setFocusTo(state, 0); + } + } else { + // Close all menus + this.navigation = null; + } } - updateLinks () { + $onInit () { // If no togglerLinks attribute, we use the value of mainLinks if (!angular.isDefined(this.$attrs.togglerLinks) && angular.isDefined(this.$attrs.mainLinks)) { this.togglerLinks = this.mainLinks; - this.togglerLoaded = true; } - } - - $onInit () { - this.updateLinks(); // Support presence of attribute 'fixed' addBooleanParameter(this, "fixed"); } - $onChanges (changes) { - this.updateLinks(); - - // Get togglerLinks changes for the loader - if (changes.togglerLinks) { - this.togglerLoaded = !!changes.togglerLinks.currentValue; - } + $onDestroy () { + this.$document + .off("click") + .off("keydown"); } $postLink () { @@ -47,6 +87,7 @@ export default class { this.$timeout(() => { // Add Classname on root element this.$element.addClass("oui-navbar"); + if (this.fixed) { this.$element.addClass("oui-navbar_fixed"); } diff --git a/packages/oui-navbar/src/navbar.html b/packages/oui-navbar/src/navbar.html index ce09a1e7..12cd08a9 100644 --- a/packages/oui-navbar/src/navbar.html +++ b/packages/oui-navbar/src/navbar.html @@ -1,228 +1,108 @@ - - - - - - +
      + + +
      - - - - - - - +
      + + +
      - + + -
        +
        -
      • - -
        -
        -

        -
        -
        -
        - - -
        -
        -
        + + + align="end" + fixed> + align="end" + fixed> -
        • + + -
      + - diff --git a/packages/oui-navbar/src/navbar.provider.js b/packages/oui-navbar/src/navbar.provider.js index 1e30df34..c9b4b4e9 100644 --- a/packages/oui-navbar/src/navbar.provider.js +++ b/packages/oui-navbar/src/navbar.provider.js @@ -1,3 +1,5 @@ +import { merge } from "lodash"; + export default class { constructor () { this.translations = { @@ -13,11 +15,11 @@ export default class { } /** - * Set the translations for the navbar component + * Set the translations * @param {Object} translations a map of translations */ setTranslations (translations) { - this.translations = translations; + this.translations = merge(this.translations, translations); return this; } diff --git a/packages/oui-navbar/src/navbar.service.js b/packages/oui-navbar/src/navbar.service.js deleted file mode 100644 index 80c9bf33..00000000 --- a/packages/oui-navbar/src/navbar.service.js +++ /dev/null @@ -1,28 +0,0 @@ -export default class { - isOpen (state) { - return this.navigation && this.navigation[state]; - } - - // Toggle menu from button click - toggleMenu (state, isInternalNav) { - if (state) { - // Reset navigation if not internal navigation - if (!isInternalNav && (!this.navigation || !this.navigation[state])) { - this.navigation = {}; - } - - if (isInternalNav || !this.navigation[state]) { - // Toggle menu if internal navigation or state is undefined - this.navigation[state] = !this.navigation[state]; - } else if (this.navigation[state]) { - // Else close all menus - this.navigation = null; - } - } else { - // Close all menus - this.navigation = null; - } - - return this.navigation; - } -} diff --git a/packages/oui-navbar/src/notification/navbar-notification.component.js b/packages/oui-navbar/src/notification/navbar-notification.component.js new file mode 100644 index 00000000..c43d1a6a --- /dev/null +++ b/packages/oui-navbar/src/notification/navbar-notification.component.js @@ -0,0 +1,22 @@ +import controller from "./navbar-notification.controller"; +import template from "./navbar-notification.html"; + +export default { + require: { + navbarCtrl: "^^ouiNavbar" + }, + bindings: { + menuName: "@name", + menuLinks: " { + this.$element + .addClass("oui-navbar-menu") + .addClass("oui-navbar-menu_notifications"); + + if (this.fixed) { + this.$element.addClass("oui-navbar-menu_fixed"); + } + + if (this.align) { + this.$element.addClass(`oui-navbar-menu_${this.align}`); + } + }); + } +} diff --git a/packages/oui-navbar/src/notification/navbar-notification.html b/packages/oui-navbar/src/notification/navbar-notification.html new file mode 100644 index 00000000..09925d08 --- /dev/null +++ b/packages/oui-navbar/src/notification/navbar-notification.html @@ -0,0 +1,119 @@ +
      +

      +
      +
      +
      + + +
      +
      diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.component.js b/packages/oui-navbar/src/toggler/navbar-toggler.component.js new file mode 100644 index 00000000..9a4cbff3 --- /dev/null +++ b/packages/oui-navbar/src/toggler/navbar-toggler.component.js @@ -0,0 +1,13 @@ +import controller from "./navbar-toggler.controller"; +import template from "./navbar-toggler.html"; + +export default { + require: { + navbarCtrl: "^^ouiNavbar" + }, + bindings: { + links: "<" + }, + controller, + template +}; diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.controller.js b/packages/oui-navbar/src/toggler/navbar-toggler.controller.js new file mode 100644 index 00000000..868da9e8 --- /dev/null +++ b/packages/oui-navbar/src/toggler/navbar-toggler.controller.js @@ -0,0 +1,8 @@ +export default class { + $onChanges (changes) { + // Get links changes for the loader + if (changes.links) { + this.loaded = !!changes.links.currentValue; + } + } +} diff --git a/packages/oui-navbar/src/toggler/navbar-toggler.html b/packages/oui-navbar/src/toggler/navbar-toggler.html new file mode 100644 index 00000000..5d260983 --- /dev/null +++ b/packages/oui-navbar/src/toggler/navbar-toggler.html @@ -0,0 +1,23 @@ + + + + + + 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/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-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/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..f4a43ad3 --- /dev/null +++ b/packages/oui-progress/src/index.js @@ -0,0 +1,10 @@ +import Progress from "./progress.component.js"; +import ProgressBar from "./bar/progress-bar.component.js"; +import ProgressThreshold from "./threshold/progress-threshold.component.js"; + +export default angular + .module("oui.progress", []) + .component("ouiProgress", Progress) + .component("ouiProgressBar", ProgressBar) + .component("ouiProgressThreshold", ProgressThreshold) + .name; 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)) + ); + } +} 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/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 @@ + 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/README.md b/packages/oui-tile/README.md index fe1c44db..f39e5d32 100644 --- a/packages/oui-tile/README.md +++ b/packages/oui-tile/README.md @@ -22,7 +22,9 @@ - Button 3 + Button 3 + +
      Button 1 clicked: {{$ctrl.click}}
      @@ -89,6 +91,8 @@ | `href` | string | @? | yes | | | button link url | | `on-click` | funcion | &? | | | | button action callback | | `aria-label` | string | @? | | | `null` | accessibility label | +| `disabled` | boolean | + ng-attr-aria-label="{{ :: $ctrl.ariaLabel }}" + ng-disabled="$ctrl.disabled"> {{ :: $ctrl.text }} - + {{ :: $ctrl.text }} - + + 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.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-tile/src/index.spec.js b/packages/oui-tile/src/index.spec.js index 0c2fdee0..4bca9df9 100644 --- a/packages/oui-tile/src/index.spec.js +++ b/packages/oui-tile/src/index.spec.js @@ -1,10 +1,12 @@ describe("ouiTile", () => { - + let $timeout; let TestUtils; + beforeEach(angular.mock.module("oui.tile")); beforeEach(angular.mock.module("oui.test-utils")); - beforeEach(inject((_TestUtils_) => { + beforeEach(inject((_$timeout_, _TestUtils_) => { + $timeout = _$timeout_; TestUtils = _TestUtils_; })); @@ -17,6 +19,14 @@ describe("ouiTile", () => { describe("Component", () => { + it("should have the default classname", () => { + const element = TestUtils.compileTemplate(""); + + $timeout.flush(); + + expect(element.hasClass("oui-tile")).toBeTruthy(); + }); + it("should display a tile with title and legend", () => { const title = "My title"; const legend = "My legend"; @@ -32,6 +42,20 @@ describe("ouiTile", () => { describe("Component tile button", () => { + it("should have the default classnames", () => { + const text = "button text"; + const element = TestUtils.compileTemplate( + ` + + `); + + $timeout.flush(); + + const button = element.find("oui-tile-button"); + expect(button.hasClass("oui-tile__item")).toBeTruthy(); + expect(button.hasClass("oui-tile__item_button")).toBeTruthy(); + }); + it("should display a button tile using attr", () => { const text = "button text"; const element = TestUtils.compileTemplate( @@ -65,6 +89,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( @@ -78,10 +116,42 @@ describe("ouiTile", () => { expect(clickSpy).toHaveBeenCalled(); }); + it("should disable the button", () => { + const element = TestUtils.compileTemplate( + ` + + `); + + expect(getTileButton(element).attr("disabled")).toBe("disabled"); + }); + + it("should display a disabled button instead of a link", () => { + const element = TestUtils.compileTemplate( + ` + + `); + + expect(getTileButton(element).attr("disabled")).toBe("disabled"); + }); + }); describe("Component tile definition", () => { + it("should have the default classname", () => { + const term = "my term"; + const description = "my description"; + const element = TestUtils.compileTemplate( + ` + + `); + + $timeout.flush(); + + const definition = element.find("oui-tile-definition"); + expect(definition.hasClass("oui-tile__item")).toBeTruthy(); + }); + it("should display term and description", () => { const term = "my term"; const description = "my description"; @@ -112,7 +182,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(); 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;