@carbon/ibm-products 1.27.0 → 1.32.0

package/es/global/js/hooks/useClickOutside.js

@@ -8,7 +8,7 @@ import { useEffect } from 'react';
 export var useClickOutside = function useClickOutside(ref, callback) {
   var handleClick = function handleClick(event) {
     if (ref.current && !ref.current.contains(event.target)) {
-      callback();
+      callback(event.target);
     }
   };
 

package/es/global/js/package-settings.js

@@ -53,6 +53,9 @@ var defaults = {
     TearsheetNarrow: true,
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
     // other public components not yet reviewed and released:
     MultiAddSelect: false,
     SingleAddSelect: false,
@@ -60,9 +63,6 @@ var defaults = {
     Toolbar: false,
     ToolbarButton: false,
     ToolbarGroup: false,
-    WebTerminal: false,
-    WebTerminalContentWrapper: false,
-    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,

package/es/global/js/utils/rangeWithCallback.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Iterates through a numeric range and calls callback
+// function for each iteration
+export var rangeWithCallback = function rangeWithCallback(start, end, fn) {
+  for (var i = start; i <= end; i++) {
+    fn(i);
+  }
+};

package/es/global/js/utils/story-helper.js

@@ -29,7 +29,11 @@ export var getStoryTitle = function getStoryTitle(componentName) {
  * @returns The story id.
  */
 
-export var getStoryId = function getStoryId(componentName, scenario) {
+export var getStoryId = function getStoryId(componentName, scenario, subdirectory) {
+  if (subdirectory) {
+    return "".concat(sanitize(getStoryTitle(componentName)), "-").concat(sanitize(subdirectory), "--").concat(scenario);
+  }
+
   return "".concat(sanitize(getStoryTitle(componentName)), "--").concat(scenario);
 };
 /**

package/es/global/js/utils/uuidv4.spec.js

@@ -4,11 +4,15 @@ describe('uuidv4', function () {
     jest.resetAllMocks();
   });
   it('Uses Math.random when window is not defined', function () {
+    var _window = window,
+        crypto = _window.crypto;
+    delete window.crypto;
     var mockMath = Object.create(global.Math);
     var mockMathRandom = jest.fn().mockReturnValue(0.5);
     mockMath.random = mockMathRandom;
     global.Math = mockMath;
     expect(uuidv4()).toEqual('98888888-9888-4888-a888-988888888888');
+    window.crypto = crypto;
   });
   it('Uses crypto from window when window is defined', function () {
     var mGetRandomValues = jest.fn().mockReturnValue(new Uint32Array(10));

package/lib/components/AddSelect/AddSelect.js

@@ -21,8 +21,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _AddSelectBody = require("./AddSelectBody");
 
-var _settings = require("../../settings");
-
 var _addSelectUtils = require("./add-select-utils");
 
 var _excluded = ["items", "globalFilters"];
@@ -31,7 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var blockClass = "".concat(_settings.pkg.prefix, "--add-select");
 var componentName = 'AddSelect';
 var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var items = _ref.items,
@@ -49,7 +46,6 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, modifierAttribute, item[modifierAttribute]);
   }) : [];
   return /*#__PURE__*/_react.default.createElement(_AddSelectBody.AddSelectBody, (0, _extends2.default)({}, props, {
-    className: blockClass,
     ref: ref,
     items: items,
     normalizedItems: normalizedItems,

package/lib/components/AddSelect/AddSelectBody.js

@@ -146,6 +146,19 @@ var AddSelectBody = function AddSelectBody(_ref) {
       setPath = _usePath.setPath,
       pathOnclick = _usePath.pathOnclick;
 
+  var resetState = function resetState() {
+    setSingleSelection('');
+    setMultiSelection([]);
+    setSearchTerm('');
+    setAppliedGlobalFilters({});
+    setDisplayMetaPanel({});
+  };
+
+  var onCloseHandler = function onCloseHandler() {
+    resetState();
+    onClose();
+  };
+
   var classNames = (0, _classnames.default)(className, blockClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__single"), !multi), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0; // handlers
@@ -171,6 +184,8 @@ var AddSelectBody = function AddSelectBody(_ref) {
     } else {
       onSubmit(singleSelection);
     }
+
+    onCloseHandler();
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
@@ -205,6 +220,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
   var showSort = (searchTerm || globalFiltersApplied) && hasResults;
   var showTags = setShowTags();
   var commonListProps = {
+    displayMetalPanel: displayMetalPanel,
     metaIconDescription: metaIconDescription,
     multi: multi,
     multiSelection: multiSelection,
@@ -226,7 +242,7 @@ var AddSelectBody = function AddSelectBody(_ref) {
     actions: [{
       label: onCloseButtonText,
       kind: 'secondary',
-      onClick: onClose
+      onClick: onCloseHandler
     }, {
       label: onSubmitButtonText,
       kind: 'primary',
@@ -268,12 +284,13 @@ var AddSelectBody = function AddSelectBody(_ref) {
     hasFiltersApplied: globalFiltersApplied,
     clearFiltersText: clearFiltersText
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__sub-header")
+    className: (0, _classnames.default)("".concat(blockClass, "__sub-header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__sub-header-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tag-container")
   }, showBreadsCrumbs ? /*#__PURE__*/_react.default.createElement(_AddSelectBreadcrumbs.AddSelectBreadcrumbs, {
     path: path,
-    onClick: pathOnclick
+    onClick: pathOnclick,
+    multi: multi
   }) : /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__tag-container-label")
   }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tag, {

package/lib/components/AddSelect/AddSelectBreadcrumbs.js

@@ -7,30 +7,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AddSelectBreadcrumbs = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _settings = require("../../settings");
+
 //
 // Copyright IBM Corp. 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+var blockClass = "".concat(_settings.pkg.prefix, "--add-select__breadcrumbs");
 var componentName = 'AddSelectBreadcrumbs';
 
 var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
-  var path = _ref.path,
-      onClick = _ref.onClick;
+  var multi = _ref.multi,
+      onClick = _ref.onClick,
+      path = _ref.path;
 
   var clickHandler = function clickHandler(idx) {
     onClick(idx);
   };
 
+  var classNames = (0, _classnames.default)(blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "-multi"), multi));
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Breadcrumb, {
-    noTrailingSlash: true
+    noTrailingSlash: true,
+    className: classNames
   }, path.map(function (entry, idx) {
     var isCurrentPage = idx === path.length - 1;
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.BreadcrumbItem, {
@@ -45,6 +55,7 @@ var AddSelectBreadcrumbs = function AddSelectBreadcrumbs(_ref) {
 
 exports.AddSelectBreadcrumbs = AddSelectBreadcrumbs;
 AddSelectBreadcrumbs.propTypes = {
+  multi: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   path: _propTypes.default.array
 };

package/lib/components/AddSelect/AddSelectColumn.js

@@ -186,7 +186,7 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     className: colClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-search-bar")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Search, {
     value: searchTerm,
     onChange: function onChange(e) {
       return setSearchTerm(e.target.value);
@@ -195,7 +195,8 @@ var AddSelectColumn = function AddSelectColumn(_ref) {
     placeholder: columnInputPlaceholder,
     className: "".concat(colClass, "-input"),
     id: (0, _uuidv.default)(),
-    labelText: columnInputPlaceholder
+    labelText: columnInputPlaceholder,
+    size: "lg"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(colClass, "-sort-filter")
   }, /*#__PURE__*/_react.default.createElement(_AddSelectSort.AddSelectSort, {

package/lib/components/AddSelect/AddSelectFilter.js

@@ -110,7 +110,7 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
   var dirtyInput = Object.keys(filters).length > 0;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "-search")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Search, {
     id: "temp-id",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
@@ -125,7 +125,8 @@ var AddSelectFilter = function AddSelectFilter(_ref) {
     },
     iconDescription: iconDescription,
     className: filterBtnClassnames,
-    size: "md"
+    size: "lg",
+    tooltipPosition: "left"
   }), open && /*#__PURE__*/_react.default.createElement("div", {
     className: blockClass
   }, /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/AddSelect/AddSelectList.js

@@ -38,6 +38,7 @@ var AddSelectList = function AddSelectList(_ref) {
   var _modifiers$options;
 
   var appliedModifiers = _ref.appliedModifiers,
+      displayMetalPanel = _ref.displayMetalPanel,
       filteredItems = _ref.filteredItems,
       metaIconDescription = _ref.metaIconDescription,
       modifiers = _ref.modifiers,
@@ -57,8 +58,8 @@ var AddSelectList = function AddSelectList(_ref) {
     setSingleSelection(value);
   };
 
-  var handleMultiSelection = function handleMultiSelection(id, checked) {
-    if (checked) {
+  var handleMultiSelection = function handleMultiSelection(value, id) {
+    if (value) {
       var newValues = [].concat((0, _toConsumableArray2.default)(multiSelection), [id]);
       setMultiSelection(newValues);
     } else {
@@ -77,7 +78,11 @@ var AddSelectList = function AddSelectList(_ref) {
   };
 
   var isSelected = function isSelected(id) {
-    return multiSelection.includes(id);
+    if (multi) {
+      return multiSelection.includes(id);
+    }
+
+    return id === singleSelection;
   };
 
   var getAvatarProps = function getAvatarProps(_ref3) {
@@ -112,30 +117,53 @@ var AddSelectList = function AddSelectList(_ref) {
     setAppliedModifiers(modifiersClone);
   };
 
+  var metaPanelHandler = function metaPanelHandler(item) {
+    if (item.meta) {
+      setDisplayMetaPanel(item);
+    }
+  };
+
+  var isInMetaPanel = function isInMetaPanel(id) {
+    return id === (displayMetalPanel === null || displayMetalPanel === void 0 ? void 0 : displayMetalPanel.id);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "-wrapper")
+    className: (0, _classnames.default)("".concat(blockClass, "-wrapper"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-wrapper-multi"), multi))
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListWrapper, {
     selection: true,
     className: "".concat(blockClass)
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListBody, null, filteredItems.map(function (item) {
+    var _cx2;
+
     return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListRow, {
       key: item.id,
-      className: (0, _classnames.default)("".concat(blockClass, "-row"), (0, _defineProperty2.default)({}, "".concat(blockClass, "-row-selected"), isSelected(item.id)))
-    }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.StructuredListCell, {
+      className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-selected"), isSelected(item.id)), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "-row-meta-selected"), isInMetaPanel(item.id)), _cx2)),
+      onClick: function onClick(evt) {
+        return metaPanelHandler(item, evt);
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell")
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-wrapper")
     }, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox")
+    },
+    /*#__PURE__*/
+    // hacky way to prevent checkbox from triggering the meta onclick handler
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    _react.default.createElement("div", {
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      }
     }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
-      onChange: function onChange(checked) {
-        return handleMultiSelection(item.id, checked);
+      onChange: function onChange(value, id) {
+        return handleMultiSelection(value, id);
       },
       labelText: item.title,
       id: item.id,
       checked: isSelected(item.id),
       className: "".concat(blockClass, "-checkbox-wrapper")
-    }), /*#__PURE__*/_react.default.createElement("div", {
+    })), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-checkbox-label-wrapper")
     }, item.avatar && /*#__PURE__*/_react.default.createElement(_UserProfileImage.UserProfileImage, getAvatarProps(item.avatar)), item.icon && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "-cell-icon")
@@ -167,7 +195,7 @@ var AddSelectList = function AddSelectList(_ref) {
       onChange: function onChange() {
         return handleSingleSelection(item.id);
       },
-      selected: item.id === singleSelection
+      checked: isSelected(item.id)
     }), item.children && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
       className: "".concat(blockClass, "-view-children"),
       renderIcon: _iconsReact.ChevronRight16,
@@ -189,9 +217,6 @@ var AddSelectList = function AddSelectList(_ref) {
       tooltipPosition: "left",
       tooltipAlignment: "center",
       hasIconOnly: true,
-      onClick: function onClick() {
-        return setDisplayMetaPanel(item);
-      },
       kind: "ghost",
       size: "sm"
     })))));
@@ -201,6 +226,7 @@ var AddSelectList = function AddSelectList(_ref) {
 exports.AddSelectList = AddSelectList;
 AddSelectList.propTypes = {
   appliedModifiers: _propTypes.default.array,
+  displayMetalPanel: _propTypes.default.object,
   filteredItems: _propTypes.default.array,
   metaIconDescription: _propTypes.default.string,
   modifiers: _propTypes.default.object,

package/lib/components/Card/Card.js

@@ -29,7 +29,7 @@ var _CardFooter = require("./CardFooter");
 
 var _settings = require("../../settings");
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
+var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "onSecondaryButtonClick", "pictogram", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonText", "title", "titleSize"],
     _excluded2 = ["id"],
     _excluded3 = ["id", "icon", "onClick", "iconDescription", "onKeyDown", "href"];
 
@@ -50,6 +50,7 @@ var defaults = {
   mediaPosition: 'top',
   overflowActions: Object.freeze([]),
   primaryButtonKind: 'primary',
+  primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
   titleSize: 'default'
@@ -79,6 +80,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       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,
@@ -92,9 +95,9 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0;
+  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || primaryButtonText && primaryButtonPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
-  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText;
+  var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
   var hasClickEvent = !!onClick || !!onKeyDown;
   var clickableProps = {
@@ -194,10 +197,15 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getHeaderProps = function getHeaderProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'top' ? getActions() : '',
+      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
+      onPrimaryButtonClick: onPrimaryButtonClick,
+      primaryButtonIcon: primaryButtonIcon,
+      primaryButtonPlacement: primaryButtonPlacement,
+      primaryButtonText: primaryButtonText,
       description: description,
-      hasActions: hasActions && actionsPlacement === 'top',
+      hasActions: hasActions,
       label: label,
       title: title,
       titleSize: titleSize
@@ -216,7 +224,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var getFooterProps = function getFooterProps() {
     return {
-      actions: getActions(),
+      actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
@@ -225,6 +233,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       primaryButtonHref: primaryButtonHref,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonKind: primaryButtonKind,
+      primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       productive: productive,
       secondaryButtonHref: secondaryButtonHref,
@@ -274,6 +283,7 @@ Card.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.node,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardFooter.js

@@ -44,6 +44,7 @@ var CardFooter = function CardFooter(_ref) {
       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,
@@ -63,7 +64,7 @@ var CardFooter = function CardFooter(_ref) {
     size: "field",
     renderIcon: secondaryButtonIcon,
     href: secondaryButtonHref
-  }, secondaryButtonText), primaryButtonText && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: productive ? 'ghost' : primaryButtonKind,
     onClick: onPrimaryButtonClick,
     size: "field",
@@ -84,6 +85,7 @@ CardFooter.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.string,
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,

package/lib/components/Card/CardHeader.js

@@ -17,6 +17,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _settings = require("../../settings");
 
+var _carbonComponentsReact = require("carbon-components-react");
+
 //
 // Copyright IBM Corp. 2020, 2021
 //
@@ -33,6 +35,11 @@ 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,
@@ -43,6 +50,8 @@ var CardHeader = function CardHeader(_ref) {
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var headerClass = "".concat(blockClass, "__header");
   var headerClasses = (0, _classnames.default)(headerClass, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-label-only"), label && !title && !description), (0, _defineProperty2.default)(_cx, "".concat(headerClass, "-has-label"), !!label), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__title-lg"), titleSize === 'large'), _cx));
+  var actionGhostButton = "".concat(blockClass, "__actions-header-ghost-button");
+  var actionGhostButtonClass = (0, _classnames.default)(actionGhostButton, (0, _defineProperty2.default)({}, "".concat(actionGhostButton, "--only"), noActionIcons));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: headerClasses
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -57,7 +66,13 @@ var CardHeader = function CardHeader(_ref) {
     className: "".concat(blockClass, "__description")
   }, description)), hasActions && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__actions ").concat(blockClass, "__actions-header")
-  }, actions)));
+  }, actions, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    kind: "ghost",
+    size: "small",
+    renderIcon: primaryButtonIcon,
+    onClick: onPrimaryButtonClick,
+    className: actionGhostButtonClass
+  }, primaryButtonText))));
 };
 
 exports.CardHeader = CardHeader;
@@ -66,6 +81,11 @@ CardHeader.propTypes = {
   description: _propTypes.default.string,
   hasActions: _propTypes.default.bool,
   label: _propTypes.default.string,
+  noActionIcons: _propTypes.default.bool,
+  onPrimaryButtonClick: _propTypes.default.func,
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  primaryButtonText: _propTypes.default.string,
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };