@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -3,30 +3,25 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["buttons"],
-    _excluded2 = ["label", "key", "kind"],
-    _excluded3 = ["buttons"],
-    _excluded4 = ["label", "key", "kind"];
-
+  _excluded2 = ["label", "key", "kind"],
+  _excluded3 = ["buttons"],
+  _excluded4 = ["label", "key", "kind"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 //
 // Copyright IBM Corp. 2020, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useResizeDetector } from 'react-resize-detector';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 import { ButtonSet, Button, usePrefix } from '@carbon/react';
 import { ButtonMenu, ButtonMenuItem } from '../ButtonMenu';
 import { pkg } from '../../settings';
@@ -36,22 +31,21 @@ var componentName = 'ButtonSetWithOverflow';
 var buttonSize = 'md';
 export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   var buttons = _ref.buttons,
-      className = _ref.className,
-      onWidthChange = _ref.onWidthChange,
-      buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
-      menuOptionsClass = _ref.menuOptionsClass,
-      rightAlign = _ref.rightAlign;
+    className = _ref.className,
+    onWidthChange = _ref.onWidthChange,
+    buttonSetOverflowLabel = _ref.buttonSetOverflowLabel,
+    menuOptionsClass = _ref.menuOptionsClass,
+    rightAlign = _ref.rightAlign;
   var carbonPrefix = usePrefix();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showAsOverflow = _useState2[0],
-      setShowAsOverflow = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    showAsOverflow = _useState2[0],
+    setShowAsOverflow = _useState2[1];
   var spaceAvailableRef = useRef(null);
   var sizingContainerRefSet = useRef(null);
   var sizingContainerRefCombo = useRef(null);
   var sizes = useRef({});
+
   /**
    * checkFullyVisibleItems determines display count based on space available and width of pageActions
    *
@@ -60,64 +54,59 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
    * ButtonSet is used, once this is no longer the case it switches to a ButtonMenu.
    *
    */
-
   var checkFullyVisibleItems = function checkFullyVisibleItems() {
     var _spaceAvailableRef$cu, _sizingContainerRefSe, _sizingContainerRefCo;
-
     var spaceAvailable = (_spaceAvailableRef$cu = spaceAvailableRef.current) === null || _spaceAvailableRef$cu === void 0 ? void 0 : _spaceAvailableRef$cu.offsetWidth;
-    var newShowAsOverflow = true; // get all of the hidden sizing buttons
+    var newShowAsOverflow = true;
 
-    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn")); // calculate total width of button set
+    // get all of the hidden sizing buttons
+    var sizingSet = (_sizingContainerRefSe = sizingContainerRefSet.current) === null || _sizingContainerRefSe === void 0 ? void 0 : _sizingContainerRefSe.querySelectorAll(".".concat(carbonPrefix, "--btn"));
 
+    // calculate total width of button set
     var sizingSetTotalSize = 0;
-
     var _iterator = _createForOfIteratorHelper(sizingSet),
-        _step;
-
+      _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var item = _step.value;
         sizingSetTotalSize += item.offsetWidth;
-      } // check ButtonMenu size
+      }
 
+      // check ButtonMenu size
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-
     var sizingComboSize = (_sizingContainerRefCo = sizingContainerRefCombo.current) === null || _sizingContainerRefCo === void 0 ? void 0 : _sizingContainerRefCo.offsetWidth;
-
     if (onWidthChange && (sizes.current.minWidth !== sizingComboSize || sizes.current.maxWidth !== sizingSetTotalSize)) {
       sizes.current.minWidth = sizingComboSize;
-      sizes.current.maxWidth = sizingSetTotalSize; // report min and max width required to host
+      sizes.current.maxWidth = sizingSetTotalSize;
 
+      // report min and max width required to host
       onWidthChange(_objectSpread({}, sizes.current));
-    } // only if space available use ButtonSet.
-
+    }
 
+    // only if space available use ButtonSet.
     if (sizingSetTotalSize <= spaceAvailable) {
       newShowAsOverflow = false;
     }
-
     setShowAsOverflow(newShowAsOverflow);
   };
