UI: [VAULT-17317] Update components to use helper class and use overview-… (#21586)

ui/app/styles/components/overview-card.scss

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.overview-card {
+  padding: $spacing-l;
+  display: initial;
+  line-height: initial;
+
+  .title-number {
+    color: $black;
+    padding-top: $spacing-s;
+    font-size: 36px;
+    font-weight: 500;
+    line-height: 1.33;
+  }
+}

ui/app/styles/components/selectable-card-container.scss

@@ -35,14 +35,6 @@
   }
 }
 
-.selectable-card-container.has-grid.has-two-col-grid {
-  grid-template-columns: 2fr 2fr;
-  grid-template-rows: none;
-
-  @include until($mobile) {
-    grid-template-columns: 1fr;
-  }
-}
 .selectable-card-container.has-grid.has-three-col-grid {
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: none;

ui/app/styles/core.scss

@@ -86,6 +86,7 @@
 @import './components/namespace-picker';
 @import './components/namespace-reminder';
 @import './components/navigate-input';
+@import './components/overview-card';
 @import './components/page-header-old';
 @import './components/popup-menu';
 @import './components/radio-card';

ui/app/styles/helper-classes/flexbox-and-grid.scss

@@ -102,6 +102,18 @@
   display: grid;
 }
 
+.grid-2-columns {
+  grid-template-columns: 2fr 2fr;
+
+  @include until($mobile) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.grid-gap-2 {
+  grid-gap: 2rem;
+}
+
 .is-grid-3-columns {
   grid-template-columns: repeat(3, 1fr);
 }

ui/app/styles/helper-classes/general.scss

@@ -98,3 +98,8 @@
   white-space: nowrap;
   width: 1px;
 }
+
+// border-radius
+.border-radius-2 {
+  border-radius: $radius;
+}

ui/lib/core/addon/components/overview-card.hbs

