Merge pull request #369 from ovh-ux/develop

Develop

Author: AxelPeter

packages/oui-header-tabs/README.md

@@ -84,6 +84,19 @@
 </oui-page-header>
 ```
 
+
+### With action click
+
+```html:preview
+<oui-header-tabs>
+    <oui-header-tabs-item text="Home" href="/#" on-click="$ctrl.onActionClick()"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Page Header" href="/#!/oui-angular/page-header"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Header Tabs" href="/#!/oui-angular/header-tabs" active></oui-header-tabs-item>
+    <oui-header-tabs-item text="Pagination" href="/#!/oui-angular/pagination"></oui-header-tabs-item>
+    <oui-header-tabs-item text="Datagrid" href="/#!/oui-angular/datagrid" on-click="$ctrl.onActionClick()"></oui-header-tabs-item>
+</oui-header-tabs>
+```
+
 ## API
 
 ### oui-header-tabs-item
@@ -97,6 +110,7 @@
 | `active`      | boolean   | <?        | no                | `true`, `false`   | `false`   | manual active flag
 | `disabled`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | disabled flag
 | `external`    | boolean   | <?        | yes               | `true`, `false`   | `false`   | external link flag
+| `on-click`    | function  | &         | no                | n/a               | n/a       | click handler
 
 **Note**: `ui-router` is needed for the attributes `state` and `state-params`.
 

packages/oui-header-tabs/src/header-tabs-item.component.js

@@ -11,6 +11,7 @@ export default {
         stateParams: "<?",
         external: "<?",
         active: "<?",
-        disabled: "<?"
+        disabled: "<?",
+        onClick: "&"
     }
 };

packages/oui-header-tabs/src/header-tabs-item.html

@@ -4,13 +4,15 @@
     <a ng-attr-rel="{{::$ctrl.linkRel}}"
        ng-attr-target="{{::$ctrl.linkTarget}}"
        ng-href="{{::$ctrl.href}}"
-       ng-if="!!$ctrl.href && !$ctrl.disabled">
+       ng-if="!!$ctrl.href && !$ctrl.disabled"
+       ng-click="$ctrl.onClick()">
         <span ng-bind="::$ctrl.text"></span>
         <span class="oui-icon oui-icon-external_link" aria-hidden="true"
               ng-if="::$ctrl.external">
         </span>
     </a>
     <a ng-bind="::$ctrl.text"
+       ng-click="$ctrl.onClick()"
        ng-if="!!$ctrl.state && !$ctrl.disabled"
        ui-sref="{{::$ctrl.getFullSref()}}">
     </a>

packages/oui-header-tabs/src/index.spec.js

@@ -126,5 +126,21 @@ describe("ouiHeaderTabs", () => {
             expect($separator.hasClass("oui-dropdown-menu__divider")).toBe(true);
             expect($separator.attr("role")).toBe("separator");
         });
+
+        it("should call function of onClick attribute, when header tab item is clicked", () => {
+            const clickSpy = jasmine.createSpy("spy");
+            const element = TestUtils.compileTemplate(`
+                <oui-header-tabs>
+                    <oui-header-tabs-item text="Tab" href="/#" on-click="$ctrl.clickHandler()"></oui-header-tabs-item>
+                </oui-header-tabs>`, {
+                    clickHandler: clickSpy
+                }
+            );
+
+            const item = element[0].querySelector(".oui-header-tabs__item a");
+            angular.element(item).triggerHandler("click");
+            expect(clickSpy).toHaveBeenCalled();
+            expect(clickSpy.calls.count()).toEqual(1);
+        });
     });
 });

packages/oui-popover/README.md

@@ -27,22 +27,29 @@
 
 ### Using a template with `oui-popover-template` attribute
 
+<oui-message type="warning">
+    This method use <code class="oui-doc-codespan">ngInclude</code> to add the template in a popover and create an <strong>isolated</strong> scope.<br />
+    Use <code class="oui-doc-codespan">oui-popover-scope</code> to extend the isolated scope and <code class="oui-doc-codespan">$ctrl</code> to access thoses values.
+</oui-message>
+
 ```html:preview
-<button type="button" 
+<input type="text" class="oui-input oui-input_inline"
+  ng-init="$ctrl.awesome = 'awesome'"
+  ng-model="$ctrl.awesome">
+<button type="button"
     class="oui-button oui-button_primary" 
     oui-popover
+    oui-popover-scope="$ctrl"
     oui-popover-template="popover.html">
     Click to toggle popover
 </button>
 
 <script type="text/ng-template" id="popover.html">
-<p ng-init="$ctrl.awesome = 'awesome'">This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
+<p>This is an <strong ng-bind="$ctrl.awesome"></strong> popover content.</p>
 <p><a href="#">The quick brown fox jumps over the lazy dog</a></p>
 </script>
 ```
 
-**Note**: This method use `ngInclude` to add the template in a popover. The content of your template will be compiled with a **new** scope. See [ngInclude](https://docs.angularjs.org/api/ng/directive/ngInclude).
-
 ### Using `oui-popover` component
 
 ```html:preview
@@ -120,8 +127,9 @@
 | Attribute                 | Type      | Binding   | One-time Binding  | Values                                                                                        | Default           | Description
 | ----                      | ----      | ----      | ----              | ----                                                                                          | ----              | ----
 | `oui-popover`             | string    | @         | no                | n/a                                                                                           | `title` attribute | popover content
-| `oui-popover-template`    | string    | @?        | no                | n/a                                                                                           | n/a               | popover content template
 | `oui-popover-placement`   | string    | @?        | yes               | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements)    | `right`           | modifier for alignment
