ui: Tile CSS component (#12570)

* ui: Tile CSS component

* ui: Consul ServerCard component (#12576)

ui/packages/consul-ui/app/components/consul/server/card/README.mdx

@@ -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 -->

ui/packages/consul-ui/app/components/consul/server/card/index.hbs

@@ -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>
+

ui/packages/consul-ui/app/components/consul/server/card/index.scss

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

ui/packages/consul-ui/app/components/consul/server/card/layout.scss

@@ -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));
+}
+
+
+
+

ui/packages/consul-ui/app/components/consul/server/card/skin.scss

@@ -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));
+}
+

ui/packages/consul-ui/app/components/consul/server/list/index.hbs

@@ -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>
+

ui/packages/consul-ui/app/components/consul/server/list/index.scss

@@ -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;
+}

ui/packages/consul-ui/app/components/tile/README.mdx

@@ -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;
+}
+```

ui/packages/consul-ui/app/components/tile/debug.scss

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

ui/packages/consul-ui/app/components/tile/index.scss

@@ -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));
+}
+

ui/packages/consul-ui/app/styles/base/component/index.scss

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

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

@@ -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%;

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

@@ -236,8 +236,8 @@
 // @import './change/index.scss';
 // @import './change-circle/index.scss';
 // @import './change-square/index.scss';
-// @import './check/index.scss';
+@import './check/index.scss';
-// @import './check-circle/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/index.scss';
-// @import './x-circle/index.scss';
+@import './x-circle/index.scss';
 // @import './x-circle-fill/index.scss';
 // @import './x-diamond/index.scss';
 // @import './x-diamond-fill/index.scss';

ui/packages/consul-ui/app/styles/base/index.scss

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

ui/packages/consul-ui/app/styles/base/typography/base-keyframes.scss

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

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

@@ -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 */

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

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

ui/packages/consul-ui/app/styles/components.scss

@@ -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';

ui/packages/consul-ui/app/styles/debug.scss

@@ -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';