From 40a7be5c79faa6042991924a996e58f09556bb86 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 18 Dec 2019 09:10:49 -0800
Subject: [PATCH] refactor(code-snippet): pass snippet button class for
 multi-line

- Remove exported props from CopyButton, skeleton
- Replace onMount with reactive statement
- Forward events to skeleton
- Clean up Story
---
 .../CodeSnippet/CodeSnippet.Skeleton.svelte   |  6 ++---
 .../CodeSnippet/CodeSnippet.Story.svelte      | 20 +++++++---------
 src/components/CodeSnippet/CodeSnippet.svelte | 23 ++++++++++---------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
index 1a53d111..098b6d0d 100644
--- a/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.Skeleton.svelte
@@ -2,7 +2,7 @@
   let className = undefined;
   export { className as class };
   export let type = 'single';
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -16,13 +16,13 @@
 </script>
 
 {#if type === 'single'}
-  <div {...props} class={_class}>
+  <div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
     <div class={cx('--snippet-container')}>
       <span />
     </div>
   </div>
 {:else if type === 'multi'}
-  <div {...props} class={_class}>
+  <div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
     <div class={cx('--snippet-container')}>
       <span />
       <span />
diff --git a/src/components/CodeSnippet/CodeSnippet.Story.svelte b/src/components/CodeSnippet/CodeSnippet.Story.svelte
index 2d5d2b04..229f6225 100644
--- a/src/components/CodeSnippet/CodeSnippet.Story.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.Story.svelte
@@ -5,31 +5,27 @@
   import Layout from '../../internal/ui/Layout.svelte';
   import CodeSnippet from './CodeSnippet.svelte';
   import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
-
-  const inlineProps = { light, feedback, copyLabel };
-  const singleLineProps = {
-    feedback,
-    copyButtonDescription,
-    'aria-label': $$props['aria-label']
-  };
-  const multiLineProps = { feedback, showLessText, showMoreText };
 </script>
 
 <Layout>
   <div>
     {#if story === 'skeleton'}
       <div style="width: 800px">
-        <CodeSnippetSkeleton type="single" props={{ style: 'margin-bottom: 8px' }} />
+        <CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
         <CodeSnippetSkeleton type="multi" />
       </div>
     {:else if story === 'inline'}
-      <CodeSnippet type="inline" {...inlineProps}>{'node -v'}</CodeSnippet>
+      <CodeSnippet type="inline" {light} {feedback} {copyLabel}>{'node -v'}</CodeSnippet>
     {:else if story === 'single line'}
-      <CodeSnippet type="single" {...singleLineProps}>
+      <CodeSnippet
+        type="single"
+        {feedback}
+        {copyButtonDescription}
+        aria-label={$$props['aria-label']}>
         {'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
       </CodeSnippet>
     {:else if story === 'multi line'}
-      <CodeSnippet type="multi" {...multiLineProps}>
+      <CodeSnippet type="multi" {feedback} {showLessText} {showMoreText}>
         {`@mixin grid-container {
   width: 100%;
   padding-right: padding(mobile);
diff --git a/src/components/CodeSnippet/CodeSnippet.svelte b/src/components/CodeSnippet/CodeSnippet.svelte
index e57271c7..5a59e6b2 100644
--- a/src/components/CodeSnippet/CodeSnippet.svelte
+++ b/src/components/CodeSnippet/CodeSnippet.svelte
@@ -10,7 +10,6 @@
   export let light = false;
   export let props = {};
 
-  import { onMount } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import { cx } from '../../lib';
   import Button from '../Button';
@@ -20,18 +19,16 @@
   const id = Math.random();
   let codeRef = undefined;
   let expandedCode = false;
-  let shouldShowMoreLessBtn = false;
-
-  onMount(() => {
-    if (codeRef) {
-      const { height } = codeRef.getBoundingClientRect();
-      shouldShowMoreLessBtn = type === 'multi' && height > 255;
-    }
-  });
+  let showMoreLessBtn = false;
 
+  $: if (codeRef) {
+    const { height } = codeRef.getBoundingClientRect();
+    showMoreLessBtn = type === 'multi' && height > 255;
+  }
   $: _class = cx(
     '--snippet',
     type && `--snippet--${type}`,
+    type === 'inline' && '--btn--copy',
     expandedCode && '--snippet--expand',
     light && '--snippet--light',
     className
@@ -64,8 +61,12 @@
         </pre>
       </code>
     </div>
-    <CopyButton on:click {feedback} iconDescription={copyButtonDescription} />
-    {#if shouldShowMoreLessBtn}
+    <CopyButton
+      on:click
+      class={cx('--snippet-button')}
+      {feedback}
+      iconDescription={copyButtonDescription} />
+    {#if showMoreLessBtn}
       <Button
         kind="ghost"
         size="small"