Skip to content

Commit

Permalink
chore(react): update composed modal story (carbon-design-system#4904)
Browse files Browse the repository at this point in the history
  • Loading branch information
joshblack committed Jan 6, 2020
1 parent dca1cc4 commit caf8087
Showing 1 changed file with 18 additions and 7 deletions.
25 changes: 18 additions & 7 deletions packages/react/src/components/ComposedModal/ComposedModal-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -139,15 +139,18 @@ storiesOf('ComposedModal', module)
'Using Header / Footer Props',
() => {
const { size, ...rest } = props.composedModal();
const { hasScrollingContent, ...bodyProps } = props.modalBody();
return (
<ComposedModal {...rest} size={size || undefined}>
<ModalHeader {...props.modalHeader()} />
<ModalBody {...props.modalBody()}>
<p className={`${prefix}--modal-content__text}`}>
<ModalBody
{...bodyProps}
aria-label={hasScrollingContent ? 'Modal content' : undefined}>
<p className={`${prefix}--modal-content__text`}>
Please see ModalWrapper for more examples and demo of the
functionality.
</p>
{props.modalBody().hasScrollingContent && scrollingContent}
{hasScrollingContent && scrollingContent}
</ModalBody>
<ModalFooter {...props.modalFooter()} />
</ComposedModal>
Expand All @@ -169,17 +172,20 @@ storiesOf('ComposedModal', module)
'Using child nodes',
() => {
const { size, ...rest } = props.composedModal();
const { hasScrollingContent, ...bodyProps } = props.modalBody();
return (
<ComposedModal {...rest} size={size || undefined}>
<ModalHeader {...props.modalHeader()}>
<h1>Testing</h1>
</ModalHeader>
<ModalBody {...props.modalBody()}>
<ModalBody
{...bodyProps}
aria-label={hasScrollingContent ? 'Modal content' : undefined}>
<p>
Please see ModalWrapper for more examples and demo of the
functionality.
</p>
{props.modalBody().hasScrollingContent && scrollingContent}
{hasScrollingContent && scrollingContent}
</ModalBody>
<ModalFooter>
<Button kind="secondary">Cancel</Button>
Expand Down Expand Up @@ -228,6 +234,7 @@ storiesOf('ComposedModal', module)
render() {
const { open } = this.state;
const { size, ...rest } = props.composedModal();
const { hasScrollingContent, ...bodyProps } = props.modalBody();
return (
<>
<Button onClick={() => this.toggleModal(true)}>
Expand All @@ -239,12 +246,16 @@ storiesOf('ComposedModal', module)
size={size || undefined}
onClose={() => this.toggleModal(false)}>
<ModalHeader {...props.modalHeader()} />
<ModalBody {...props.modalBody()}>
<ModalBody
{...bodyProps}
aria-label={
hasScrollingContent ? 'Modal content' : undefined
}>
<p className={`${prefix}--modal-content__text`}>
Please see ModalWrapper for more examples and demo of the
functionality.
</p>
{props.modalBody().hasScrollingContent && scrollingContent}
{hasScrollingContent && scrollingContent}
</ModalBody>
<ModalFooter {...props.modalFooter()} />
</ComposedModal>
Expand Down

0 comments on commit caf8087

Please sign in to comment.