UI: HDS adoption replace <CopyButton> part 3 (#22614)

* encrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* decrypt.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* datakey.hbs. replace 6 <CopyButton> with <Hds::Copy::Button>

* rewrap.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* hmac.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* fix typo

* add copy-close class to copy & close buttons

* export.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>. fix styling

* sign.hbs: replace 2 <CopyButton> with <Hds::Copy::Button>

* fix test caused by changing <pre> tag to <code> in export.hbs

* rename class

* add extra style to class needed for part 4 of copy button replacement

ui/app/styles/core/buttons.scss

@@ -342,7 +342,24 @@ a.button.disabled {
     min-width: $spacing-l;
     padding: 0;
   }
+
   &.white-icon svg {
     color: $white;
   }
+
+  &.is-primary {
+    background-color: $blue;
+    box-shadow: $box-shadow-low;
+    border-radius: $radius;
+    border-color: darken($blue, 2%);
+    color: $white;
+    font-weight: $font-weight-bold;
+    text-shadow: 0 1px 1px rgba($black, 0.25);
+    height: 2.5rem;
+    min-width: 6rem;
+
+    svg {
+      color: $white;
+    }
+  }
 }

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

@@ -20,6 +20,10 @@
   flex-direction: row;
 }
 
+.has-gap-xxs {
+  gap: $spacing-xxs;
+}
+
 .has-gap-m {
   gap: $spacing-m;
 }

ui/app/templates/components/transit-key-action/datakey.hbs

