@wingsuit-designsystem/storybook
Version:
Wingsuit Storybook Integration.
96 lines (95 loc) • 3.28 kB
JavaScript
"use strict";
require("core-js/modules/es.object.define-property.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.Spacing = void 0;
require("core-js/modules/es.array.map.js");
require("core-js/modules/es.object.keys.js");
var _react = _interopRequireDefault(require("react"));
var _components = require("@storybook/core/components");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Spacing = exports.Spacing = function Spacing(props) {
var direction = props.direction,
spacing = props.spacing,
classNamePrefix = props.classNamePrefix,
color = props.color;
return direction === 'horizontal' ? /*#__PURE__*/_react["default"].createElement(_components.ScrollArea, null, Object.keys(spacing).map(function (key, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
style: {
display: 'flex',
paddingBottom: '6px'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '60px',
fontSize: '10px',
flexShrink: 0
}
}, classNamePrefix != null ? /*#__PURE__*/_react["default"].createElement("div", {
style: {
paddingTop: '4px'
}
}, classNamePrefix + key) : /*#__PURE__*/_react["default"].createElement("div", {
style: {
paddingTop: '4px'
}
}, spacing[key])), /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '100%'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classNamePrefix + key,
style: {
height: '1.4rem',
backgroundColor: color,
width: spacing[key],
borderRadius: '0.375rem'
}
}, classNamePrefix != null ? /*#__PURE__*/_react["default"].createElement("div", {
style: {
fontSize: '10px',
paddingTop: '4px',
marginLeft: '8px'
}
}, spacing[key]) : null)));
})) : /*#__PURE__*/_react["default"].createElement(_components.ScrollArea, null, /*#__PURE__*/_react["default"].createElement("div", {
style: {
display: 'flex'
}
}, Object.keys(spacing).map(function (key, i) {
return /*#__PURE__*/_react["default"].createElement("div", {
key: key,
style: {
paddingBottom: '6px'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
width: '38px',
fontSize: '11px',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}
}, classNamePrefix != null ? /*#__PURE__*/_react["default"].createElement("div", null, classNamePrefix + key) : /*#__PURE__*/_react["default"].createElement("div", null, spacing[key])), /*#__PURE__*/_react["default"].createElement("div", {
style: {
height: '100%'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: classNamePrefix + key,
style: {
backgroundColor: color,
width: '1.4rem',
height: spacing[key],
borderRadius: '0.375rem'
}
})));
})));
};
Spacing.defaultProps = {
classNamePrefix: null,
color: '#a3a3a3',
direction: 'horizontal'
};
var _default = exports["default"] = Spacing;