open-consul/ui/packages/consul-ui/app/components/tab-nav
John Cowen 3d1b859533
ui: Support for SSO with Admin Partitions (#11604)
* Upgrade AuthForm and document current state a little better
* Hoist SSO out of the AuthForm
* Bare minimum admin partitioned SSO

also:

ui: Tabbed Login with Token or SSO interface (#11619)

- I upgraded our super old, almost the first ember component I wrote, to use glimmer/almost template only. This should use slots/contextual components somehow, but thats a bigger upgrade so I didn't go that far.
- I've been wanting to upgrade the shape of our StateChart component for a very long while now, here its very apparent that it would be much better to do this sooner rather than later. I left it as is for now, but there will be a PR coming soon with a slight reshaping of this component.
- Added a did-upsert modifier which is a mix of did-insert/did-update
- Documentation added/amended for all the new things.
2021-11-24 14:53:12 +00:00
..
index.hbs ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00
index.js ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00
index.scss ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00
layout.scss ui: Set overflow: auto on the tab nav (#9402) 2020-12-16 09:19:00 +00:00
pageobject.js
README.mdx ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00
skin.scss ui: Support for SSO with Admin Partitions (#11604) 2021-11-24 14:53:12 +00:00

---
state: needs-love
---
# TabNav

`<TabNav />` renders a list of items as linked tabs (there is also an option
to use labels vs anchors for links for radio button based tabs).

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`

**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)

```hbs preview-template
<figure>
  <figcaption>A TabNav with a conditional button using `compact` which removes empty values from arrays</figcaption>
<TabNav @items={{
  compact
      (array
          (hash label="Health Checks" href="#" selected=true)
          (hash label="Service Instances" href="#" selected=(is-href "docs.something"))
(if false (hash label="Don't show me" href="#" selected=false) '')
          (hash label="Lock Sessions" href="#" selected=false)
          (hash label="Metadata" href="#" selected=false)
      )
}}/>
</figure>
```

```css
.tab-nav {
  @extend %tab-nav;
}
```