mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +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

70
src/components/Checkbox/Checkbox.Story.svelte
View file

@ -1,39 +1,47 @@
<script>
export let story = undefined;
import { cx } from '../../lib';
import Layout from '../../internal/ui/Layout.svelte';
import Checkbox from './Checkbox.svelte';
import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
import Checkbox from "./Checkbox.svelte";
import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
const checkboxProps = { labelText, indeterminate, disabled, hideLabel, wrapperClassName };
const {
labelText,
indeterminate,
disabled,
hideLabel,
wrapperClassName
} = $$props;
const checkboxProps = {
labelText,
indeterminate,
disabled,
hideLabel,
wrapperClassName
};
let checked = true;
</script>
<Layout>
{#if story === 'skeleton'}
<div>
<CheckboxSkeleton />
</div>
{:else if story === 'unchecked'}
<fieldset class={cx('--fieldset')}>
<legend class={cx('--label')}>Checkbox heading</legend>
<Checkbox {...checkboxProps} id="checkbox-label-1" />
<Checkbox {...checkboxProps} id="checkbox-label-2" />
</fieldset>
{:else}
<fieldset class={cx('--fieldset')}>
<legend class={cx('--label')}>Checkbox heading</legend>
<Checkbox
{...checkboxProps}
id="checkbox-label-1"
bind:checked
on:check={({ detail }) => {
console.log('on:check', detail);
}} />
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
</fieldset>
{/if}
</Layout>
{#if story === 'skeleton'}
<div>
<CheckboxSkeleton />
</div>
{:else if story === 'unchecked'}
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend>
<Checkbox {...checkboxProps} id="checkbox-label-1" />
<Checkbox {...checkboxProps} id="checkbox-label-2" />
</fieldset>
{:else}
<fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend>
<Checkbox
{...checkboxProps}
id="checkbox-label-1"
bind:checked
on:check={({ detail }) => {
console.log('on:check', detail);
}} />
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
</fieldset>
{/if}