@carbon/ibm-products 2.4.0 → 2.4.1

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -56,12 +56,30 @@ export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     editChildren = _ref.editChildren,
     editMode = _ref.editMode,
     label = _ref.label,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
     previewChildren = _ref.previewChildren,
     title = _ref.title,
     titleSize = _ref.titleSize,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    primaryButtonText = _ref.primaryButtonText,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    secondaryButtonText = _ref.secondaryButtonText,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // const [editMode, setEditMode] = useState(false);
+  // const [editCardMode, setEditCardMode] = useState(editMode);
 
+  var conditionalProps = {
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    onSecondaryButtonClick: onSecondaryButtonClick,
+    primaryButtonIcon: primaryButtonIcon,
+    primaryButtonKind: 'ghost',
+    primaryButtonPlacement: 'top',
+    primaryButtonText: primaryButtonText,
+    secondaryButtonIcon: secondaryButtonIcon,
+    secondaryButtonKind: 'ghost',
+    secondaryButtonPlacement: 'top',
+    secondaryButtonText: secondaryButtonText
+  };
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -70,7 +88,7 @@ export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
     ref: ref,
     role: "main"
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, {
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, _extends({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,
     className: className,
@@ -78,7 +96,7 @@ export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     label: label,
     title: title,
     titleSize: titleSize
-  }, editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
+  }, editMode && conditionalProps), editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -127,10 +145,54 @@ EditUpdateCards.propTypes = {
    * Optional label for the top of the card
    */
   label: PropTypes.string,
+  /**
+   * Function that's called from the primary button or action icon
+   */
+  onPrimaryButtonClick: PropTypes.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: PropTypes.func,
   /**
    * Preview mode children
    */
   previewChildren: PropTypes.node,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Establishes the kind of button displayed for the primary button
+   */
+  primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the primary button
+   */
+  primaryButtonText: PropTypes.string,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: PropTypes.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Establishes the kind of button displayed for the secondary button
+   */
+  secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: PropTypes.string,
   /**
    * Title that's displayed at the top of the card
    */

package/es/components/ProductiveCard/ProductiveCard.js

@@ -27,7 +27,7 @@ export var ProductiveCard = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var validProps = prepareProps(rest, ['media', 'mediaPosition', 'onSecondaryButtonClick', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind', 'secondaryButtonText']);
+  var validProps = prepareProps(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/React.createElement(Card, _extends({}, _objectSpread(_objectSpread({}, validProps), {}, {
     actionsPlacement: actionsPlacement,
     ref: ref
@@ -82,6 +82,10 @@ ProductiveCard.propTypes = {
    * Function that's called from the primary button or action icon
    */
   onPrimaryButtonClick: PropTypes.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: PropTypes.func,
   /**
    * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
    */
@@ -111,6 +115,22 @@ ProductiveCard.propTypes = {
    * The text that's displayed in the primary button
    */
   primaryButtonText: PropTypes.node,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: PropTypes.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: PropTypes.node,
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/Card/Card.js

@@ -16,7 +16,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CardHeader = require("./CardHeader");
 var _CardFooter = require("./CardFooter");
 var _settings = require("../../settings");
-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"],
+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", "secondaryButtonPlacement", "secondaryButtonText", "title", "titleSize"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"]; //
 // Copyright IBM Corp. 2020, 2023
@@ -41,6 +41,7 @@ var defaults = {
   primaryButtonPlacement: 'bottom',
   productive: false,
   secondaryButtonKind: 'secondary',
+  secondaryButtonPlacement: 'bottom',
   titleSize: 'default'
 };
 var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -78,6 +79,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     _ref$secondaryButtonK = _ref.secondaryButtonKind,
     secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    _ref$secondaryButtonP = _ref.secondaryButtonPlacement,
+    secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
     secondaryButtonText = _ref.secondaryButtonText,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
@@ -182,12 +185,17 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
+      onSecondaryButtonClick: onSecondaryButtonClick,
       primaryButtonIcon: primaryButtonIcon,
       primaryButtonPlacement: primaryButtonPlacement,
       primaryButtonText: primaryButtonText,
       description: description,
       hasActions: hasActions,
       label: label,
+      secondaryButtonHref: secondaryButtonHref,
+      secondaryButtonIcon: secondaryButtonIcon,
+      secondaryButtonPlacement: secondaryButtonPlacement,
+      secondaryButtonText: secondaryButtonText,
       title: title,
       titleSize: titleSize
     };
@@ -216,6 +224,7 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       secondaryButtonHref: secondaryButtonHref,
       secondaryButtonIcon: secondaryButtonIcon,
       secondaryButtonKind: secondaryButtonKind,
+      secondaryButtonPlacement: secondaryButtonPlacement,
       secondaryButtonText: secondaryButtonText
     };
   };
@@ -266,6 +275,7 @@ Card.propTypes = {
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   secondaryButtonText: _propTypes.default.string,
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])

package/lib/components/Card/CardFooter.js

@@ -44,14 +44,15 @@ var CardFooter = function CardFooter(_ref) {
     secondaryButtonIcon = _ref.secondaryButtonIcon,
     _ref$secondaryButtonK = _ref.secondaryButtonKind,
     secondaryButtonKind = _ref$secondaryButtonK === void 0 ? defaults.secondaryButtonKind : _ref$secondaryButtonK,
+    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
     secondaryButtonText = _ref.secondaryButtonText;
   var blockClass = "".concat(_settings.pkg.prefix, "--card");
   var footerClass = "".concat(_settings.pkg.prefix, "--card__footer");
   var footerClasses = (0, _classnames.default)(footerClass, (0, _defineProperty2.default)({}, "".concat(footerClass, "-no-button"), !hasButton));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: footerClasses
-  }, secondaryButtonText && /*#__PURE__*/_react.default.createElement(_react2.Button, {
-    kind: secondaryButtonKind,
+  }, secondaryButtonText && secondaryButtonPlacement === 'bottom' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: productive ? 'ghost' : secondaryButtonKind,
     onClick: onSecondaryButtonClick,
     size: "md",
     renderIcon: secondaryButtonIcon,
@@ -82,6 +83,7 @@ CardFooter.propTypes = {
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   secondaryButtonText: _propTypes.default.string
 };
 CardFooter.displayName = componentName;

package/lib/components/Card/CardHeader.js

@@ -28,6 +28,7 @@ var CardHeader = function CardHeader(_ref) {
   var actions = _ref.actions,
     noActionIcons = _ref.noActionIcons,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
     primaryButtonIcon = _ref.primaryButtonIcon,
     primaryButtonPlacement = _ref.primaryButtonPlacement,
     primaryButtonText = _ref.primaryButtonText,
@@ -35,6 +36,10 @@ var CardHeader = function CardHeader(_ref) {
     _ref$hasActions = _ref.hasActions,
     hasActions = _ref$hasActions === void 0 ? defaults.hasActions : _ref$hasActions,
     label = _ref.label,
+    secondaryButtonHref = _ref.secondaryButtonHref,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    secondaryButtonPlacement = _ref.secondaryButtonPlacement,
+    secondaryButtonText = _ref.secondaryButtonText,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize;
@@ -57,9 +62,16 @@ 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, primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, actions, secondaryButtonText && secondaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
-    size: "small",
+    onClick: onSecondaryButtonClick,
+    size: "sm",
+    renderIcon: secondaryButtonIcon,
+    href: secondaryButtonHref,
+    className: actionGhostButtonClass
+  }, secondaryButtonText), primaryButtonText && primaryButtonPlacement === 'top' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "sm",
     renderIcon: primaryButtonIcon,
     onClick: onPrimaryButtonClick,
     className: actionGhostButtonClass
@@ -73,9 +85,15 @@ CardHeader.propTypes = {
   label: _propTypes.default.string,
   noActionIcons: _propTypes.default.bool,
   onPrimaryButtonClick: _propTypes.default.func,
+  onSecondaryButtonClick: _propTypes.default.func,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   primaryButtonText: _propTypes.default.string,
+  secondaryButtonHref: _propTypes.default.string,
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  secondaryButtonText: _propTypes.default.string,
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.node]),
   titleSize: _propTypes.default.oneOf(['default', 'large'])
 };

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -14,7 +14,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _ProductiveCard = require("../ProductiveCard");
-var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "onPrimaryButtonClick", "onSecondaryButtonClick", "previewChildren", "title", "titleSize", "primaryButtonIcon", "primaryButtonText", "secondaryButtonIcon", "secondaryButtonText"];
 /**
  * Copyright IBM Corp. 2022, 2022
  *
@@ -59,12 +59,30 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     editChildren = _ref.editChildren,
     editMode = _ref.editMode,
     label = _ref.label,
+    onPrimaryButtonClick = _ref.onPrimaryButtonClick,
+    onSecondaryButtonClick = _ref.onSecondaryButtonClick,
     previewChildren = _ref.previewChildren,
     title = _ref.title,
     titleSize = _ref.titleSize,
+    primaryButtonIcon = _ref.primaryButtonIcon,
+    primaryButtonText = _ref.primaryButtonText,
+    secondaryButtonIcon = _ref.secondaryButtonIcon,
+    secondaryButtonText = _ref.secondaryButtonText,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // const [editMode, setEditMode] = useState(false);
+  // const [editCardMode, setEditCardMode] = useState(editMode);
 
+  var conditionalProps = {
+    onPrimaryButtonClick: onPrimaryButtonClick,
+    onSecondaryButtonClick: onSecondaryButtonClick,
+    primaryButtonIcon: primaryButtonIcon,
+    primaryButtonKind: 'ghost',
+    primaryButtonPlacement: 'top',
+    primaryButtonText: primaryButtonText,
+    secondaryButtonIcon: secondaryButtonIcon,
+    secondaryButtonKind: 'ghost',
+    secondaryButtonPlacement: 'top',
+    secondaryButtonText: secondaryButtonText
+  };
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass,
     // Apply the block class to the main HTML element
@@ -73,7 +91,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     (0, _defineProperty2.default)({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
     ref: ref,
     role: "main"
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ProductiveCard.ProductiveCard, (0, _extends2.default)({
     actionIcons: actionIcons,
     actionsPlacement: actionsPlacement,
     className: className,
@@ -81,7 +99,7 @@ var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     label: label,
     title: title,
     titleSize: titleSize
-  }, editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
+  }, editMode && conditionalProps), editMode === false && /*#__PURE__*/_react.default.createElement("div", null, previewChildren), editMode && /*#__PURE__*/_react.default.createElement("div", null, editChildren)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -131,10 +149,54 @@ EditUpdateCards.propTypes = {
    * Optional label for the top of the card
    */
   label: _propTypes.default.string,
+  /**
+   * Function that's called from the primary button or action icon
+   */
+  onPrimaryButtonClick: _propTypes.default.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: _propTypes.default.func,
   /**
    * Preview mode children
    */
   previewChildren: _propTypes.default.node,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Establishes the kind of button displayed for the primary button
+   */
+  primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
+  /**
+   * Determines if the primary button is on the top or bottom of the card
+   */
+  primaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the primary button
+   */
+  primaryButtonText: _propTypes.default.string,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: _propTypes.default.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Establishes the kind of button displayed for the secondary button
+   */
+  secondaryButtonKind: _propTypes.default.oneOf(['secondary', 'ghost']),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: _propTypes.default.string,
   /**
    * Title that's displayed at the top of the card
    */

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -35,7 +35,7 @@ var ProductiveCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', 'onSecondaryButtonClick', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind', 'secondaryButtonText']);
+  var validProps = (0, _propsHelper.prepareProps)(rest, ['media', 'mediaPosition', 'pictogram', 'primaryButtonClick', 'productive', 'secondaryButtonKind']);
   return /*#__PURE__*/_react.default.createElement(_Card.Card, (0, _extends2.default)({}, _objectSpread(_objectSpread({}, validProps), {}, {
     actionsPlacement: actionsPlacement,
     ref: ref
@@ -91,6 +91,10 @@ ProductiveCard.propTypes = {
    * Function that's called from the primary button or action icon
    */
   onPrimaryButtonClick: _propTypes.default.func,
+  /**
+   * Function that's called from the secondary button or action icon
+   */
+  onSecondaryButtonClick: _propTypes.default.func,
   /**
    * Use an overflow menu instead of action icons. Refer to design documentation for implementation guidelines
    */
@@ -120,6 +124,22 @@ ProductiveCard.propTypes = {
    * The text that's displayed in the primary button
    */
   primaryButtonText: _propTypes.default.node,
+  /**
+   * Optionally specify an href for your Button to become an <a> element
+   */
+  secondaryButtonHref: _propTypes.default.string,
+  /**
+   * Optional prop to allow overriding the icon rendering. Can be a React component class
+   */
+  secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  /**
+   * Determines if the secondary button is on the top or bottom of the card
+   */
+  secondaryButtonPlacement: _propTypes.default.oneOf(['top', 'bottom']),
+  /**
+   * The text that's displayed in the secondary button
+   */
+  secondaryButtonText: _propTypes.default.node,
   /**
    * Title that's displayed at the top of the card
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "ce43460f28f908aeb8ec4bfb2c501dd457d11a58"
+  "gitHead": "3e735167a2cc5e2a7e2f87069c4ae1bc31ce0736"
 }

package/scss/components/Datagrid/_storybook-styles.scss

@@ -54,6 +54,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   padding-bottom: $spacing-06;
 }
 
+.#{$block-class}__side-panel-link {
+  padding-top: $spacing-01;
+  padding-bottom: $spacing-06;
+}
+
 .#{$block-class}__side-panel-section-inner {
   display: flex;
   padding: $spacing-01 0;

package/scss/components/EditUpdateCards/_edit-update-cards.scss

@@ -31,6 +31,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
     .#{c4p-settings.$pkg-prefix}--card__header,
     .#{c4p-settings.$pkg-prefix}--card__footer {
       button {
+        // stylelint-disable-next-line carbon/theme-token-use
+        color: $white-0;
+
         &:hover {
           // stylelint-disable-next-line carbon/theme-token-use
           background-color: $blue-60-hover;
@@ -54,12 +57,14 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
         }
       }
     }
+
     .#{c4p-settings.$pkg-prefix}--card__footer {
       // stylelint-disable-next-line carbon/theme-token-use
       background-color: $blue-60;
       // stylelint-disable-next-line carbon/theme-token-use
       color: $white-0;
     }
+
     .#{c4p-settings.$pkg-prefix}--loading {
       animation-duration: $duration-slow-02;
       animation-fill-mode: forwards;
@@ -71,7 +76,12 @@ $block-class: #{c4p-settings.$pkg-prefix}--edit-update-cards;
         background-color: transparent;
       }
     }
+
+    .#{c4p-settings.$pkg-prefix}--card__header-container {
+      align-items: center;
+    }
   }
+
   &:not(.#{$block-class}__actions-bottom) {
     &##{$block-class}--edit {
       .#{c4p-settings.$pkg-prefix}--card__header {

package/scss/components/ProductiveCard/_productive-card.scss

@@ -77,6 +77,21 @@ $block-class: #{c4p-settings.$pkg-prefix}--card;
       &::before {
         opacity: 0;
       }
+
+      + .#{$block-class}__actions-header-ghost-button {
+        /* stylelint-disable-next-line max-nesting-depth */
+        &::before {
+          opacity: 0;
+        }
+      }
+    }
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    &:first-child:not(:last-child) {
+      /* stylelint-disable-next-line max-nesting-depth */
+      &::before {
+        display: none;
+      }
     }
   }
 

package/scss/components/Tearsheet/_tearsheet.scss

@@ -127,6 +127,12 @@ $motion-duration: $duration-moderate-02;
     width: 100%;
   }
 
+  &.#{$block-class}--wide
+    .#{$pkg-prefix}--action-set
+    .#{$pkg-prefix}--action-set__action-button.#{$pkg-prefix}--action-set__action-button--expressive {
+    height: $spacing-11;
+  }
+
   @include breakpoint(md) {
     &.#{$block-class}--wide .#{$block-class}__container {
       width: calc(100% - (2 * #{$spacing-10}));