mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat: initial commit
This commit is contained in:
parent
bde7dd644f
commit
72dc38ea56
119 changed files with 14925 additions and 1 deletions
35
src/components/Checkbox/Checkbox.Story.svelte
Normal file
35
src/components/Checkbox/Checkbox.Story.svelte
Normal file
|
@ -0,0 +1,35 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
const { labelText, indeterminate, disabled, hideLabel, wrapperClassName } = $$props;
|
||||
|
||||
import { cx } from '../../lib';
|
||||
import Layout from '../../internal/ui/Layout.svelte';
|
||||
import Checkbox from './Checkbox.svelte';
|
||||
import CheckboxSkeleton from './Checkbox.Skeleton.svelte';
|
||||
|
||||
const checkboxProps = {
|
||||
labelText,
|
||||
indeterminate,
|
||||
disabled,
|
||||
hideLabel,
|
||||
wrapperClassName
|
||||
};
|
||||
</script>
|
||||
|
||||
<Layout>
|
||||
{#if story === 'skeleton'}
|
||||
<CheckboxSkeleton />
|
||||
{: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} checked id="checkbox-label-1" />
|
||||
<Checkbox {...checkboxProps} checked id="checkbox-label-2" />
|
||||
</fieldset>
|
||||
{/if}
|
||||
</Layout>
|
Loading…
Add table
Add a link
Reference in a new issue