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

feat: support skeleton prop

Browse source
This commit is contained in:
Eric Liu 2020-07-24 17:14:12 -07:00
commit bd6bd15c79
5 changed files with 136 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/Accordion/Accordion.svelte
View file

@ -6,7 +6,12 @@
</script> </script>
{#if skeleton} {#if skeleton}
<AccordionSkeleton {...$$restProps} /> <AccordionSkeleton
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else} {:else}
<ul <ul
class:bx--accordion={true} class:bx--accordion={true}

38
src/Breadcrumb/Breadcrumb.svelte
View file

@ -1,17 +1,29 @@
<script> <script>
export let noTrailingSlash = false; export let noTrailingSlash = false;
export let skeleton = false;
import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
</script> </script>
<nav {#if skeleton}
aria-label="Breadcrumb" <BreadcrumbSkeleton
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave />
<ol {:else}
class:bx--breadcrumb={true} <nav
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}> aria-label="Breadcrumb"
<slot /> {...$$restProps}
</ol> on:click
</nav> on:mouseover
on:mouseenter
on:mouseleave>
<ol
class:bx--breadcrumb={true}
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
<slot />
</ol>
</nav>
{/if}

96
src/Button/Button.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
export let as = undefined; export let as = undefined;
export let skeleton = false;
export let disabled = false; export let disabled = false;
export let href = undefined; export let href = undefined;
export let icon = undefined; export let icon = undefined;
@ -14,6 +15,7 @@
export let ref = null; export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import ButtonSkeleton from "./Button.Skeleton.svelte";
const ctx = getContext("ComposedModal"); const ctx = getContext("ComposedModal");
@ -40,54 +42,66 @@
hasIconOnly && hasIconOnly &&
tooltipAlignment && tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`, `bx--tooltip--align-${tooltipAlignment}`,
$$restProps.class $$restProps.class,
] ]
.filter(Boolean) .filter(Boolean)
.join(" ") .join(" "),
}; };
</script> </script>
{#if as} {#if skeleton}
<slot props={buttonProps} /> <ButtonSkeleton
{:else if href && !disabled} {href}
<!-- svelte-ignore a11y-missing-attribute --> small={size === 'small'}
<a {...$$restProps}
bind:this={ref} style={hasIconOnly && 'width: 3rem;'}
{...buttonProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave />
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</a>
{:else} {:else}
<button {#if as}
bind:this={ref} <slot props={buttonProps} />
{...buttonProps} {:else if href && !disabled}
on:click <!-- svelte-ignore a11y-missing-attribute -->
on:mouseover <a
on:mouseenter bind:this={ref}
on:mouseleave> {...buttonProps}
{#if hasIconOnly} on:click
<span class:bx--assistive-text={true}>{iconDescription}</span> on:mouseover
{/if} on:mouseenter
<slot /> on:mouseleave>
{#if icon} {#if hasIconOnly}
<svelte:component <span class:bx--assistive-text={true}>{iconDescription}</span>
this={icon} {/if}
aria-hidden="true" <slot />
class="bx--btn__icon" {#if icon}
aria-label={iconDescription} /> <svelte:component
{/if} this={icon}
</button> aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</a>
{:else}
<button
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</button>
{/if}
{/if} {/if}

71
src/Checkbox/Checkbox.svelte
View file

@ -1,4 +1,5 @@
<script> <script>
export let skeleton = false;
export let indeterminate = false; export let indeterminate = false;
export let readonly = false; export let readonly = false;
export let checked = false; export let checked = false;
@ -11,39 +12,49 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: dispatch("check", checked); $: dispatch("check", checked);
</script> </script>
<div {#if skeleton}
class:bx--form-item={true} <CheckboxSkeleton
class:bx--checkbox-wrapper={true} {...$$restProps}
{...$$restProps} on:click
on:click on:mouseover
on:mouseover on:mouseenter
on:mouseenter on:mouseleave />
on:mouseleave> {:else}
<input <div
bind:this={ref} class:bx--form-item={true}
type="checkbox" class:bx--checkbox-wrapper={true}
{checked} {...$$restProps}
{disabled} on:click
{id} on:mouseover
{indeterminate} on:mouseenter
{name} on:mouseleave>
{readonly} <input
class:bx--checkbox={true} bind:this={ref}
on:change type="checkbox"
on:change={() => { {checked}
checked = !checked; {disabled}
}} /> {id}
<label class:bx--checkbox-label={true} for={id} {title}> {indeterminate}
<span {name}
class:bx--checkbox-label-text={true} {readonly}
class:bx--visually-hidden={hideLabel}> class:bx--checkbox={true}
{labelText} on:change
</span> on:change={() => {
</label> checked = !checked;
</div> }} />
<label class:bx--checkbox-label={true} for={id} {title}>
<span
class:bx--checkbox-label-text={true}
class:bx--visually-hidden={hideLabel}>
{labelText}
</span>
</label>
</div>
{/if}

12
src/CodeSnippet/CodeSnippet.svelte
View file

@ -1,6 +1,7 @@
<script> <script>
export let type = "single"; // "single" | "inline" | "multi" export let type = "single"; // "single" | "inline" | "multi"
export let code = undefined; export let code = undefined;
export let expanded = false;
export let light = false; export let light = false;
export let skeleton = false; export let skeleton = false;
export let copyButtonDescription = undefined; export let copyButtonDescription = undefined;
@ -9,6 +10,7 @@
export let feedbackTimeout = 2000; export let feedbackTimeout = 2000;
export let showLessText = "Show less"; export let showLessText = "Show less";
export let showMoreText = "Show more"; export let showMoreText = "Show more";
export let showMoreLess = false;
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
export let ref = null; export let ref = null;
@ -19,8 +21,6 @@
import { CopyButton } from "../CopyButton"; import { CopyButton } from "../CopyButton";
import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte"; import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
$: showMoreLess = false;
$: expanded = false;
$: expandText = expanded ? showLessText : showMoreText; $: expandText = expanded ? showLessText : showMoreText;
afterUpdate(() => { afterUpdate(() => {
@ -31,7 +31,13 @@
</script> </script>
{#if skeleton} {#if skeleton}
<CodeSnippetSkeleton {type} {...$$restProps} /> <CodeSnippetSkeleton
{type}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else} {:else}
{#if type === 'inline'} {#if type === 'inline'}
<Copy <Copy