@commercetools-uikit/spacings-stack 16.0.0 → 16.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,64 +34,49 @@ const getAlignItem = alignment => {
34
34
  switch (alignment) {
35
35
  case 'flexStart':
36
36
  return "flex-start";
37
-
38
37
  case 'flexEnd':
39
38
  return "flex-end";
40
-
41
39
  default:
42
40
  return alignment;
43
41
  }
44
42
  };
45
-
46
43
  const getMargin = scale => {
47
44
  switch (scale) {
48
45
  case 'xs':
49
46
  return designSystem.designTokens.spacing10;
50
-
51
47
  case 's':
52
48
  return designSystem.designTokens.spacing20;
53
-
54
49
  case 'm':
55
50
  return designSystem.designTokens.spacing30;
56
-
57
51
  case 'l':
58
52
  return designSystem.designTokens.spacing40;
59
-
60
53
  case 'xl':
61
54
  return designSystem.designTokens.spacing50;
62
-
63
55
  case 'xxl':
64
56
  return designSystem.designTokens.spacing60;
65
-
66
57
  case 'xxxl':
67
58
  return designSystem.designTokens.spacing70;
68
-
69
59
  default:
70
60
  return 0;
71
61
  }
72
62
  };
63
+
73
64
  /**
74
65
  * We need to force the margin for the child elements as ome children
75
66
  * might have `margin: 0` defined, which results in a higher CSS specificity,
76
67
  * causing the margings of the spacing components to be ignored.
77
68
  * See https://github.com/commercetools/ui-kit/issues/542
78
69
  */
79
-
80
-
81
70
  const getStyles = props => /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:", getAlignItem(props.alignItems), ";>*+*{margin:", getMargin(props.scale), " 0 0!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:getStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YWNrLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQzZDIiwiZmlsZSI6InN0YWNrLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVEFsaWduSXRlbSwgVFNjYWxlLCBUU3RhY2tQcm9wcyB9IGZyb20gJy4vc3RhY2snO1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuY29uc3QgZ2V0QWxpZ25JdGVtID0gKGFsaWdubWVudD86IFRBbGlnbkl0ZW0pID0+IHtcbiAgc3dpdGNoIChhbGlnbm1lbnQpIHtcbiAgICBjYXNlICdmbGV4U3RhcnQnOlxuICAgICAgcmV0dXJuIGBmbGV4LXN0YXJ0YDtcbiAgICBjYXNlICdmbGV4RW5kJzpcbiAgICAgIHJldHVybiBgZmxleC1lbmRgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gYWxpZ25tZW50O1xuICB9XG59O1xuXG5jb25zdCBnZXRNYXJnaW4gPSAoc2NhbGU/OiBUU2NhbGUpID0+IHtcbiAgc3dpdGNoIChzY2FsZSkge1xuICAgIGNhc2UgJ3hzJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzEwO1xuICAgIGNhc2UgJ3MnOlxuICAgICAgcmV0dXJuIGRlc2lnblRva2Vucy5zcGFjaW5nMjA7XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNwYWNpbmczMDtcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwO1xuICAgIGNhc2UgJ3hsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzUwO1xuICAgIGNhc2UgJ3h4bCc6XG4gICAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNwYWNpbmc2MDtcbiAgICBjYXNlICd4eHhsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzcwO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gMDtcbiAgfVxufTtcblxuLyoqXG4gKiBXZSBuZWVkIHRvIGZvcmNlIHRoZSBtYXJnaW4gZm9yIHRoZSBjaGlsZCBlbGVtZW50cyBhcyBvbWUgY2hpbGRyZW5cbiAqIG1pZ2h0IGhhdmUgYG1hcmdpbjogMGAgZGVmaW5lZCwgd2hpY2ggcmVzdWx0cyBpbiBhIGhpZ2hlciBDU1Mgc3BlY2lmaWNpdHksXG4gKiBjYXVzaW5nIHRoZSBtYXJnaW5ncyBvZiB0aGUgc3BhY2luZyBjb21wb25lbnRzIHRvIGJlIGlnbm9yZWQuXG4gKiBTZWUgaHR0cHM6Ly9naXRodWIuY29tL2NvbW1lcmNldG9vbHMvdWkta2l0L2lzc3Vlcy81NDJcbiAqL1xuY29uc3QgZ2V0U3R5bGVzID0gKHByb3BzOiBUU3RhY2tQcm9wcykgPT4gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogJHtnZXRBbGlnbkl0ZW0ocHJvcHMuYWxpZ25JdGVtcyl9O1xuXG4gID4gKiArICoge1xuICAgIG1hcmdpbjogJHtnZXRNYXJnaW4ocHJvcHMuc2NhbGUpfSAwIDAgIWltcG9ydGFudDtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgZ2V0U3R5bGVzO1xuIl19 */");
82
-
83
71
  var getStyles$1 = getStyles;
84
72
 
85
73
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
86
-
87
74
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
88
-
89
75
  const Stack = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({
90
76
  css: getStyles$1(props)
91
77
  }, utils.filterDataAttributes(props)), {}, {
92
78
  children: props.children
93
79
  }));
