feat(oui-navbar): allow html in navbar links (#330)

Author: FredericEspiau

packages/oui-navbar/README.md

@@ -53,7 +53,7 @@
                 links="asideLink.subLinks"
                 limit-to="asideLink.limitTo"
                 header-template="asideLink.headerTemplate"
-                header-title="{{asideLink.title}}"
+                header-title="{{asideLink.headerTitle}}"
                 footer-template="asideLink.footerTemplate"
                 footer-title="{{asideLink.footerTitle}}"
                 footer-href="{{asideLink.footerUrl}}"
@@ -69,7 +69,7 @@
             <oui-navbar-menu ng-switch-default
                 header-class="oui-navbar_mobile-only"
                 header-breadcrumb="{{asideLink.headerBreadcrumb}}"
-                header-title="{{asideLink.title}}"
+                header-title="{{asideLink.headerTitle}}"
                 name="{{asideLink.name}}"
                 links="asideLink.subLinks"
                 align="end"
@@ -391,7 +391,7 @@ This property is only available for root links of `aside-links`.
                 links="asideLink.subLinks"
                 limit-to="asideLink.limitTo"
                 header-template="asideLink.headerTemplate"
-                header-title="{{asideLink.title}}"
+                header-title="{{asideLink.headerTitle}}"
                 footer-template="asideLink.footerTemplate"
                 footer-title="{{asideLink.footerTitle}}"
                 footer-href="{{asideLink.footerUrl}}"
@@ -407,7 +407,7 @@ This property is only available for root links of `aside-links`.
             <oui-navbar-menu ng-switch-default
                 header-class="oui-navbar_mobile-only"
                 header-breadcrumb="{{asideLink.headerBreadcrumb}}"
-                header-title="{{asideLink.title}}"
+                header-title="{{asideLink.headerTitle}}"
                 name="{{asideLink.name}}"
                 links="asideLink.subLinks"
                 align="end"
@@ -486,7 +486,7 @@ subLinks = [];
                 name="{{$ctrl.placeholderNotification[0].name}}"
                 links="$ctrl.placeholderNotification[0].subLinks"
                 limit-to="$ctrl.placeholderNotification[0].limitTo"
-                header-title="{{$ctrl.placeholderNotification[0].title}}"
+                header-title="{{$ctrl.placeholderNotification[0].headerTitle}}"
                 align="end"
                 fixed></oui-navbar-notification>
         </oui-navbar-dropdown>

packages/oui-navbar/src/dropdown/navbar-dropdown.html

@@ -15,6 +15,6 @@
             ng-bind="$ctrl.iconBadge">
         </span>
     </span>
-    <span ng-bind="::$ctrl.text"></span>
+    <span ng-bind-html="::$ctrl.text"></span>
 </button>
 <div class="oui-navbar-menu__wrapper" ng-transclude></div>

packages/oui-navbar/src/index.spec.data.json

@@ -41,7 +41,8 @@
         {
             "name": "notifications",
             "class": "navbar-notification__list",
-            "title": "Notifications",
+            "title": "<div class=\"oui-color-gothic\">Your</div><span>notifications</span>",
+            "headerTitle": "Your notifications",
             "iconClass": "oui-icon oui-icon-info_circle",
             "iconAnimated": true,
             "subLinks": [
@@ -84,7 +85,8 @@
         },
         {
             "name": "libero",
-            "title": "Libero",
+            "title": "<div class=\"oui-color-gothic\">Need</div><span>help</span>",
+            "headerTitle": "Need help",
             "iconClass": "oui-icon oui-icon-help_circle",
             "subLinks": [
                 {
@@ -125,7 +127,7 @@
         },
         {
             "name": "user",
-            "title": "User",
+            "title": "<div class=\"oui-color-text_oui-color-gothic\">Hello Username</div><span>your account</span>",
             "iconClass": "oui-icon oui-icon-info_circle",
             "subLinks": [
                 {

packages/oui-navbar/src/link/navbar-link.html

@@ -9,7 +9,7 @@
         'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
     }"
     ng-href="{{::$ctrl.href}}"
-    ng-bind="::$ctrl.text"
+    ng-bind-html="::$ctrl.text"
     ng-click="$ctrl.onClick()">
 </a>
 <a class="oui-navbar-link"
@@ -22,7 +22,7 @@
         'oui-navbar-link_secondary': $ctrl.variant === 'secondary',
         'oui-navbar-link_tertiary': $ctrl.variant === 'tertiary'
     }"
-    ng-bind="::$ctrl.text"
+    ng-bind-html="::$ctrl.text"
     ui-sref="{{::$ctrl.getFullSref()}}"
     ui-sref-active="oui-navbar-link_active"
     ng-click="$ctrl.onClick()">