mirror of https://github.com/status-im/consul.git
06ff4228b4
* update red color variables to hds * change background red to be one step lighter * map oranges * map greens * map blues * map greys * delete themes, colours: lemon, magenta, strawberry, and vault color aliases * add unmapped rainbow colours * replace white and transparent vars, remove unused semantic vars and frame placeholders * small tweaks to improve contrast, change node health status x/check colours for non-voters to match design doc, replace semantic colour action w hds colour * add unmapped grays, remove dark theme, manually set nav bar to use dark colours * map consul pink colour * map yellows * add unmapped oranges, delete light theme * remove readme, base variables, clean up dangling colours * Start working on the nav disclosure menus * Update main-nav-horizontal dropdowns * Format template * Update box-shadow tokens * Replace --tone- usage with tokens * Update nav disabled state and panel border colour * Replace rgb usage on tile * Fix permissions modal overlay * More fixes * Replace orange-500 with amber-200 * Update badge colors * Update vertical sidebar colors * Remove top border on consul peer list ul --------- Co-authored-by: wenincode <tyler.wendlandt@hashicorp.com> |
||
---|---|---|
.. | ||
README.mdx | ||
index.hbs | ||
index.js | ||
index.scss | ||
layout.scss | ||
pageobject.js | ||
skin.scss |
README.mdx
--- 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 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, 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> <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> ``` 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; } ```