mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 19:21:26 +00:00
refactor: use $$restProps API
- add ref prop for applicable components (#196) - add slot to Content Switcher `Switch` component (#183) - remove fillArray, css utilities
This commit is contained in:
Eric Liu
parent
4e2959080b
commit
e886d772c7
288 changed files with 4681 additions and 4498 deletions
|
|
@ -1,135 +1,177 @@
|
|||
import { withKnobs, select, boolean, text } from '@storybook/addon-knobs';
|
||||
import Component from './ComposedModal.Story.svelte';
|
||||
import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
|
||||
import Component from "./ComposedModal.Story.svelte";
|
||||
|
||||
export default { title: 'ComposedModal', decorators: [withKnobs] };
|
||||
export default { title: "ComposedModal", decorators: [withKnobs] };
|
||||
|
||||
const sizes = {
|
||||
Default: '',
|
||||
'Extra small (xs)': 'xs',
|
||||
'Small (sm)': 'sm',
|
||||
'Large (lg)': 'lg'
|
||||
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),
|
||||
open: boolean("Open (open in <ComposedModal>)", true),
|
||||
danger: boolean("Danger mode (danger)", false),
|
||||
selectorPrimaryFocus: text(
|
||||
'Primary focus element selector (selectorPrimaryFocus)',
|
||||
'[data-modal-primary-focus]'
|
||||
"Primary focus element selector (selectorPrimaryFocus)",
|
||||
"[data-modal-primary-focus]"
|
||||
),
|
||||
size: select('Size (size)', sizes, 'sm')
|
||||
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')
|
||||
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')
|
||||
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'),
|
||||
primaryButtonText: text(
|
||||
"Primary button text (primaryButtonText in <ModalFooter>)",
|
||||
"Save"
|
||||
),
|
||||
primaryButtonDisabled: boolean(
|
||||
'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
|
||||
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
|
||||
false
|
||||
),
|
||||
secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
|
||||
}
|
||||
}
|
||||
secondaryButtonText: text(
|
||||
"Secondary button text (secondaryButtonText in <ModalFooter>)",
|
||||
""
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const ChildNodes = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'child nodes',
|
||||
story: "child nodes",
|
||||
composedModal: {
|
||||
open: boolean('Open (open in <ComposedModal>)', true),
|
||||
danger: boolean('Danger mode (danger)', false),
|
||||
open: boolean("Open (open in <ComposedModal>)", true),
|
||||
danger: boolean("Danger mode (danger)", false),
|
||||
selectorPrimaryFocus: text(
|
||||
'Primary focus element selector (selectorPrimaryFocus)',
|
||||
'[data-modal-primary-focus]'
|
||||
"Primary focus element selector (selectorPrimaryFocus)",
|
||||
"[data-modal-primary-focus]"
|
||||
),
|
||||
size: select('Size (size)', sizes, 'sm')
|
||||
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')
|
||||
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')
|
||||
hasScrollingContent: boolean(
|
||||
"Modal contains scrollable content (hasScrollingContent)",
|
||||
true
|
||||
),
|
||||
"aria-label": text("ARIA label for content", "Example modal content"),
|
||||
},
|
||||
modalFooter: {}
|
||||
}
|
||||
modalFooter: {},
|
||||
},
|
||||
});
|
||||
|
||||
export const TitleOnly = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'title',
|
||||
story: "title",
|
||||
composedModal: {
|
||||
open: boolean('Open (open in <ComposedModal>)', true),
|
||||
danger: boolean('Danger mode (danger)', false),
|
||||
open: boolean("Open (open in <ComposedModal>)", true),
|
||||
danger: boolean("Danger mode (danger)", false),
|
||||
selectorPrimaryFocus: text(
|
||||
'Primary focus element selector (selectorPrimaryFocus)',
|
||||
'[data-modal-primary-focus]'
|
||||
"Primary focus element selector (selectorPrimaryFocus)",
|
||||
"[data-modal-primary-focus]"
|
||||
),
|
||||
size: select('Size (size)', sizes, 'sm')
|
||||
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')
|
||||
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')
|
||||
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'),
|
||||
primaryButtonText: text(
|
||||
"Primary button text (primaryButtonText in <ModalFooter>)",
|
||||
"Save"
|
||||
),
|
||||
primaryButtonDisabled: boolean(
|
||||
'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
|
||||
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
|
||||
false
|
||||
),
|
||||
secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
|
||||
}
|
||||
}
|
||||
secondaryButtonText: text(
|
||||
"Secondary button text (secondaryButtonText in <ModalFooter>)",
|
||||
""
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const Trigger = () => ({
|
||||
Component,
|
||||
props: {
|
||||
story: 'trigger',
|
||||
story: "trigger",
|
||||
composedModal: {
|
||||
open: boolean('Open (open in <ComposedModal>)', true),
|
||||
danger: boolean('Danger mode (danger)', false),
|
||||
open: boolean("Open (open in <ComposedModal>)", true),
|
||||
danger: boolean("Danger mode (danger)", false),
|
||||
selectorPrimaryFocus: text(
|
||||
'Primary focus element selector (selectorPrimaryFocus)',
|
||||
'[data-modal-primary-focus]'
|
||||
"Primary focus element selector (selectorPrimaryFocus)",
|
||||
"[data-modal-primary-focus]"
|
||||
),
|
||||
size: select('Size (size)', sizes, 'sm')
|
||||
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')
|
||||
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')
|
||||
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'),
|
||||
primaryButtonText: text(
|
||||
"Primary button text (primaryButtonText in <ModalFooter>)",
|
||||
"Save"
|
||||
),
|
||||
primaryButtonDisabled: boolean(
|
||||
'Primary button disabled (primaryButtonDisabled in <ModalFooter>)',
|
||||
"Primary button disabled (primaryButtonDisabled in <ModalFooter>)",
|
||||
false
|
||||
),
|
||||
secondaryButtonText: text('Secondary button text (secondaryButtonText in <ModalFooter>)', '')
|
||||
}
|
||||
}
|
||||
secondaryButtonText: text(
|
||||
"Secondary button text (secondaryButtonText in <ModalFooter>)",
|
||||
""
|
||||
),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue