@commercetools-uikit/spacings-inset
Version:
An inset spacing component provides a consistent padding to the inner component.
57 lines (53 loc) • 5.29 kB
JavaScript
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
import { css } from '@emotion/react';
import { designTokens } from '@commercetools-uikit/design-system';
import { filterDataAttributes } from '@commercetools-uikit/utils';
import { jsx } from '@emotion/react/jsx-runtime';
const _excluded = ["scale", "height"];
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const getPadding = scale => {
switch (scale) {
case 'xs':
return designTokens.spacing10;
case 's':
return designTokens.spacing20;
case 'm':
return designTokens.spacing30;
case 'l':
return designTokens.spacing40;
case 'xl':
return designTokens.spacing50;
default:
return 0;
}
};
const Inset = _ref => {
let _ref$scale = _ref.scale,
scale = _ref$scale === void 0 ? 'm' : _ref$scale,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 'collapsed' : _ref$height,
props = _objectWithoutProperties(_ref, _excluded);
return jsx("div", _objectSpread(_objectSpread({
css: /*#__PURE__*/css("padding:", getPadding(scale), ";height:", height === 'expanded' ? '100%' : 'auto', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Inset;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluc2V0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQ1kiLCJmaWxlIjoiaW5zZXQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyBmaWx0ZXJEYXRhQXR0cmlidXRlcyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L3V0aWxzJztcblxuZXhwb3J0IHR5cGUgVFNjYWxlID0gJ3hzJyB8ICdzJyB8ICdtJyB8ICdsJyB8ICd4bCc7XG5cbmNvbnN0IGdldFBhZGRpbmcgPSAoc2NhbGU/OiBUU2NhbGUpID0+IHtcbiAgc3dpdGNoIChzY2FsZSkge1xuICAgIGNhc2UgJ3hzJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzEwO1xuICAgIGNhc2UgJ3MnOlxuICAgICAgcmV0dXJuIGRlc2lnblRva2Vucy5zcGFjaW5nMjA7XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNwYWNpbmczMDtcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwO1xuICAgIGNhc2UgJ3hsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzUwO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gMDtcbiAgfVxufTtcblxuZXhwb3J0IHR5cGUgVEluc2V0UHJvcHMgPSB7XG4gIC8qKiBzZXRzIHRoZSBhbW91bnQgb2YgYHBhZGRpbmdgIGFwcGxpZWQgYXJvdW5kIHRoZSBjaGlsZHJlbiAqL1xuICBzY2FsZT86IFRTY2FsZTtcbiAgLyoqIHNldHMgdGhlIGhlaWdodCBvZiB0aGUgY29tcG9uZW50IHRvIDEwMCUgb2YgdGhlIGF2YWlsYWJsZSB3aWR0aCAoJ2V4cGFuZGVkJykgb3IgJ2F1dG8nICovXG4gIGhlaWdodD86ICdjb2xsYXBzZWQnIHwgJ2V4cGFuZGVkJztcbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG59O1xuXG5jb25zdCBJbnNldCA9ICh7XG4gIHNjYWxlID0gJ20nLFxuICBoZWlnaHQgPSAnY29sbGFwc2VkJyxcbiAgLi4ucHJvcHNcbn06IFRJbnNldFByb3BzKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e2Nzc2BcbiAgICAgIHBhZGRpbmc6ICR7Z2V0UGFkZGluZyhzY2FsZSl9O1xuICAgICAgaGVpZ2h0OiAke2hlaWdodCA9PT0gJ2V4cGFuZGVkJyA/ICcxMDAlJyA6ICdhdXRvJ307XG4gICAgYH1cbiAgICB7Li4uZmlsdGVyRGF0YUF0dHJpYnV0ZXMoe1xuICAgICAgc2NhbGUsXG4gICAgICBoZWlnaHQsXG4gICAgICAuLi5wcm9wcyxcbiAgICB9KX1cbiAgPlxuICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgPC9kaXY+XG4pO1xuSW5zZXQuZGlzcGxheU5hbWUgPSAnSW5zZXQnO1xuXG5leHBvcnQgZGVmYXVsdCBJbnNldDtcbiJdfQ== */")
}, filterDataAttributes(_objectSpread({
scale,
height
}, props))), {}, {
children: props.children
}));
};
Inset.displayName = 'Inset';
var Inset$1 = Inset;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";
export { Inset$1 as default, version };