|
5 | 5 | * LICENSE file in the root directory of this source tree.
|
6 | 6 | */
|
7 | 7 |
|
| 8 | +import cx from 'classnames'; |
| 9 | + |
8 | 10 | import { Search20, Notification20, AppSwitcher20 } from '@carbon/icons-react';
|
9 | 11 |
|
10 | 12 | import { storiesOf } from '@storybook/react';
|
@@ -56,11 +58,15 @@ const Fade16 = () => (
|
56 | 58 | </svg>
|
57 | 59 | );
|
58 | 60 |
|
59 |
| -const StoryContent = () => { |
| 61 | +const StoryContent = ({ useResponsiveOffset = true }) => { |
| 62 | + const classNameFirstColumn = cx({ |
| 63 | + 'bx--col-lg-13': true, |
| 64 | + 'bx--offset-lg-3': useResponsiveOffset, |
| 65 | + }); |
60 | 66 | const content = (
|
61 | 67 | <div className="bx--grid">
|
62 | 68 | <div className="bx--row">
|
63 |
| - <div className="bx--offset-lg-3 bx--col-lg-13"> |
| 69 | + <div className={classNameFirstColumn}> |
64 | 70 | <h2 style={{ fontWeight: '800', margin: '30px 0', fontSize: '20px' }}>
|
65 | 71 | Purpose and function
|
66 | 72 | </h2>
|
@@ -115,14 +121,15 @@ const StoryContent = () => {
|
115 | 121 | </div>
|
116 | 122 | </div>
|
117 | 123 | );
|
| 124 | + const style = { |
| 125 | + height: '100%', |
| 126 | + }; |
| 127 | + if (useResponsiveOffset) { |
| 128 | + style.margin = '0'; |
| 129 | + style.width = '100%'; |
| 130 | + } |
118 | 131 | return (
|
119 |
| - <Content |
120 |
| - id="main-content" |
121 |
| - style={{ |
122 |
| - margin: '0', |
123 |
| - height: '100%', |
124 |
| - width: '100%', |
125 |
| - }}> |
| 132 | + <Content id="main-content" style={style}> |
126 | 133 | {content}
|
127 | 134 | </Content>
|
128 | 135 | );
|
@@ -627,7 +634,7 @@ storiesOf('UI Shell', module)
|
627 | 634 | <SideNavLink href="javascript:void(0)">L0 link</SideNavLink>
|
628 | 635 | </SideNavItems>
|
629 | 636 | </SideNav>
|
630 |
| - <StoryContent /> |
| 637 | + <StoryContent useResponsiveOffset={false} /> |
631 | 638 | </>
|
632 | 639 | ))
|
633 | 640 | )
|
@@ -669,7 +676,7 @@ storiesOf('UI Shell', module)
|
669 | 676 | </SideNavLink>
|
670 | 677 | </SideNavItems>
|
671 | 678 | </SideNav>
|
672 |
| - <StoryContent /> |
| 679 | + <StoryContent useResponsiveOffset={false} /> |
673 | 680 | </>
|
674 | 681 | ))
|
675 | 682 | )
|
|
0 commit comments