@@ -1,5 +1,10 @@
-<div class="selectable-card is-rounded no-flex" data-test-selectable-card-container={{@cardTitle}}>
-  <div class="is-flex-between is-fullwidth card-details" data-test-selectable-card={{@cardTitle}}>
+<Hds::Card::Container
+  @level="mid"
+  @hasBorder={{true}}
+  class="overview-card border-radius-2"
+  data-test-overview-card-container={{@cardTitle}}
+>
+  <div class="is-flex-between" data-test-overview-card={{@cardTitle}}>
     <h3 class="title is-5">{{@cardTitle}}</h3>
     {{#if @actionText}}
       <LinkTo
@@ -15,4 +20,4 @@
   </div>
   <p class="has-text-grey is-size-8 {{unless @actionText 'has-top-margin-s'}}">{{@subText}}</p>
   {{yield}}
-</div>
+</Hds::Card::Container>

ui/lib/kubernetes/addon/components/page/overview.hbs

@@ -5,7 +5,7 @@
 {{#if @promptConfig}}
   <ConfigCta />
 {{else}}
-  <div class="selectable-card-container has-grid has-top-margin-l has-two-col-grid">
+  <div class="is-grid has-top-margin-l grid-2-columns grid-gap-2">
     <OverviewCard
       @cardTitle="Roles"
       @subText="The number of Vault roles being used to generate Kubernetes credentials."

ui/lib/pki/addon/components/page/pki-overview.hbs

@@ -1,4 +1,4 @@
-<div class="selectable-card-container has-grid has-top-margin-l has-two-col-grid">
+<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l">
   <OverviewCard
     @cardTitle="Issuers"
     @subText="The total number of issuers in this PKI mount. Includes both root and intermediate certificates."
@@ -43,7 +43,7 @@
   </OverviewCard>
 
   <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
-    <div class="has-top-margin-m is-flex">
+    <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
       <SearchSelect
         class="is-flex-1"
         @selectLimit="1"
@@ -57,7 +57,7 @@
       />
       <button
         type="button"
-        class="button is-secondary has-left-margin-s"
+        class="button is-secondary {{unless this.certificateValue 'has-left-margin-s'}}"
         disabled={{unless this.certificateValue true}}
         {{on "click" this.transitionToViewCertificates}}
         data-test-view-certificate-button

ui/tests/helpers/kubernetes/overview.js

@@ -4,12 +4,12 @@
  */
 
 export const SELECTORS = {
-  rolesCardTitle: '[data-test-selectable-card="Roles"] .title',
-  rolesCardSubTitle: '[data-test-selectable-card-container="Roles"] p',
-  rolesCardLink: '[data-test-selectable-card="Roles"] a',
+  rolesCardTitle: '[data-test-overview-card="Roles"] .title',
+  rolesCardSubTitle: '[data-test-overview-card-container="Roles"] p',
+  rolesCardLink: '[data-test-overview-card="Roles"] a',
   rolesCardNumRoles: '[data-test-roles-card-overview-num]',
-  generateCredentialsCardTitle: '[data-test-selectable-card="Generate credentials"] .title',
-  generateCredentialsCardSubTitle: '[data-test-selectable-card-container="Generate credentials"] p',
+  generateCredentialsCardTitle: '[data-test-overview-card="Generate credentials"] .title',
+  generateCredentialsCardSubTitle: '[data-test-overview-card-container="Generate credentials"] p',
   generateCredentialsCardButton: '[data-test-generate-credential-button]',
   emptyStateTitle: '.empty-state .empty-state-title',
   emptyStateMessage: '.empty-state .empty-state-message',

ui/tests/helpers/pki/overview.js

@@ -4,19 +4,19 @@
  */
 
 export const SELECTORS = {
-  issuersCardTitle: '[data-test-selectable-card-container="Issuers"] h3',
-  issuersCardSubtitle: '[data-test-selectable-card-container="Issuers"] p',
-  issuersCardLink: '[data-test-selectable-card-container="Issuers"] a',
-  issuersCardOverviewNum: '[data-test-selectable-card-container="Issuers"] .title-number',
-  rolesCardTitle: '[data-test-selectable-card-container="Roles"] h3',
-  rolesCardSubtitle: '[data-test-selectable-card-container="Roles"] p',
-  rolesCardLink: '[data-test-selectable-card-container="Roles"] a',
-  rolesCardOverviewNum: '[data-test-selectable-card-container="Roles"] .title-number',
-  issueCertificate: '[data-test-selectable-card-container="Issue certificate"] h3',
+  issuersCardTitle: '[data-test-overview-card-container="Issuers"] h3',
+  issuersCardSubtitle: '[data-test-overview-card-container="Issuers"] p',
+  issuersCardLink: '[data-test-overview-card-container="Issuers"] a',
+  issuersCardOverviewNum: '[data-test-overview-card-container="Issuers"] .title-number',
+  rolesCardTitle: '[data-test-overview-card-container="Roles"] h3',
+  rolesCardSubtitle: '[data-test-overview-card-container="Roles"] p',
+  rolesCardLink: '[data-test-overview-card-container="Roles"] a',
+  rolesCardOverviewNum: '[data-test-overview-card-container="Roles"] .title-number',
+  issueCertificate: '[data-test-overview-card-container="Issue certificate"] h3',
   issueCertificateInput: '[data-test-issue-certificate-input]',
   issueCertificatePowerSearch: '[data-test-issue-certificate-input] span',
   issueCertificateButton: '[data-test-issue-certificate-button]',
-  viewCertificate: '[data-test-selectable-card-container="View certificate"] h3',
+  viewCertificate: '[data-test-overview-card-container="View certificate"] h3',
   viewCertificateInput: '[data-test-view-certificate-input]',
   viewCertificatePowerSearch: '[data-test-view-certificate-input] span',
   viewCertificateButton: '[data-test-view-certificate-button]',