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

chore: remove storybook

Browse source
This commit is contained in:
Eric Liu 2020-10-14 16:23:44 -07:00
commit 378fe06e03
116 changed files with 103 additions and 14249 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,7 +1,6 @@
/coverage /coverage
/lib /lib
/node_modules /node_modules
/storybook-static
/css /css
.DS_Store .DS_Store
yarn-debug.log* yarn-debug.log*

2
.prettierignore
View file

@ -1,11 +1,9 @@
/coverage /coverage
/lib /lib
/storybook-static
/css /css
/**/__sapper__ /**/__sapper__
/**/.routify /**/.routify
/**/dist /**/dist
/**/client /**/client
/**/build /**/build
.storybook
*.svx *.svx

1
.prettierrc
View file

@ -1 +0,0 @@
{ "svelteStrictMode": true, "svelteBracketNewLine": true }

2
.storybook/addons.js
View file

@ -1,2 +0,0 @@
import "@storybook/addon-knobs/register";
import "@storybook/addon-storysource/register";

4
.storybook/config.js
View file

@ -1,4 +0,0 @@
import { configure } from "@storybook/svelte";
import "../css/g10.css";
configure(require.context("../src", true, /\.stories\.js$/), module);

8
.storybook/preview-body.html
View file

@ -1,8 +0,0 @@
<style>
body {
padding: 3rem;
display: flex;
flex-direction: column;
min-height: 100vh;
}
</style>

11
.storybook/webpack.config.js
View file

@ -1,11 +0,0 @@
const path = require("path");
module.exports = async ({ config }) => {
config.module.rules.push({
test: [/\.stories\.js$/],
loaders: [require.resolve("@storybook/source-loader")],
include: [path.resolve(__dirname, "../src")],
enforce: "pre",
});
return config;
};

0
.github/CODEOWNERS → CODEOWNERS
View file

38
package.json
View file

@ -7,32 +7,23 @@
"main": "./lib/index.js", "main": "./lib/index.js",
"module": "./lib/index.mjs", "module": "./lib/index.mjs",
"types": "./types/index.d.ts", "types": "./types/index.d.ts",
"sideEffects": false,
"scripts": { "scripts": {
"start": "start-storybook -p 9090",
"build": "build-storybook",
"prettier": "prettier --write './**/*.{svelte,js,md}'", "prettier": "prettier --write './**/*.{svelte,js,md}'",
"build:css": "node scripts/build-css", "build:css": "node scripts/build-css",
"prepack": "node scripts/build-css && rollup -c", "prepack": "node scripts/build-css && rollup -c",
"publish-examples": "node scripts/publish-examples" "publish-examples": "node scripts/publish-examples"
}, },
"sideEffects": false,
"dependencies": { "dependencies": {
"carbon-icons-svelte": "^10.17.0", "carbon-icons-svelte": "^10.17.0",
"flatpickr": "4.6.3" "flatpickr": "4.6.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4",
"@carbon/themes": "^10.18.0", "@carbon/themes": "^10.18.0",
"@rollup/plugin-commonjs": "^15.0.0", "@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-node-resolve": "^9.0.0",
"@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-storysource": "^5.3.19",
"@storybook/cli": "^5.3.19",
"@storybook/svelte": "^5.3.19",
"@tsconfig/svelte": "^1.0.10", "@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^9.8.6", "autoprefixer": "^9.8.6",
"babel-loader": "^8.0.6",
"carbon-components-10.21": "npm:carbon-components@10.21", "carbon-components-10.21": "npm:carbon-components@10.21",
"comment-parser": "^0.7.5", "comment-parser": "^0.7.5",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
@ -49,11 +40,20 @@
"svelte-loader": "^2.13.6", "svelte-loader": "^2.13.6",
"typescript": "^4.0.2" "typescript": "^4.0.2"
}, },
"babel": { "husky": {
"presets": [ "hooks": {
"@babel/preset-env" "pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{svelte,md,js,json}": [
"prettier --write"
] ]
}, },
"prettier": {
"svelteStrictMode": true,
"svelteBracketNewLine": true
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/IBM/carbon-components-svelte.git" "url": "https://github.com/IBM/carbon-components-svelte.git"
@ -86,15 +86,5 @@
"name": "Adan Ulloa", "name": "Adan Ulloa",
"email": "adanug@mx1.ibm.com" "email": "adanug@mx1.ibm.com"
} }
], ]
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{svelte,md,js,json}": [
"prettier --write"
]
}
} }

54
src/Accordion/Accordion.Story.svelte
View file

@ -1,54 +0,0 @@
<script>
export let story = undefined;
export let title = undefined;
export let open = undefined;
export let count = undefined;
import Accordion from "./Accordion.svelte";
import AccordionItem from "./AccordionItem.svelte";
import AccordionSkeleton from "./Accordion.Skeleton.svelte";
</script>
{#if story === 'skeleton'}
<div style="width: 500px">
<AccordionSkeleton open="{open}" count="{count}" />
</div>
{:else}
<Accordion {...$$restProps}>
<AccordionItem title="{title}" open="{open}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</AccordionItem>
<AccordionItem title="Section 2 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</AccordionItem>
<AccordionItem title="Section 3 title">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</AccordionItem>
<AccordionItem>
<div slot="title">
Section 4 title ( <em>the title can be a node</em> )
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</AccordionItem>
</Accordion>
{/if}

32
src/Accordion/Accordion.stories.js
View file

@ -1,32 +0,0 @@
import {
withKnobs,
text,
boolean,
number,
select,
} from "@storybook/addon-knobs";
import Component from "./Accordion.Story.svelte";
export default { title: "Accordion", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
align: select(
"Accordion heading alignment (align)",
["start", "end"],
"end"
),
title: text("The title (title)", "Section 1 title"),
open: boolean("Open the section (open)", false),
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
open: boolean("Show first item opened (open)", true),
count: number("Set number of items (count)", 4),
},
});

36
src/Breadcrumb/Breadcrumb.Story.svelte
View file

@ -1,36 +0,0 @@
<script>
export let story = undefined;
export let noTrailingSlash = undefined;
import Breadcrumb from "./Breadcrumb.svelte";
import BreadcrumbItem from "./BreadcrumbItem.svelte";
import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
</script>
{#if story === 'current page'}
<Breadcrumb noTrailingSlash aria-label="Breadcrumb header">
<BreadcrumbItem let:props>
<a {...props} href="/#">Breadcrumb 1</a>
</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem href="#" isCurrentPage>Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
{:else if story === 'current page with aria-current'}
<Breadcrumb noTrailingSlash>
<BreadcrumbItem let:props>
<a {...props} href="/#">Breadcrumb 1</a>
</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
{:else if story === 'skeleton'}
<BreadcrumbSkeleton noTrailingSlash="{noTrailingSlash}" {...$$restProps} />
{:else}
<Breadcrumb noTrailingSlash="{noTrailingSlash}">
<BreadcrumbItem let:props>
<a {...props} href="/#">Breadcrumb 1</a>
</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
{/if}

30
src/Breadcrumb/Breadcrumb.stories.js
View file

@ -1,30 +0,0 @@
import { withKnobs, boolean, number } from "@storybook/addon-knobs";
import Component from "./Breadcrumb.Story.svelte";
export default { title: "Breadcrumb", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
noTrailingSlash: boolean("No Trailing Slash (noTrailingSlash)", false),
count: number("Number of breadcrumb items (count)", 3),
},
});
export const CurrentPage = () => ({
Component,
props: { story: "current page" },
});
export const CurrentPageWithAriaCurrent = () => ({
Component,
props: { story: "current page with aria-current" },
});

73
src/Button/Button.Story.svelte
View file

@ -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 />
&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'}
<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>
&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>

62
src/Button/Button.stories.js
View file

@ -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" } });

48
src/Checkbox/Checkbox.Story.svelte
View file

