Develop

packages/oui-back-button/README.md

@@ -7,8 +7,7 @@
 ### Default
 
 ```html:preview
-<oui-back-button href="#" heading="Title">
-</oui-back-button>
+<oui-back-button href="#">Title</oui-back-button>
 ```
 
 ### Aria label
@@ -27,11 +26,13 @@
 
 ## API
 
-| Attribute     | Type     | Binding | One-time binding | Values              | Default                | Description                         |
-| ----          | ----     | ----    | ----             | ----                | ----                   | ----                                |
-| id            | string   | @?      | true             |                     |                        | id attribute of the input           |
-| name          | string   | @?      | true             |                     |                        | name attribute of the input         |
-| aria-label    | string   | @?      | true             |                     |                        | accessibility label                 |
-| heading       | string   | @?      | true             |                     |                        | text of the header                  |
-| on-click      | function | &?      |                  |                     |                        | callback on component click         |
-| href          | string   | @?      | true             |                     |                        | link url                            |
+| Attribute     | Type      | Binding   | One-time binding  | Values | Default   | Description
+| ----          | ----      | ----      | ----              | ----   | ----      | ----
+| `id`          | string    | @?        | true              |        |           | id attribute of the input
+| `name`        | string    | @?        | true              |        |           | name attribute of the input
+| `aria-label`  | string    | @?        | true              |        |           | accessibility label
+| `heading`     | string    | @?        | true              |        |           | text of the header
+| `on-click`    | function  | &?        |                   |        |           | callback on component click
+| `href`        | string    | @?        | true              |        |           | url of the return link
+| `state`       | string    | @?        | yes               |        |           | state of the return link
+| `stateParams` | object    | <?        |                   |        |           | state params of the return link

packages/oui-back-button/src/back-button.component.js

@@ -11,6 +11,9 @@ export default {
         heading: "@?",
         title: "@?", // Deprecated: Replaced by 'heading'
         onClick: "&?",
-        href: "@?"
-    }
+        href: "@?",
+        state: "@?",
+        stateParams: "<?"
+    },
+    transclude: true
 };

packages/oui-back-button/src/back-button.controller.js

@@ -37,4 +37,9 @@ export default class {
         }
     }
 
+    // Return value of "ui-sref"
+    getFullSref () {
+        return `${this.state}(${JSON.stringify(this.stateParams)})`;
+    }
+
 }

packages/oui-back-button/src/back-button.html

@@ -1,4 +1,4 @@
-<button ng-if="::!$ctrl.href"
+<button ng-if="::!$ctrl.href && !$ctrl.state"
         type="button"
         class="oui-button oui-button_icon-alone"
         ng-attr-aria-label="{{:: $ctrl.ariaLabel }}"
@@ -9,7 +9,14 @@
 </button>
 <a ng-if="::!!$ctrl.href"
    class="oui-button oui-button_icon-alone"
+   ng-click="$ctrl.onBtnClick()"
    ng-href="{{:: $ctrl.href }}">
   <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
 </a>
-<h2 class="oui-back-button_title oui-header_2" ng-bind="::$ctrl.heading"></h2>
+<a ng-if="::!!$ctrl.state"
+   class="oui-button oui-button_icon-alone"
+   ng-click="$ctrl.onBtnClick()"
+   ui-sref="{{::$ctrl.getFullSref()}}">
+  <i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
+</a>
+<h2 class="oui-back-button_title oui-header_2" ng-transclude>{{::$ctrl.heading}}</h2>

packages/oui-button/README.md

@@ -7,37 +7,37 @@
 ### Default
 
 ```html:preview
-<oui-button text="Default button" on-click="onClick()"></oui-button>
+<oui-button on-click="onClick()">Default button</oui-button>
 ```
 
 ### Action buttons
 
 ```html:preview
-<div>
+<p>
   <oui-button variant="primary" text="Primary"></oui-button>
   <oui-button variant="secondary" text="Secondary"></oui-button>
   <oui-button variant="link" text="Link"></oui-button>
-</div>
+</p>
 
-<div>
+<p>
   <oui-button variant="primary" text="Primary" disabled></oui-button>
   <oui-button variant="secondary" text="Secondary" disabled></oui-button>
   <oui-button variant="link" text="Link" disabled></oui-button>
-</div>
+</p>
 ```
 
 ### Steps buttons
 
 ```html:preview
-<div>
+<p>
   <oui-button variant-nav="previous" text="Previous" on-click="previous()"></oui-button>
   <oui-button variant="primary" variant-nav="next" text="Next" on-click="next()"></oui-button>
-</div>
+</p>
 
-<div>
+<p>
   <oui-button variant-nav="previous" text="Previous" on-click="previous()" disabled></oui-button>
   <oui-button variant="primary" variant-nav="next" text="Next" on-click="next()" disabled></oui-button>
-</div>
+</p>
 ```
 
 ### Accessibility

packages/oui-button/src/button.component.js

@@ -16,5 +16,6 @@ export default {
         onClick: "&?"
     },
     controller,
-    template
+    template,
+    transclude: true
 };

packages/oui-button/src/button.html

@@ -16,7 +16,7 @@
 >
   <span aria-hidden="true" class="oui-icon oui-icon_circle oui-icon-chevron-left"
     ng-if="::$ctrl.variantNav === 'previous'"></span>
-  <span ng-bind="::$ctrl.text"></span>
+  <span ng-transclude>{{::$ctrl.text}}</span>
   <span aria-hidden="true" class="oui-icon oui-icon_circle oui-icon-chevron-right"
     ng-if="::$ctrl.variantNav === 'next'"></span>
 </button>