robust-react-ui
Version:
A React component library, built with a focus on accessibility, extensibility and reusability.
45 lines (40 loc) • 1.94 kB
JavaScript
;
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../../utils/getClassNames/index.js');
// Generated with util/create-component.js
var GridItem = function (_a) {
var _b;
var children = _a.children, config = _a.config, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, _d = _a.paddingX, paddingX = _d === void 0 ? 's' : _d, _e = _a.paddingY, paddingY = _e === void 0 ? 's' : _e, _f = _a.tagName, tagName = _f === void 0 ? 'div' : _f, id = _a.id, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy;
var style = config
? {
gridRowStart: config.rowStart,
gridRowEnd: config.rowStart + config.height,
gridColumnStart: config.colStart,
gridColumnEnd: config.colStart + config.width,
}
: {};
// shrink when col exceeds tablet width (4 fr)
var shrinkOnTablet = config && config.width > 4;
// shrink when col exceeds mobil width (2 fr)
var shrinkOnMobile = config && config.width > 1;
return React__default.createElement(tagName, {
'data-testid': 'GridItem',
className: index((_b = {
'rrui-grid__item': true
},
_b["rrui-grid__item--" + variant] = true,
_b["rrui-grid__item--padding-x-" + paddingX] = true,
_b["rrui-grid__item--padding-y-" + paddingY] = true,
_b['rrui-grid__item--shrink-tablet'] = shrinkOnTablet,
_b['rrui-grid__item--shrink-mobile'] = shrinkOnMobile && !shrinkOnTablet,
_b)),
id: id,
'aria-labelledby': ariaLabelledBy,
'aria-label': ariaLabel,
style: style,
}, children);
};
module.exports = GridItem;
//# sourceMappingURL=GridItem.js.map