@ -1,48 +0,0 @@
<script>
export let story = undefined;
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,
};
let checked = true;
</script>
{#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}

27
src/Checkbox/Checkbox.stories.js
View file

@ -1,27 +0,0 @@
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import Component from "./Checkbox.Story.svelte";
export default { title: "Checkbox", decorators: [withKnobs] };
export const Checked = () => ({
Component,
props: {
labelText: text("Label text (labelText)", "Checkbox label"),
indeterminate: boolean("Intermediate (indeterminate)", false),
disabled: boolean("Disabled (disabled)", false),
hideLabel: boolean("Hide label (hideLabel)", false),
},
});
export const Unchecked = () => ({
Component,
props: {
story: "unchecked",
labelText: text("Label text (labelText)", "Checkbox label"),
indeterminate: boolean("Intermediate (indeterminate)", false),
disabled: boolean("Disabled (disabled)", false),
hideLabel: boolean("Hide label (hideLabel)", false),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

45
src/CodeSnippet/CodeSnippet.Story.svelte
View file

@ -1,45 +0,0 @@
<script>
export let story = undefined;
import CodeSnippet from "./CodeSnippet.svelte";
import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
</script>
<div>
{#if story === 'skeleton'}
<div style="width: 800px">
<CodeSnippetSkeleton type="single" style="margin-bottom: 8px" />
<CodeSnippetSkeleton type="multi" />
</div>
{:else if story === 'inline'}
<CodeSnippet {...$$restProps} type="inline">{'node -v'}</CodeSnippet>
{:else if story === 'single line'}
<CodeSnippet {...$$restProps} type="single">
{'node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae fuga laboriosam!'}
</CodeSnippet>
{:else if story === 'multi line'}
<CodeSnippet {...$$restProps} type="multi">
{`@mixin grid-container {
width: 100%;
padding-right: padding(mobile);
padding-left: padding(mobile);
@include breakpoint(bp--xs--major) {
padding-right: padding(xs);
padding-left: padding(xs);
}
}
$z-indexes: (
modal : 9000,
overlay : 8000,
dropdown : 7000,
header : 6000,
footer : 5000,
hidden : -1,
overflowHidden: -1,
floating: 10000
);`}
</CodeSnippet>
{/if}
</div>

55
src/CodeSnippet/CodeSnippet.stories.js
View file

@ -1,55 +0,0 @@
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import Component from "./CodeSnippet.Story.svelte";
export default { title: "CodeSnippet", decorators: [withKnobs] };
export const Inline = () => ({
Component,
props: {
story: "inline",
light: boolean("Light variant (light)", false),
feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
copyLabel: text(
"ARIA label for the snippet/copy button (copyLabel)",
"copyable code snippet"
),
hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
},
});
export const SingleLine = () => ({
Component,
props: {
story: "single line",
light: boolean("Light variant (light)", false),
feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
copyButtonDescription: text(
"Copy icon description (copyButtonDescription)",
"copyable code snippet"
),
"aria-label": text(
"ARIA label of the container (ariaLabel)",
"Container label"
),
hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
},
});
export const MultiLine = () => ({
Component,
props: {
story: "multi line",
feedback: text("Feedback text (feedback)", "Feedback Enabled 👍"),
showMoreText: text(
'Text for "show more" button (showMoreText)',
"Show more"
),
showLessText: text(
'Text for "show less" button (showLessText)',
"Show less"
),
hideCopyButton: boolean("Hide copy button (hideCopyButton", false),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

72
src/ComboBox/ComboBox.Story.svelte
View file

@ -1,72 +0,0 @@
<script>
import { ToggleSmall } from "../ToggleSmall";
import { Button } from "../Button";
import ComboBox from "./ComboBox.svelte";
let items = [
{ id: "option-0", text: "Option 1" },
{ id: "option-1", text: "Option 2" },
{ id: "option-2", text: "Option 3" },
{ id: "option-3", text: "Option 4" },
{
id: "option-4",
text:
"An example option that is really long to show what should be done to handle long text",
},
];
$: toggled = false;
$: value = undefined;
$: selectedIndex = -1;
$: ref = null;
$: ref && ref.focus();
function shouldFilterItem(item, value) {
if (!toggled || !value) {
return true;
}
return item.text.toLowerCase().includes(value.toLowerCase());
}
</script>
<p>
<code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
</p>
<pre style="margin-top: 1rem;">
<code
>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem;">
<ToggleSmall
labelText="Enable filtering"
bind:toggled
style="margin-top: 1rem;"
/>
<Button
size="small"
on:click="{() => {
selectedIndex = 1;
}}"
style="margin-top: 1rem;"
>
Set item to "Option 2"
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<ComboBox
{...$$props}
id="combobox"
bind:ref
bind:value
bind:selectedIndex
on:select="{({ detail }) => {
console.log('on:select', detail);
}}"
on:clear="{() => {
console.log('on:clear');
}}"
items="{items}"
shouldFilterItem="{shouldFilterItem}"
/>
</div>

28
src/ComboBox/ComboBox.stories.js
View file

@ -1,28 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./ComboBox.Story.svelte";
export default { title: "ComboBox", decorators: [withKnobs] };
const sizes = {
"Extra large size (xl)": "xl",
"Regular size (lg)": "",
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
size: select("Field size (size)", sizes, ""),
placeholder: text("Placeholder text (placeholder)", "Filter..."),
titleText: text("Title (titleText)", "Combobox title"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
light: boolean("Light (light)", false),
disabled: boolean("Disabled (disabled)", false),
invalid: boolean("Invalid (invalid)", false),
invalidText: text(
"Invalid text (invalidText)",
"A valid value is required"
),
name: "combo-box-name",
},
});

183
src/ComposedModal/ComposedModal.Story.svelte
View file

@ -1,183 +0,0 @@
<script>
export let story = undefined;
const { modalBody } = $$props;
import { Button } from "../Button";
import { TextInput, PasswordInput } from "../TextInput";
import ComposedModal from "./ComposedModal.svelte";
import ModalHeader from "./ModalHeader.svelte";
import ModalBody from "./ModalBody.svelte";
import ModalFooter from "./ModalFooter.svelte";
let open = false;
let type = "password";
</script>
{#if story === undefined}
<ComposedModal
{...$$props.composedModal}
on:click="{(e) => {
console.log(e.target);
}}"
>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button
kind="ghost"
size="field"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
Programmatically toggle password
</Button>
</div>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'child nodes'}
<ComposedModal {...$$props.composedModal}>
<ModalHeader {...$$props.modalHeader}>
<h1>Testing</h1>
</ModalHeader>
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter>
<Button kind="secondary">Cancel</Button>
<Button kind="{$$props.composedModal.danger ? 'danger' : 'primary'}">
Primary
</Button>
</ModalFooter>
</ComposedModal>
{/if}
{#if story === 'title'}
<ComposedModal
{...$$props.composedModal}
open
on:close="{() => {}}"
on:submit="{() => {}}"
>
<ModalHeader
{...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines or
less."
/>
<ModalBody {...$$props.modalBody} />
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}
{#if story === 'trigger'}
<div>
<Button
on:click="{() => {
open = true;
}}"
>
Launch composed modal
</Button>
</div>
<ComposedModal
{...$$props.composedModal}
open="{open}"
on:close="{() => (open = false)}"
>
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}"
>
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
{#if modalBody.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt
posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
Quisque consectetur non risus eu rutrum.{' '}
</p>
{/if}
</ModalBody>
<ModalFooter {...$$props.modalFooter} />
</ComposedModal>
{/if}

181
src/ComposedModal/ComposedModal.stories.js
View file

@ -1,181 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./ComposedModal.Story.svelte";
export default { title: "ComposedModal", decorators: [withKnobs] };
const sizes = {
Default: "",
"Extra small (xs)": "xs",
"Small (sm)": "sm",
"Large (lg)": "lg",
};
export const Default = () => ({
Component,
props: {
composedModal: {
open: boolean("Open (open in <ComposedModal>)", true),
danger: boolean("Danger mode (danger)", false),
selectorPrimaryFocus: text(
"Primary focus element selector (selectorPrimaryFocus)",
"[data-modal-primary-focus]"
),
size: select("Size (size)", sizes, "sm"),
preventCloseOnClickOutside: boolean(
"Prevent the modal from closing when clicking outside (preventCloseOnClickOutside)",
false
),
},
modalHeader: {
label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
title: text("Optional title (title in <ModalHeader>)", "Example"),
iconDescription: text(
"Close icon description (iconDescription in <ModalHeader>)",
"Close"
),
},
modalBody: {
hasScrollingContent: boolean(
"Modal contains scrollable content (hasScrollingContent)",
true
),
"aria-label": text("ARIA label for content", "Example modal content"),
},
modalFooter: {
primaryButtonText: text(
"Primary button text (primaryButtonText in <ModalFooter>)",
"Save"
),
primaryButtonDisabled: boolean(
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
false
),
secondaryButtonText: text(
"Secondary button text (secondaryButtonText in <ModalFooter>)",
""
),
},
},
});
export const ChildNodes = () => ({
Component,
props: {
story: "child nodes",
composedModal: {
open: boolean("Open (open in <ComposedModal>)", true),
danger: boolean("Danger mode (danger)", false),
selectorPrimaryFocus: text(
"Primary focus element selector (selectorPrimaryFocus)",
"[data-modal-primary-focus]"
),
size: select("Size (size)", sizes, "sm"),
},
modalHeader: {
label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
title: text("Optional title (title in <ModalHeader>)", "Example"),
iconDescription: text(
"Close icon description (iconDescription in <ModalHeader>)",
"Close"
),
},
modalBody: {
hasScrollingContent: boolean(
"Modal contains scrollable content (hasScrollingContent)",
true
),
"aria-label": text("ARIA label for content", "Example modal content"),
},
modalFooter: {},
},
});
export const TitleOnly = () => ({
Component,
props: {
story: "title",
composedModal: {
open: boolean("Open (open in <ComposedModal>)", true),
danger: boolean("Danger mode (danger)", false),
selectorPrimaryFocus: text(
"Primary focus element selector (selectorPrimaryFocus)",
"[data-modal-primary-focus]"
),
size: select("Size (size)", sizes, "sm"),
},
modalHeader: {
label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
title: text("Optional title (title in <ModalHeader>)", "Example"),
iconDescription: text(
"Close icon description (iconDescription in <ModalHeader>)",
"Close"
),
},
modalBody: {
hasScrollingContent: boolean(
"Modal contains scrollable content (hasScrollingContent)",
true
),
"aria-label": text("ARIA label for content", "Example modal content"),
},
modalFooter: {
primaryButtonText: text(
"Primary button text (primaryButtonText in <ModalFooter>)",
"Save"
),
primaryButtonDisabled: boolean(
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
false
),
secondaryButtonText: text(
"Secondary button text (secondaryButtonText in <ModalFooter>)",
""
),
},
},
});
export const Trigger = () => ({
Component,
props: {
story: "trigger",
composedModal: {
open: boolean("Open (open in <ComposedModal>)", true),
danger: boolean("Danger mode (danger)", false),
selectorPrimaryFocus: text(
"Primary focus element selector (selectorPrimaryFocus)",
"[data-modal-primary-focus]"
),
size: select("Size (size)", sizes, "sm"),
},
modalHeader: {
label: text("Optional Label (label in <ModalHeader>)", "Optional Label"),
title: text("Optional title (title in <ModalHeader>)", "Example"),
iconDescription: text(
"Close icon description (iconDescription in <ModalHeader>)",
"Close"
),
},
modalBody: {
hasScrollingContent: boolean(
"Modal contains scrollable content (hasScrollingContent)",
true
),
"aria-label": text("ARIA label for content", "Example modal content"),
},
modalFooter: {
primaryButtonText: text(
"Primary button text (primaryButtonText in <ModalFooter>)",
"Save"
),
primaryButtonDisabled: boolean(
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
false
),
secondaryButtonText: text(
"Secondary button text (secondaryButtonText in <ModalFooter>)",
""
),
},
},
});

53
src/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -1,53 +0,0 @@
<script>
export let story = undefined;
/**
* Set to `true` to enable the light variant
* @type {boolean} [light=false]
*/
export let light = false;
import ContentSwitcher from "./ContentSwitcher.svelte";
import Switch from "./Switch.svelte";
import Add16 from "carbon-icons-svelte/lib/Add16";
$: selectedIndex = 0;
$: console.log("bind selectedIndex", selectedIndex);
</script>
{#if story === 'selected'}
<ContentSwitcher
light="{light}"
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Third section" />
</ContentSwitcher>
{:else}
<ContentSwitcher
light="{light}"
bind:selectedIndex
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
>
<Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" />
<Switch {...$$props}>
<div style="display: flex; align-items:center;">
<Add16 style="margin-right: .25rem;" />
Third section
</div>
</Switch>
</ContentSwitcher>
<div
style="margin-top: 1.5rem"
on:click="{() => {
selectedIndex = 1;
}}"
>
Programmatically set to second index
</div>
{/if}

21
src/ContentSwitcher/ContentSwitcher.stories.js
View file

@ -1,21 +0,0 @@
import { withKnobs, boolean } from "@storybook/addon-knobs";
import Component from "./ContentSwitcher.Story.svelte";
export default { title: "ContentSwitcher", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
},
});
export const Selected = () => ({
Component,
props: {
story: "selected",
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
},
});

13
src/CopyButton/CopyButton.Story.svelte
View file

@ -1,13 +0,0 @@
<script>
import CopyButton from "./CopyButton.svelte";
</script>
<CopyButton
{...$$props}
on:click="{() => {
console.log('click');
}}"
on:animationend="{(e) => {
console.log('animation end', e.animationName);
}}"
/>

19
src/CopyButton/CopyButton.stories.js
View file

@ -1,19 +0,0 @@
import { withKnobs, text, number } from "@storybook/addon-knobs";
import Component from "./CopyButton.Story.svelte";
export default { title: "CopyButton", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
feedback: text("The text shown upon clicking (feedback)", "Copied!"),
feedbackTimeout: number(
"How long the text is shown upon clicking (feedbackTimeout)",
2000
),
iconDescription: text(
"Feedback icon description (iconDescription)",
"Copy to clipboard"
),
},
});

154
src/DataTable/DataTable.Story.svelte
View file

@ -1,154 +0,0 @@
<script>
export let story = undefined;
import DataTable from "./DataTable.svelte";
import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte";
import TableCell from "./TableCell.svelte";
import TableContainer from "./TableContainer.svelte";
import TableHead from "./TableHead.svelte";
import TableHeader from "./TableHeader.svelte";
import TableRow from "./TableRow.svelte";
const rows = [
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Kevins VM Groups",
status: "Disabled",
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Maureens VM Groups",
status: "Starting",
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Andrews VM Groups",
status: "Active",
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Marcs VM Groups",
status: "Disabled",
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Mels VM Groups",
status: "Starting",
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Ronjas VM Groups",
status: "Active",
},
];
const headers = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "attached_groups", value: "Attached Groups" },
{ key: "status", value: "Status" },
];
$: sortable = true;
</script>
{#if story === 'composed'}
<DataTable {...$$props} rows="{rows}" headers="{headers}" let:props>
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}
>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
{#each props.headers as header, i (header.key)}
<TableHeader {...props.getHeaderProps({ header })}>
{header.header}
</TableHeader>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each props.rows as row, i}
<TableRow {...props.getRowProps({ row })}>
{#each row.cells as cell, j}
<TableCell>{cell.value}</TableCell>
{/each}
</TableRow>
{/each}
</TableBody>
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title="{$$props.title}"
description="{$$props.description}"
zebra="{$$props.zebra}"
size="{$$props.size}"
stickyHeader="{$$props.stickyHeader}"
on:click="{({ detail }) => {
console.log('on:click', detail);
}}"
on:click:header="{({ detail }) => {
console.log('on:click:header', detail);
}}"
on:click:row="{({ detail }) => {
console.log('on:click:row', detail);
}}"
on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}"
/>
{:else}
<DataTable
title="{$$props.title}"
description="{$$props.description}"
zebra="{$$props.zebra}"
size="{$$props.size}"
stickyHeader="{$$props.stickyHeader}"
on:click="{({ detail }) => {
console.log('on:click', detail);
}}"
on:click:header="{({ detail }) => {
console.log('on:click:header', detail);
}}"
on:click:row="{({ detail }) => {
console.log('on:click:row', detail);
}}"
on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail);
}}"
rows="{rows}"
headers="{headers}"
/>
{/if}

