diff --git a/src/CodeSnippet/CodeSnippet.stories.js b/src/CodeSnippet/CodeSnippet.stories.js index b53aab78..cd73f099 100644 --- a/src/CodeSnippet/CodeSnippet.stories.js +++ b/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), }, }); diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte index 6cdc8f11..259eeb60 100644 --- a/src/CodeSnippet/CodeSnippet.svelte +++ b/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,32 +114,49 @@ on:mouseleave /> {:else} {#if type === 'inline'} - - - {code} - - + {#if hideCopyButton} + + + {code} + + + {:else} + + + {code} + + + {/if} {:else}
@@ -148,12 +171,14 @@
- + {#if !hideCopyButton} + + {/if} {#if showMoreLess}