vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
103 lines (102 loc) • 2.42 kB
JavaScript
import PropTypes from 'prop-types';
import React from 'react';
import { Flex } from '../flex';
import { Text } from '../text';
const DebugColumn = _ref => {
let {
size = 1,
children
} = _ref;
return /*#__PURE__*/React.createElement(Flex, {
extend: {
boxSizing: 'border-box',
backgroundColor: 'rgba(0, 0,0,0.1)',
width: 1024 / 4 * size,
marginRight: 16,
height: '100vh',
':last-child': {
marginRight: 0
},
fromL: {
width: 1368 / 12 * size,
marginRight: 24,
':last-child': {
marginRight: 0
}
}
}
}, /*#__PURE__*/React.createElement(Text, {
extend: {
paddingLeft: 4
},
variant: "bates",
subStyle: "emphasis"
}, children));
};
/** @deprecated */
export const DebugGrid = _ref2 => {
let {
storybook = false,
disabled = false
} = _ref2;
return /*#__PURE__*/React.createElement("div", {
style: {
display: disabled ? 'none' : 'block',
position: 'fixed',
zIndex: 10000,
pointerEvents: 'none',
opacity: 0.5,
top: 0,
left: 0,
right: 0,
bottom: 0,
padding: storybook ? '0 24px' : 0,
boxSizing: 'border-box'
}
}, /*#__PURE__*/React.createElement(Flex, {
extend: {
flexDirection: 'row',
maxWidth: 1400,
height: '100vh',
margin: '0 auto',
width: '100%',
paddingLeft: 40,
paddingRight: 40,
boxSizing: 'border-box',
backgroundColor: 'rgba(0, 0,0, 0.05)',
display: 'none',
fromL: {
display: 'flex'
}
}
}, [...Array(12).keys()].map(i => /*#__PURE__*/React.createElement(DebugColumn, {
key: i
}, i + 1))), /*#__PURE__*/React.createElement(Flex, {
extend: {
flexDirection: 'row',
height: '100vh',
margin: '0 auto',
width: '100%',
paddingLeft: 16,
paddingRight: 16,
boxSizing: 'border-box',
backgroundColor: 'rgba(0, 0,0, 0.05)',
display: 'flex',
fromM: {
paddingLeft: 24,
paddingRight: 24
},
fromL: {
display: 'none'
}
}
}, [...Array(4).keys()].map(i => /*#__PURE__*/React.createElement(DebugColumn, {
key: i
}, i + 1))));
};
DebugGrid.propTypes = {
/** Disable debug grid */
disabled: PropTypes.bool,
/** Enable if using in a storybook environment */
storybook: PropTypes.bool
};