35
src/DataTable/DataTable.stories.js
View file

@ -1,35 +0,0 @@
import { withKnobs, boolean, select, text } from "@storybook/addon-knobs";
import Component from "./DataTable.Story.svelte";
export default { title: "DataTable", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
title: text("Optional DataTable title (title)", ""),
description: text("Optional DataTable description (description)", ""),
zebra: boolean("Zebra row styles (zebra)", false),
size: select(
"Row height (size)",
{ compact: "compact", short: "short", tall: "tall", none: null },
null
),
stickyHeader: boolean("Sticky header (experimental)", false),
},
});
export const Sortable = () => ({
Component,
props: {
story: "sortable",
title: text("Optional DataTable title (title)", ""),
description: text("Optional DataTable description (description)", ""),
zebra: boolean("Zebra row styles (zebra)", false),
size: select(
"Row height (size)",
{ compact: "compact", short: "short", tall: "tall", none: null },
null
),
stickyHeader: boolean("Sticky header (experimental)", false),
},
});

31
src/DataTableSkeleton/DataTable.stories.js
View file

@ -1,31 +0,0 @@
import {
withKnobs,
array,
boolean,
number,
select,
} from "@storybook/addon-knobs";
import Component from "./DataTableSkeleton.Story.svelte";
export default { title: "DataTableSkeleton", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
columns: number("Number of columns", 5),
rows: number("Number of rows", 5),
zebra: boolean("Use zebra stripe (zebra)", false),
size: select(
"Row height (size)",
{ compact: "compact", short: "short", tall: "tall", none: null },
null
),
showHeader: boolean("Show header", true),
headers: array(
"Optional table headers (headers)",
["Name", "Protocol", "Port", "Rule", "Attached Groups"],
","
),
showToolbar: boolean("Show toolbar", true),
},
});

7
src/DataTableSkeleton/DataTableSkeleton.Story.svelte
View file

@ -1,7 +0,0 @@
<script>
import DataTableSkeleton from "./DataTableSkeleton.svelte";
</script>
<div style="width: 800px">
<DataTableSkeleton {...$$props} />
</div>

67
src/DatePicker/DatePicker.Story.svelte
View file

@ -1,67 +0,0 @@
<script>
export let story = undefined;
import DatePicker from "./DatePicker.svelte";
import DatePickerInput from "./DatePickerInput.svelte";
import DatePickerSkeleton from "./DatePicker.Skeleton.svelte";
$: datePickerType = "simple";
$: value = "";
</script>
{#if story === 'skeleton'}
<DatePickerSkeleton range />
{:else if story === 'single'}
<div>
<DatePicker
{...$$props.datePicker}
bind:value
datePickerType="single"
on:change="{({ detail }) => {
console.log('change', detail);
}}"
>
<DatePickerInput
{...$$props.datePickerInput}
on:close="{() => {
console.log('on:close');
}}"
on:input="{() => {
console.log('on:input');
}}"
/>
</DatePicker>
<button
on:click|preventDefault="{() => {
value = '12/12/2020';
}}"
style="margin-top: 1rem"
>
Set date to 12/12/2020
</button>
</div>
{:else if story === 'range'}
<DatePicker {...$$props.datePicker} bind:value datePickerType="range">
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-start"
labelText="Start date"
/>
<DatePickerInput
{...$$props.datePickerInput}
id="date-picker-input-id-end"
labelText="End date"
/>
</DatePicker>
{:else}
<DatePicker
{...$$props.datePicker}
bind:datePickerType
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
>
<DatePickerInput {...$$props.datePickerInput} />
</DatePicker>
{/if}

148
src/DatePicker/DatePicker.stories.js
View file

@ -1,148 +0,0 @@
import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
import Component from "./DatePicker.Story.svelte";
export default { title: "DatePicker", decorators: [withKnobs] };
const patterns = {
"Short (d{1,2}/d{4})": "d{1,2}/d{4}",
"Regular (d{1,2}/d{1,2}/d{4})": "d{1,2}/d{1,2}/d{4}",
};
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
short: boolean("Use shorter width (short in <DatePicker>)", false),
},
datePickerInput: {
id: "date-picker-input-id",
name: "date-picker-input-name",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
Default.story = { name: "Default (simple)" };
export const Single = () => ({
Component,
props: {
story: "single",
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
},
datePickerInput: {
id: "date-picker-input-id",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
export const Range = () => ({
Component,
props: {
story: "range",
datePicker: {
id: "date-picker",
light: boolean("Light variant (light in <DatePicker>)", false),
dateFormat: text("The date format (dateFormat in <DatePicker>)", "m/d/Y"),
},
datePickerInput: {
id: "date-picker-input-id",
size: select("Field size (size)", sizes, undefined) || undefined,
labelText: text(
"Label text (labelText in <DatePickerInput>)",
"Date Picker label"
),
hideLabel: boolean("Hide label (hideLabel)", false),
pattern: select(
"The date format (pattern in <DatePickerInput>)",
patterns,
"d{1,2}/d{4}"
),
placeholder: text(
"Placeholder text (placeholder in <DatePickerInput>)",
"mm/dd/yyyy"
),
disabled: boolean("Disabled (disabled in <DatePickerInput>)", false),
invalid: boolean(
"Show form validation UI (invalid in <DatePickerInput>)",
false
),
invalidText: text(
"Form validation UI content (invalidText in <DatePickerInput>)",
"A valid value is required"
),
iconDescription: text(
"Icon description (iconDescription in <DatePickerInput>)",
"Icon description"
),
},
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

45
src/Dropdown/Dropdown.Story.svelte
View file

@ -1,45 +0,0 @@
<script>
export let story = undefined;
import { Button } from "../Button";
import Dropdown from "./Dropdown.svelte";
import DropdownSkeleton from "./Dropdown.Skeleton.svelte";
$: items = [
{ id: "option-0", text: "Option 1" },
{ id: "option-1", text: "Option 2" },
{ id: "option-2", text: "Option 3" },
{ id: "option-3", text: "Option 4" },
];
$: selectedIndex = -1;
</script>
{#if story === 'skeleton'}
<div style="width: 300px">
<DropdownSkeleton />
&nbsp;
<DropdownSkeleton inline />
</div>
{:else}
<p>
<code>items</code> must be an array of objects; mandatory fields are `id` and
`text`.
</p>
<pre style="margin-top: 1rem;">
<code
>{'items = Array<{ id: string; text: string; }>'}</code>
</pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button
size="small"
on:click="{() => {
selectedIndex = selectedIndex > -1 ? -1 : 1;
}}"
>
{selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
</Button>
</div>
<div style="width: 300px">
<Dropdown {...$$props} bind:selectedIndex items="{items}" />
</div>
{/if}

38
src/Dropdown/Dropdown.stories.js
View file

@ -1,38 +0,0 @@
import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
import Component from "./Dropdown.Story.svelte";
export default { title: "Dropdown", decorators: [withKnobs] };
const types = {
"Default (default)": "default",
"Inline (inline)": "inline",
};
const sizes = {
"Extra large size (xl)": "xl",
"Regular size (lg)": "",
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
id: text("Dropdown id", "carbon-dropdown-id"),
name: text("Dropdown name", "carbon-dropdown-name"),
type: select("Dropdown type (type)", types, "default"),
size: select("Field size (size)", sizes, "") || undefined,
label: text("Label (label)", "Dropdown menu options"),
"aria-label": text("Aria Label (aria-label)", "Dropdown"),
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
titleText: text("Title (titleText)", "This is not a dropdown title."),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Form validation UI content (invalidText)",
"A valid value is required"
),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

64
src/FileUploader/FileUploader.Story.svelte
View file

@ -1,64 +0,0 @@
<script>
export let story = undefined;
import { Button } from "../Button";
import FileUploader from "./FileUploader.svelte";
import FileUploaderButton from "./FileUploaderButton.svelte";
import FileUploaderDropContainer from "./FileUploaderDropContainer.svelte";
import FileUploaderItem from "./FileUploaderItem.svelte";
import FileUploaderSkeleton from "./FileUploader.Skeleton.svelte";
$: fileUploader = undefined;
$: files = [];
$: disabled = files.length === 0;
</script>
<div>
{#if story === 'button'}
<FileUploaderButton {...$$props} />
{:else if story === 'drop container'}
<FileUploaderDropContainer
{...$$props}
on:add="{({ detail }) => {
console.log(detail);
}}"
/>
{:else if story === 'item'}
<FileUploaderItem
{...$$props}
on:delete="{({ detail }) => {
console.log(detail);
}}"
on:click="{() => {
console.log('click');
}}"
/>
{:else if story === 'uploader'}
<div class="bx--file__container">
<FileUploader
bind:this="{fileUploader}"
{...$$props}
bind:files
on:add="{({ detail }) => {
console.log('add', detail);
}}"
on:remove="{({ detail }) => {
console.log('remove', detail);
}}"
/>
<Button
kind="secondary"
size="small"
style="margin-top: 1rem"
disabled="{disabled}"
on:click="{fileUploader.clearFiles}"
>
Clear File{files.length === 1 ? '' : 's'}
</Button>
</div>
{:else if story === 'skeleton'}
<div style="width: 500px">
<FileUploaderSkeleton />
</div>
{/if}
</div>

116
src/FileUploader/FileUploader.stories.js
View file

@ -1,116 +0,0 @@
import {
withKnobs,
text,
select,
boolean,
array,
} from "@storybook/addon-knobs";
import Component from "./FileUploader.Story.svelte";
export default { title: "FileUploader", decorators: [withKnobs] };
const buttonKinds = {
"Primary (primary)": "primary",
"Secondary (secondary)": "secondary",
"Danger (danger)": "danger",
"Ghost (ghost)": "ghost",
"Tertiary (tertiary)": "tertiary",
};
const filenameStatuses = {
"Edit (edit)": "edit",
"Complete (complete)": "complete",
"Uploading (uploading)": "uploading",
};
export const FileUploaderButton = () => ({
Component,
props: {
story: "button",
kind: select("Button kind (kind)", buttonKinds, "primary"),
labelText: text("Label text (labelText)", "Add files"),
name: text("Form item name: (name)", ""),
multiple: boolean("Supports multiple files (multiple)", true),
disabled: boolean("Disabled (disabled)", false),
disableLabelChanges: boolean(
"Prevent the label from being replaced with file selected file (disableLabelChanges)",
false
),
role: text("ARIA role of the button (role)", "button"),
tabindex: text("Tab index (tabindex)", "0"),
},
});
FileUploaderButton.story = { name: "FileUploaderButton" };
export const FileUploader = () => ({
Component,
props: {
story: "uploader",
labelTitle: text("The label title (labelTitle)", "Upload"),
labelDescription: text(
"The label description (labelDescription)",
"only .jpg files at 500mb or less"
),
buttonLabel: text("The button label (buttonLabel)", "Add files"),
status: select("Status for file name (status)", filenameStatuses, "edit"),
accept: array("Accepted file extensions (accept)", [".jpg", ".png"], ","),
name: text("Form item name: (name)", ""),
multiple: boolean("Supports multiple files (multiple)", true),
iconDescription: text(
"Close button icon description (iconDescription)",
"Clear file"
),
},
});
FileUploader.story = { name: "FileUploader" };
export const FileUploaderItem = () => ({
Component,
props: {
story: "item",
name: text("Filename (name)", "README.md"),
status: select("Status for file name (status)", filenameStatuses, "edit"),
iconDescription: text(
"Close button icon description (iconDescription)",
"Clear file"
),
invalid: boolean("Invalid (invalid)", false),
errorSubject: text(
"Error subject (errorSubject)",
"File size exceeds limit"
),
errorBody: text(
"Error body (errorBody)",
"500kb max file size. Select a new file and try again."
),
},
});
FileUploaderItem.story = { name: "FileUploaderItem" };
export const FileUploaderDropContainer = () => ({
Component,
props: {
story: "drop container",
labelText: text(
"Label text (labelText)",
"Drag and drop files here or click to upload"
),
name: text("Form item name (name)", ""),
multiple: boolean("Supports multiple files (multiple)", true),
accept: array(
"Accepted MIME types or file extensions (accept)",
["image/jpeg", "image/png"],
","
),
disabled: boolean("Disabled (disabled)", false),
role: text("ARIA role of the button (role)", ""),
tabindex: text("Tab index (tabindex)", "0"),
},
});
FileUploaderDropContainer.story = { name: "FileUploaderDropContainer" };
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

