diff --git a/.gitignore b/.gitignore index dc2a3455..b59f2c48 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ /coverage /lib /node_modules -/storybook-static /css .DS_Store yarn-debug.log* diff --git a/.prettierignore b/.prettierignore index 1d5e73b4..89e9c684 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,11 +1,9 @@ /coverage /lib -/storybook-static /css /**/__sapper__ /**/.routify /**/dist /**/client /**/build -.storybook *.svx \ No newline at end of file diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index b330d149..00000000 --- a/.prettierrc +++ /dev/null @@ -1 +0,0 @@ -{ "svelteStrictMode": true, "svelteBracketNewLine": true } \ No newline at end of file diff --git a/.storybook/addons.js b/.storybook/addons.js deleted file mode 100644 index ab14032a..00000000 --- a/.storybook/addons.js +++ /dev/null @@ -1,2 +0,0 @@ -import "@storybook/addon-knobs/register"; -import "@storybook/addon-storysource/register"; diff --git a/.storybook/config.js b/.storybook/config.js deleted file mode 100644 index 94762410..00000000 --- a/.storybook/config.js +++ /dev/null @@ -1,4 +0,0 @@ -import { configure } from "@storybook/svelte"; -import "../css/g10.css"; - -configure(require.context("../src", true, /\.stories\.js$/), module); diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html deleted file mode 100644 index 15966e2e..00000000 --- a/.storybook/preview-body.html +++ /dev/null @@ -1,8 +0,0 @@ - diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js deleted file mode 100644 index 384c224f..00000000 --- a/.storybook/webpack.config.js +++ /dev/null @@ -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; -}; diff --git a/.github/CODEOWNERS b/CODEOWNERS similarity index 100% rename from .github/CODEOWNERS rename to CODEOWNERS diff --git a/package.json b/package.json index 5773f647..d16ae61a 100644 --- a/package.json +++ b/package.json @@ -7,32 +7,23 @@ "main": "./lib/index.js", "module": "./lib/index.mjs", "types": "./types/index.d.ts", + "sideEffects": false, "scripts": { - "start": "start-storybook -p 9090", - "build": "build-storybook", "prettier": "prettier --write './**/*.{svelte,js,md}'", "build:css": "node scripts/build-css", "prepack": "node scripts/build-css && rollup -c", "publish-examples": "node scripts/publish-examples" }, - "sideEffects": false, "dependencies": { "carbon-icons-svelte": "^10.17.0", "flatpickr": "4.6.3" }, "devDependencies": { - "@babel/core": "^7.10.5", - "@babel/preset-env": "^7.10.4", "@carbon/themes": "^10.18.0", "@rollup/plugin-commonjs": "^15.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", "autoprefixer": "^9.8.6", - "babel-loader": "^8.0.6", "carbon-components-10.21": "npm:carbon-components@10.21", "comment-parser": "^0.7.5", "gh-pages": "^3.1.0", @@ -49,11 +40,20 @@ "svelte-loader": "^2.13.6", "typescript": "^4.0.2" }, - "babel": { - "presets": [ - "@babel/preset-env" + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, + "lint-staged": { + "*.{svelte,md,js,json}": [ + "prettier --write" ] }, + "prettier": { + "svelteStrictMode": true, + "svelteBracketNewLine": true + }, "repository": { "type": "git", "url": "https://github.com/IBM/carbon-components-svelte.git" @@ -86,15 +86,5 @@ "name": "Adan Ulloa", "email": "adanug@mx1.ibm.com" } - ], - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, - "lint-staged": { - "*.{svelte,md,js,json}": [ - "prettier --write" - ] - } + ] } diff --git a/src/Accordion/Accordion.Story.svelte b/src/Accordion/Accordion.Story.svelte deleted file mode 100644 index fc1870f7..00000000 --- a/src/Accordion/Accordion.Story.svelte +++ /dev/null @@ -1,54 +0,0 @@ - - -{#if story === 'skeleton'} -
- -
-{:else} - - -

- 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. -

-
- -

- 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. -

-
- -

- 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. -

-
- -
- Section 4 title ( the title can be a node ) -
-

- 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. -

-
-
-{/if} diff --git a/src/Accordion/Accordion.stories.js b/src/Accordion/Accordion.stories.js deleted file mode 100644 index 4dd33cce..00000000 --- a/src/Accordion/Accordion.stories.js +++ /dev/null @@ -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), - }, -}); diff --git a/src/Breadcrumb/Breadcrumb.Story.svelte b/src/Breadcrumb/Breadcrumb.Story.svelte deleted file mode 100644 index 732e63f5..00000000 --- a/src/Breadcrumb/Breadcrumb.Story.svelte +++ /dev/null @@ -1,36 +0,0 @@ - - -{#if story === 'current page'} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - -{:else if story === 'current page with aria-current'} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - -{:else if story === 'skeleton'} - -{:else} - - - Breadcrumb 1 - - Breadcrumb 2 - Breadcrumb 3 - -{/if} diff --git a/src/Breadcrumb/Breadcrumb.stories.js b/src/Breadcrumb/Breadcrumb.stories.js deleted file mode 100644 index 6baf69e3..00000000 --- a/src/Breadcrumb/Breadcrumb.stories.js +++ /dev/null @@ -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" }, -}); diff --git a/src/Button/Button.Story.svelte b/src/Button/Button.Story.svelte deleted file mode 100644 index 1210163f..00000000 --- a/src/Button/Button.Story.svelte +++ /dev/null @@ -1,73 +0,0 @@ - - -
- {#if story === 'skeleton'} - -   - -   - - {:else if story === 'inline'} - - - - - {:else} - -   - -   - -   - - {/if} -
diff --git a/src/Button/Button.stories.js b/src/Button/Button.stories.js deleted file mode 100644 index 425d86e6..00000000 --- a/src/Button/Button.stories.js +++ /dev/null @@ -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" } }); diff --git a/src/Checkbox/Checkbox.Story.svelte b/src/Checkbox/Checkbox.Story.svelte deleted file mode 100644 index 8224b329..00000000 --- a/src/Checkbox/Checkbox.Story.svelte +++ /dev/null @@ -1,48 +0,0 @@ - - -{#if story === 'skeleton'} -
- -
-{:else if story === 'unchecked'} -
- Checkbox heading - - -
-{:else} -
- Checkbox heading - - -
-{/if} diff --git a/src/Checkbox/Checkbox.stories.js b/src/Checkbox/Checkbox.stories.js deleted file mode 100644 index 850f4ad6..00000000 --- a/src/Checkbox/Checkbox.stories.js +++ /dev/null @@ -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" } }); diff --git a/src/CodeSnippet/CodeSnippet.Story.svelte b/src/CodeSnippet/CodeSnippet.Story.svelte deleted file mode 100644 index ffdeb131..00000000 --- a/src/CodeSnippet/CodeSnippet.Story.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -
- {#if story === 'skeleton'} -
- - -
- {:else if story === 'inline'} - {'node -v'} - {:else if story === 'single line'} - - {'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!'} - - {:else if story === 'multi line'} - - {`@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 -);`} - - {/if} -
diff --git a/src/CodeSnippet/CodeSnippet.stories.js b/src/CodeSnippet/CodeSnippet.stories.js deleted file mode 100644 index cd73f099..00000000 --- a/src/CodeSnippet/CodeSnippet.stories.js +++ /dev/null @@ -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" } }); diff --git a/src/ComboBox/ComboBox.Story.svelte b/src/ComboBox/ComboBox.Story.svelte deleted file mode 100644 index 8e8fb688..00000000 --- a/src/ComboBox/ComboBox.Story.svelte +++ /dev/null @@ -1,72 +0,0 @@ - - -

- items must be an array of objects; mandatory fields are `id` and `text`. -

-
-  {'items = Array<{ id: string; text: string; }>'}
-
-
- - -
-
- -
diff --git a/src/ComboBox/ComboBox.stories.js b/src/ComboBox/ComboBox.stories.js deleted file mode 100644 index ec2ae05c..00000000 --- a/src/ComboBox/ComboBox.stories.js +++ /dev/null @@ -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", - }, -}); diff --git a/src/ComposedModal/ComposedModal.Story.svelte b/src/ComposedModal/ComposedModal.Story.svelte deleted file mode 100644 index c4a89535..00000000 --- a/src/ComposedModal/ComposedModal.Story.svelte +++ /dev/null @@ -1,183 +0,0 @@ - - -{#if story === undefined} - - - -
- - -
-

- Please see ModalWrapper for more examples and demo of the functionality. -

- {#if modalBody.hasScrollingContent} -

- 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.{' '} -

- {/if} -
- -
-{/if} - -{#if story === 'child nodes'} - - -

Testing

-
- -

- Please see ModalWrapper for more examples and demo of the functionality. -

- {#if modalBody.hasScrollingContent} -

- 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.{' '} -

- {/if} -
- - - - -
-{/if} - -{#if story === 'title'} - - - - - -{/if} - -{#if story === 'trigger'} -
- -
- - - -

- Please see ModalWrapper for more examples and demo of the functionality. -

- {#if modalBody.hasScrollingContent} -

- 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.{' '} -

-

- 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.{' '} -

-

- 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.{' '} -

-

Lorem ipsum

-

- 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.{' '} -

-

- 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.{' '} -

-

- 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.{' '} -

-

- 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.{' '} -

- {/if} -
- -
-{/if} diff --git a/src/ComposedModal/ComposedModal.stories.js b/src/ComposedModal/ComposedModal.stories.js deleted file mode 100644 index b9c3b4f4..00000000 --- a/src/ComposedModal/ComposedModal.stories.js +++ /dev/null @@ -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 )", 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 )", "Optional Label"), - title: text("Optional title (title in )", "Example"), - iconDescription: text( - "Close icon description (iconDescription in )", - "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 )", - "Save" - ), - primaryButtonDisabled: boolean( - "Primary button disabled (primaryButtonDisabled in )", - false - ), - secondaryButtonText: text( - "Secondary button text (secondaryButtonText in )", - "" - ), - }, - }, -}); - -export const ChildNodes = () => ({ - Component, - props: { - story: "child nodes", - composedModal: { - open: boolean("Open (open in )", 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 )", "Optional Label"), - title: text("Optional title (title in )", "Example"), - iconDescription: text( - "Close icon description (iconDescription in )", - "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 )", 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 )", "Optional Label"), - title: text("Optional title (title in )", "Example"), - iconDescription: text( - "Close icon description (iconDescription in )", - "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 )", - "Save" - ), - primaryButtonDisabled: boolean( - "Primary button disabled (primaryButtonDisabled in )", - false - ), - secondaryButtonText: text( - "Secondary button text (secondaryButtonText in )", - "" - ), - }, - }, -}); - -export const Trigger = () => ({ - Component, - props: { - story: "trigger", - composedModal: { - open: boolean("Open (open in )", 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 )", "Optional Label"), - title: text("Optional title (title in )", "Example"), - iconDescription: text( - "Close icon description (iconDescription in )", - "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 )", - "Save" - ), - primaryButtonDisabled: boolean( - "Primary button disabled (primaryButtonDisabled in )", - false - ), - secondaryButtonText: text( - "Secondary button text (secondaryButtonText in )", - "" - ), - }, - }, -}); diff --git a/src/ContentSwitcher/ContentSwitcher.Story.svelte b/src/ContentSwitcher/ContentSwitcher.Story.svelte deleted file mode 100644 index c074ac56..00000000 --- a/src/ContentSwitcher/ContentSwitcher.Story.svelte +++ /dev/null @@ -1,53 +0,0 @@ - - -{#if story === 'selected'} - - - - - -{:else} - - - - -
- - Third section -
-
-
-
- Programmatically set to second index -
-{/if} diff --git a/src/ContentSwitcher/ContentSwitcher.stories.js b/src/ContentSwitcher/ContentSwitcher.stories.js deleted file mode 100644 index 676b4898..00000000 --- a/src/ContentSwitcher/ContentSwitcher.stories.js +++ /dev/null @@ -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), - }, -}); diff --git a/src/CopyButton/CopyButton.Story.svelte b/src/CopyButton/CopyButton.Story.svelte deleted file mode 100644 index 18bed6c6..00000000 --- a/src/CopyButton/CopyButton.Story.svelte +++ /dev/null @@ -1,13 +0,0 @@ - - - diff --git a/src/CopyButton/CopyButton.stories.js b/src/CopyButton/CopyButton.stories.js deleted file mode 100644 index 61dee57e..00000000 --- a/src/CopyButton/CopyButton.stories.js +++ /dev/null @@ -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" - ), - }, -}); diff --git a/src/DataTable/DataTable.Story.svelte b/src/DataTable/DataTable.Story.svelte deleted file mode 100644 index 4d94d049..00000000 --- a/src/DataTable/DataTable.Story.svelte +++ /dev/null @@ -1,154 +0,0 @@ - - -{#if story === 'composed'} - - - - - - {#each props.headers as header, i (header.key)} - - {header.header} - - {/each} - - - - {#each props.rows as row, i} - - {#each row.cells as cell, j} - {cell.value} - {/each} - - {/each} - -
-
-
-{:else if story === 'sortable'} - -{:else} - -{/if} diff --git a/src/DataTable/DataTable.stories.js b/src/DataTable/DataTable.stories.js deleted file mode 100644 index 0e23445d..00000000 --- a/src/DataTable/DataTable.stories.js +++ /dev/null @@ -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), - }, -}); diff --git a/src/DataTableSkeleton/DataTable.stories.js b/src/DataTableSkeleton/DataTable.stories.js deleted file mode 100644 index 937d85fb..00000000 --- a/src/DataTableSkeleton/DataTable.stories.js +++ /dev/null @@ -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), - }, -}); diff --git a/src/DataTableSkeleton/DataTableSkeleton.Story.svelte b/src/DataTableSkeleton/DataTableSkeleton.Story.svelte deleted file mode 100644 index 778683ba..00000000 --- a/src/DataTableSkeleton/DataTableSkeleton.Story.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - -
- -
diff --git a/src/DatePicker/DatePicker.Story.svelte b/src/DatePicker/DatePicker.Story.svelte deleted file mode 100644 index 4a92cbcc..00000000 --- a/src/DatePicker/DatePicker.Story.svelte +++ /dev/null @@ -1,67 +0,0 @@ - - -{#if story === 'skeleton'} - -{:else if story === 'single'} -
- - - - -
-{:else if story === 'range'} - - - - -{:else} - - - -{/if} diff --git a/src/DatePicker/DatePicker.stories.js b/src/DatePicker/DatePicker.stories.js deleted file mode 100644 index 2c2ae900..00000000 --- a/src/DatePicker/DatePicker.stories.js +++ /dev/null @@ -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 )", false), - short: boolean("Use shorter width (short in )", 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 )", - "Date Picker label" - ), - hideLabel: boolean("Hide label (hideLabel)", false), - pattern: select( - "The date format (pattern in )", - patterns, - "d{1,2}/d{4}" - ), - placeholder: text( - "Placeholder text (placeholder in )", - "mm/dd/yyyy" - ), - disabled: boolean("Disabled (disabled in )", false), - invalid: boolean( - "Show form validation UI (invalid in )", - false - ), - invalidText: text( - "Form validation UI content (invalidText in )", - "A valid value is required" - ), - iconDescription: text( - "Icon description (iconDescription in )", - "Icon description" - ), - }, - }, -}); - -Default.story = { name: "Default (simple)" }; - -export const Single = () => ({ - Component, - props: { - story: "single", - datePicker: { - id: "date-picker", - light: boolean("Light variant (light in )", false), - dateFormat: text("The date format (dateFormat in )", "m/d/Y"), - }, - datePickerInput: { - id: "date-picker-input-id", - size: select("Field size (size)", sizes, undefined) || undefined, - labelText: text( - "Label text (labelText in )", - "Date Picker label" - ), - hideLabel: boolean("Hide label (hideLabel)", false), - pattern: select( - "The date format (pattern in )", - patterns, - "d{1,2}/d{4}" - ), - placeholder: text( - "Placeholder text (placeholder in )", - "mm/dd/yyyy" - ), - disabled: boolean("Disabled (disabled in )", false), - invalid: boolean( - "Show form validation UI (invalid in )", - false - ), - invalidText: text( - "Form validation UI content (invalidText in )", - "A valid value is required" - ), - iconDescription: text( - "Icon description (iconDescription in )", - "Icon description" - ), - }, - }, -}); - -export const Range = () => ({ - Component, - props: { - story: "range", - datePicker: { - id: "date-picker", - light: boolean("Light variant (light in )", false), - dateFormat: text("The date format (dateFormat in )", "m/d/Y"), - }, - datePickerInput: { - id: "date-picker-input-id", - size: select("Field size (size)", sizes, undefined) || undefined, - labelText: text( - "Label text (labelText in )", - "Date Picker label" - ), - hideLabel: boolean("Hide label (hideLabel)", false), - pattern: select( - "The date format (pattern in )", - patterns, - "d{1,2}/d{4}" - ), - placeholder: text( - "Placeholder text (placeholder in )", - "mm/dd/yyyy" - ), - disabled: boolean("Disabled (disabled in )", false), - invalid: boolean( - "Show form validation UI (invalid in )", - false - ), - invalidText: text( - "Form validation UI content (invalidText in )", - "A valid value is required" - ), - iconDescription: text( - "Icon description (iconDescription in )", - "Icon description" - ), - }, - }, -}); - -export const Skeleton = () => ({ Component, props: { story: "skeleton" } }); diff --git a/src/Dropdown/Dropdown.Story.svelte b/src/Dropdown/Dropdown.Story.svelte deleted file mode 100644 index eb2619ed..00000000 --- a/src/Dropdown/Dropdown.Story.svelte +++ /dev/null @@ -1,45 +0,0 @@ - - -{#if story === 'skeleton'} -
- -   - -
-{:else} -

- items must be an array of objects; mandatory fields are `id` and - `text`. -

-
-    {'items = Array<{ id: string; text: string; }>'}
-  
-
- -
-
- -
-{/if} diff --git a/src/Dropdown/Dropdown.stories.js b/src/Dropdown/Dropdown.stories.js deleted file mode 100644 index 74467716..00000000 --- a/src/Dropdown/Dropdown.stories.js +++ /dev/null @@ -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" } }); diff --git a/src/FileUploader/FileUploader.Story.svelte b/src/FileUploader/FileUploader.Story.svelte deleted file mode 100644 index 17ebfffd..00000000 --- a/src/FileUploader/FileUploader.Story.svelte +++ /dev/null @@ -1,64 +0,0 @@ - - -
- {#if story === 'button'} - - {:else if story === 'drop container'} - - {:else if story === 'item'} - - {:else if story === 'uploader'} -
- - -
- {:else if story === 'skeleton'} -
- -
- {/if} -
diff --git a/src/FileUploader/FileUploader.stories.js b/src/FileUploader/FileUploader.stories.js deleted file mode 100644 index 728b0b6d..00000000 --- a/src/FileUploader/FileUploader.stories.js +++ /dev/null @@ -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" } }); diff --git a/src/FluidForm/FluidForm.Story.svelte b/src/FluidForm/FluidForm.Story.svelte deleted file mode 100644 index 51a4c856..00000000 --- a/src/FluidForm/FluidForm.Story.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - diff --git a/src/FluidForm/FluidForm.stories.js b/src/FluidForm/FluidForm.stories.js deleted file mode 100644 index 12ca0ab9..00000000 --- a/src/FluidForm/FluidForm.stories.js +++ /dev/null @@ -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, -}); diff --git a/src/Form/Form.Story.svelte b/src/Form/Form.Story.svelte deleted file mode 100644 index 4698600d..00000000 --- a/src/Form/Form.Story.svelte +++ /dev/null @@ -1,111 +0,0 @@ - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -