open-consul/ui/packages/consul-ui/app/components/consul/server/card
Ella Cai aa03846880
UI: Update Consul UI colors to use HDS colors (#16111)
* 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>
2023-02-27 09:30:12 -07:00
..
README.mdx ui: Tile CSS component (#12570) 2022-03-23 10:34:26 +00:00
index.hbs ui: upgrade ember composable helper (#13394) 2022-06-08 16:07:51 +01:00
index.scss ui: Tile CSS component (#12570) 2022-03-23 10:34:26 +00:00
layout.scss ui: Initial Server Status Overview Page (#12599) 2022-04-04 09:45:03 +01:00
skin.scss UI: Update Consul UI colors to use HDS colors (#16111) 2023-02-27 09:30:12 -07:00

README.mdx

<!-- START component-docs:@tagName -->
# Consul::Server::Card
<!-- END component-docs:@tagName -->

<!-- START component-docs:@description -->
A presentational component representing a Consul Server
<!-- END component-docs:@description -->

```hbs preview-template
<figure>
  <figcaption>
    Read Replicas just show the name of the Server
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=true
        Status="voter"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Leaders have a special icon-tile
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=false
        Status="leader"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Unhealthy voters have a differently colored badge
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=false
        ReadReplica=false
        Status="voter"
      }}
    >
    </Consul::Server::Card>
</figure>

<figure>
  <figcaption>
    Non-voters have different text and coloring
  </figcaption>
    <Consul::Server::Card
      @item={{hash
        Name="Server Name"
        Healthy=true
        ReadReplica=false
        Status="non-voter"
      }}
    >
    </Consul::Server::Card>
</figure>
<figure>
    <Consul::Server::Card
      style={{style-map
        (array 'width' '200px')
      }}
      @item={{hash
        Name="Server Name which happens to be a big long name"
        Healthy=false
        ReadReplica=false
        Status="non-voter"
      }}
    >
    </Consul::Server::Card>
</figure>
```

## Attributes

<!-- START component-docs:@attrs -->
<!-- END component-docs:@attrs -->

## Arguments

<!-- START component-docs:@args -->

| Argument | Type   | Default | Description                                |
| :------- | :----- | :------ | :----------------------------------------- |
| item     | object |         | Consul Server shaped object                |

<!-- END component-docs:@args -->

## Slots

<!-- START component-docs:@slots -->
<!-- END component-docs:@slots -->

## CSS Parts

<!-- START component-docs:@cssparts -->
<!-- END component-docs:@cssparts -->

## CSS Properties

<!-- START component-docs:@cssprops -->
<!-- END component-docs:@cssprops -->

## Contextual Components

<!-- START component-docs:@components -->
<!-- END component-docs:@components -->