@@ -79,74 +79,65 @@
     <div class="box is-shadowless is-fullwidth is-sideless">
       {{#if (eq @param "plaintext")}}
         <h2 class="title is-6">Plaintext</h2>
+        {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
         <div class="copy-text level">
           <code class="level-left">{{@plaintext}}</code>
-          <CopyButton
-            class="button is-compact is-transparent level-right"
+          <Hds::Copy::Button
+            @text="Copy"
+            @isIconOnly={{true}}
+            @textToCopy={{@plaintext}}
+            class="hds-copy-button icon-only"
             data-test-button="modal-copy"
-            @clipboardText={{@plaintext}}
-            @buttonType="button"
-            @success={{action (set-flash-message "Plaintext copied!")}}
-          >
-            <Icon @name="clipboard-copy" aria-label="Copy" />
-          </CopyButton>
+          />
         </div>
         <p class="help has-bottom-margin-m">Plaintext is base64 encoded</p>
         <h2 class="title is-6">Ciphertext</h2>
+        {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
         <div class="copy-text level">
           <code class="level-left">{{@ciphertext}}</code>
-          <CopyButton
-            class="button is-compact is-transparent level-right"
+          <Hds::Copy::Button
+            @text="Copy"
+            @isIconOnly={{true}}
+            @textToCopy={{@ciphertext}}
+            class="hds-copy-button icon-only"
             data-test-button="modal-copy"
-            @clipboardText={{@ciphertext}}
-            @buttonType="button"
-            @success={{action (set-flash-message "Ciphertext copied!")}}
-          >
-            <Icon @name="clipboard-copy" aria-label="Copy" />
-          </CopyButton>
+          />
+        </div>
+        <div class="is-flex-align-baseline has-gap-xxs">
+          <Hds::Copy::Button
+            @text="Copy Plaintext"
+            @textToCopy={{@plaintext}}
+            class="hds-copy-button is-primary white-icon"
+            data-test-button="modal-copy-close"
+          />
+          <Hds::Copy::Button
+            @text="Copy Ciphertext"
+            @textToCopy={{@ciphertext}}
+            class="hds-copy-button is-primary white-icon"
+            data-test-button="modal-copy-close"
+          />
+          <button type="submit" class="button is-secondary" onclick={{action (mut @isModalActive) false}}>Close</button>
         </div>
-        <CopyButton
-          class="button is-primary"
-          data-test-button="modal-copy-close"
-          @clipboardText={{@plaintext}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Plaintext copied!")}}
-        >
-          Copy Plaintext
-        </CopyButton>
-        <CopyButton
-          class="button is-primary"
-          data-test-button="modal-copy-close"
-          @clipboardText={{@ciphertext}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Ciphertext copied!")}}
-        >
-          Copy Ciphertext
-        </CopyButton>
-        <button type="submit" class="button is-secondary" onclick={{action (mut @isModalActive) false}}>Close</button>
       {{else}}
         <h2 class="title is-6">Ciphertext</h2>
+        {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
         <div class="copy-text level">
           <code class="level-left">{{@ciphertext}}</code>
-          <CopyButton
-            class="button is-compact is-transparent level-right"
+          <Hds::Copy::Button
+            @text="Copy"
+            @isIconOnly={{true}}
+            @textToCopy={{@ciphertext}}
+            class="hds-copy-button icon-only"
             data-test-button="modal-copy"
-            @clipboardText={{@ciphertext}}
-            @buttonType="button"
-            @success={{action (set-flash-message "Ciphertext copied!")}}
-          >
-            <Icon @name="clipboard-copy" aria-label="Copy" />
-          </CopyButton>
+          />
         </div>
-        <CopyButton
-          class="button is-primary copy-close"
+        <Hds::Copy::Button
+          @text="Copy & Close"
+          @textToCopy={{@ciphertext}}
+          class="hds-copy-button is-primary has-top-margin-m"
           data-test-button="modal-copy-close"
-          @clipboardText={{@ciphertext}}
-          @buttonType="button"
-          @success={{action @toggleModal "Ciphertext copied!"}}
-        >
-          Copy &amp; Close
-        </CopyButton>
+          {{on "click" (fn @toggleModal "Ciphertext copied!")}}
+        />
       {{/if}}
     </div>
   </section>

ui/app/templates/components/transit-key-action/decrypt.hbs

@@ -60,31 +60,28 @@
     <section class="modal-card-body">
       <div class="box is-shadowless is-fullwidth is-sideless">
         <h2 class="title is-6">Plaintext</h2>
+        {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
         <div class="copy-text level">
           <code class="level-left" data-test-encrypted-value="plaintext">{{@plaintext}}</code>
-          <CopyButton
-            class="button is-compact is-transparent level-right"
+          <Hds::Copy::Button
+            @text="Copy"
+            @isIconOnly={{true}}
+            @textToCopy={{@plaintext}}
+            class="hds-copy-button icon-only"
             data-test-button="modal-copy"
-            @clipboardText={{@plaintext}}
-            @buttonType="button"
-            @success={{action (set-flash-message "Plaintext copied!")}}
-          >
-            <Icon @name="clipboard-copy" aria-label="Copy" />
-          </CopyButton>
+          />
         </div>
         <p class="help">Plaintext is base64 encoded</p>
       </div>
     </section>
     <footer class="modal-card-foot">
-      <CopyButton
-        class="button is-primary copy-close"
+      <Hds::Copy::Button
+        @text="Copy & Close"
+        @textToCopy={{@plaintext}}
+        class="hds-copy-button is-primary"
         data-test-button="modal-copy-close"
-        @clipboardText={{@plaintext}}
-        @buttonType="button"
-        @success={{action @toggleModal "Plaintext copied!"}}
-      >
-        Copy &amp; Close
-      </CopyButton>
+        {{on "click" (fn @toggleModal "Plaintext copied!")}}
+      />
     </footer>
   </Modal>
 {{/if}}

ui/app/templates/components/transit-key-action/encrypt.hbs

@@ -78,29 +78,26 @@
   <section class="modal-card-body">
     <div class="box is-shadowless is-fullwidth is-sideless">
       <h2 class="title is-6">Ciphertext</h2>
+      {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
       <div class="copy-text level">
         <code class="level-left" data-test-encrypted-value="ciphertext">{{@ciphertext}}</code>
-        <CopyButton
-          class="button is-compact is-transparent level-right"
+        <Hds::Copy::Button
+          @text="Copy"
+          @isIconOnly={{true}}
+          @textToCopy={{@ciphertext}}
+          class="hds-copy-button icon-only"
           data-test-button="modal-copy"
-          @clipboardText={{@ciphertext}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Ciphertext copied!")}}
-        >
-          <Icon @name="clipboard-copy" aria-label="Copy" />
-        </CopyButton>
+        />
       </div>
     </div>
   </section>
   <footer class="modal-card-foot">
-    <CopyButton
-      class="button is-primary copy-close"
+    <Hds::Copy::Button
+      @text="Copy & Close"
+      @textToCopy={{@ciphertext}}
+      class="hds-copy-button is-primary"
       data-test-button="modal-copy-close"
-      @clipboardText={{@ciphertext}}
-      @buttonType="button"
-      @success={{action @toggleModal "Ciphertext copied!"}}
-    >
-      Copy &amp; Close
-    </CopyButton>
+      {{on "click" (fn @toggleModal "Ciphertext copied!")}}
+    />
   </footer>
 </Modal>

ui/app/templates/components/transit-key-action/export.hbs

@@ -69,29 +69,28 @@
   <section class="modal-card-body">
     <div class="box is-shadowless is-fullwidth is-sideless">
       <h2 class="title is-6">Wrapped Key</h2>
+      {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
       <div class="copy-text level">
-        <pre data-test-encrypted-value="export" class="level-left">{{if this.wrapTTL @wrappedToken (stringify @keys)}}</pre>
-        <CopyButton
-          class="button is-compact is-transparent level-right"
+        <code data-test-encrypted-value="export" class="level-left">
+          {{if this.wrapTTL @wrappedToken (stringify @keys)}}
+        </code>
+        <Hds::Copy::Button
+          @text="Copy"
+          @isIconOnly={{true}}
+          @textToCopy={{if this.wrapTTL @wrappedToken (stringify @keys)}}
+          class="hds-copy-button icon-only"
           data-test-button="modal-copy"
-          @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Token copied!")}}
-        >
-          <Icon @name="clipboard-copy" aria-label="Copy" />
-        </CopyButton>
+        />
       </div>
     </div>
   </section>
   <footer class="modal-card-foot">
-    <CopyButton
-      class="button is-primary copy-close"
+    <Hds::Copy::Button
+      @text="Copy & Close"
+      @textToCopy={{if this.wrapTTL @wrappedToken (stringify @keys)}}
+      class="hds-copy-button is-primary"
       data-test-button="modal-copy-close"
-      @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}}
-      @buttonType="button"
-      @success={{action @toggleModal "Token copied!"}}
-    >
-      Copy &amp; Close
-    </CopyButton>
+      {{on "click" (fn @toggleModal "Token copied!")}}
+    />
   </footer>
 </Modal>

ui/app/templates/components/transit-key-action/hmac.hbs

@@ -55,29 +55,26 @@
   <section class="modal-card-body">
     <div class="box is-shadowless is-fullwidth is-sideless">
       <h2 class="title is-6">HMAC</h2>
+      {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
       <div class="copy-text level">
         <code class="level-left" data-test-encrypted-value="hmac">{{@hmac}}</code>
-        <CopyButton
-          class="button is-compact is-transparent level-right"
+        <Hds::Copy::Button
+          @text="Copy"
+          @isIconOnly={{true}}
+          @textToCopy={{@hmac}}
+          class="hds-copy-button icon-only"
           data-test-button="modal-copy"
-          @clipboardText={{@hmac}}
-          @buttonType="button"
-          @success={{action (set-flash-message "HMAC copied!")}}
-        >
-          <Icon @name="clipboard-copy" aria-label="Copy" />
-        </CopyButton>
+        />
       </div>
     </div>
   </section>
   <footer class="modal-card-foot">
-    <CopyButton
-      class="button is-primary copy-close"
+    <Hds::Copy::Button
+      @text="Copy & Close"
+      @textToCopy={{@hmac}}
+      class="hds-copy-button is-primary"
       data-test-button="modal-copy-close"
-      @clipboardText={{@hmac}}
-      @buttonType="button"
-      @success={{action @toggleModal "HMAC copied!"}}
-    >
-      Copy &amp; Close
-    </CopyButton>
+      {{on "click" (fn @toggleModal "HMAC copied!")}}
+    />
   </footer>
 </Modal>

ui/app/templates/components/transit-key-action/rewrap.hbs

@@ -67,29 +67,26 @@
   <section class="modal-card-body">
     <div class="box is-shadowless is-fullwidth is-sideless">
       <h2 class="title is-6">Ciphertext</h2>
+      {{! HDS Adoption: Replace with Hds::Copy::Snippet }}
       <div class="copy-text level">
         <code class="level-left" data-test-encrypted-value="ciphertext">{{@ciphertext}}</code>
-        <CopyButton
-          class="button is-compact is-transparent level-right"
+        <Hds::Copy::Button
+          @text="Copy"
+          @isIconOnly={{true}}
+          @textToCopy={{@ciphertext}}
+          class="hds-copy-button icon-only"
           data-test-button="modal-copy"
-          @clipboardText={{@ciphertext}}
-          @buttonType="button"
-          @success={{action (set-flash-message "Ciphertext copied!")}}
-        >
-          <Icon @name="clipboard-copy" aria-label="Copy" />
-        </CopyButton>
+        />
       </div>
     </div>
   </section>
   <footer class="modal-card-foot">
-    <CopyButton
-      class="button is-primary copy-close"
+    <Hds::Copy::Button
+      @text="Copy & Close"
+      @textToCopy={{@ciphertext}}
+      class="hds-copy-button is-primary"
       data-test-button="modal-copy-close"
-      @clipboardText={{@ciphertext}}
-      @buttonType="button"
-      @success={{action @toggleModal "Ciphertext copied!"}}
-    >
-      Copy &amp; Close
-    </CopyButton>
+      {{on "click" (fn @toggleModal "Ciphertext copied!")}}
+    />
   </footer>
 </Modal>