mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-17 19:21:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(component): add ComposedModal

Browse source 
Closes #13
This commit is contained in:
Eric Liu 2019-12-23 18:38:33 -08:00
commit fc366a9366
21 changed files with 518 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/components/ComposedModal/ComposedModal.stories.js Normal file
View file

@ -0,0 +1,135 @@
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')
},
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>)', '')
}
}
});