38
src/FluidForm/FluidForm.Story.svelte
View file

@ -1,38 +0,0 @@
<script>
import { PasswordInput, TextInput } from "../TextInput";
import FluidForm from "./FluidForm.svelte";
$: value = null;
</script>
<FluidForm
{...$$props}
on:submit="{(event) => {
console.log('on:submit', event);
}}"
>
<TextInput
className="some-class"
id="test2"
labelText="Text Input label"
placeholder="Placeholder text"
bind:value
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
on:change="{() => {
console.log('change');
}}"
/>
<PasswordInput
required
type="password"
id="test4"
labelText="Password"
invalid="{true}"
invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
/>
</FluidForm>

8
src/FluidForm/FluidForm.stories.js
View file

@ -1,8 +0,0 @@
import { withKnobs, boolean } from "@storybook/addon-knobs";
import Component from "./FluidForm.Story.svelte";
export default { title: "FluidForm", decorators: [withKnobs] };
export const Default = () => ({
Component,
});

111
src/Form/Form.Story.svelte
View file

@ -1,111 +0,0 @@
<script>
import { Checkbox } from "../Checkbox";
import { FormGroup } from "../FormGroup";
import { FileUploader } from "../FileUploader";
import { NumberInput } from "../NumberInput";
import { RadioButton } from "../RadioButton";
import { RadioButtonGroup } from "../RadioButtonGroup";
import { Button } from "../Button";
import { Search } from "../Search";
import { Select, SelectItem } from "../Select";
import { TextArea } from "../TextArea";
import { TextInput } from "../TextInput";
import { Toggle } from "../Toggle";
import Form from "./Form.svelte";
</script>
<Form
on:submit="{(event) => {
console.log('on:submit', event);
}}"
>
<FormGroup {...$$props}>
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
<Checkbox id="checkbox-2" labelText="Checkbox Label" disabled />
</FormGroup>
<NumberInput
id="number-input-1"
label="Number Input"
min="{0}"
max="{100}"
value="{50}"
step="{10}"
/>
<FormGroup legendText="Toggle heading">
<Toggle id="toggle-1" />
<Toggle id="toggle-2" disabled />
</FormGroup>
<FormGroup legendText="File Uploader">
<FileUploader
id="file-1"
buttonLabel="Add files"
labelDescription="Choose Files..."
/>
</FormGroup>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup
name="radio-button-group"
defaultSelected="default-selected"
>
<RadioButton
id="radio-1"
value="standard"
labelText="Standard Radio Button"
/>
<RadioButton
id="radio-2"
value="default-selected"
labelText="Default Selected Radio Button"
/>
<RadioButton
id="radio-3"
value="blue"
labelText="Standard Radio Button"
/>
<RadioButton
id="radio-4"
value="disabled"
labelText="Disabled Radio Button"
disabled
/>
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Search">
<Search id="search-1" labelText="Search" placeholder="Search" />
</FormGroup>
<Select id="select-1" defaultValue="placeholder-item">
<SelectItem
disabled
hidden
value="placeholder-item"
text="Choose an option"
/>
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
<SelectItem value="option-3" text="Option 3" />
</Select>
<TextInput
id="text-input-1"
labelText="Text Input label"
placeholder="Placeholder text"
/>
<TextInput id="text-input-2" type="password" labelText="Password" required />
<TextInput
id="text-input-3"
type="password"
labelText="Password"
invalidText="Your password must be at least 6 characters as well as contain
at least one uppercase, one lowercase, and one number."
required
invalid
/>
<TextArea
id="text-area"
labelText="Text Area label"
placeholder="Placeholder text"
rows="{4}"
cols="{50}"
/>
<Button type="submit">Submit</Button>
</Form>

14
src/Form/Form.stories.js
View file

@ -1,14 +0,0 @@
import { withKnobs, text, boolean } from "@storybook/addon-knobs";
import Component from "./Form.Story.svelte";
export default { title: "Form", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
legendText: text("Text in <legend> (legendText)", "Checkbox heading"),
message: boolean("Show form requirement (message)", false),
messageText: text("Form requirement text (messageText)", ""),
invalid: boolean("Mark as invalid (invalid)", false),
},
});

8
src/FormItem/FormItem.Story.svelte
View file

@ -1,8 +0,0 @@
<script>
import { NumberInput } from "../NumberInput";
import FormItem from "./FormItem.svelte";
</script>
<FormItem>
<NumberInput id="number-input-1" />
</FormItem>

6
src/FormItem/FormItem.stories.js
View file

@ -1,6 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./FormItem.Story.svelte";
export default { title: "FormItem", decorators: [withKnobs] };
export const Default = () => ({ Component });

14
src/FormLabel/FormLabel.Story.svelte
View file

@ -1,14 +0,0 @@
<script>
export let story = undefined;
import { Tooltip } from "../Tooltip";
import FormLabel from "./FormLabel.svelte";
</script>
{#if story === 'tooltip'}
<FormLabel>
<Tooltip triggerText="Label">This is the content of the tooltip.</Tooltip>
</FormLabel>
{:else}
<FormLabel>Label</FormLabel>
{/if}

8
src/FormLabel/FormLabel.stories.js
View file

@ -1,8 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./FormLabel.Story.svelte";
export default { title: "FormLabel", decorators: [withKnobs] };
export const Default = () => ({ Component });
export const WithTooltip = () => ({ Component, props: { story: "tooltip" } });

317
src/Grid/Grid.Story.svelte
View file

@ -1,317 +0,0 @@
<script>
import Grid from "./Grid.svelte";
import Row from "./Row.svelte";
import Column from "./Column.svelte";
</script>
<style>
:global(.grid div) {
outline: 1px solid #e0e0e0;
font-size: 0.75rem;
}
:global(.outside) {
min-height: 2rem;
}
h6 {
margin-top: 2.5rem;
margin-bottom: 0.5rem;
}
</style>
<div class="grid">
<h6>Columns with auto-width</h6>
<Grid>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Narrow grid</h6>
<Grid narrow>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Responsive Grid</h6>
<Grid>
<Row>
<Column sm="{1}" md="{4}" lg="{8}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div>
</div>
</Column>
<Column sm="{1}" md="{2}" lg="{2}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div>
</div>
</Column>
<Column sm="{1}" md="{1}" lg="{1}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div>
</Column>
<Column sm="{1}" md="{1}" lg="{1}">
<div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div>
</Column>
</Row>
</Grid>
<h6>Columns with Offset</h6>
<Grid>
<Row>
<Column sm="{{ span: 1, offset: 3 }}">
<div class="outside">
<div class="inside">Small Screen Offset 3</div>
</div>
</Column>
<Column sm="{{ span: 2, offset: 2 }}">
<div class="outside">
<div class="inside">Small Screen Offset 2</div>
</div>
</Column>
<Column sm="{{ span: 3, offset: 1 }}">
<div class="outside">
<div class="inside">Small Screen Offset 1</div>
</div>
</Column>
<Column sm="{{ span: 4, offset: 0 }}">
<div class="outside">
<div class="inside">Small Screen Offset 0</div>
</div>
</Column>
</Row>
</Grid>
<h6>Condensed Grid</h6>
<Grid condensed>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Condensed Columns</h6>
<Grid>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
<Row condensed>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Full Width</h6>
<Grid fullWidth>
<Row>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
<Column>
<div class="outside">
<div class="inside">1/4</div>
</div>
</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 2x1</h6>
<Grid>
<Row>
<Column aspectRatio="2x1">1</Column>
<Column aspectRatio="2x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 16x9</h6>
<Grid>
<Row>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
<Column aspectRatio="16x9">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 4x3</h6>
<Grid>
<Row>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
<Column aspectRatio="4x3">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x1</h6>
<Grid>
<Row>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
<Column aspectRatio="1x1">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 3x4</h6>
<Grid>
<Row>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
<Column aspectRatio="3x4">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 9x16</h6>
<Grid>
<Row>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
<Column aspectRatio="9x16">1</Column>
</Row>
</Grid>
<h6>Aspect Ratio: 1x2</h6>
<Grid>
<Row>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
<Column aspectRatio="1x2">1</Column>
</Row>
</Grid>
</div>

6
src/Grid/Grid.stories.js
View file

@ -1,6 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./Grid.Story.svelte";
export default { title: "Grid", decorators: [withKnobs] };
export const Default = () => ({ Component });

21
src/Icon/Icon.Story.svelte
View file

@ -1,21 +0,0 @@
<script>
export let story = undefined;
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
import ArrowLeft20 from "carbon-icons-svelte/lib/ArrowLeft20";
import Add24 from "carbon-icons-svelte/lib/Add24";
import Icon from "./Icon.svelte";
import IconSkeleton from "./Icon.Skeleton.svelte";
const icons = { ChevronDown16, ArrowLeft20, Add24 };
</script>
{#if story === 'skeleton'}
<div>
<IconSkeleton size="{16}" style="margin: 2rem;" />
<IconSkeleton size="{32}" style="margin: 2rem" />
</div>
{:else}
<Icon {...$$props} render="{icons[$$props.icon]}" />
{/if}

24
src/Icon/Icon.stories.js
View file

@ -1,24 +0,0 @@
import { withKnobs, select, boolean } from "@storybook/addon-knobs";
import Component from "./Icon.Story.svelte";
export default { title: "Icon", decorators: [withKnobs] };
const icons = {
ChevronDown16: "ChevronDown16",
ArrowLeft20: "ArrowLeft20",
Add24: "Add24",
};
export const Default = () => ({
Component,
props: {
icon: select(
"Render icon from `carbon-icons-svelte` (render)",
icons,
"ChevronDown16"
),
skeleton: boolean("Display icon skeleton (skeleton)", false),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

54
src/InlineLoading/InlineLoading.Story.svelte
View file

@ -1,54 +0,0 @@
<script>
export let story = undefined;
export let status = undefined;
export let iconDescription = undefined;
export let description = undefined;
export let successDelay = undefined;
import { Button } from "../Button";
import InlineLoading from "./InlineLoading.svelte";
const props = { status, iconDescription, description, successDelay };
let isSubmitting = false;
let success = false;
let ariaLive = "off";
let loadingDescription = "Submitting...";
function handleSubmit() {
isSubmitting = true;
ariaLive = "assertive";
setTimeout(() => {
isSubmitting = false;
loadingDescription = "Submitted!";
success = true;
setTimeout(() => {
success = false;
isSubmitting = false;
loadingDescription = "Submitting...";
ariaLive = "off";
}, 1500);
}, 2000);
}
$: disabled = isSubmitting || success;
</script>
{#if story === 'ux-example'}
<div style="display: flex; width: 300px">
<Button kind="secondary" disabled="{disabled}">Cancel</Button>
{#if disabled}
<InlineLoading
style="margin-left: 1rem;"
description="{loadingDescription}"
status="{success ? 'finished' : 'active'}"
aria-live="{ariaLive}"
/>
{:else}
<Button on:click="{handleSubmit}">Submit</Button>
{/if}
</div>
{:else}
<InlineLoading {...props} />
{/if}

29
src/InlineLoading/InlineLoading.stories.js
View file

@ -1,29 +0,0 @@
import { withKnobs, select, text, number } from "@storybook/addon-knobs";
import Component from "./InlineLoading.Story.svelte";
export default { title: "InlineLoading", decorators: [withKnobs] };
const loadingStatus = ["inactive", "active", "finished", "error"];
export const Default = () => ({
Component,
props: {
status: select("Loading status (status)", loadingStatus, "active"),
iconDescription: text(
"Icon description (iconDescription)",
"Active loading indicator"
),
description: text(
"Loading progress description (description)",
"Loading data..."
),
successDelay: number(
"The duration for successful state before `on:success` fires (successDelay)",
1500
),
},
});
export const UxExample = () => ({ Component, props: { story: "ux-example" } });
UxExample.story = { name: "UX Example" };

10
src/Link/Link.Story.svelte
View file

@ -1,10 +0,0 @@
<script>
import Link from "./Link.svelte";
$: ref = null;
$: ref && console.log(ref);
</script>
<div>
<Link {...$$props} bind:ref>Link</Link>
</div>

14
src/Link/Link.stories.js
View file

@ -1,14 +0,0 @@
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import Component from "./Link.Story.svelte";
export default { title: "Link", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
href: text("The link href (href)", "#"),
inline: boolean("Use the in-line variant (inline)", false),
disabled: boolean("Disabled (disabled)", false),
visited: boolean("Allow visited styles", false),
},
});

5
src/Loading/Loading.Story.svelte
View file

@ -1,5 +0,0 @@
<script>
import Loading from "./Loading.svelte";
</script>
<Loading {...$$props} />

14
src/Loading/Loading.stories.js
View file

@ -1,14 +0,0 @@
import { withKnobs, boolean, text } from "@storybook/addon-knobs";
import Component from "./Loading.Story.svelte";
export default { title: "Loading", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
active: boolean("Active (active)", true),
withOverlay: boolean("With overlay (withOverlay)", false),
small: boolean("Small (small)", false),
description: text("Description (description)", "Active loading indicator"),
},
});

107
src/Modal/Modal.Story.svelte
View file

@ -1,107 +0,0 @@
<script>
import { Button } from "../Button";
import { TextInput, PasswordInput } from "../TextInput";
import Modal from "./Modal.svelte";
let open = $$props.open;
let type = "password";
</script>
<div>
<Button
on:click="{() => {
open = true;
}}"
>
Launch modal
</Button>
</div>
<Modal
{...$$props}
bind:open
on:click="{(e) => {
console.log(e.target);
}}"
on:click:button--secondary="{() => {
console.log('click button secondary');
open = false;
}}"
on:open="{() => {
console.log('open');
}}"
on:close="{() => {
console.log('close');
}}"
on:submit="{() => {
console.log('submit');
}}"
>
<div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button
kind="ghost"
size="field"
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}"
>
Programmatically toggle password
</Button>
</div>
<p>
This component supports two-way binding by default. Please see ComposedModal
for piecemeal functionality.
</p>
{#if $$props.hasScrollingContent}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<h3>Lorem ipsum</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere.
Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum
risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque
consectetur non risus eu rutrum.{' '}
</p>
{/if}
</Modal>

57
src/Modal/Modal.stories.js
View file

@ -1,57 +0,0 @@
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
import Component from "./Modal.Story.svelte";
export default { title: "Modal", decorators: [withKnobs] };
const sizes = {
Default: "",
"Extra small (xs)": "xs",
"Small (sm)": "sm",
"Large (lg)": "lg",
};
export const Default = () => ({
Component,
props: {
open: boolean("Open (open)", true),
passiveModal: boolean("Without footer (passiveModal)", false),
danger: boolean("Danger mode (danger)", false),
alert: boolean("Alert mode (alert)", false),
shouldSubmitOnEnter: boolean(
"Enter key to submit (shouldSubmitOnEnter)",
false
),
focusTrap: boolean("Trap focus (focusTrap)", false),
hasScrollingContent: boolean(
"Modal contains scrollable content (hasScrollingContent)",
false
),
modalHeading: text("Modal heading (modalHeading)", "Modal heading"),
modalLabel: text("Optional label (modalLabel)", "Label"),
modalAriaLabel: text(
"ARIA label, used only if modalLabel not provided (modalAriaLabel)",
"A label to be read by screen readers on the modal root node"
),
primaryButtonText: text(
"Primary button text (primaryButtonText)",
"Primary Button"
),
secondaryButtonText: text(
"Secondary button text (secondaryButtonText)",
"Secondary Button"
),
selectorPrimaryFocus: text(
"Primary focus element selector (selectorPrimaryFocus)",
"[data-modal-primary-focus]"
),
size: select("Size (size)", sizes),
preventCloseOnClickOutside: boolean(
"Prevent the modal from closing when clicking outside (preventCloseOnClickOutside)",
false
),
iconDescription: text(
"Close icon description (iconDescription)",
"Close the modal"
),
},
});

40
src/MultiSelect/MultiSelect.Story.svelte
View file

@ -1,40 +0,0 @@
<script>
import { Button } from "../Button";
import MultiSelect from "./MultiSelect.svelte";
$: value = "";
$: selectedIds = [];
$: items = [
{ id: "option-0", text: "Option 1" },
{ id: "option-1", text: "Option 2" },
{ id: "option-2", text: "Option 3" },
{ id: "option-3", text: "Option 4" },
{
id: "option-4",
text:
"An example option that is really long to show what should be done to handle long text",
},
];
</script>
<div>
<Button
size="small"
on:click="{() => {
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
}}"
>
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
</Button>
</div>
<div style="width: 300px; margin-top: 2rem;">
<MultiSelect
{...$$props}
id="multi-select-id"
name="multi-select-name"
placeholder="Filter..."
bind:selectedIds
bind:items
bind:value
/>
</div>

