Merge pull request #274 from hashicorp/melsumner/dropdown-bugfix

dropdown component bugfixes

Author: MelSumner

packages/components/addon/components/hds/dropdown/list-item/copy-item.js

@@ -4,7 +4,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class HdsDropdownListItemCopyItemComponent extends Component {
-  @tracked isSuccess = this.args.isSuccess ?? false;
+  @tracked isSuccess = false;
 
   /**
    * @param text
@@ -37,12 +37,19 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
   }
 
   @action
-  copyCode() {
-    navigator.clipboard.writeText(this.args.text);
-    // this if statement resolves to [object Promise] so maybe some improvements
-    // could be made here
-    if (navigator.clipboard.readText()) {
+  async copyCode() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+    await navigator.clipboard.writeText(this.args.text);
+    const result = await navigator.clipboard.readText();
+
+    if (result === this.args.text) {
       this.isSuccess = true;
+      // console.log(`result is ${result}`);
+
+      // make it fade back to the default state
+      setTimeout(() => {
+        this.isSuccess = false;
+      }, 1000);
     }
   }
 }

packages/components/tests/dummy/app/templates/components/dropdown.hbs

@@ -153,9 +153,16 @@
     </dd>
   </dl>
 
-  <h4 class="dummy-h4">ListItem::CopyItem</h4>
-  {{! TODO: add props here if we decide to use the current version }}
-  <p class="dummy-paragraph">[WIP]</p>
+  <h4 class="dummy-h4" id="api-listitem-copyitem">ListItem::CopyItem</h4>
+  <dl class="dummy-component-props" aria-labelledby="api-listitem-copyitem">
+    <dt>copyItemTitle <code>string</code></dt>
+    <dd>Optional. Provides a contextual title for the text to be copied.</dd>
+    <dt>text <code>string</code></dt>
+    <dd>
+      <p>The text to be copied.</p>
+      <p><em>If no text value is defined an error will be thrown.</em></p>
+    </dd>
+  </dl>
 
   <h4 class="dummy-h4">ListItem::Description</h4>
   <p class="dummy-paragraph" id="component-api-listitem-description">Here is the API for the "description" list item
@@ -483,10 +490,7 @@
           &lt;Hds::Link::Standalone @text="Watch tutorial video" @icon="film" href="/" /&gt;
         &lt;/dd.Generic&gt;
         &lt;dd.CopyItem @text="https://api.cloud.hashicorp.com" @copyItemTitle="Endpoint URL" /&gt;
-        &lt;dd.CopyLabel  /&gt;
-        &lt;dd.CopyItem @text="91ee1e8ef65b337f0e70d793f456c71d" @text="HMAC Key" /&gt;
-        &lt;dd.Separator /&gt;
-        &lt;dd.Interactive @route="components.dropdown" @text="Docs: Import usage" @icon="docs-link" /&gt;
+        &lt;dd.CopyItem @text="91ee1e8ef65b337f0e70d793f456c71d" @copyItemTitle="HMAC Key" /&gt;
       &lt;/Hds::Dropdown&gt;
     '
   />