94
-
95
80
  Stack.propTypes = process.env.NODE_ENV !== "production" ? {
96
81
  scale: _pt__default["default"].oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).isRequired,
97
82
  alignItems: _pt__default["default"].oneOf(['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'flexStart', 'flexEnd']).isRequired,
@@ -106,7 +91,7 @@ Stack.defaultProps = defaultProps;
106
91
  var Stack$1 = Stack;
107
92
 
108
93
  // NOTE: This string will be replaced on build time with the package version.
109
- var version = "16.0.0";
94
+ var version = "16.1.0";
110
95
 
111
96
  exports["default"] = Stack$1;
112
97
  exports.version = version;
@@ -33,64 +33,49 @@ const getAlignItem = alignment => {
33
33
  switch (alignment) {
34
34
  case 'flexStart':
35
35
  return "flex-start";
36
-
37
36
  case 'flexEnd':
38
37
  return "flex-end";
39
-
40
38
  default:
41
39
  return alignment;
42
40
  }
43
41
  };
44
-
45
42
  const getMargin = scale => {
46
43
  switch (scale) {
47
44
  case 'xs':
48
45
  return designSystem.designTokens.spacing10;
49
-
50
46
  case 's':
51
47
  return designSystem.designTokens.spacing20;
52
-
53
48
  case 'm':
54
49
  return designSystem.designTokens.spacing30;
55
-
56
50
  case 'l':
57
51
  return designSystem.designTokens.spacing40;
58
-
59
52
  case 'xl':
60
53
  return designSystem.designTokens.spacing50;
61
-
62
54
  case 'xxl':
63
55
  return designSystem.designTokens.spacing60;
64
-
65
56
  case 'xxxl':
66
57
  return designSystem.designTokens.spacing70;
67
-
68
58
  default:
69
59
  return 0;
70
60
  }
71
61
  };
62
+
72
63
  /**
73
64
  * We need to force the margin for the child elements as ome children
74
65
  * might have `margin: 0` defined, which results in a higher CSS specificity,
75
66
  * causing the margings of the spacing components to be ignored.
76
67
  * See https://github.com/commercetools/ui-kit/issues/542
77
68
  */
78
-
79
-
80
69
  const getStyles = props => /*#__PURE__*/react.css("display:flex;flex-direction:column;align-items:", getAlignItem(props.alignItems), ";>*+*{margin:", getMargin(props.scale), " 0 0!important;}" + ("" ), "" );
81
-
82
70
  var getStyles$1 = getStyles;
83
71
 
84
72
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
85
-
86
73
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
87
-
88
74
  const Stack = props => jsxRuntime.jsx("div", _objectSpread(_objectSpread({
89
75
  css: getStyles$1(props)
90
76
  }, utils.filterDataAttributes(props)), {}, {
91
77
  children: props.children
92
78
  }));
93
-
94
79
  Stack.propTypes = {};
95
80
  const defaultProps = {
96
81
  scale: 's',
@@ -101,7 +86,7 @@ Stack.defaultProps = defaultProps;
101
86
  var Stack$1 = Stack;
102
87
 
103
88
  // NOTE: This string will be replaced on build time with the package version.
104
- var version = "16.0.0";
89
+ var version = "16.1.0";
105
90
 
106
91
  exports["default"] = Stack$1;
107
92
  exports.version = version;
@@ -18,64 +18,49 @@ const getAlignItem = alignment => {
18
18
  switch (alignment) {
19
19
  case 'flexStart':
20
20
  return "flex-start";
21
-
22
21
  case 'flexEnd':
23
22
  return "flex-end";
24
-
25
23
  default:
26
24
  return alignment;
27
25
  }
28
26
  };
29
-
30
27
  const getMargin = scale => {
31
28
  switch (scale) {
32
29
  case 'xs':
33
30
  return designTokens.spacing10;
34
-
35
31
  case 's':
36
32
  return designTokens.spacing20;
37
-
38
33
  case 'm':
39
34
  return designTokens.spacing30;
40
-
41
35
  case 'l':
42
36
  return designTokens.spacing40;
43
-
44
37
  case 'xl':
45
38
  return designTokens.spacing50;
46
-
47
39
  case 'xxl':
48
40
  return designTokens.spacing60;
49
-
50
41
  case 'xxxl':
51
42
  return designTokens.spacing70;
52
-
53
43
  default:
54
44
  return 0;
55
45
  }
56
46
  };
47
+
57
48
  /**
58
49
  * We need to force the margin for the child elements as ome children
59
50
  * might have `margin: 0` defined, which results in a higher CSS specificity,
60
51
  * causing the margings of the spacing components to be ignored.
61
52
  * See https://github.com/commercetools/ui-kit/issues/542
62
53
  */
63
-
64
-
65
54
  const getStyles = props => /*#__PURE__*/css("display:flex;flex-direction:column;align-items:", getAlignItem(props.alignItems), ";>*+*{margin:", getMargin(props.scale), " 0 0!important;}" + (process.env.NODE_ENV === "production" ? "" : ";label:getStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0YWNrLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQzZDIiwiZmlsZSI6InN0YWNrLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVEFsaWduSXRlbSwgVFNjYWxlLCBUU3RhY2tQcm9wcyB9IGZyb20gJy4vc3RhY2snO1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcblxuY29uc3QgZ2V0QWxpZ25JdGVtID0gKGFsaWdubWVudD86IFRBbGlnbkl0ZW0pID0+IHtcbiAgc3dpdGNoIChhbGlnbm1lbnQpIHtcbiAgICBjYXNlICdmbGV4U3RhcnQnOlxuICAgICAgcmV0dXJuIGBmbGV4LXN0YXJ0YDtcbiAgICBjYXNlICdmbGV4RW5kJzpcbiAgICAgIHJldHVybiBgZmxleC1lbmRgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gYWxpZ25tZW50O1xuICB9XG59O1xuXG5jb25zdCBnZXRNYXJnaW4gPSAoc2NhbGU/OiBUU2NhbGUpID0+IHtcbiAgc3dpdGNoIChzY2FsZSkge1xuICAgIGNhc2UgJ3hzJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzEwO1xuICAgIGNhc2UgJ3MnOlxuICAgICAgcmV0dXJuIGRlc2lnblRva2Vucy5zcGFjaW5nMjA7XG4gICAgY2FzZSAnbSc6XG4gICAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNwYWNpbmczMDtcbiAgICBjYXNlICdsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzQwO1xuICAgIGNhc2UgJ3hsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzUwO1xuICAgIGNhc2UgJ3h4bCc6XG4gICAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNwYWNpbmc2MDtcbiAgICBjYXNlICd4eHhsJzpcbiAgICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc3BhY2luZzcwO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gMDtcbiAgfVxufTtcblxuLyoqXG4gKiBXZSBuZWVkIHRvIGZvcmNlIHRoZSBtYXJnaW4gZm9yIHRoZSBjaGlsZCBlbGVtZW50cyBhcyBvbWUgY2hpbGRyZW5cbiAqIG1pZ2h0IGhhdmUgYG1hcmdpbjogMGAgZGVmaW5lZCwgd2hpY2ggcmVzdWx0cyBpbiBhIGhpZ2hlciBDU1Mgc3BlY2lmaWNpdHksXG4gKiBjYXVzaW5nIHRoZSBtYXJnaW5ncyBvZiB0aGUgc3BhY2luZyBjb21wb25lbnRzIHRvIGJlIGlnbm9yZWQuXG4gKiBTZWUgaHR0cHM6Ly9naXRodWIuY29tL2NvbW1lcmNldG9vbHMvdWkta2l0L2lzc3Vlcy81NDJcbiAqL1xuY29uc3QgZ2V0U3R5bGVzID0gKHByb3BzOiBUU3RhY2tQcm9wcykgPT4gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogJHtnZXRBbGlnbkl0ZW0ocHJvcHMuYWxpZ25JdGVtcyl9O1xuXG4gID4gKiArICoge1xuICAgIG1hcmdpbjogJHtnZXRNYXJnaW4ocHJvcHMuc2NhbGUpfSAwIDAgIWltcG9ydGFudDtcbiAgfVxuYDtcblxuZXhwb3J0IGRlZmF1bHQgZ2V0U3R5bGVzO1xuIl19 */");
66
-
67
55
  var getStyles$1 = getStyles;
68
56
 
69
57
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
70
-
71
58
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
72
-
73
59
  const Stack = props => jsx("div", _objectSpread(_objectSpread({
74
60
  css: getStyles$1(props)
75
61
  }, filterDataAttributes(props)), {}, {
76
62
  children: props.children
77
63
  }));
78
-
79
64
  Stack.propTypes = process.env.NODE_ENV !== "production" ? {
80
65
  scale: _pt.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']).isRequired,
81
66
  alignItems: _pt.oneOf(['stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'flexStart', 'flexEnd']).isRequired,
@@ -90,6 +75,6 @@ Stack.defaultProps = defaultProps;
90
75
  var Stack$1 = Stack;
91
76
 
92
77
  // NOTE: This string will be replaced on build time with the package version.
93
- var version = "16.0.0";
78
+ var version = "16.1.0";
94
79
 
95
80
  export { Stack$1 as default, version };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/spacings-stack",
3
3
  "description": "A stack spacing component renders its children vertically with a consistent spacing between them.",
4
- "version": "16.0.0",
4
+ "version": "16.1.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,8 +21,8 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/design-system": "16.0.0",
25
- "@commercetools-uikit/utils": "16.0.0",
24
+ "@commercetools-uikit/design-system": "16.1.0",
25
+ "@commercetools-uikit/utils": "16.1.0",
26
26
  "@emotion/react": "^11.10.5",
27
27
  "prop-types": "15.8.1"
28
28
  },