Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 60x | import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
// We don't use design tokens or SLDS classes for styling here to prevent false failed tests for unrelated changes,
// this styling is cosmetic for Storybook only
const Wrapper = styled.div`
transform: translate3d(0, 0, 0);
position: ${props => props.isViewport && 'relative'};
padding: ${props => (props.isFullBleed ? '0' : '1rem')};
${props => props.styles}
> * {
position: ${props => props.isViewport && 'absolute'};
}
`;
// A bit barebones at the moment but in place for future extensibility
const StoryWrapper = props => {
const { children, styles, isViewport, isFullBleed, dir, className } = props;
return (
<Wrapper
className={className}
styles={styles}
isViewport={isViewport}
isFullBleed={isFullBleed}
dir={dir}
>
{children}
</Wrapper>
);
};
StoryWrapper.propTypes = {
children: PropTypes.node,
styles: PropTypes.string,
isFullBleed: PropTypes.bool,
isViewport: PropTypes.bool,
dir: PropTypes.oneOf(['ltr', 'rtl'])
};
export default StoryWrapper;
|