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): add skeleton state

Browse source
This commit is contained in:
Eric Liu 2020-01-11 18:39:33 -08:00
commit fd7164a312
1 changed files with 66 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/components/CodeSnippet/CodeSnippet.svelte
View file

@ -10,6 +10,7 @@
export let light = false; export let light = false;
export let showLessText = 'Show less'; export let showLessText = 'Show less';
export let showMoreText = 'Show more'; export let showMoreText = 'Show more';
export let skeleton = false;
export let style = undefined; export let style = undefined;
export let type = 'single'; export let type = 'single';
@ -19,71 +20,80 @@
import Button from '../Button'; import Button from '../Button';
import Copy from '../Copy'; import Copy from '../Copy';
import CopyButton from '../CopyButton'; import CopyButton from '../CopyButton';
import CodeSnippetSkeleton from './CodeSnippet.Skeleton.svelte';
let codeRef = undefined; let codeRef = undefined;
let expanded = false; let expanded = false;
let showMoreLess = false; let showMoreLess = false;
afterUpdate(() => { afterUpdate(() => {
showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255; if (type === 'multi' && codeRef) {
showMoreLess = codeRef.getBoundingClientRect().height > 255;
}
}); });
$: expandText = expanded ? showLessText : showMoreText; $: expandText = expanded ? showLessText : showMoreText;
</script> </script>
{#if type === 'inline'} {#if skeleton}
<Copy <CodeSnippetSkeleton class={className} {type} {style} />
aria-label={$$props['aria-label'] || copyLabel} {/if}
aria-describedby={id}
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)} {#if !skeleton}
on:click {#if type === 'inline'}
on:mouseover <Copy
on:mouseenter aria-label={$$props['aria-label'] || copyLabel}
on:mouseleave aria-describedby={id}
{feedback} class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
{feedbackTimeout} on:click
{style}> on:mouseover
<code {id}> on:mouseenter
<slot>{code}</slot> on:mouseleave
</code> {feedback}
</Copy> {feedbackTimeout}
{:else} {style}>
<div <code {id}>
on:mouseover <slot>{code}</slot>
on:mouseenter </code>
on:mouseleave </Copy>
class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)} {:else}
{style}> <div
<div on:mouseover
role="textbox" on:mouseenter
tabindex="0" on:mouseleave
class={cx('--snippet-container')} class={cx('--snippet', type && `--snippet--${type}`, type === 'inline' && '--btn--copy', expanded && '--snippet--expand', light && '--snippet--light', className)}
aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}> {style}>
<code> <div
<pre bind:this={codeRef}> role="textbox"
<slot>{code}</slot> tabindex="0"
</pre> class={cx('--snippet-container')}
</code> aria-label={$$props['aria-label'] || copyLabel || 'code-snippet'}>
</div> <code>
<CopyButton <pre bind:this={codeRef}>
iconDescription={copyButtonDescription} <slot>{code}</slot>
class={cx('--snippet-button')} </pre>
on:click </code>
{feedback} </div>
{feedbackTimeout} /> <CopyButton
{#if showMoreLess} iconDescription={copyButtonDescription}
<Button class={cx('--snippet-button')}
kind="ghost" on:click
size="small" {feedback}
class={cx('--snippet-btn--expand')} {feedbackTimeout} />
on:click={() => { {#if showMoreLess}
expanded = !expanded; <Button
}}> kind="ghost"
<span class={cx('--snippet-btn--text')}>{expandText}</span> size="small"
<ChevronDown16 class={cx('--snippet-btn--expand')}
aria-label={expandText} on:click={() => {
class={cx('--icon-chevron--down', '--snippet__icon')} /> expanded = !expanded;
</Button> }}>
{/if} <span class={cx('--snippet-btn--text')}>{expandText}</span>
</div> <ChevronDown16
aria-label={expandText}
class={cx('--icon-chevron--down', '--snippet__icon')} />
</Button>
{/if}
</div>
{/if}
{/if} {/if}