feat(code-snippet): allow copy button to be hidden

src/CodeSnippet/CodeSnippet.stories.js

@@ -13,6 +13,7 @@ export const Inline = () => ({
       "ARIA label for the snippet/copy button (copyLabel)",
       "copyable code snippet"
     ),
+    hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
   },
 });
 
@@ -30,6 +31,7 @@ export const SingleLine = () => ({
       "ARIA label of the container (ariaLabel)",
       "Container label"
     ),
+    hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
   },
 });
 
@@ -46,6 +48,7 @@ export const MultiLine = () => ({
       'Text for "show less" button (showLessText)',
       "Show less"
     ),
+    hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
   },
 });
 

src/CodeSnippet/CodeSnippet.svelte

@@ -18,6 +18,12 @@
    */
   export let expanded = false;
 
+  /**
+   * Set to `true` to hide the copy button
+   * @type {boolean} [hideCopyButton=false]
+   */
+  export let hideCopyButton = false;
+
   /**
    * Set to `true` to enable the light variant
    * @type {boolean} [light=false]
@@ -108,6 +114,19 @@
     on:mouseleave />
 {:else}
   {#if type === 'inline'}
+    {#if hideCopyButton}
+      <span
+        class="bx--snippet {type && `bx--snippet--${type}`}
+        {type === 'inline' && 'bx--btn--copy'}
+        {expanded && 'bx--snippet--expand'}
+        {light && 'bx--snippet--light'}
+        {hideCopyButton && 'bx--snippet--no-copy'}"
+        {...$$restProps}>
+        <code {id}>
+          <slot>{code}</slot>
+        </code>
+      </span>
+    {:else}
       <Copy
         aria-label={copyLabel}
         aria-describedby={id}
@@ -116,7 +135,8 @@
         class="bx--snippet {type && `bx--snippet--${type}`}
         {type === 'inline' && 'bx--btn--copy'}
         {expanded && 'bx--snippet--expand'}
-      {light && 'bx--snippet--light'}"
+        {light && 'bx--snippet--light'}
+        {hideCopyButton && 'bx--snippet--no-copy'}"
         {...$$restProps}
         on:click
         on:mouseover
@@ -126,14 +146,17 @@
           <slot>{code}</slot>
         </code>
       </Copy>
+    {/if}
   {:else}
     <div
       class:bx--snippet={true}
-      class={type && `bx--snippet--${type}`}
       class:bx--btn--copy={type === 'inline'}
       class:bx--snippet--expand={expanded}
       class:bx--snippet--light={light}
+      class:bx--snippet--no-copy={hideCopyButton}
       {...$$restProps}
+      class="{type && `bx--snippet--${type}`}
+      {$$restProps.class}"
       on:mouseover
       on:mouseenter
       on:mouseleave>
@@ -148,12 +171,14 @@
           </pre>
         </code>
       </div>
+      {#if !hideCopyButton}
         <CopyButton
           {feedback}
           {feedbackTimeout}
           iconDescription={copyButtonDescription}
           on:click
           on:animationend />
+      {/if}
       {#if showMoreLess}
         <Button
           kind="ghost"