ui: Make our old TabNav component easily usable with a state machine (#13705)

* ui: Make our old TabNav component easily usable with a state machine

* Add an event handler that receives an object

ui/packages/consul-ui/app/components/tab-nav/README.mdx

@@ -11,14 +11,21 @@ Each item in the list should be a hash of `label`, `href` and `selected`.
 - `label`: The text to show
 - `href`: a href, probably generated via `href-to`
 - `selected`: whether the item is in the selected state or not, probably
-  generated via `is-href`
+  of the state to transition to.
+
+There are two similar event handlers, `@onclick` and `@onTabClick`.
+
+When using `@onclick`, the `item.label` is passed to the handler. When using
+`@onTabClick` the entire 'item' is passed instead, therefore you can add
+arbitrary properties to the 'item' to be used in the handler.
+
 
 **Please note:** This component should probably be rebuilt using contextual
-components, alternatively this could be hand built with native HTML using the
-same `nav/ul/li/a` pattern and you could just use the CSS component to style
-it. Unless there is a reason to do this, this component should be used pending
-a refactor (please remove this note once refactored into contextual
-components)
+components, and real events. Alternatively this could be hand built with native
+HTML using the same `nav/ul/li/a` pattern and you could just use the CSS
+component to style it. Unless there is a reason to do this, this component
+should be used pending a refactor (please remove this note once refactored into
+contextual components)
 
 ```hbs preview-template
 <figure>
@@ -36,6 +43,31 @@ components)
 </figure>
 ```
 
+A TabNav with using a `StateMachine.dispatch`
+
+```hbs
+<figure>
+  <figcaption>A TabNav with using a StateMachine.dispatch</figcaption>
+  <TabNav @items={{
+    compact
+      (array
+        (hash
+          label="1"
+          selected=(state-matches fsm.state 'one')
+          state="ONE"
+        )
+        (hash
+          label="2"
+          selected=(state-matches fsm.state 'two')
+          state="TWO"
+        )
+      )
+    }}
+    @onTabClicked={{pick 'state' fsm.dispatch}}
+  />
+</figure>
+```
+
 ```css
 .tab-nav {
   @extend %tab-nav;

ui/packages/consul-ui/app/components/tab-nav/index.hbs

@@ -36,6 +36,12 @@ as |select name|}}
           (noop)
         )
       }}
+      {{on 'click'
+        (if @onTabClicked
+          (fn @onTabClicked item)
+          (noop)
+        )
+      }}
       @href={{item.href}}
     >
       {{item.label}}