feat(oui-popover): add ng-template and title attribute support

packages/oui-popover/README.md

@@ -1,10 +1,49 @@
 # Popover
 
-<component-status cx-design="partial" ux="beta"></component-status>
+<component-status cx-design="complete" ux="rc"></component-status>
 
 ## Usage
 
-### Simple case
+### Using value of `oui-popover` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content.">
+    Click to toggle popover
+</button>
+```
+
+### Using value of `title` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    title="This is an awesome popover content." 
+    oui-popover>
+    Click to toggle popover
+</button>
+```
+
+### Using a template with `oui-popover-template` attribute
+
+```html:preview
+<button type="button" 
+    class="oui-button oui-button_primary" 
+    oui-popover
+    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><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
 <oui-popover>
@@ -15,83 +54,83 @@
 </oui-popover>
 ```
 
+**Note**: This use is **deprecated** and will be removed in the next major version
+
 ### All directions
 
 ```html:preview
-<oui-popover placement="top">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on top</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="right">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on right</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="bottom">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on bottom</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="left">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Popover on left</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="right">
+    Popover on right
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="top">
+    Popover on top
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="bottom">
+    Popover on bottom
+</button>
+
+<button type="button" class="oui-button oui-button_primary"
+    oui-popover="This is an awesome popover content."
+    oui-popover-placement="left">
+    Popover on left
+</button>
 ```
 
 ### Alignments
 
 ```html:preview
-<oui-popover placement="bottom-start">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align start</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
-
-<oui-popover placement="bottom-end">
-    <button type="button" class="oui-button oui-button_primary" oui-popover-trigger>Align end</button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content." 
+    oui-popover-placement="bottom-start">
+    Align start
+</button>
+
+<button type="button" class="oui-button oui-button_primary" 
+    oui-popover="This is an awesome popover content." 
+    oui-popover-placement="bottom-end">
+    Align end
+</button>
 ```
 
 ### Help Popover
 
 ```html:preview
-<oui-popover>
-    <button type="button" class="oui-popover-button" oui-popover-trigger></button>
-    <oui-popover-content>This is an awesome popover content.</oui-popover-content>
-</oui-popover>
+<button type="button" class="oui-popover-button" oui-popover="This is an awesome popover content."></button>
 ```
 
-## API
-
-### oui-popover
-
-The component for a popover.
-
-Availability:
-
- - Element
-
-| Attribute     | Type      | Binding   | Values                                                                                        | Default   | Description
-| ----          | ----      | ----      | ----                                                                                          | ----      | ----
-| `placement`   | string    | @?        | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements)    | `right`   | modifier for alignment
+### Dynamic popover text
 
-For placement values, see Popper.JS documentation (https://popper.js.org/popper-documentation.html#Popper.placements)
-
-### oui-popover-trigger
+```html:preview
+<input type="text" class="oui-input oui-input_inline"
+    ng-init="$ctrl.popoverText = 'Lorem ipsum'" 
+    ng-model="$ctrl.popoverText"
+    oui-popover="{{ $ctrl.popoverText }}">
+```
 
-The directive that triggers the popover apparition.
+## API
 
-Availability:
+| 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
 
- - Element
- - Attribute
+## Deprecated
 
-### oui-popover-content
+### Attributes
 
-The directive that wrap the popover content.
+* `placement`: Replaced by `oui-popover-placement` attribute
 
-Availability:
+### Components
 
- - Element
- - Attribute
+* `oui-popover`: Replaced by `oui-popover` attribute
+* `oui-popover-trigger`: Replaced by `oui-popover` attribute
+* `oui-popover-content`: Replaced by `oui-popover` attribute

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

@@ -1,5 +1,6 @@
 import contentTemplate from "./popover-content.html";
 
+// Deprecated: Support only for old use
 export default () => {
     "ngInject";
 
@@ -13,6 +14,9 @@ export default () => {
         bindToController: true,
         scope: {},
         template: contentTemplate,
-        transclude: true
+        transclude: true,
+        link: (scope, element) => {
+            element.addClass("oui-popover");
+        }
     };
 };

packages/oui-popover/src/content/popover-content.html

@@ -0,0 +1,5 @@
+<button type="button" class="oui-icon oui-icon-close_thin oui-popover__close-button" aria-label="Exit"
+    ng-click="$ctrl.popover.closePopover()"></button>
+<div class="oui-popover__content-container" aria-labelledby="{{:: $ctrl.popover.id }}"
+        ng-transclude></div>
+<div class="oui-popover__arrow" aria-hidden="true"></div>

packages/oui-popover/src/index.js

@@ -1,10 +1,10 @@
-import Popover from "./popover.component.js";
-import PopoverContent from "./popover-content.directive";
-import PopoverTrigger from "./popover-trigger.directive";
+import Popover from "./popover.directive.js";
+import PopoverContent from "./content/popover-content.directive";
+import PopoverTrigger from "./trigger/popover-trigger.directive";
 
 export default angular
     .module("oui.popover", [])
-    .component("ouiPopover", Popover)
+    .directive("ouiPopover", Popover)
     .directive("ouiPopoverContent", PopoverContent)
     .directive("ouiPopoverTrigger", PopoverTrigger)
     .name;