Add a prop & story for the timeout delay for the animation/state of the button

Author: warrenbuckley

packages/uui-copy/lib/uui-copy.element.ts

@@ -74,6 +74,15 @@ export class UUICopyElement extends LabelMixin('', LitElement) {
   @property({ type: Boolean })
   compact = false;
 
+  /**
+   * The delay in milliseconds before the button returns to its default state after a successful copy
+   * @type {number}
+   * @attr
+   * @default 250
+   */
+  @property({ type: Number, attribute: 'animation-state-delay' })
+  animationStateDelay = 250;
+
   constructor() {
     super();
     demandCustomElement(this, 'uui-button');
@@ -130,7 +139,7 @@ export class UUICopyElement extends LabelMixin('', LitElement) {
         );
         setTimeout(() => {
           button.state = 'success';
-        }, 2000);
+        }, this.animationStateDelay);
       })
       .catch(err => {
         button.state = 'failed';

packages/uui-copy/lib/uui-copy.story.ts

@@ -204,3 +204,18 @@ export const CopyFromInput: Story = {
     },
   },
 };
+
+export const AnimationDelay: Story = {
+  name: 'Animation Delay',
+  args: {
+    value: 'A long 3 second delay',
+    animationStateDelay: 3000,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `<uui-copy value="A long 3 second delay" animation-state-delay="3000"></uui-copy>`,
+      },
+    },
+  },
+};