mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +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:
parent
4e2959080b
commit
e886d772c7
288 changed files with 4681 additions and 4498 deletions
|
@ -1,37 +1,52 @@
|
|||
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
|
||||
import Component from './Modal.Story.svelte';
|
||||
import { withKnobs, boolean, text, select } from "@storybook/addon-knobs";
|
||||
import Component from "./Modal.Story.svelte";
|
||||
|
||||
export default { title: 'Modal', decorators: [withKnobs] };
|
||||
export default { title: "Modal", 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: {
|
||||
open: boolean('Open (open)', true),
|
||||
passiveModal: boolean('Without footer (passiveModal)', false),
|
||||
danger: boolean('Danger mode (danger)', 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'),
|
||||
open: boolean("Open (open)", true),
|
||||
passiveModal: boolean("Without footer (passiveModal)", false),
|
||||
danger: boolean("Danger mode (danger)", 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'
|
||||
"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"
|
||||
),
|
||||
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]'
|
||||
"Primary focus element selector (selectorPrimaryFocus)",
|
||||
"[data-modal-primary-focus]"
|
||||
),
|
||||
size: select('Size (size)', sizes),
|
||||
iconDescription: text('Close icon description (iconDescription)', 'Close the modal')
|
||||
}
|
||||
size: select("Size (size)", sizes),
|
||||
iconDescription: text(
|
||||
"Close icon description (iconDescription)",
|
||||
"Close the modal"
|
||||
),
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue