Us267056 pfe clipboard copied duration

elements/pfe-clipboard/README.md

@@ -37,6 +37,11 @@ A button to copy the current URL to the system clipboard.
 </pfe-clipboard>
 ```
 
+## Specify the amount of seconds the copy success text should be visible
+```html
+<pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
+```
+
 ### Accessibility
 
 `<pfe-clipboard>` implements many features of a standard button to provide an accessible
@@ -56,6 +61,7 @@ mouse clicks as well as enter and space key presses per the recommendation of
 ## Attributes
 
 - `no-icon`: Optional boolean attribute that, when present, removes the icon from the template.
+- `copied-duration`: Specify the amount of time in seconds the copy success text should be visible.
 
 ## Variable hooks
 

elements/pfe-clipboard/demo/index.html

@@ -73,6 +73,9 @@ <h2>Clipboard: w/ custom text</h2>
       You can totally click to copy url
       <span slot="text--success">Making some copies!</span>
     </pfe-clipboard>
+
+    <h2>Clipboard: w/ custom success text duration.</h2>
+    <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
   </pfe-band>
 
   <pfe-band color="darkest">
@@ -94,6 +97,9 @@ <h2>Clipboard: w/ custom text</h2>
       You can totally click to copy url
       <span slot="text--success">Making some copies!</span>
     </pfe-clipboard>
+
+    <h2>Clipboard: w/ custom success text duration.</h2>
+    <pfe-clipboard role="button" tabindex="0" copied-duration="5"></pfe-clipboard>
   </pfe-band>
 
 </body>

elements/pfe-clipboard/src/pfe-clipboard.js

@@ -38,6 +38,11 @@ class PfeClipboard extends PFElement {
         type: Boolean,
         observer: "_noIconChanged"
       },
+      copiedDuration: {
+        title: "Copied Duration",
+        type: Number,
+        default: 3
+      },
       role: {
         type: String,
         default: "button"
@@ -168,17 +173,31 @@ class PfeClipboard extends PFElement {
             url
           }
         });
-        // Toggle the copied state for 3 seconds
+        // Toggle the copied state. Use the this._formattedCopiedTimeout function
+        // to an appropraite setTimout length.
         this.setAttribute("copied", "");
         setTimeout(() => {
           this.removeAttribute("copied");
-        }, 3000);
+        }, this._formattedCopiedTimeout());
       })
       .catch(error => {
         this.warn(error);
       });
   }
 
+  // Formatted copied timeout value. Use the formattedCopiedTimeout function
+  // to get a type safe, millisecond value of the timeout duration.
+  _formattedCopiedTimeout() {
+    const copiedDuration = Number(this.copiedDuration * 1000);
+    if (!Number.isInteger(copiedDuration)) {
+      this.warn(`copied-duration must be a valid number. Defaulting to 3 seconds.`);
+      // default to 3 seconds
+      return 3000;
+    } else {
+      return copiedDuration;
+    }
+  }
+
   // Listen for keyboard events and map them to their
   // corresponding mouse events.
   _keydownHandler(event) {

elements/pfe-clipboard/test/pfe-clipboard_test.html

@@ -24,6 +24,8 @@
 
   <pfe-clipboard id="a11y-test"></pfe-clipboard>
 
+  <pfe-clipboard id="copied-duration-test" copied-duration="1"></pfe-clipboard>
+
   <script src="./pfe-clipboard_test.js"></script>
 </body>
 

elements/pfe-clipboard/test/pfe-clipboard_test.js

@@ -32,13 +32,15 @@ suite("<pfe-clipboard>", () => {
     let clipboardStylesTest;
     let clipboardTransposeTest;
     let clipboardA11yTest;
+    let clipboardCopiedDurationTest;
 
     suiteSetup(() => {
         clipboard = fixture("pfe-clipboard-fixture");
         clipboardEventTest = document.querySelector("#event-test");
         clipboardStylesTest = document.querySelector("#styles-test");
         clipboardTransposeTest = document.querySelector("#transpose-test");
         clipboardA11yTest = document.querySelector("#a11y-test");
+        clipboardCopiedDurationTest = document.querySelector("#copied-duration-test");
     });
 
     test('it should upgrade', () => {
@@ -157,4 +159,17 @@ suite("<pfe-clipboard>", () => {
             }, 3001);
         })
     });
+
+    test(`it should have a customizable copied state duration.`, done => {
+        // Set the copied state duration to 1 second
+        clipboardCopiedDurationTest.click();
+        // Check to see if the success text
+        setTimeout(() => {
+            assert.equal(getComputedStyle(clipboardCopiedDurationTest.shadowRoot.querySelector(`.pfe-clipboard__text--success`), null)["display"], "block");
+        }, 0);
+        setTimeout(() => {
+            assert.equal(getComputedStyle(clipboardCopiedDurationTest.shadowRoot.querySelector(`.pfe-clipboard__text--success`), null)["display"], "none");
+            done();
+        }, 2000);
+    });
 });