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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

72
src/components/Button/Button.Story.svelte
View file

@ -1,11 +1,9 @@
<script>
export let story = undefined;
import { cx } from '../../lib';
import Layout from '../../internal/ui/Layout.svelte';
import Button from './Button.svelte';
import ButtonSkeleton from './Button.Skeleton.svelte';
import Add16 from 'carbon-icons-svelte/lib/Add16';
import Button from "./Button.svelte";
import ButtonSkeleton from "./Button.Skeleton.svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
const {
kind,
@ -39,36 +37,34 @@
const setProps = { disabled, small, size, iconDescription };
</script>
<Layout>
<div>
{#if story === 'skeleton'}
<ButtonSkeleton />
&nbsp;
<ButtonSkeleton href="#" />
&nbsp;
<ButtonSkeleton small />
{:else if story === 'inline'}
<Button />
{:else if story === 'icon-only buttons'}
<Button {...iconOnlyProps} />
{:else if story === 'set of buttons'}
<div class={cx('--btn-set')}>
<Button kind="secondary" {...setProps}>Secondary button</Button>
<Button kind="primary" {...setProps}>Primary button</Button>
</div>
{:else}
<Button {...regularProps}>Button</Button>
&nbsp;
<Button {...regularProps} href="#">Link</Button>
&nbsp;
<Button {...regularProps} as let:props>
<p {...props}>Element</p>
</Button>
&nbsp;
<Button {...regularProps} as let:props>
<!-- svelte-ignore a11y-missing-attribute -->
<a {...props}>Custom component</a>
</Button>
{/if}
</div>
</Layout>
<div>
{#if story === 'skeleton'}
<ButtonSkeleton />
&nbsp;
<ButtonSkeleton href="#" />
&nbsp;
<ButtonSkeleton small />
{:else if story === 'inline'}
<Button />
{:else if story === 'icon-only buttons'}
<Button {...iconOnlyProps} />
{:else if story === 'set of buttons'}
<div class="bx--btn-set">
<Button kind="secondary" {...setProps}>Secondary button</Button>
<Button kind="primary" {...setProps}>Primary button</Button>
</div>
{:else}
<Button {...regularProps}>Button</Button>
&nbsp;
<Button {...regularProps} href="#">Link</Button>
&nbsp;
<Button {...regularProps} as let:props>
<p {...props}>Element</p>
</Button>
&nbsp;
<Button {...regularProps} as let:props>
<!-- svelte-ignore a11y-missing-attribute -->
<a {...props}>Custom component</a>
</Button>
{/if}
</div>