42
src/MultiSelect/MultiSelect.stories.js
View file

@ -1,42 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./MultiSelect.Story.svelte";
export default { title: "MultiSelect", decorators: [withKnobs] };
const types = {
"Default (default)": "default",
"Inline (inline)": "inline",
};
const sizes = {
"Extra large size (xl)": "xl",
"Regular size (lg)": "",
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
id: text("MultiSelect id", "multi-select-id"),
name: text("MultiSelect name", "multi-select-name"),
titleText: text("Title (titleText)", "Multiselect Title"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
filterable: boolean("Filterable (filterable)", false),
selectionFeedback: select(
"Selection feedback (selectionFeedback)",
["top", "fixed", "top-after-reopen"],
"top-after-reopen"
),
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
useTitleInItem: boolean("Show tooltip on hover", false),
type: select("UI type (Only for `<MultiSelect>`) (type)", types, "default"),
size: select("Field size (size)", sizes, "") || undefined,
label: text("Label (label)", "MultiSelect Label"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Form validation UI content (invalidText)",
"Invalid Selection"
),
},
});

28
src/Notification/Notification.Story.svelte
View file

@ -1,28 +0,0 @@
<script>
export let story = undefined;
import InlineNotification from "./InlineNotification.svelte";
import NotificationActionButton from "./NotificationActionButton.svelte";
import ToastNotification from "./ToastNotification.svelte";
</script>
{#if story === 'inline'}
<InlineNotification
{...$$props}
on:close="{() => {
console.log('on:close');
}}"
>
<div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton>
</div>
</InlineNotification>
{:else if story === 'toast'}
<ToastNotification
{...$$props}
on:close="{() => {
console.log('on:close');
}}"
style="min-width: 30rem; margin-bottom: .5rem"
/>
{/if}

48
src/Notification/Notification.stories.js
View file

@ -1,48 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./Notification.Story.svelte";
export default { title: "Notification", decorators: [withKnobs] };
const kinds = {
"Error (error)": "error",
"Info (info)": "info",
"Success (success)": "success",
"Warning (warning)": "warning",
};
export const Toast = () => ({
Component,
props: {
story: "toast",
kind: select("The notification kind (kind)", kinds, "info"),
lowContrast: boolean("Use low contrast variant (lowContrast)", false),
role: text("ARIA role (role)", "alert"),
title: text("Title (title)", "Notification title"),
subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
caption: text("Caption (caption)", "Time stamp [00:00:00]"),
iconDescription: text(
"Icon description (iconDescription)",
"describes the close button"
),
hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
},
});
export const Inline = () => ({
Component,
props: {
story: "inline",
kind: select("The notification kind (kind)", kinds, "info"),
lowContrast: boolean("Use low contrast variant (lowContrast)", false),
role: text("ARIA role (role)", "alert"),
title: text("Title (title)", "Notification title"),
subtitle: text("Subtitle (subtitle)", "Subtitle text goes here."),
caption: text("Caption (caption)", "Time stamp [00:00:00]"),
iconDescription: text(
"Icon description (iconDescription)",
"describes the close button"
),
hideCloseButton: boolean("Hide close button (hideCloseButton)", false),
action: text("Action (NotificationActionButton > $$slot#action)", "Action"),
},
});

22
src/NumberInput/NumberInput.Story.svelte
View file

@ -1,22 +0,0 @@
<script>
export let story = undefined;
import NumberInput from "./NumberInput.svelte";
import NumberInputSkeleton from "./NumberInput.Skeleton.svelte";
$: value = $$props.value;
</script>
{#if story === 'skeleton'}
<NumberInputSkeleton {...$$props} />
{:else}
<NumberInput
{...$$props}
id="number-input-id"
name="number-input-id"
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
/>
{/if}

49
src/NumberInput/NumberInput.stories.js
View file

@ -1,49 +0,0 @@
import {
withKnobs,
text,
boolean,
number,
select,
} from "@storybook/addon-knobs";
import Component from "./NumberInput.Story.svelte";
export default { title: "NumberInput", decorators: [withKnobs] };
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
size: select("Field size (size)", sizes, undefined) || undefined,
id: text("NumberInput id", "number-input-id"),
name: text("NumberInput name", "number-input-name"),
label: text("Label (label)", "Number Input label"),
hideLabel: boolean("Hide label (hideLabel)", false),
min: number("Minimum value (min)", 0),
max: number("Maximum value (max)", 100),
value: number("Value (value)", 50),
step: number("Step of up/down arrow (step)", 10),
disabled: boolean("Disabled (disabled)", false),
readonly: boolean("Read only (readonly)", false),
invalid: boolean("Show form validation UI (invalid)", false),
helperText: text("Helper text (helperText)", "Optional helper text here"),
mobile: boolean("Mobile variant (mobile)", false),
invalidText: text(
"Form validation UI content (invalidText)",
"Number is not valid"
),
light: boolean("Light variant (light)", false),
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
hideLabel: boolean("Hide label (hideLabel)", false),
},
});

34
src/OrderedList/OrderedList.Story.svelte
View file

