@commercetools-uikit/collapsible-panel 16.1.0 → 16.2.0

package/dist/commercetools-uikit-collapsible-panel.cjs.prod.js

@@ -2,15 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
-var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
-var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
-var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
-var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _styled = require('@emotion/styled/base');
 require('prop-types');
 var react$1 = require('react');
@@ -29,14 +20,6 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
-var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
-var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
-var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
-var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
-var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
-var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
-var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
-var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var isNil__default = /*#__PURE__*/_interopDefault(isNil);
 var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
@@ -45,14 +28,11 @@ var Text__default = /*#__PURE__*/_interopDefault(Text);
 var CollapsibleMotion__default = /*#__PURE__*/_interopDefault(CollapsibleMotion);
 var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
 
-const sizeIconContainer = '24px';
-const sizeIconContainerSmall = '14px';
 const getArrowColor = _ref2 => {
   let tone = _ref2.tone,
-    isDisabled = _ref2.isDisabled,
-    theme = _ref2.theme;
+    isDisabled = _ref2.isDisabled;
   if (isDisabled) return 'neutral60';
-  if (tone === 'urgent') return theme === 'default' ? 'surface' : 'warning';
+  if (tone === 'urgent') return 'warning';
   return 'solid';
 };
 var _ref$1 = {
@@ -60,24 +40,18 @@ var _ref$1 = {
   styles: "display:flex;align-items:center;justify-content:center"
 } ;
 const HeaderIcon = props => {
-  const _useTheme = designSystem.useTheme(),
-    theme = _useTheme.theme,
-    isNewTheme = _useTheme.isNewTheme;
-  const backgroundColor = props.tone === 'urgent' && !isNewTheme ? designSystem.designTokens.colorWarning : designSystem.designTokens.colorSurface;
   return jsxRuntime.jsx("div", {
-    css: [_ref$1, !isNewTheme && /*#__PURE__*/react.css("height:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";width:", props.size === 'small' ? sizeIconContainerSmall : sizeIconContainer, ";border-radius:50%;flex-shrink:0;box-shadow:", designSystem.designTokens.shadow7, ";background-color:", backgroundColor, ";border:", backgroundColor, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.designTokens.borderForCollapsiblePanelHeaderIconWhenDisabled, ";background-color:", designSystem.designTokens.backgroundColorForCollapsiblePanelHeaderIconWhenDisabled, ";" + ("" ), "" ), "" , "" ],
+    css: [_ref$1, props.isDisabled && /*#__PURE__*/react.css("box-shadow:none;border:1px solid ", designSystem.designTokens.borderForCollapsiblePanelHeaderIconWhenDisabled, ";background-color:", designSystem.designTokens.backgroundColorForCollapsiblePanelHeaderIconWhenDisabled, ";" + ("" ), "" ), "" , "" ],
     children: props.isClosed ? jsxRuntime.jsx(icons.AngleRightIcon, {
       color: getArrowColor({
         tone: props.tone,
-        isDisabled: props.isDisabled,
-        theme
+        isDisabled: props.isDisabled
       }),
       size: props.size
     }) : jsxRuntime.jsx(icons.AngleDownIcon, {
       color: getArrowColor({
         tone: props.tone,
-        isDisabled: props.isDisabled,
-        theme
+        isDisabled: props.isDisabled
       }),
       size: props.size
     })
@@ -100,14 +74,13 @@ var _ref = {
   styles: "cursor:default"
 } ;
 const getHeaderContainerStyles = (props, isOpen) => {
-  const baseStyles = /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", isOpen || props.isNewTheme ? '1px solid ' + designSystem.designTokens.borderColorForCollapsiblePanelHeader : 'none', ";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), ";" + ("" ), "" );
+  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), ";" + ("" ), "" );
   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 &&
   /*#__PURE__*/
   // To understand why this min-height see: https://github.com/commercetools/ui-kit/pull/616
   react.css("min-height:", designSystem.designTokens.bigButtonHeight, ";box-sizing:content-box;" + ("" ), "" )];
 };
 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, ";" + ("" ), "" );
-const getBaseContainerStyles = isNewTheme => !isNewTheme ? /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow1, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ), "" ) : undefined;
 const HeaderControlsWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "em5v1nl2"
 } )("margin-left:", designSystem.designTokens.spacing30, ";display:flex;align-items:center;cursor:auto;" + ("" ));
@@ -126,35 +99,21 @@ const SectionDescriptionWrapper = /*#__PURE__*/_styled__default["default"]("div"
 const SectionWrapper = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   return jsxRuntime.jsx("div", {
     ref: ref,
-    css: ["\n          padding: ".concat(props.condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionWrapperAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionWrapper, ";\n        "), props.isNewTheme && props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
+    css: ["\n          padding: ".concat(props.condensed ? designSystem.designTokens.paddingForCollapsiblePanelSectionWrapperAsCondensed : designSystem.designTokens.paddingForCollapsiblePanelSectionWrapper, ";\n        "), props.isExpandControlHidden && 'padding-left: 0;', "" , "" ],
     children: props.children
   });
 });
 SectionWrapper.displayName = 'SectionWrapper';
 
