mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Eric Liu 2020-08-08 16:27:26 -07:00
commit 029af58a1c
2 changed files with 53 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/CodeSnippet/CodeSnippet.stories.js
View file

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

75
src/CodeSnippet/CodeSnippet.svelte
View file

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