@commercetools-uikit/collapsible-panel 17.1.0 → 18.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.
Files changed (4) hide show
  1. package/dist/commercetools-uikit-collapsible-panel.cjs.dev.js +20 -21
  2. package/dist/commercetools-uikit-collapsible-panel.cjs.prod.js +10 -11
  3. package/dist/commercetools-uikit-collapsible-panel.esm.js +19 -21
  4. package/package.json +10 -10
package/dist/commercetools-uikit-collapsible-panel.cjs.prod.js CHANGED
@@ -17,6 +17,7 @@ var react = require('@emotion/react');
17
17
  var designSystem = require('@commercetools-uikit/design-system');
18
18
  var icons = require('@commercetools-uikit/icons');
19
19
  var jsxRuntime = require('@emotion/react/jsx-runtime');
20
+ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
20
21
 
21
22
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
22
23
 
@@ -27,6 +28,7 @@ var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
27
28
  var Text__default = /*#__PURE__*/_interopDefault(Text);
28
29
  var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
29
30
  var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
31
+ var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
30
32
 
31
33
  const getArrowColor = _ref2 => {
32
34
  let tone = _ref2.tone,
@@ -41,7 +43,7 @@ var _ref$1 = {
41
43
  } ;
42
44
  const HeaderIcon = props => {
43
45
  return jsxRuntime.jsx("div", {
44
- css: [_ref$1, props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.designTokens.borderForCollapsiblePanelHeaderIconWhenDisabled, ";background-color:", designSystem.designTokens.backgroundColorForCollapsiblePanelHeaderIconWhenDisabled, ";" + ("" ), "" ), "" , "" ],
46
+ css: [_ref$1, props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:none;background-color:", designSystem.designTokens.colorSurface, ";" + ("" ), "" ), "" , "" ],
45
47
  children: props.isClosed ? jsxRuntime.jsx(icons.AngleRightIcon, {
46
48
  color: getArrowColor({
47
49
  tone: props.tone,
@@ -74,13 +76,13 @@ var _ref = {
74
76
  styles: "cursor:default"
75
77
  } ;
76
78
  const getHeaderContainerStyles = (props, isOpen) => {
77
- const baseStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", "1px solid ".concat(designSystem.designTokens.borderColorForCollapsiblePanelHeader), ";position:relative;border-top-left-radius:", designSystem.designTokens.borderRadius6, ";border-top-right-radius:", designSystem.designTokens.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeaderAsCondensed) : "".concat(designSystem.designTokens.paddingForCollapsiblePanelHeader), ";" + ("" ), "" );
79
+ const baseStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", "1px solid ".concat(designSystem.designTokens.colorNeutral90), ";position:relative;border-top-left-radius:", designSystem.designTokens.borderRadius6, ";border-top-right-radius:", designSystem.designTokens.borderRadius6, ";display:flex;flex:1;align-items:center;list-style-type:none;justify-content:", props.headerControlsAlignment === 'left' ? 'flex-start' : 'space-between', ";padding:", props.condensed ? "".concat(designSystem.designTokens.spacing20, " 0") : "".concat(designSystem.designTokens.spacing30, " 0"), ";" + ("" ), "" );
78
80
  return [baseStyles, props.isDisabled && _ref, props.isSticky && isOpen && /*#__PURE__*/react.css("z-index:1;position:sticky;top:0;border-top-right-radius:", designSystem.designTokens.borderRadius6, ";border-top-left-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ), "" ), !props.condensed &&
79
81
  /*#__PURE__*/
80
82
  // To understand why this min-height see: https://github.com/commercetools/ui-kit/pull/616
81
- react.css("min-height:", designSystem.designTokens.bigButtonHeight, ";box-sizing:content-box;" + ("" ), "" )];
83
+ react.css("min-height:", designSystem.designTokens.heightForButtonAsMedium, ";box-sizing:content-box;" + ("" ), "" )];
82
84
  };
83
- const baseContainerStyles = /*#__PURE__*/react.css("position:relative;min-width:", designSystem.designTokens.constraint6, ";padding:0;display:flex;flex-direction:column;color:", designSystem.designTokens.colorSolid, ";font-family:inherit;font-size:", designSystem.designTokens.fontSizeDefault, ";" + ("" ), "" );
85
+ const baseContainerStyles = /*#__PURE__*/react.css("position:relative;min-width:", designSystem.designTokens.constraint6, ";padding:0;display:flex;flex-direction:column;color:", designSystem.designTokens.colorSolid, ";font-family:inherit;font-size:", designSystem.designTokens.fontSize30, ";" + ("" ), "" );
84
86
  const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
85
87
  target: "em5v1nl2"
86
88
  } )("margin-left:", designSystem.designTokens.spacing30, ";display:flex;align-items:center;cursor:auto;" + ("" ));
@@ -92,14 +94,12 @@ const SectionContent = /*#__PURE__*/_styled__default["default"]("div", {
92
94
  } );
93
95
  const SectionDescriptionWrapper = /*#__PURE__*/_styled__default["default"]("div", {
94
96
  target: "em5v1nl0"
95
- } )("padding:", _ref2 => {
96
- let condensed = _ref2.condensed;
97
- return condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionDescriptionAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionDescription;
98
- }, ";" + ("" ));
97
+ } )("padding:0 0 ", designSystem.designTokens.spacing40, ";" + ("" ));
99
98
  const SectionWrapper = /*#__PURE__*/react$1.forwardRef((props, ref) => {
99
+ var _context, _context2, _context3, _context4;
100
100
  return jsxRuntime.jsx("div", {
101
101
  ref: ref,
102
- css: ["\n padding: ".concat(props.condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionWrapperAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionWrapper, ";\n "), props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
102
+ css: ["\n padding: ".concat(props.condensed ? _concatInstanceProperty__default["default"](_context = _concatInstanceProperty__default["default"](_context2 = "".concat(designSystem.designTokens.spacing40, " 0 0 calc(")).call(_context2, designSystem.designTokens.spacing30, " + ")).call(_context, designSystem.designTokens.spacing10, ")") : _concatInstanceProperty__default["default"](_context3 = _concatInstanceProperty__default["default"](_context4 = "".concat(designSystem.designTokens.spacing50, " 0 0 calc(")).call(_context4, designSystem.designTokens.spacing30, " + ")).call(_context3, designSystem.designTokens.spacing10, ")"), ";\n\n "), props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
103
103
  children: props.children
104
104
  });
105
105
  });
@@ -215,7 +215,6 @@ const CollapsiblePanel = props => {
215
215
  condensed: props.condensed,
216
216
  isExpandControlHidden: props.hideExpansionControls,
217
217
  children: [props.description && jsxRuntime.jsx(SectionDescriptionWrapper, {
218
- condensed: props.condensed,
219
218
  children: jsxRuntime.jsx(Text__default["default"].Detail, {
220
219
  tone: "secondary",
221
220
  children: props.description
@@ -249,7 +248,7 @@ CollapsiblePanel.Header = CollapsiblePanelHeader$1;
249
248
  var CollapsiblePanel$1 = CollapsiblePanel;
250
249
 
251
250
  // NOTE: This string will be replaced on build time with the package version.
252
- var version = "17.1.0";
251
+ var version = "18.1.0";
253
252
 
254
253
  exports["default"] = CollapsiblePanel$1;
255
254
  exports.version = version;