open-consul

History

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	…
index.hbs	…
index.scss	…
layout.scss	…
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 -->