-
   useEffect(function () {
-    checkFullyVisibleItems(); // eslint-disable-next-line react-hooks/exhaustive-deps
+    checkFullyVisibleItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttons]);
   var AButtonSet = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     var buttons = _ref2.buttons,
-        rest = _objectWithoutProperties(_ref2, _excluded);
-
+      rest = _objectWithoutProperties(_ref2, _excluded);
     return /*#__PURE__*/React.createElement(ButtonSet, _extends({}, rest, {
       ref: ref
     }), buttons.map(function (_ref3) {
       var label = _ref3.label,
-          key = _ref3.key,
-          kind = _ref3.kind,
-          other = _objectWithoutProperties(_ref3, _excluded2);
-
+        key = _ref3.key,
+        kind = _ref3.kind,
+        other = _objectWithoutProperties(_ref3, _excluded2);
       /* istanbul ignore next */
       var usedKind = kind || 'primary';
       return /*#__PURE__*/React.createElement(Button, _extends({
@@ -131,18 +120,16 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
   });
   var AButtonMenu = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     var buttons = _ref4.buttons,
-        rest = _objectWithoutProperties(_ref4, _excluded3);
-
+      rest = _objectWithoutProperties(_ref4, _excluded3);
     return /*#__PURE__*/React.createElement(ButtonMenu, _extends({}, rest, {
       ref: ref,
       label: buttonSetOverflowLabel,
       menuAriaLabel: buttonSetOverflowLabel
     }), buttons.map(function (_ref5) {
       var label = _ref5.label,
-          key = _ref5.key,
-          kind = _ref5.kind,
-          other = _objectWithoutProperties(_ref5, _excluded4);
-
+        key = _ref5.key,
+        kind = _ref5.kind,
+        other = _objectWithoutProperties(_ref5, _excluded4);
       return /*#__PURE__*/React.createElement(ButtonMenuItem, _extends({
         key: key && "button-menu-".concat(key),
         isDelete: kind === null || kind === void 0 ? void 0 : kind.startsWith('danger'),
@@ -150,18 +137,14 @@ export var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       }, prepareProps(other, ['iconDescription', 'renderIcon'])));
     }).reverse());
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefSet
+  useResizeObserver(sizingContainerRefSet, {
+    callback: checkFullyVisibleItems
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: sizingContainerRefCombo
+  useResizeObserver(sizingContainerRefCombo, {
+    callback: checkFullyVisibleItems
   });
-  useResizeDetector({
-    onResize: checkFullyVisibleItems,
-    targetRef: spaceAvailableRef,
-    handleWidth: true
+  useResizeObserver(spaceAvailableRef, {
+    callback: checkFullyVisibleItems
   });
   return /*#__PURE__*/React.createElement("div", {
     className: cx([blockClass, className, _defineProperty({}, "".concat(blockClass, "--right"), rightAlign)]),
@@ -196,7 +179,6 @@ ButtonSetWithOverflow.propTypes = {
    *  buttonSetOverflowLabel - used when button set is shown as combo button
    */
   buttonSetOverflowLabel: PropTypes.node.isRequired,
-
   /**
    * Specifies the buttons for the ButtonSetWithOverflow. Each item is specified as an object
    * with the properties of a Carbon Button plus a label.
@@ -209,22 +191,18 @@ ButtonSetWithOverflow.propTypes = {
     label: PropTypes.node,
     onClick: PropTypes.func
   }))).isRequired,
-
   /**
    * className
    */
   className: PropTypes.string,
-
   /**
    * class name applied to the overflow options
    */
   menuOptionsClass: PropTypes.string,
-
   /**
    * onResize reports maxSize on resize
    */
   onWidthChange: PropTypes.func,
-
   /**
    * align buttons to right of available space
    */

package/es/components/ButtonSetWithOverflow/index.js

@@ -4,4 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 export { ButtonSetWithOverflow } from './ButtonSetWithOverflow';

package/es/components/Card/Card.js

@@ -2,28 +2,27 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
-    _excluded2 = ["id"],
-    _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
-
+  _excluded2 = ["id"],
+  _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Button, IconButton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import { Button, IconButton, OverflowMenu, OverflowMenuItem, Layer } from '@carbon/react';
 import PropTypes from 'prop-types';
 import { CardHeader } from './CardHeader';
 import { CardFooter } from './CardFooter';
 import { pkg } from '../../settings';
-var componentName = 'Card'; // Default values for props
+var componentName = 'Card';
 
+// Default values for props
 var defaults = {
   actionIcons: Object.freeze([]),
   actionsPlacement: 'bottom',
@@ -38,47 +37,46 @@ var defaults = {
 };
 export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionIcons = _ref.actionIcons,
-      actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
-      _ref$actionsPlacement = _ref.actionsPlacement,
-      actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
-      children = _ref.children,
-      className = _ref.className,
-      _ref$clickZone = _ref.clickZone,
-      clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
-      description = _ref.description,
-      label = _ref.label,
-      media = _ref.media,
-      _ref$mediaPosition = _ref.mediaPosition,
-      mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
-      onClick = _ref.onClick,
-      onKeyDown = _ref.onKeyDown,
-      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-      _ref$overflowActions = _ref.overflowActions,
-      overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
-      overflowAriaLabel = _ref.overflowAriaLabel,
-      onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      Pictogram = _ref.pictogram,
-      primaryButtonHref = _ref.primaryButtonHref,
-      primaryButtonIcon = _ref.primaryButtonIcon,
-      _ref$primaryButtonKin = _ref.primaryButtonKind,
-      primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
-      _ref$primaryButtonPla = _ref.primaryButtonPlacement,
-      primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
-      primaryButtonText = _ref.primaryButtonText,
-      _ref$productive = _ref.productive,
-      productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
-      secondaryButtonHref = _ref.secondaryButtonHref,
-      secondaryButtonIcon = _ref.secondaryButtonIcon,
-      _ref$secondaryButtonK = _ref.secondaryButtonKind,
-      secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
-      secondaryButtonText = _ref.secondaryButtonText,
-      title = _ref.title,
-      _ref$titleSize = _ref.titleSize,
-      titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
+    _ref$actionsPlacement = _ref.actionsPlacement,
+    actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$clickZone = _ref.clickZone,
+    clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
+    description = _ref.description,
+    label = _ref.label,
+    media = _ref.media,
+    _ref$mediaPosition = _ref.mediaPosition,
+    mediaPosition = _ref$mediaPosition === void 0 ? defaults.mediaPosition : _ref$mediaPosition,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    _ref$overflowActions = _ref.overflowActions,
+    overflowActions = _ref$overflowActions === void 0 ? defaults.overflowActions : _ref$overflowActions,
+    overflowAriaLabel = _ref.overflowAriaLabel,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
+    Pictogram = _ref.pictogram,
+    primaryButtonHref = _ref.primaryButtonHref,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    _ref$primaryButtonKin = _ref.primaryButtonKind,
+    primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+    _ref$primaryButtonPla = _ref.primaryButtonPlacement,
+    primaryButtonPlacement = _ref$primaryButtonPla === void 0 ? defaults.primaryButtonPlacement : _ref$primaryButtonPla,
+    primaryButtonText = _ref.primaryButtonText,
+    _ref$productive = _ref.productive,
+    productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
+    secondaryButtonHref = _ref.secondaryButtonHref,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    _ref$secondaryButtonK = _ref.secondaryButtonKind,
+    secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    secondaryButtonText = _ref.secondaryButtonText,
+    title = _ref.title,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var blockClass = "".concat(pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -88,35 +86,35 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onKeyDown: onKeyDown,
     role: 'button',
     tabIndex: '0'
-  }; // actions can either be an overflow menu or series of icons
+  };
 
+  // actions can either be an overflow menu or series of icons
   var getActions = function getActions() {
     if (overflowActions.length > 0) {
       var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
-      return /*#__PURE__*/React.createElement(OverflowMenu, {
+      return /*#__PURE__*/React.createElement(Layer, {
+        level: 2
+      }, /*#__PURE__*/React.createElement(OverflowMenu, {
         size: size,
         direction: pos,
         flipped: true,
-        ariaLabel: overflowAriaLabel
+        "aria-label": overflowAriaLabel
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
-            rest = _objectWithoutProperties(_ref2, _excluded2);
-
+          rest = _objectWithoutProperties(_ref2, _excluded2);
         return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({
           key: id
         }, rest));
-      }));
+      })));
     }
-
     var icons = actionIcons.map(function (_ref3) {
       var id = _ref3.id,
-          Icon = _ref3.icon,
-          onClick = _ref3.onClick,
-          iconDescription = _ref3.iconDescription,
-          href = _ref3.href,
-          rest = _objectWithoutProperties(_ref3, _excluded3);
-
+        Icon = _ref3.icon,
+        onClick = _ref3.onClick,
+        iconDescription = _ref3.iconDescription,
+        href = _ref3.href,
+        rest = _objectWithoutProperties(_ref3, _excluded3);
       if (productive) {
         return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
           key: id,
@@ -129,7 +127,6 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           href: href
         }));
       }
-
       if (href) {
         return /*#__PURE__*/React.createElement("a", {
           key: id,
@@ -140,7 +137,6 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           "aria-label": iconDescription
         }));
       }
-
       return /*#__PURE__*/React.createElement(IconButton, {
         key: id,
         label: iconDescription,
@@ -154,31 +150,24 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     });
     return icons;
   };
-
   var getCardProps = function getCardProps() {
     var _cx;
-
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
-
     var cardProps = _objectSpread(_objectSpread({}, rest), {}, {
       ref: ref,
       className: cx(blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__productive"), productive), _defineProperty(_cx, "".concat(blockClass, "__clickable"), clickable), _defineProperty(_cx, "".concat(blockClass, "__media-left"), mediaPosition === 'left'), _cx), className)
     }, clickable && clickableProps);
-
     return cardProps;
-  }; // the only reason this is necessary is for click zone 2
-
+  };
 
+  // the only reason this is necessary is for click zone 2
   var getHeaderBodyProps = function getHeaderBodyProps() {
     var clickable = hasClickEvent && clickZone === 'two';
-
     var headerBodyProps = _objectSpread({
       className: cx("".concat(blockClass, "__header-body-container"), _defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
-
     return headerBodyProps;
   };
-
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
@@ -195,17 +184,13 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       titleSize: titleSize
     };
   };
-
   var getBodyProps = function getBodyProps() {
     var clickable = hasClickEvent && clickZone === 'three';
-
     var bodyProps = _objectSpread({
       className: cx("".concat(blockClass, "__body"), _defineProperty({}, "".concat(blockClass, "__clickable"), clickable))
     }, clickable && clickableProps);
-
     return bodyProps;
   };
-
   var getFooterProps = function getFooterProps() {
     return {
       actions: actionsPlacement === 'bottom' ? getActions() : '',
@@ -226,7 +211,6 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-
   return /*#__PURE__*/React.createElement("div", getCardProps(), media && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React.createElement("div", {
@@ -248,8 +232,8 @@ Card.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
-  description: PropTypes.string,
-  label: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   media: PropTypes.node,
   mediaPosition: PropTypes.oneOf(['top', 'left']),
   onClick: PropTypes.func,
@@ -274,7 +258,7 @@ Card.propTypes = {
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
   secondaryButtonText: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   titleSize: PropTypes.oneOf(['default', 'large'])
 };
 Card.displayName = componentName;

package/es/components/Card/CardFooter.js

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React from 'react';
 import cx from 'classnames';
 import { Button } from '@carbon/react';
@@ -19,24 +20,24 @@ var defaults = {
 };
 export var CardFooter = function CardFooter(_ref) {
   var _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
-      hasActions = _ref.hasActions,
-      hasButton = _ref.hasButton,
-      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-      onSecondaryButtonClick = _ref.onSecondaryButtonClick,
-      primaryButtonHref = _ref.primaryButtonHref,
-      primaryButtonIcon = _ref.primaryButtonIcon,
-      _ref$primaryButtonKin = _ref.primaryButtonKind,
-      primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
-      primaryButtonPlacement = _ref.primaryButtonPlacement,
-      primaryButtonText = _ref.primaryButtonText,
-      _ref$productive = _ref.productive,
-      productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
-      secondaryButtonHref = _ref.secondaryButtonHref,
-      secondaryButtonIcon = _ref.secondaryButtonIcon,
-      _ref$secondaryButtonK = _ref.secondaryButtonKind,
-      secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
-      secondaryButtonText = _ref.secondaryButtonText;
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+    hasActions = _ref.hasActions,
+    hasButton = _ref.hasButton,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
+    primaryButtonHref = _ref.primaryButtonHref,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    _ref$primaryButtonKin = _ref.primaryButtonKind,
+    primaryButtonKind = _ref$primaryButtonKin === void 0 ? defaults.primaryButtonKind : _ref$primaryButtonKin,
+    primaryButtonPlacement = _ref.primaryButtonPlacement,
+    primaryButtonText = _ref.primaryButtonText,
+    _ref$productive = _ref.productive,
+    productive = _ref$productive === void 0 ? defaults.productive : _ref$productive,
+    secondaryButtonHref = _ref.secondaryButtonHref,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    _ref$secondaryButtonK = _ref.secondaryButtonKind,
+    secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    secondaryButtonText = _ref.secondaryButtonText;
   var blockClass = "".concat(pkg.prefix, "--card");
   var footerClass = "".concat(pkg.prefix, "--card__footer");
   var footerClasses = cx(footerClass, _defineProperty({}, "".concat(footerClass, "-no-button"), !hasButton));
@@ -65,13 +66,13 @@ CardFooter.propTypes = {
   onPrimaryButtonClick: PropTypes.func,
   onSecondaryButtonClick: PropTypes.func,
   primaryButtonHref: PropTypes.string,
-  primaryButtonIcon: PropTypes.string,
+  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
   primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.string,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,
-  secondaryButtonIcon: PropTypes.string,
+  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
   secondaryButtonText: PropTypes.string
 };

package/es/components/Card/CardHeader.js

@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,20 +18,19 @@ var defaults = {
 };
 export var CardHeader = function CardHeader(_ref) {
   var _cx;
-
   var actions = _ref.actions,
-      noActionIcons = _ref.noActionIcons,
-      onPrimaryButtonClick = _ref.onPrimaryButtonClick,
-      primaryButtonIcon = _ref.primaryButtonIcon,
-      primaryButtonPlacement = _ref.primaryButtonPlacement,
-      primaryButtonText = _ref.primaryButtonText,
-      description = _ref.description,
-      _ref$hasActions = _ref.hasActions,
-      hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
-      label = _ref.label,
-      title = _ref.title,
-      _ref$titleSize = _ref.titleSize,
-      titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
+    noActionIcons = _ref.noActionIcons,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    primaryButtonPlacement = _ref.primaryButtonPlacement,
+    primaryButtonText = _ref.primaryButtonText,
+    description = _ref.description,
+    _ref$hasActions = _ref.hasActions,
+    hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
+    label = _ref.label,
+    title = _ref.title,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
   var blockClass = "".concat(pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = cx(headerClass, (_cx = {}, _defineProperty(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), _defineProperty(_cx, "".concat(headerClass, "-has-label"), !!label), _defineProperty(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
@@ -60,7 +60,7 @@ export var CardHeader = function CardHeader(_ref) {
 };
 CardHeader.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   hasActions: PropTypes.bool,
   label: PropTypes.string,
   noActionIcons: PropTypes.bool,
@@ -68,7 +68,7 @@ CardHeader.propTypes = {
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   primaryButtonText: PropTypes.string,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   titleSize: PropTypes.oneOf(['default', 'large'])
 };
 CardHeader.displayName = componentName;

package/es/components/Card/index.js

@@ -4,6 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
 export { Card } from './Card';
 export { CardHeader } from './CardHeader';
 export { CardFooter } from './CardFooter';