+| `oui-popover-scope`       | string    | <?        | no                | n/a                                                                                           | n/a               | scope of the popover template
+| `oui-popover-template`    | string    | @?        | no                | n/a                                                                                           | n/a               | id of the popover template
 
 ## Deprecated
 

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

@@ -60,16 +60,33 @@ describe("ouiPopover", () => {
             });
 
             it("should create a popover, next to the trigger, with the content of the template", () => {
+                const foo = "bar";
                 const component = testUtils.compileTemplate(`<div>
-                    <button class="trigger" oui-popover="foo" oui-popover-template="popover.html"></button>
-                    <script type="text/ng-template" id="popover.html">foo</script>
+                    <button class="trigger" oui-popover oui-popover-template="popover.html"></button>
+                    <script type="text/ng-template" id="popover.html">${foo}</script>
                     </div>`);
 
                 $timeout.flush();
 
                 const popover = angular.element(component[0].querySelector(".trigger")).next();
 
-                expect(popover.text().trim()).toBe("foo");
+                expect(popover.text().trim()).toBe(foo);
+            });
+
+            it("should extend the scope of the template", () => {
+                const foo = "bar";
+                const component = testUtils.compileTemplate(`<div>
+                    <button class="trigger" oui-popover oui-popover-template="popover.html" oui-popover-scope="$ctrl"></button>
+                    <script type="text/ng-template" id="popover.html"><span ng-bind="$ctrl.foo"></span></script>
+                    </div>`, {
+                    foo
+                });
+
+                $timeout.flush();
+
+                const popover = angular.element(component[0].querySelector(".trigger")).next();
+
+                expect(popover.text().trim()).toBe(foo);
             });
 
             it("should set aria-expanded when trigger is clicked", () => {

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

@@ -50,7 +50,10 @@ export default class PopoverController {
 
             // Support for attribute `oui-popover`
             // Create a new scope to compile the popover next to the trigger
-            const popoverScope = angular.extend(this.$scope.$new(true), { $popoverCtrl: this });
+            const popoverScope = angular.extend(this.$scope.$new(true), {
+                $popoverCtrl: this,
+                $ctrl: this.scope
+            });
             const popoverTemplate = this.$compile(template)(popoverScope);
 
             // Add compiled template after $element

packages/oui-popover/src/popover.directive.js

@@ -9,6 +9,7 @@ export default () => {
             text: "@ouiPopover",
             title: "@?",
             placement: "@?ouiPopoverPlacement",
+            scope: "<?ouiPopoverScope",
             template: "@?ouiPopoverTemplate"
         },
         controller,

packages/oui-slideshow/README.md

@@ -78,16 +78,40 @@
 </div>
 ```
 
+### Panel change event
+**Note**: If you want to access the parameters inside `on-panel-change` callback, you need to use `direction` and `index` variables as below.
+
+* `direction` returns string of `prev` or `next`
+* `index` returns index of current slide
+
+```html:preview
+<div class="oui-doc-preview-only-keep-children" style="padding:50px 35px;background-color:rgba(0,0,0,0.3)">
+<oui-slideshow on-panel-change="$ctrl.onPanelChange(direction, index)">
+    <oui-slideshow-panel heading="New feature"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg">
+        Display your infrastructure as a list
+    </oui-slideshow-panel>
+    <oui-slideshow-panel heading="Introducing Ad-Sync"
+        picture="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cercle_rouge_100%25.svg"
+        href="http://www.ovh.com/"
+        label="Discover">
+        Designed to help you synchronize your local Active Directory with your OVH Active Directory.
+    </oui-slideshow-panel>
+</oui-slideshow>
+</div>
+```
+
 ## API
 
 ### oui-slideshow
 
-| Attribute     | Type      | Binding   | One-time Binding  | Values            | Default   | Description
-| ----          | ----      | ----      | ----              | ----              | ----      | ----
-| `theme`       | string    | @?        | yes               | n/a               | `default` | add specific theme to component
-| `loading`     | boolean   | <?        | no                | `true`, `false`   | `false`   | display loader flag
-| `loop`        | boolean   | <?        | no                | `true`, `false`   | `false`   | whether the component should cycle continuously
-| `on-dismiss`  | function  | &         | no                | n/a               | n/a       | dismiss callback
+| Attribute         | Type      | Binding   | One-time Binding  | Values                  | Default   | Description
+| ----              | ----      | ----      | ----              | ----                    | ----      | ----
+| `theme`           | string    | @?        | yes               | n/a                     | `default` | add specific theme to component
+| `loading`         | boolean   | <?        | no                | `true`, `false`         | `false`   | display loader flag
+| `loop`            | boolean   | <?        | no                | `true`, `false`         | `false`   | whether the component should cycle continuously
+| `on-dismiss`      | function  | &         | no                | n/a                     | n/a       | dismiss callback
+| `on-panel-change` | function  | &         | no                | direction, index        | n/a       | handler triggered when on click of next slide
 
 ### oui-slideshow-panel
 

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

@@ -142,6 +142,22 @@ describe("ouiSlideshow", () => {
                 $timeout.flush();
                 expect($firstPanel.hasClass("active")).toBe(false);
             });
+
+            it("should call function of event with attributes", () => {
+                const onPanelChangeSpy = jasmine.createSpy("onPanelChangeSpy");
+                const element = TestUtils.compileTemplate(`
+                    <oui-slideshow on-panel-change="$ctrl.onPanelChangeSpy(direction, index)">
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                        <oui-slideshow-panel></oui-slideshow-panel>
+                    </oui-slideshow>`, {
+                        onPanelChangeSpy
+                    });
+                const direction = "next";
+                const index = 1;
+                $timeout.flush();
+                getNextButton(element).triggerHandler("click");
+                expect(onPanelChangeSpy).toHaveBeenCalledWith(direction, index);
+            });
         });
     });
 });