luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

ui: Tile CSS component (#12570) 

* ui: Tile CSS component

* ui: Consul ServerCard component (#12576)
This commit is contained in:
John Cowen 2022-03-23 10:34:26 +00:00 committed by GitHub
parent 5579f4e94c
commit 13c6959b2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 344 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
ui/packages/consul-ui/app/components/consul/server/card/README.mdx Normal file
View File

@ -0,0 +1,118 @@
<!-- 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 -->

41
ui/packages/consul-ui/app/components/consul/server/card/index.hbs Normal file
View File

@ -0,0 +1,41 @@
<div
class={{class-map
'consul-server-card'
(array 'voting-status-leader' (eq @item.Status 'leader'))
(array 'voting-status-voter' (and
(not @item.ReadReplica)
(eq @item.Status 'voter')
))
(array 'voting-status-non-voter' (or
@item.ReadReplica
(contains @item.Status (array 'non-voter' 'staging'))
))
}}
...attributes
>
<dl>
<dt
{{tooltip "Leader"}}
class="name"
>
</dt>
<dd>
{{@item.Name}}
</dd>
{{#if (not @item.ReadReplica)}}
<dt class={{class-map
'health-status'
(array 'healthy' @item.Healthy)
}}>
Status
</dt>
<dd>
{{if (contains @item.Status (array 'leader' 'voter')) 'Active voter' 'Backup voter'}}
</dd>
{{/if}}
</dl>
</div>

5
ui/packages/consul-ui/app/components/consul/server/card/index.scss Normal file
View File

@ -0,0 +1,5 @@
@import './skin';
@import './layout';
.consul-server-card {
@extend %consul-server-card;
}

24
ui/packages/consul-ui/app/components/consul/server/card/layout.scss Normal file
View File

@ -0,0 +1,24 @@
%consul-server-card {
position: relative;
overflow: hidden;
@extend %panel;
--padding-x: 24px;
--padding-y: 24px;
padding: var(--padding-y) var(--padding-x);
--tile-size: 3rem; /* 48px */
}
%consul-server-card.voting-status-leader .name {
position: absolute !important;
}
%consul-server-card dd:not(:last-of-type) {
margin-bottom: calc(var(--padding-y) / 2);
}
%consul-server-card.voting-status-leader dd {
margin-left: calc(var(--tile-size) + var(--padding-x));
}

40
ui/packages/consul-ui/app/components/consul/server/card/skin.scss Normal file
View File

@ -0,0 +1,40 @@
%consul-server-card dt:not(.name) {
@extend %visually-hidden;
}
%consul-server-card.voting-status-leader .name {
@extend %with-leader-tile;
}
%consul-server-card .name + dd {
@extend %h300;
color: rgb(var(--tone-gray-999));
animation-name: typo-truncate;
}
%consul-server-card .health-status + dd {
@extend %pill-200;
font-size: var(--typo-size-700);
}
%consul-server-card.voting-status-non-voter .health-status + dd {
background-color: rgb(var(--tone-gray-100));
color: rgb(var(--tone-gray-600));
}
%consul-server-card:not(.voting-status-non-voter) .health-status.healthy + dd {
background-color: rgb(var(--tone-green-050));
color: rgb(var(--tone-green-800));
}
%consul-server-card:not(.voting-status-non-voter) .health-status:not(.healthy) + dd {
background-color: rgb(var(--tone-red-050));
color: rgb(var(--tone-red-500));
}
%consul-server-card .health-status + dd::before {
--icon-size: icon-000;
content: '';
}
%consul-server-card .health-status.healthy + dd::before {
--icon-name: icon-check;
--icon-color: rgb(var(--tone-green-800));
}
%consul-server-card .health-status:not(.healthy) + dd::before {
--icon-name: icon-x;
--icon-color: rgb(var(--tone-red-500));
}

17
ui/packages/consul-ui/app/components/consul/server/list/index.hbs Normal file
View File

@ -0,0 +1,17 @@
<div
class={{class-map
'consul-server-list'
}}
...attributes
>
<ul>
{{#each @items as |item|}}
<li>
<Consul::Server::Card
@item={{item}}
/>
</li>
{{/each}}
</ul>
</div>

9
ui/packages/consul-ui/app/components/consul/server/list/index.scss Normal file
View File

@ -0,0 +1,9 @@
%consul-server-list ul {
display: grid;
grid-template-columns: repeat(4, minmax(215px, 25%));
gap: 12px;
}
.consul-server-list {
@extend %consul-server-list;
}

20
ui/packages/consul-ui/app/components/tile/README.mdx Normal file
View File

@ -0,0 +1,20 @@
# tile
```hbs preview-template
<figure>
<figcaption>
Leader tile
</figcaption>
<div class="tile">
</div>
</figure>
```
```css
.tile {
@extend %with-tile, %with-leader-tile;
}
```

6
ui/packages/consul-ui/app/components/tile/debug.scss Normal file
View File

@ -0,0 +1,6 @@
#docfy-demo-preview-tile {
.tile {
@extend %with-tile, %with-leader-tile;
}
}

37
ui/packages/consul-ui/app/components/tile/index.scss Normal file
View File

@ -0,0 +1,37 @@
%with-tile {
position: relative;
width: var(--tile-size, 3rem);
height: var(--tile-size, 3rem);
}
%with-tile::before {
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: var(--decor-radius-250);
border: var(--decor-border-100);
}
%with-tile::after {
content: '';
position: absolute;
top: calc(var(--tile-size, 3rem) / 4);
left: calc(var(--tile-size, 3rem) / 4);
}
%with-leader-tile {
@extend %with-tile;
}
%with-leader-tile::before {
background-image: linear-gradient(135deg,
rgb(var(--strawberry-010)) 0%,
rgb(var(--strawberry-200)) 100%
);
border-color: rgb(var(--tone-gray-999) / 10%);
}
%with-leader-tile::after {
--icon-name: icon-star-circle;
--icon-size: icon-700;
color: rgb(var(--strawberry-500));
}

6
ui/packages/consul-ui/app/styles/base/component/index.scss Normal file
View File

@ -0,0 +1,6 @@
/* allows easy application of animation-name based composition */
*, *::before, *::after {
animation-play-state: paused;
animation-fill-mode: forwards;
}

1
ui/packages/consul-ui/app/styles/base/decoration/base-variables.scss
View File

@ -3,6 +3,7 @@
--decor-radius-000: 0;
--decor-radius-100: 2px;
--decor-radius-200: 4px;
--decor-radius-250: 6px;
--decor-radius-300: 7px;
--decor-radius-999: 9999px;
--decor-radius-full: 100%;

12
ui/packages/consul-ui/app/styles/base/icons/icons/index.scss
View File

@ -236,8 +236,8 @@
// @import './change/index.scss';
// @import './change-circle/index.scss';
// @import './change-square/index.scss';
// @import './check/index.scss';
// @import './check-circle/index.scss';
@import './check/index.scss';
@import './check-circle/index.scss';
@import './check-circle-fill/index.scss';
// @import './check-diamond/index.scss';
// @import './check-diamond-fill/index.scss';
@ -392,7 +392,7 @@
// @import './identity-user/index.scss';
// @import './image/index.scss';
// @import './inbox/index.scss';
// @import './info/index.scss';
@import './info/index.scss';
// @import './jump-link/index.scss';
// @import './key/index.scss';
// @import './key-values/index.scss';
@ -542,7 +542,7 @@
// @import './square/index.scss';
// @import './square-fill/index.scss';
// @import './star/index.scss';
// @import './star-circle/index.scss';
@import './star-circle/index.scss';
@import './star-fill/index.scss';
// @import './star-off/index.scss';
// @import './stop-circle/index.scss';
@ -614,8 +614,8 @@
// @import './wifi/index.scss';
// @import './wifi-off/index.scss';
// @import './wrench/index.scss';
// @import './x/index.scss';
// @import './x-circle/index.scss';
@import './x/index.scss';
@import './x-circle/index.scss';
// @import './x-circle-fill/index.scss';
// @import './x-diamond/index.scss';
// @import './x-diamond-fill/index.scss';

1
ui/packages/consul-ui/app/styles/base/index.scss
View File

@ -1,3 +1,4 @@
@import './component/index';
@import './decoration/index';
@import './color/index';
@import './animation/index';

7
ui/packages/consul-ui/app/styles/base/typography/base-keyframes.scss Normal file
View File

@ -0,0 +1,7 @@
@keyframes typo-truncate {
100% {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

1
ui/packages/consul-ui/app/styles/base/typography/base-variables.scss
View File

@ -11,6 +11,7 @@
/* also maybe use 100, 200 etc like colors */
--typo-size-100: 3.5rem;
--typo-size-200: 1.8rem;
--typo-size-250: 1.750rem; /* 28px */
--typo-size-300: 1.3rem;
/* mktg only ^ */
--typo-size-400: 1.2rem; /* $size-large? 24 */

1
ui/packages/consul-ui/app/styles/base/typography/index.scss
View File

@ -1,2 +1,3 @@
@import './base-variables';
@import './base-keyframes';
@import './base-placeholders';

3
ui/packages/consul-ui/app/styles/components.scss
View File

@ -36,6 +36,7 @@
@import 'consul-ui/components/secret-button';
@import 'consul-ui/components/sliding-toggle';
@import 'consul-ui/components/table';
@import 'consul-ui/components/tile';
@import 'consul-ui/components/toggle-button';
@import 'consul-ui/components/tabular-collection';
@import 'consul-ui/components/tabular-details';
@ -91,6 +92,8 @@
@import 'consul-ui/components/consul/intention';
@import 'consul-ui/components/consul/lock-session/list';
@import 'consul-ui/components/consul/lock-session/form';
@import 'consul-ui/components/consul/server/list';
@import 'consul-ui/components/consul/server/card';
@import 'consul-ui/components/consul/auth-method';
@import 'consul-ui/components/role-selector';

1
ui/packages/consul-ui/app/styles/debug.scss
View File

@ -4,6 +4,7 @@
@import 'consul-ui/components/main-nav-vertical/debug';
@import 'consul-ui/components/badge/debug';
@import 'consul-ui/components/panel/debug';
@import 'consul-ui/components/tile/debug';
@import 'consul-ui/components/shadow-template/debug';
@import 'consul-ui/components/csv-list/debug';
@import 'consul-ui/components/horizontal-kv-list/debug';