@ -1,34 +0,0 @@
<script>
export let story = undefined;
import { ListItem } from "../ListItem";
import OrderedList from "./OrderedList.svelte";
</script>
<div>
{#if story === 'nested'}
<OrderedList>
<ListItem>
Unordered List level 1
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>
Ordered List level 2
<OrderedList nested>
<ListItem>Ordered List level 2</ListItem>
<ListItem>Ordered List level 2</ListItem>
</OrderedList>
</ListItem>
</OrderedList>
</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{:else}
<OrderedList>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
<ListItem>Ordered List level 1</ListItem>
</OrderedList>
{/if}
</div>

8
src/OrderedList/OrderedList.stories.js
View file

@ -1,8 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./OrderedList.Story.svelte";
export default { title: "OrderedList", decorators: [withKnobs] };
export const Default = () => ({ Component });
export const Nested = () => ({ Component, props: { story: "nested" } });

96
src/OverflowMenu/OverflowMenu.Story.svelte
View file

@ -1,96 +0,0 @@
<script>
export let story = undefined;
import OverflowMenu from "./OverflowMenu.svelte";
import OverflowMenuItem from "./OverflowMenuItem.svelte";
$: primaryFocus = true;
</script>
<div style="padding-left: 6rem">
{#if story === 'links'}
<OverflowMenu
{...$$props.menu}
on:close="{({ detail }) => {
console.log('close', detail);
}}"
>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 1"
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 3"
disabled
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Option 4"
/>
<OverflowMenuItem
{...$$props.menuItem}
href="https://ibm.com"
text="Danger option"
danger
/>
</OverflowMenu>
{:else if story === 'trigger'}
<OverflowMenu
{...$$props.menu}
on:close="{({ detail }) => {
console.log('close', detail);
}}"
style="width: auto"
>
<div slot="menu" style="padding: 0 1rem">Menu</div>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle
/>
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{:else}
<OverflowMenu
{...$$props.menu}
on:close="{({ detail }) => {
console.log('close', detail);
}}"
>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 1"
bind:primaryFocus
/>
<OverflowMenuItem
{...$$props.menuItem}
text="Option 2 is an example of a really long string and how we
recommend handling this"
requireTitle
/>
<OverflowMenuItem {...$$props.menuItem} text="Option 3" disabled />
<OverflowMenuItem {...$$props.menuItem} text="Option 4" />
<OverflowMenuItem {...$$props.menuItem} text="Danger option" danger />
</OverflowMenu>
{/if}
</div>

71
src/OverflowMenu/OverflowMenu.stories.js
View file

@ -1,71 +0,0 @@
import { withKnobs, select, text, boolean } from "@storybook/addon-knobs";
import Component from "./OverflowMenu.Story.svelte";
export default { title: "OverflowMenu", decorators: [withKnobs] };
const directions = {
"Bottom of the trigger button (bottom)": "bottom",
"Top of the trigger button (top)": "top",
};
export const Default = () => ({
Component,
props: {
menu: {
direction: select("Menu direction (direction)", directions, "bottom"),
ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
iconDescription: text("Icon description (iconDescription)", ""),
flipped: boolean("Flipped (flipped)", false),
light: boolean("Light (light)", false),
},
menuItem: {
disabled: boolean("Disabled (disabled)", false),
requireTitle: boolean(
"Use hover over text for menu item (requireTitle)",
false
),
},
},
});
export const WithLinks = () => ({
Component,
props: {
story: "links",
menu: {
direction: select("Menu direction (direction)", directions, "bottom"),
ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
iconDescription: text("Icon description (iconDescription)", ""),
flipped: boolean("Flipped (flipped)", false),
light: boolean("Light (light)", false),
},
menuItem: {
disabled: boolean("Disabled (disabled)", false),
requireTitle: boolean(
"Use hover over text for menu item (requireTitle)",
false
),
},
},
});
export const CustomTrigger = () => ({
Component,
props: {
story: "trigger",
menu: {
direction: select("Menu direction (direction)", directions, "bottom"),
ariaLabel: text("ARIA label (ariaLabel)", "Menu"),
iconDescription: text("Icon description (iconDescription)", ""),
flipped: boolean("Flipped (flipped)", false),
light: boolean("Light (light)", false),
},
menuItem: {
disabled: boolean("Disabled (disabled)", false),
requireTitle: boolean(
"Use hover over text for menu item (requireTitle)",
false
),
},
},
});

24
src/Pagination/Pagination.Story.svelte
View file

@ -1,24 +0,0 @@
<script>
export let story = undefined;
import Pagination from "./Pagination.svelte";
import PaginationSkeleton from "./Pagination.Skeleton.svelte";
</script>
<div style="width: 800px;">
{#if story === 'multiple'}
<Pagination {...$$props}>Pagination</Pagination>
<Pagination {...$$props}>Pagination</Pagination>
{:else if story === 'skeleton'}
<PaginationSkeleton />
{:else}
<Pagination
{...$$props}
on:update="{({ detail }) => {
console.log(detail);
}}"
>
Pagination
</Pagination>
{/if}
</div>

77
src/Pagination/Pagination.stories.js
View file

@ -1,77 +0,0 @@
import {
withKnobs,
text,
number,
boolean,
array,
} from "@storybook/addon-knobs";
import Component from "./Pagination.Story.svelte";
export default { title: "Pagination", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean("Disable backward/forward buttons (disabled)", false),
page: number("The current page (page)", 1),
totalItems: number("Total number of items (totalItems)", 103),
pagesUnknown: boolean(
"Total number of items unknown (pagesUnknown)",
false
),
pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
pageSizeInputDisabled: boolean(
"Disable page size input (pageSizeInputDisabled)",
false
),
backwardText: text(
"The description for the backward icon (backwardText)",
"Previous page"
),
forwardText: text(
"The description for the forward icon (forwardText)",
"Next page"
),
pageSize: number("Number of items per page (pageSize)", 10),
pageSizes: array("Choices of `pageSize` (pageSizes)", [10, 20, 30, 40, 50]),
itemsPerPageText: text(
"Label for `pageSizes` select UI (itemsPerPageText)",
"Items per page:"
),
},
});
export const Multiple = () => ({
Component,
props: {
story: "multiple",
disabled: boolean("Disable backward/forward buttons (disabled)", false),
page: number("The current page (page)", 1),
totalItems: number("Total number of items (totalItems)", 103),
pagesUnknown: boolean(
"Total number of items unknown (pagesUnknown)",
false
),
pageInputDisabled: boolean("Disable page input (pageInputDisabled)", false),
pageSizeInputDisabled: boolean(
"Disable page size input (pageSizeInputDisabled)",
false
),
backwardText: text(
"The description for the backward icon (backwardText)",
"Previous page"
),
forwardText: text(
"The description for the forward icon (forwardText)",
"Next page"
),
pageSize: number("Number of items per page (pageSize)", 10),
pageSizes: array("Choices of `pageSize` (pageSizes)", [10, 20, 30, 40, 50]),
itemsPerPageText: text(
"Label for `pageSizes` select UI (itemsPerPageText)",
"Items per page:"
),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

33
src/PaginationNav/PaginationNav.Story.svelte
View file

@ -1,33 +0,0 @@
<script>
export let page = 0;
import PaginationNav from "./PaginationNav.svelte";
import { Button } from "../Button";
</script>
<div style="width: 800px;">
<PaginationNav
{...$$props}
bind:page
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
on:click:button--previous="{({ detail }) => {
console.log('button--previous', detail);
}}"
on:click:button--next="{({ detail }) => {
console.log('button--next', detail);
}}"
/>
<div style="margin-top: 1.5rem">Bound page index: {page}</div>
<Button
kind="tertiary"
size="small"
style="margin-top: 1rem;"
on:click="{() => {
page = 3;
}}"
>
Set page to index 3
</Button>
</div>

17
src/PaginationNav/PaginationNav.stories.js
View file

@ -1,17 +0,0 @@
import { withKnobs, number, boolean } from "@storybook/addon-knobs";
import Component from "./PaginationNav.Story.svelte";
export default { title: "PaginationNav", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
page: number("Current page index (page)", 0),
total: number("Total number of items (total)", 10),
shown: number("Number of items to be shown (minimum 4) (shown)", 10),
loop: boolean(
"Allow user to loop through the items when reaching first / last (loop)",
false
),
},
});

58
src/ProgressIndicator/ProgressIndicator.Story.svelte
View file

@ -1,58 +0,0 @@
<script>
export let story = undefined;
import ProgressIndicator from "./ProgressIndicator.svelte";
import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
import ProgressStep from "./ProgressStep.svelte";
</script>
<div>
{#if story === 'skeleton'}
<ProgressIndicatorSkeleton {...$$props} />
{:else if story === 'interactive'}
<ProgressIndicator {...$$props}>
<ProgressStep description="Step 1: Register a onChange event" let:props>
<div {...props}>Click me</div>
</ProgressStep>
<ProgressStep
label="Really long label"
description="The progress indicator will listen for clicks on the steps"
/>
<ProgressStep
label="Tooltip and really long label"
description="The progress indicator will listen for clicks on the steps"
/>
</ProgressIndicator>
{:else}
<ProgressIndicator {...$$props}>
<ProgressStep
label="First step"
description="Step 1: Getting started with Carbon Design System"
secondaryLabel="Optional label"
on:click="{() => {
console.log('click');
}}"
/>
<ProgressStep
label="Second step with tooltip"
description="Step 2: Getting started with Carbon Design System"
secondaryLabel="Optional label"
/>
<ProgressStep
label="Third step with tooltip"
description="Step 3: Getting started with Carbon Design System"
/>
<ProgressStep
label="Fourth step"
description="Step 4: Getting started with Carbon Design System"
secondaryLabel="Example invalid step"
invalid
/>
<ProgressStep
label="Fifth step"
description="Step 5: Getting started with Carbon Design System"
disabled
/>
</ProgressIndicator>
{/if}
</div>

30
src/ProgressIndicator/ProgressIndicator.stories.js
View file

@ -1,30 +0,0 @@
import { withKnobs, boolean, number } from "@storybook/addon-knobs";
import Component from "./ProgressIndicator.Story.svelte";
export default { title: "ProgressIndicator", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
currentIndex: number("Current progress (currentIndex)", 1),
vertical: boolean("Vertical orientation (vertical)", false),
spaceEqually: boolean("Space Equally", false),
},
});
export const Interactive = () => ({
Component,
props: {
story: "interactive",
currentIndex: number("Current progress (currentIndex)", 1),
vertical: boolean("Vertical orientation (vertical)", false),
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
vertical: boolean("Vertical orientation (vertical)", false),
},
});

14
src/RadioButton/RadioButton.Story.svelte
View file

