mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: remove storybook
This commit is contained in:
parent
856086dc71
commit
378fe06e03
116 changed files with 103 additions and 14249 deletions
|
@ -1,73 +0,0 @@
|
|||
<script>
|
||||
export let story = undefined;
|
||||
|
||||
import Button from "./Button.svelte";
|
||||
import ButtonSkeleton from "./Button.Skeleton.svelte";
|
||||
import ButtonSet from "./ButtonSet.svelte";
|
||||
import Add16 from "carbon-icons-svelte/lib/Add16";
|
||||
|
||||
const {
|
||||
kind,
|
||||
disabled,
|
||||
size,
|
||||
iconDescription,
|
||||
small,
|
||||
tooltipPosition,
|
||||
tooltipAlignment,
|
||||
stacked,
|
||||
} = $$props;
|
||||
|
||||
const regularProps = {
|
||||
kind,
|
||||
disabled,
|
||||
size,
|
||||
iconDescription,
|
||||
small,
|
||||
};
|
||||
|
||||
const iconOnlyProps = {
|
||||
hasIconOnly: true,
|
||||
kind,
|
||||
disabled,
|
||||
size,
|
||||
icon: Add16,
|
||||
iconDescription,
|
||||
tooltipPosition,
|
||||
tooltipAlignment,
|
||||
};
|
||||
|
||||
const setProps = { stacked, disabled, small, size, iconDescription };
|
||||
</script>
|
||||
|
||||
<div>
|
||||
{#if story === 'skeleton'}
|
||||
<ButtonSkeleton />
|
||||
|
||||
<ButtonSkeleton href="#" />
|
||||
|
||||
<ButtonSkeleton small />
|
||||
{:else if story === 'inline'}
|
||||
<Button />
|
||||
{:else if story === 'icon-only buttons'}
|
||||
<Button {...iconOnlyProps} />
|
||||
{:else if story === 'set of buttons'}
|
||||
<ButtonSet stacked="{setProps.stacked}">
|
||||
<Button kind="ghost" {...setProps}>Ghost button</Button>
|
||||
<Button kind="secondary" {...setProps}>Secondary button</Button>
|
||||
<Button kind="primary" {...setProps}>Primary button</Button>
|
||||
</ButtonSet>
|
||||
{:else}
|
||||
<Button {...regularProps}>Button</Button>
|
||||
|
||||
<Button {...regularProps} href="#">Link</Button>
|
||||
|
||||
<Button {...regularProps} as let:props>
|
||||
<p {...props}>Element</p>
|
||||
</Button>
|
||||
|
||||
<Button {...regularProps} as let:props>
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a {...props}>Custom component</a>
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
|
@ -1,62 +0,0 @@
|
|||
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
|
||||
import Component from "./Button.Story.svelte";
|
||||
|
||||
export default { title: "Button", decorators: [withKnobs] };
|
||||
|
||||
const kinds = {
|
||||
"Primary button (primary)": "primary",
|
||||
"Secondary button (secondary)": "secondary",
|
||||
"Tertiary button (tertiary)": "tertiary",
|
||||
"Danger button (danger)": "danger",
|
||||
"Ghost button (ghost)": "ghost",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
Default: "default",
|
||||
Field: "field",
|
||||
Small: "small",
|
||||
};
|
||||
|
||||
export const Default = () => ({
|
||||
Component,
|
||||
props: {
|
||||
kind: select("Button kind (kind)", kinds, "primary"),
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
size: select("Button size (size)", sizes, "default"),
|
||||
iconDescription: text("Icon description (iconDescription)", "Button icon"),
|
||||
},
|
||||
});
|
||||
|
||||
export const IconOnlyButtons = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: "icon-only buttons",
|
||||
kind: select("Button kind (kind)", kinds, "primary"),
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
size: select("Button size (size)", sizes, "default"),
|
||||
iconDescription: text("Icon description (iconDescription)", "Button icon"),
|
||||
tooltipPosition: select(
|
||||
"Tooltip position (tooltipPosition)",
|
||||
["top", "right", "bottom", "left"],
|
||||
"bottom"
|
||||
),
|
||||
tooltipAlignment: select(
|
||||
"Tooltip alignment (tooltipAlignment)",
|
||||
["start", "center", "end"],
|
||||
"center"
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
export const SetOfButtons = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: "set of buttons",
|
||||
disabled: boolean("Disabled (disabled)", false),
|
||||
stacked: boolean("Stacked (stacked)", false),
|
||||
size: select("Button size (size)", sizes, "default"),
|
||||
iconDescription: text("Icon description (iconDescription)", "Button icon"),
|
||||
},
|
||||
});
|
||||
|
||||
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });
|
Loading…
Add table
Add a link
Reference in a new issue