-const CollapsiblePanelHeader = props => {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
-  if (isNewTheme) {
-    return jsxRuntime.jsx(Text__default["default"].Headline, {
-      as: "h2",
-      truncate: true,
-      children: props.children
-    });
-  }
-  return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-    as: "h4",
-    isBold: true,
-    truncate: true,
-    children: props.children
-  });
-};
+const CollapsiblePanelHeader = props => jsxRuntime.jsx(Text__default["default"].Headline, {
+  as: "h2",
+  truncate: true,
+  children: props.children
+});
 CollapsiblePanelHeader.propTypes = {};
 CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader';
 var CollapsiblePanelHeader$1 = CollapsiblePanelHeader;
 
-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; }
-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; }
 const HeaderContainer = /*#__PURE__*/_styled__default["default"](AccessibleButton__default["default"], {
   target: "e1923bli0"
 } )("" );
@@ -173,34 +132,21 @@ const HeadLineText = props => {
       children: props.header
     });
   }
-  if (props.isNewTheme) {
-    return jsxRuntime.jsx(Text__default["default"].Subheadline, {
-      as: "h4",
-      truncate: true,
-      children: props.header
-    });
-  } else {
-    return jsxRuntime.jsx(Text__default["default"].Detail, {
-      as: "span",
-      isBold: true,
-      truncate: true,
-      children: props.header
-    });
-  }
+  return jsxRuntime.jsx(Text__default["default"].Subheadline, {
+    as: "h4",
+    truncate: true,
+    children: props.header
+  });
 };
 
 // When `isClosed` is provided the component behaves as a controlled component,
 // otherwise it will behave like an uncontrolled component.
 const CollapsiblePanel = props => {
-  const _useTheme = designSystem.useTheme(),
-    isNewTheme = _useTheme.isNewTheme,
-    themedValue = _useTheme.themedValue;
   const panelButtonId = hooks.useFieldId(props.id, panelButtonSequentialId);
   const panelContentId = hooks.useFieldId(undefined, panelContentSequentialId);
   // Pass only `data-*` props
   const dataProps = utils.filterDataAttributes(props);
   const scale = props.condensed ? 's' : 'm';
-  const iconSize = themedValue(props.condensed ? 'small' : 'medium', 'medium');
   !isNil__default["default"](props.isClosed) && !isNil__default["default"](props.isDefaultClosed);
   !isNil__default["default"](props.onToggle);
   !isNil__default["default"](props.isClosed);
@@ -216,7 +162,7 @@ const CollapsiblePanel = props => {
       return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
         max: props.horizontalConstraint,
         children: jsxRuntime.jsxs("div", {
-          css: [baseContainerStyles, getThemeStyle(themedValue(props.theme, 'light')), getBaseContainerStyles(isNewTheme), "" , "" ]
+          css: [baseContainerStyles, getThemeStyle('light'), "" , "" ]
           // Allow to override the styles by passing a `className` prop.
           // Custom styles can also be passed using the `css` prop from emotion.
           // https://emotion.sh/docs/css-prop#style-precedence
@@ -224,9 +170,7 @@ const CollapsiblePanel = props => {
           className: props.className,
           children: [jsxRuntime.jsxs(HeaderContainer, {
             as: "div",
-            css: [getHeaderContainerStyles(_objectSpread(_objectSpread({}, props), {}, {
-              isNewTheme
-            }), isOpen), getThemeStyle(themedValue(props.theme, 'light')), "" , "" ],
+            css: [getHeaderContainerStyles(props, isOpen), getThemeStyle('light'), "" , "" ],
             id: panelButtonId,
             label: "",
             onClick: props.isDisabled ? undefined : toggle,
@@ -236,19 +180,18 @@ const CollapsiblePanel = props => {
             "aria-expanded": isOpen ? 'true' : 'false',
             children: [jsxRuntime.jsxs(Spacings__default["default"].Inline, {
               alignItems: "center",
-              scale: themedValue('s', 'xs'),
+              scale: "xs",
               children: [!props.hideExpansionControls && jsxRuntime.jsx(HeaderIcon$1, {
                 isClosed: !isOpen,
                 isDisabled: props.isDisabled || false,
                 tone: props.tone,
-                size: iconSize
+                size: 'medium'
               }), jsxRuntime.jsxs(Spacings__default["default"].Inline, {
-                alignItems: themedValue('center', 'baseline'),
+                alignItems: "baseline",
                 scale: scale,
                 children: [jsxRuntime.jsx(HeadLineText, {
                   header: props.header,
-                  condensed: props.condensed,
-                  isNewTheme: isNewTheme
+                  condensed: props.condensed
                 }), props.secondaryHeader && jsxRuntime.jsx(Text__default["default"].Detail, {
                   tone: "secondary",
                   truncate: true,
@@ -267,11 +210,10 @@ const CollapsiblePanel = props => {
               ref: registerContentNode,
               condensed: props.condensed,
               isExpandControlHidden: props.hideExpansionControls,
-              isNewTheme: isNewTheme,
               children: [props.description && jsxRuntime.jsx(SectionDescriptionWrapper, {
                 condensed: props.condensed,
                 children: jsxRuntime.jsx(Text__default["default"].Detail, {
-                  tone: themedValue(undefined, 'secondary'),
+                  tone: "secondary",
                   children: props.description
                 })
               }), jsxRuntime.jsx(Spacings__default["default"].Stack, {
@@ -303,7 +245,7 @@ CollapsiblePanel.Header = CollapsiblePanelHeader$1;
 var CollapsiblePanel$1 = CollapsiblePanel;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.1.0";
+var version = "16.2.0";
 
 exports["default"] = CollapsiblePanel$1;
 exports.version = version;