@ -1,14 +0,0 @@
<script>
export let story = undefined;
import RadioButton from "./RadioButton.svelte";
import RadioButtonSkeleton from "./RadioButton.Skeleton.svelte";
$: checked = false;
</script>
{#if story === 'skeleton'}
<RadioButtonSkeleton />
{:else}
<RadioButton {...$$props} bind:checked id="radio-1" />
{/if}

26
src/RadioButton/RadioButton.stories.js
View file

@ -1,26 +0,0 @@
import { withKnobs, text, select, boolean } from "@storybook/addon-knobs";
import Component from "./RadioButton.Story.svelte";
export default { title: "RadioButton", decorators: [withKnobs] };
const labelPositions = {
"Left (left)": "left",
"Right (right)": "right",
};
export const Default = () => ({
Component,
props: {
name: text("Form item name (name)", "test"),
value: text("Value (value)", "standard"),
labelText: text("Label text (labelText)", "Standard Radio Button"),
labelPosition: select(
"Label position (labelPosition)",
labelPositions,
"right"
),
disabled: boolean("Disabled (disabled)", false),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

15
src/RadioButtonGroup/RadioButtonGroup.Story.svelte
View file

@ -1,15 +0,0 @@
<script>
import RadioButtonGroup from "./RadioButtonGroup.svelte";
import { RadioButton } from "../RadioButton";
import { FormGroup } from "../FormGroup";
$: selected = "default-selected";
</script>
<FormGroup legendText="Radio Button heading">
<RadioButtonGroup {...$$props.group} legend="Group Legend" bind:selected>
<RadioButton {...$$props.radio} value="standard" id="radio-1" />
<RadioButton {...$$props.radio} value="default-selected" id="radio-2" />
<RadioButton {...$$props.radio} value="disabled" id="radio-3" />
</RadioButtonGroup>
</FormGroup>

54
src/RadioButtonGroup/RadioButtonGroup.stories.js
View file

@ -1,54 +0,0 @@
import { withKnobs, text, select, boolean } from "@storybook/addon-knobs";
import Component from "./RadioButtonGroup.Story.svelte";
export default { title: "RadioButtonGroup", decorators: [withKnobs] };
const values = {
standard: "standard",
"default-selected": "default-selected",
disabled: "disabled",
};
const orientations = {
"Horizontal (horizontal)": "horizontal",
"Vertical (vertical)": "vertical",
};
const labelPositions = {
"Left (left)": "left",
"Right (right)": "right",
};
export const Default = () => ({
Component,
props: {
group: {
name: text(
"The form control name (name in <RadioButtonGroup>)",
"radio-button-group"
),
valueSelected: select(
"Value of the selected button (valueSelected in <RadioButtonGroup>)",
values,
"default-selected"
),
orientation: select(
"Radio button orientation (orientation)",
orientations,
"horizontal"
),
labelPosition: select(
"Label position (labelPosition)",
labelPositions,
"right"
),
},
radio: {
disabled: boolean("Disabled (disabled in <RadioButton>)", false),
labelText: text(
"Label text (labelText in <RadioButton>)",
"Radio button label"
),
},
},
});

24
src/Search/Search.Story.svelte
View file

@ -1,24 +0,0 @@
<script>
export let story = undefined;
import Search from "./Search.svelte";
import SearchSkeleton from "./Search.Skeleton.svelte";
let value = "";
$: {
if (!value.length) {
console.log("cleared");
} else {
console.log("value", value);
}
}
</script>
<div>
{#if story === 'skeleton'}
<SearchSkeleton />
{:else}
<Search {...$$props} bind:value />
{/if}
</div>

27
src/Search/Search.stories.js
View file

@ -1,27 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./Search.Story.svelte";
export default { title: "Search", decorators: [withKnobs] };
const sizes = {
"Regular size (xl)": "xl",
"Large size (lg)": "lg",
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
size: select("Size (size)", sizes, "xl"),
light: boolean("Light variant (light)", false),
name: text("Form item name (name)", ""),
labelText: text("Label text (labelText)", "Search"),
closeButtonLabelText: text(
"The label text for the close button (closeButtonLabelText)",
"Clear search input"
),
placeholder: text("Placeholder text (placeholder)", "Search"),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

34
src/Select/Select.Story.svelte
View file

@ -1,34 +0,0 @@
<script>
export let story = undefined;
import Select from "./Select.svelte";
import SelectItem from "./SelectItem.svelte";
import SelectSkeleton from "./Select.Skeleton.svelte";
import SelectItemGroup from "./SelectItemGroup.svelte";
$: selected = "placeholder-item";
$: console.log(selected);
</script>
<div>
{#if story === 'skeleton'}
<SelectSkeleton {...$$props} />
{:else}
<Select {...$$props.select} id="select-id" name="select-name" bind:selected>
<SelectItem
value="placeholder-item"
text="Choose an option"
disabled
hidden
/>
<SelectItemGroup {...$$props.group} label="Category 1">
<SelectItem value="option-1" text="Option 1" />
<SelectItem value="option-2" text="Option 2" />
</SelectItemGroup>
<SelectItemGroup {...$$props.group} label="Category 2">
<SelectItem value="option-3" text="Option 3" />
<SelectItem value="option-4" text="Option 4" />
</SelectItemGroup>
</Select>
{/if}
</div>

46
src/Select/Select.stories.js
View file

@ -1,46 +0,0 @@
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
import Component from "./Select.Story.svelte";
export default { title: "Select", decorators: [withKnobs] };
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
select: {
size: select("Field size (size)", sizes, undefined) || undefined,
light: boolean("Light variant (light in <Select>)", false),
inline: boolean(
"Put control in-line with label (inline in <Select>)",
false
),
disabled: boolean("Disabled (disabled in <Select>)", false),
hideLabel: boolean("No label (hideLabel in <Select>)", false),
invalid: boolean("Show form validation UI (invalid in <Select>)", false),
invalidText: text(
"Form validation UI content (invalidText in <Select>)",
"A valid value is required"
),
labelText: text("Label text (helperText)", "Select"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
id: text("Select id", "select-id"),
name: text("Select name", "select-name"),
},
group: {
disabled: boolean("Disabled (disabled in <SelectItemGroup>)", false),
},
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
hideLabel: boolean("No label (hideLabel in <Select>)", false),
},
});

24
src/SkeletonPlaceholder/SkeletonPlaceholder.Story.svelte
View file

@ -1,24 +0,0 @@
<script>
import SkeletonPlaceholder from "./SkeletonPlaceholder.svelte";
</script>
<style>
:global(.my--skeleton__placeholder--small) {
height: 100px;
width: 100px;
}
:global(.my--skeleton__placeholder--medium) {
height: 150px;
width: 150px;
}
:global(.my--skeleton__placeholder--large) {
height: 250px;
width: 250px;
}
</style>
<div style="height: 250px; width: 250px;">
<SkeletonPlaceholder {...$$props} />
</div>

17
src/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
View file

@ -1,17 +0,0 @@
import { withKnobs, select } from "@storybook/addon-knobs";
import Component from "./SkeletonPlaceholder.Story.svelte";
export default { title: "SkeletonPlaceholder", decorators: [withKnobs] };
const classes = {
"my--skeleton__placeholder--small": "my--skeleton__placeholder--small",
"my--skeleton__placeholder--medium": "my--skeleton__placeholder--medium",
"my--skeleton__placeholder--large": "my--skeleton__placeholder--large",
};
export const Default = () => ({
Component,
props: {
class: select("Classes with different sizes", classes),
},
});

7
src/SkeletonText/SkeletonText.Story.svelte
View file

@ -1,7 +0,0 @@
<script>
import SkeletonText from "./SkeletonText.svelte";
</script>
<div style="width: 300px">
<SkeletonText {...$$props} />
</div>

18
src/SkeletonText/SkeletonText.stories.js
View file

@ -1,18 +0,0 @@
import { withKnobs, select, boolean, number } from "@storybook/addon-knobs";
import Component from "./SkeletonText.Story.svelte";
export default { title: "SkeletonText", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
heading: boolean("Skeleton text at a larger size (heading)"),
paragraph: boolean("Use multiple lines of text (paragraph)"),
lines: number("The number of lines in a paragraph (lines)", 3),
width: select(
"Width (in px or %) of single line of text or max-width of paragraph lines (width)",
{ "100%": "100%", "250px": "250px" },
"100%"
),
},
});

21
src/Slider/Slider.Story.svelte
View file

@ -1,21 +0,0 @@
<script>
export let story = undefined;
import Slider from "./Slider.svelte";
import SliderSkeleton from "./Slider.Skeleton.svelte";
let value = 50;
</script>
{#if story === 'skeleton'}
<SliderSkeleton {...$$props} />
{:else}
<Slider
{...$$props}
id="slider-id"
bind:value
on:change="{({ detail }) => {
console.log('on:change', detail);
}}"
/>
{/if}

39
src/Slider/Slider.stories.js
View file

@ -1,39 +0,0 @@
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
import Component from "./Slider.Story.svelte";
export default { title: "Slider", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
id: text("Slider id", "slider-id"),
name: text("Form item name (name)", ""),
inputType: text("The form element type (inputType)", "number"),
ariaLabelInput: text(
"The ARIA label for the <input> (ariaLabelInput)",
"Label for slider value"
),
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideTextInput: boolean("Without text input (hideTextInput)", false),
min: number("The minimum value (min)", 0),
max: number("The maximum value (max)", 100),
step: number("The step (step)", 1),
stepMuliplier: number(
"The step factor for Shift+arrow keys (stepMuliplier)",
4
),
labelText: text("Label text (labelText)", "Slider Label"),
minLabel: text("Label for minimum value (minLabel)", ""),
maxLabel: text("Label for maximum value (maxLabel)", ""),
hideLabel: boolean("Hide label (hideLabel)", false),
},
});
export const Skeleton = () => ({
Component,
props: {
story: "skeleton",
hideLabel: boolean("Hide label (hideLabel)", false),
},
});

93
src/StructuredList/StructuredList.Story.svelte
View file

