mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: remove storybook
This commit is contained in:
Eric Liu
parent
856086dc71
commit
378fe06e03
116 changed files with 103 additions and 14249 deletions
|
|
@ -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}
|
||||
|
|
@ -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>)",
|
||||
""
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue