Merge pull request #37 from metonym/fix-copy-button

fix(copy-button): use ^10.9.0 styles for CopyButton

package.json

@@ -34,7 +34,7 @@
     "@testing-library/svelte": "^1.11.0",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
-    "carbon-components": "10.8.0",
+    "carbon-components": "10.9.0-rc.1",
     "eslint": "^6.7.2",
     "eslint-plugin-svelte3": "^2.7.3",
     "husky": "^3.1.0",

src/components/CopyButton/CopyButton.Story.svelte

@@ -4,7 +4,5 @@
 </script>
 
 <Layout>
-  <div style="position: relative;">
-    <CopyButton {...$$props} />
-  </div>
+  <CopyButton {...$$props} />
 </Layout>

src/components/CopyButton/CopyButton.stories.js

@@ -7,7 +7,7 @@ export const Default = () => ({
   Component,
   props: {
     feedback: text('The text shown upon clicking (feedback)', 'Copied!'),
-    feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 3000),
+    feedbackTimeout: number('How long the text is shown upon clicking (feedbackTimeout)', 2000),
     iconDescription: text('Feedback icon description (iconDescription)', 'Copy to clipboard')
   }
 });

src/components/CopyButton/CopyButton.svelte

@@ -4,59 +4,52 @@
   export let iconDescription = 'Copy to clipboard';
   export let feedback = 'Copied!';
   export let feedbackTimeout = 2000;
-  export let props = {};
 
-  import { createEventDispatcher, onDestroy } from 'svelte';
+  import { onDestroy } from 'svelte';
   import Copy16 from 'carbon-icons-svelte/lib/Copy16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
   let animation = undefined;
   let timeoutId = undefined;
 
   onDestroy(() => {
     if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
+      window.clearTimeout(timeoutId);
       timeoutId = undefined;
     }
   });
 
-  function handleClick(event) {
-    animation = 'fade-in';
-
-    timeoutId = setTimeout(() => {
-      animation = 'fade-out';
-    }, feedbackTimeout);
-  }
-
-  function handleAnimationEnd(event) {
-    if (event.animationName === 'hide-feedback') {
-      animation = undefined;
-    }
-  }
-
   $: _class = cx(
-    '--snippet-button', // TODO: deprecated?
     '--copy-btn',
     animation && '--copy-btn--animating',
     animation && `--copy-btn--${animation}`,
+    animation === 'fade-in' && '--btn--copy__feedback--displayed',
     className
   );
 </script>
 
 <button
-  {...props}
   type="button"
+  tabindex="0"
   aria-label={iconDescription}
   title={iconDescription}
   class={_class}
   on:click
-  on:click={handleClick}
+  on:click={() => {
+    animation = 'fade-in';
+    timeoutId = window.setTimeout(() => {
+      animation = 'fade-out';
+    }, feedbackTimeout);
+  }}
   on:mouseover
   on:mouseenter
   on:mouseleave
   on:animationend
-  on:animationend={handleAnimationEnd}>
+  on:animationend={({ animationName }) => {
+    if (animationName === 'hide-feedback') {
+      animation = undefined;
+    }
+  }}>
   <span class={cx('--assistive-text', '--copy-btn__feedback')}>{feedback}</span>
   <Copy16 class={cx('--snippet__icon')} />
 </button>

yarn.lock

@@ -3268,10 +3268,10 @@ capture-exit@^2.0.0:
   dependencies:
     rsvp "^4.8.4"
 
-carbon-components@10.8.0:
-  version "10.8.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.8.0.tgz#d5332b8360d93c5d12bdcfd34d8a9adc7940f194"
-  integrity sha512-G5/Nf7PdwPLcLazKkqemLBu7OA0e14M1AEObxbWu9/hgkI9D/3eNep8ZOG/X1Jb8Hc5HJUkGU5Mt6JHgWu1UoQ==
+carbon-components@10.9.0-rc.1:
+  version "10.9.0-rc.1"
+  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.9.0-rc.1.tgz#d801a12ae1053c078d4f3e33169a71c914ae8408"
+  integrity sha512-JCJqKaEfttHW0Wr12JRdhRMtAg8f8Pn/ryxVQp/FAY1Z4iNNEFFS6ShVavOJMrEE28ojT7QPEhl8ruZ3THHoJg==
   dependencies:
     carbon-icons "^7.0.7"
     flatpickr "4.6.1"