@ -1,93 +0,0 @@
<script>
export let story = undefined;
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import StructuredListBody from "./StructuredListBody.svelte";
import StructuredListCell from "./StructuredListCell.svelte";
import StructuredListHead from "./StructuredListHead.svelte";
import StructuredListInput from "./StructuredListInput.svelte";
import StructuredListRow from "./StructuredListRow.svelte";
import StructuredListSkeleton from "./StructuredList.Skeleton.svelte";
import StructuredList from "./StructuredList.svelte";
$: selected = "row-1-value";
</script>
<div>
{#if story === 'skeleton'}
<div style="width: 800px">
<StructuredListSkeleton />
</div>
{:else if story === 'selection'}
<StructuredList selection border bind:selected>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
{#each [0, 1, 2, 3] as item, i (item)}
<StructuredListRow label for="row-{i}">
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>Row {i}</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
Pellentesque vulputate nisl a porttitor interdum.
</StructuredListCell>
<StructuredListInput
id="row-{i}"
value="row-{i}-value"
title="row-{i}-title"
name="row-{i}-name"
/>
<StructuredListCell>
<CheckmarkFilled16
class="bx--structured-list-svg"
aria-label="select an option"
title="select an option"
/>
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
{:else}
<StructuredList>
<StructuredListHead>
<StructuredListRow head>
<StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell>
</StructuredListRow>
</StructuredListHead>
<StructuredListBody>
<StructuredListRow>
<StructuredListCell noWrap>Row 1</StructuredListCell>
<StructuredListCell>Row 1</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
<StructuredListRow>
<StructuredListCell noWrap>Row 2</StructuredListCell>
<StructuredListCell>Row 2</StructuredListCell>
<StructuredListCell>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
vulputate nisl a porttitor interdum.
</StructuredListCell>
</StructuredListRow>
</StructuredListBody>
</StructuredList>
{/if}
</div>

10
src/StructuredList/StructuredList.stories.js
View file

@ -1,10 +0,0 @@
import { withKnobs } from "@storybook/addon-knobs";
import Component from "./StructuredList.Story.svelte";
export default { title: "StructuredList", decorators: [withKnobs] };
export const Default = () => ({ Component });
export const Selection = () => ({ Component, props: { story: "selection" } });
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

40
src/Tabs/Tabs.Story.svelte
View file

@ -1,40 +0,0 @@
<script>
export let story = undefined;
import Tab from "./Tab.svelte";
import TabContent from "./TabContent.svelte";
import Tabs from "./Tabs.svelte";
import TabsSkeleton from "./TabsSkeleton.svelte";
const { tabProps, ...tabsProps } = $$props;
$: selected = 0;
</script>
{#if story === 'skeleton'}
<TabsSkeleton />
{:else if story === 'container'}
<Tabs {...tabsProps} type="container" bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
</div>
</Tabs>
{:else}
<Tabs {...tabsProps} bind:selected>
<Tab {...tabProps} label="Tab label 1" />
<Tab {...tabProps} label="Tab label 2" />
<Tab {...tabProps} label="Tab label 3" disabled />
<Tab {...tabProps} label="Tab label 4" />
<div slot="content">
<TabContent>Content 1</TabContent>
<TabContent>Content 2</TabContent>
<TabContent>Content 3</TabContent>
<TabContent>Content 4</TabContent>
</div>
</Tabs>
{/if}

48
src/Tabs/Tabs.stories.js
View file

@ -1,48 +0,0 @@
import { withKnobs, boolean, number, text } from "@storybook/addon-knobs";
import Component from "./Tabs.Story.svelte";
export default { title: "Tabs", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
tabProps: {
disabled: boolean("Disabled (disabled in <Tab>)", false),
href: text("The href for tab (href in <Tab>)", "#"),
role: text("ARIA role (role in <Tab>)", "presentation"),
tabindex: text("Tab index (tabindex in <Tab>)", "0"),
},
tabsProps: {
className: "some-class",
selected: number("The index of the selected tab (selected in <Tabs>)", 1),
triggerHref: text(
"The href of trigger button for narrow mode (triggerHref in <Tabs>)",
"#"
),
role: text("ARIA role (role in <Tabs>)", "navigation"),
iconDescription: text(
"The description of the trigger icon for narrow mode (iconDescription in <Tabs>)",
"show menu options"
),
tabContentClassName: text(
"The className for the child `<TabContent>` components",
"tab-content"
),
},
},
});
export const Container = () => ({
Component,
props: {
story: "container",
tabProps: {
disabled: boolean("Disabled (disabled in <Tab>)", false),
href: text("The href for tab (href in <Tab>)", "#"),
role: text("ARIA role (role in <Tab>)", "presentation"),
tabindex: text("Tab index (tabindex in <Tab>)", "0"),
},
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

24
src/Tag/Tag.Story.svelte
View file

@ -1,24 +0,0 @@
<script>
export let slot = undefined;
export let story = undefined;
import Tag from "./Tag.svelte";
import TagSkeleton from "./Tag.Skeleton.svelte";
</script>
<div>
{#if story === 'filter'}
<Tag
{...$$restProps}
on:click="{() => {
console.log('click');
}}"
>
{slot}
</Tag>
{:else if story === 'skeleton'}
<TagSkeleton />
{:else}
<Tag {...$$restProps} class="class">{slot}</Tag>
{/if}
</div>

54
src/Tag/Tag.stories.js
View file

@ -1,54 +0,0 @@
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./Tag.Story.svelte";
export default { title: "Tag", decorators: [withKnobs] };
const TYPES = {
red: "Red",
magenta: "Magenta",
purple: "Purple",
blue: "Blue",
cyan: "Cyan",
teal: "Teal",
green: "Green",
gray: "Gray",
"cool-gray": "Cool-Gray",
"warm-gray": "Warm-Gray",
"high-contrast": "High-Contrast",
};
export const Default = () => ({
Component,
props: {
type: select(
"Tag type (type)",
Object.keys(TYPES).reduce(
(items, item) => ({ ...items, [`${item} (${item})`]: item }),
{}
),
"red"
),
disabled: boolean("Disabled (disabled)", false),
slot: text("Content ($$slot)", "This is a tag"),
},
});
export const Filter = () => ({
Component,
props: {
story: "filter",
filter: true,
type: select(
"Tag type (type)",
Object.keys(TYPES).reduce(
(items, item) => ({ ...items, [`${item} (${item})`]: item }),
{}
),
"red"
),
disabled: boolean("Disabled (disabled)", false),
slot: text("Content ($$slot)", "This is a tag"),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

17
src/TextArea/TextArea.Story.svelte
View file

@ -1,17 +0,0 @@
<script>
export let story = undefined;
import TextArea from "./TextArea.svelte";
import TextAreaSkeleton from "./TextArea.Skeleton.svelte";
$: ref = null;
$: console.log(ref);
$: value = "";
$: console.log("bound value:", value);
</script>
{#if story === 'skeleton'}
<TextAreaSkeleton {...$$props} />
{:else}
<TextArea {...$$props} bind:value bind:ref />
{/if}

27
src/TextArea/TextArea.stories.js
View file

@ -1,27 +0,0 @@
import { withKnobs, boolean, text, number } from "@storybook/addon-knobs";
import Component from "./TextArea.Story.svelte";
export default { title: "TextArea", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
id: text("TextArea id", "text-area-id"),
name: text("TextArea name", "text-area-name"),
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Area label"),
invalid: boolean("Show form validation UI (invalid)", false),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalidText: text(
"Content of form validation UI (invalidText)",
"A valid value is required"
),
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
cols: number("Columns (columns)", 50),
rows: number("Rows (rows)", 4),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

84
src/TextInput/TextInput.Story.svelte
View file

@ -1,84 +0,0 @@
<script>
export let story = undefined;
import { FluidForm } from "../FluidForm";
import PasswordInput from "./PasswordInput.svelte";
import TextInput from "./TextInput.svelte";
import TextInputSkeleton from "./TextInput.Skeleton.svelte";
$: value = "";
$: type = "password";
$: ref = null;
$: console.log(ref);
</script>
{#if story === 'skeleton'}
<div
aria-label="loading text input"
aria-live="assertive"
role="status"
tabindex="0"
>
<TextInputSkeleton />
<br />
<TextInputSkeleton hideLabel />
</div>
{:else if story === 'password-visibility'}
<PasswordInput
{...$$props}
aria-level=""
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
/>
{:else if story === 'controlled'}
<PasswordInput
{...$$props}
type="{type}"
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
/>
<div>
<button
on:click="{() => {
type = 'text';
}}"
>
Show password
</button>
<button
on:click="{() => {
type = 'password';
}}"
>
Hide password
</button>
</div>
{:else if story === 'fluid'}
<FluidForm>
<TextInput
bind:ref
{...$$props}
bind:value
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
on:change="{() => {
console.log('change');
}}"
/>
</FluidForm>
{:else}
<TextInput
bind:ref
{...$$props}
bind:value
on:keydown="{(e) => {
console.log('on:keydown', e);
}}"
on:change="{() => {
console.log('change');
}}"
/>
{/if}

143
src/TextInput/TextInput.stories.js
View file

@ -1,143 +0,0 @@
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
import Component from "./TextInput.Story.svelte";
export default { title: "TextInput", decorators: [withKnobs] };
const sizes = {
"Extra large size (xl)": "xl",
"Default size": undefined,
"Small size (sm)": "sm",
};
export const Default = () => ({
Component,
props: {
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Input label"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Content of form validation UI (invalidText)",
"A valid value is required"
),
warn: boolean("Show warning state (warn)", false),
warnText: text(
"Warning state text (warnText)",
"This will overwrite your current settings"
),
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
inline: boolean("Inline variant (inline)", false),
id: text("TextInput id", "text-input-id"),
name: text("TextInput name", "text-input-name"),
},
});
export const Fluid = () => ({
Component,
props: {
story: "fluid",
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Input label"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Content of form validation UI (invalidText)",
"A valid value is required"
),
warn: boolean("Show warning state (warn)", false),
warnText: text(
"Warning state text (warnText)",
"This will overwrite your current settings"
),
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
inline: boolean("Inline variant (inline)", false),
id: text("TextInput id", "text-input-id"),
name: text("TextInput name", "text-input-name"),
},
});
export const TogglePasswordVisibility = () => ({
Component,
props: {
story: "password-visibility",
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Input label"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Content of form validation UI (invalidText)",
"A valid value is required"
),
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
id: text("TextInput id", "text-input-id"),
name: text("TextInput name", "text-input-name"),
tooltipPosition: select(
"Tooltip position (tooltipPosition)",
["top", "right", "bottom", "left"],
"bottom"
),
tooltipAlignment: select(
"Tooltip alignment (tooltipAlignment)",
["start", "center", "end"],
"center"
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
"Hide password"
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
"Show password"
),
},
});
export const ControlledTogglePasswordVisibility = () => ({
Component,
props: {
story: "controlled",
size: select("Field size (size)", sizes, undefined) || undefined,
disabled: boolean("Disabled (disabled)", false),
light: boolean("Light variant (light)", false),
hideLabel: boolean("No label (hideLabel)", false),
labelText: text("Label text (labelText)", "Text Input label"),
helperText: text("Helper text (helperText)", "Optional helper text here"),
invalid: boolean("Show form validation UI (invalid)", false),
invalidText: text(
"Content of form validation UI (invalidText)",
"A valid value is required"
),
placeholder: text("Placeholder text (placeholder)", "Placeholder text."),
id: text("TextInput id", "text-input-id"),
name: text("TextInput name", "text-input-name"),
tooltipPosition: select(
"Tooltip position (tooltipPosition)",
["top", "right", "bottom", "left"],
"bottom"
),
tooltipAlignment: select(
"Tooltip alignment (tooltipAlignment)",
["start", "center", "end"],
"center"
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
"Hide password"
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
"Show password"
),
},
});
export const Skeleton = () => ({ Component, props: { story: "skeleton" } });

73
src/Tile/Tile.Story.svelte
View file

@ -1,73 +0,0 @@
<script>
export let story = undefined;
import ClickableTile from "./ClickableTile.svelte";
import ExpandableTile from "./ExpandableTile.svelte";
import RadioTile from "./RadioTile.svelte";
import SelectableTile from "./SelectableTile.svelte";
import Tile from "./Tile.svelte";
import TileGroup from "./TileGroup.svelte";
const radioTiles = [
{ value: "standard", id: "tile-1", labelText: "Selectable Tile" },
{ value: "default-selected", id: "tile-2", labelText: "Selectable Tile" },
{ value: "selected", id: "tile-3", labelText: "Selectable Tile" },
];
$: selected = radioTiles[1].value;
$: selectedTile1 = false;
</script>
<div>
{#if story === 'filter'}
<Tile {...$$props} />
{:else if story === 'clickable'}
<ClickableTile {...$$props}>Clickable Tile</ClickableTile>
{:else if story === 'multi-select'}
<div role="group" aria-label="selectable tiles">
<SelectableTile
{...$$props}
id="tile-1"
name="tiles"
bind:selected="{selectedTile1}"
on:select="{({ detail }) => {
console.log('on:select', detail);
}}"
on:deselect="{({ detail }) => {
console.log('on:deselect', detail);
}}"
>
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-2" name="tiles">
Multi-select Tile
</SelectableTile>
<SelectableTile {...$$props} id="tile-3" name="tiles">
Multi-select Tile
</SelectableTile>
</div>
{:else if story === 'selectable'}
<TileGroup legend="Selectable Tile Group" bind:selected>
{#each radioTiles as { value, id, labelText }, i (id)}
<RadioTile
{...$$props}
value="{value}"
id="{id}"
labelText="{labelText}"
on:keydown="{() => {
console.log('keydown');
}}"
>
Selectable Tile
</RadioTile>
{/each}
</TileGroup>
{:else if story === 'expandable'}
<ExpandableTile {...$$props}>
<div slot="above" style="height: 200px">Above the fold content here</div>
<div slot="below" style="height: 400px">Below the fold content here</div>
</ExpandableTile>
{:else}
<Tile {...$$props}>Default Tile</Tile>
{/if}
</div>

57
src/Tile/Tile.stories.js
View file

@ -1,57 +0,0 @@
import { withKnobs, number, boolean, text } from "@storybook/addon-knobs";
import Component from "./Tile.Story.svelte";
export default { title: "Tile", decorators: [withKnobs] };
export const Default = () => ({
Component,
props: { light: boolean("Light variant (light)", false) },
});
export const Clickable = () => ({
Component,
props: {
story: "clickable",
href: text("Href for clickable UI (href)", "javascript:void(0)"),
light: boolean("Light variant (light)", false),
},
});
export const MultiSelect = () => ({
Component,
props: {
story: "multi-select",
selected: boolean("Selected (selected)", false),
light: boolean("Light variant (light)", false),
},
});
MultiSelect.story = { name: "Multi-select" };
export const Selectable = () => ({
Component,
props: {
story: "selectable",
name: text("Form item name (name in <RadioTile>)", "tiles"),
light: boolean("Light variant (light)", false),
},
});
export const Expandable = () => ({
Component,
props: {
story: "expandable",
tabindex: text("Tab index (tabindex)", "0"),
expanded: boolean("Expanded (expanded)", false),
tileMaxHeight: number("Max height (tileMaxHeight)", 0),
tileCollapsedIconText: text(
"Collapsed icon text (tileCollapsedIconText)",
"Interact to Expand tile"
),
tileExpandedIconText: text(
"Collapsed icon text (tileExpandedIconText)",
"Interact to Collapse tile"
),
light: boolean("Light variant (light)", false),
},
});

29
src/TimePicker/TimePicker.Story.svelte
View file

@ -1,29 +0,0 @@
<script>
import { SelectItem } from "../Select";
import TimePicker from "./TimePicker.svelte";
import TimePickerSelect from "./TimePickerSelect.svelte";
$: value = "";
$: select1 = "PM";
$: select2 = "Time zone 1";
$: console.log(value, select1, select2);
</script>
<TimePicker id="time-picker" {...$$props.timepicker} bind:value>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-1"
bind:value="{select1}"
>
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
<TimePickerSelect
{...$$props.select}
id="time-picker-select-2"
bind:value="{select2}"
>
<SelectItem value="Time zone 1" text="Time zone 1" />
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>

Some files were not shown because too many files have changed in this diff Show more