@carbon/ibm-products 2.38.0 → 2.39.0

package/es/components/TagOverflow/TagOverflowModal.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { ComposedModal, ModalHeader, Search, ModalBody, Tag } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { prepareProps } from '../../global/js/utils/props-helper.js';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+
+var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
+  _excluded2 = ["label", "id"];
+var componentName = 'TagOverflowModal';
+var blockClass = "".concat(pkg.prefix, "--tag-overflow-modal");
+
+// Default values for props
+var defaults = {
+  // marked as required by TagSet if needed, default used to satisfy <Search /> component
+  searchLabel: ''
+};
+var TagOverflowModal = function TagOverflowModal(_ref) {
+  var allTags = _ref.allTags,
+    className = _ref.className,
+    title = _ref.title,
+    onClose = _ref.onClose,
+    open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
+    _ref$searchLabel = _ref.searchLabel,
+    searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
+    searchPlaceholder = _ref.searchPlaceholder,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    search = _useState2[0],
+    setSearch = _useState2[1];
+  var renderPortalUse = usePortalTarget(portalTargetIn);
+  var getFilteredItems = function getFilteredItems() {
+    var newFilteredModalTags = [];
+    if (open) {
+      if (search === '') {
+        newFilteredModalTags = allTags.slice(0);
+      } else {
+        var lCaseSearch = search.toLocaleLowerCase();
+        allTags.forEach(function (tag) {
+          var _tag$dataSearch, _tag$label;
+          var dataSearch = (_tag$dataSearch = tag['data-search']) === null || _tag$dataSearch === void 0 || (_tag$dataSearch = _tag$dataSearch.toLocaleLowerCase()) === null || _tag$dataSearch === void 0 ? void 0 : _tag$dataSearch.indexOf(lCaseSearch);
+          var labelSearch = (_tag$label = tag.label) === null || _tag$label === void 0 || (_tag$label = _tag$label.toLocaleLowerCase()) === null || _tag$label === void 0 ? void 0 : _tag$label.indexOf(lCaseSearch);
+          if (dataSearch > -1 || labelSearch > -1) {
+            newFilteredModalTags.push(tag);
+          }
+        });
+      }
+    }
+    return newFilteredModalTags;
+  };
+  var handleSearch = function handleSearch(evt) {
+    setSearch(evt.target.value || '');
+  };
+  return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
+    containerClassName: "".concat(blockClass, "__container"),
+    className: cx(className, blockClass),
+    size: "sm",
+    "aria-label": "Search all",
+    open: open,
+    onClose: onClose
+  }), /*#__PURE__*/React__default.createElement(ModalHeader, {
+    className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
+    title: title
+  }, /*#__PURE__*/React__default.createElement(Search, {
+    "data-modal-primary-focus": true,
+    className: "".concat(blockClass, "__search"),
+    labelText: searchLabel,
+    placeholder: searchPlaceholder,
+    onChange: handleSearch,
+    size: "lg"
+  })), /*#__PURE__*/React__default.createElement(ModalBody, {
+    className: "".concat(blockClass, "__body"),
+    hasForm: true
+  }, getFilteredItems().map(function (_ref2) {
+    var label = _ref2.label,
+      id = _ref2.id,
+      other = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/React__default.createElement(Tag, _extends({}, other, {
+      filter: false,
+      key: id
+    }), label);
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__fade")
+  })));
+};
+TagOverflowModal.propTypes = {
+  allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, prepareProps(Tag.propTypes, 'filter')), {}, {
+    label: PropTypes.string.isRequired
+  }))),
+  className: PropTypes.string,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+  portalTarget: PropTypes.node,
+  searchLabel: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  title: PropTypes.string
+};
+TagOverflowModal.displayName = componentName;
+
+export { TagOverflowModal };

package/es/components/TagOverflow/TagOverflowPopover.d.ts

@@ -0,0 +1,2 @@
+export const TagOverflowPopover: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/TagOverflow/TagOverflowPopover.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { Popover, Tag, PopoverContent, Link } from '@carbon/react';
+import { pkg } from '../../settings.js';
+import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
+
+var _excluded = ["allTagsModalSearchThreshold", "className", "onShowAllClick", "overflowAlign", "overflowTags", "overflowType", "showAllTagsLabel", "popoverOpen", "setPopoverOpen"];
+var componentName = 'TagOverflowPopover';
+var blockClass = "".concat(pkg.prefix, "--tag-overflow-popover");
+
+// Default values for props
+var defaults = {
+  allTagsModalSearchThreshold: 10,
+  overflowAlign: 'bottom'
+};
+var TagOverflowPopover = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
+    allTagsModalSearchThreshold = _ref$allTagsModalSear === void 0 ? defaults.allTagsModalSearchThreshold : _ref$allTagsModalSear,
+    className = _ref.className,
+    onShowAllClick = _ref.onShowAllClick,
+    _ref$overflowAlign = _ref.overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowTags = _ref.overflowTags,
+    overflowType = _ref.overflowType,
+    showAllTagsLabel = _ref.showAllTagsLabel,
+    popoverOpen = _ref.popoverOpen,
+    setPopoverOpen = _ref.setPopoverOpen,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var localRef = useRef();
+  var overflowTagContent = useRef(null);
+  useClickOutside(ref || localRef, function () {
+    if (popoverOpen) {
+      setPopoverOpen(false);
+    }
+  });
+  var handleShowAllTagsClick = function handleShowAllTagsClick(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    setPopoverOpen(false);
+    onShowAllClick();
+  };
+  var handleEscKeyPress = function handleEscKeyPress(event) {
+    var key = event.key;
+    if (key === 'Escape') {
+      setPopoverOpen(false);
+    }
+  };
+  var getOverflowPopoverItems = function getOverflowPopoverItems() {
+    return overflowTags.filter(function (_, index) {
+      return overflowTags.length > allTagsModalSearchThreshold ? index < allTagsModalSearchThreshold : index <= allTagsModalSearchThreshold;
+    });
+  };
+  return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
+    "aria-hidden": overflowTags.length === 0,
+    className: cx(blockClass, _defineProperty({}, "".concat(blockClass, "--hidden"), overflowTags.length === 0)),
+    ref: ref || localRef
+  }), /*#__PURE__*/React__default.createElement(Popover, {
+    align: overflowAlign,
+    className: cx(className, "".concat(blockClass, "__el")),
+    dropShadow: true,
+    highContrast: true,
+    onKeyDown: handleEscKeyPress,
+    open: popoverOpen
+  }, /*#__PURE__*/React__default.createElement(Tag, {
+    onClick: function onClick() {
+      return setPopoverOpen(!popoverOpen);
+    },
+    className: cx("".concat(blockClass, "__trigger"))
+  }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
+    ref: overflowTagContent,
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "".concat(blockClass, "__tag-list")
+  }, getOverflowPopoverItems().map(function (tag) {
+    return /*#__PURE__*/React__default.createElement("li", {
+      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
+      key: tag.id
+    }, tag.label);
+  })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
+    className: "".concat(blockClass, "__show-all-tags-link"),
+    href: "",
+    onClick: handleShowAllTagsClick,
+    role: "button"
+  }, showAllTagsLabel)))));
+});
+TagOverflowPopover.displayName = componentName;
+TagOverflowPopover.propTypes = {
+  /**
+   * count of overflowTags over which a modal is offered
+   */
+  allTagsModalSearchThreshold: PropTypes.number,
+  /**
+   * className
+   */
+  className: PropTypes.string,
+  /**
+   * function to execute on clicking show all
+   */
+  onShowAllClick: PropTypes.func.isRequired,
+  /**
+   * overflowAlign from the standard tooltip
+   */
+  overflowAlign: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
+  /**
+   * tags shown in overflow
+   */
+  overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Type of rendering displayed inside of the tag overflow component
+   */
+  overflowType: PropTypes.oneOf(['default', 'tag']),
+  /**
+   * Open state of the popover
+   */
+  popoverOpen: PropTypes.bool,
+  /**
+   * Setter function for the popoverOpen state value
+   */
+  setPopoverOpen: PropTypes.func,
+  /**
+   * label for the overflow show all tags link
+   */
+  showAllTagsLabel: PropTypes.string
+};
+
+export { TagOverflowPopover };

package/es/components/index.d.ts

@@ -54,6 +54,7 @@ export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
+export { GetStartedCard } from "./GetStartedCard";
 export { ComboButton, ComboButtonItem } from "./ComboButton";
 export { CreateFullPage, CreateFullPageStep } from "./CreateFullPage";
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from "./CreateTearsheet";

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

@@ -96,6 +96,7 @@ declare namespace defaults {
         let FilterPanelLabel: boolean;
         let FilterPanelSearch: boolean;
         let ConditionBuilder: boolean;
+        let GetStartedCard: boolean;
         let Coachmark: boolean;
         let CoachmarkBeacon: boolean;
         let CoachmarkButton: boolean;

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

@@ -95,6 +95,7 @@ var defaults = {
     FilterPanelLabel: false,
     FilterPanelSearch: false,
     ConditionBuilder: false,
+    GetStartedCard: false,
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:

package/es/index.js

@@ -132,3 +132,4 @@ export { FilterPanelGroup } from './components/FilterPanel/FilterPanelGroup/Filt
 export { FilterPanelLabel } from './components/FilterPanel/FilterPanelLabel/FilterPanelLabel.js';
 export { FilterPanelSearch } from './components/FilterPanel/FilterPanelSearch/FilterPanelSearch.js';
 export { ConditionBuilder } from './components/ConditionBuilder/ConditionBuilder.js';
+export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';

package/es/settings.d.ts

@@ -82,6 +82,7 @@ export const pkg: {
         FilterPanelLabel: boolean;
         FilterPanelSearch: boolean;
         ConditionBuilder: boolean;
+        GetStartedCard: boolean;
         Coachmark: boolean;
         CoachmarkBeacon: boolean;
         CoachmarkButton: boolean;

package/lib/components/Card/Card.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var cx = require('classnames');
 var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
 var index = require('../../node_modules/prop-types/index.js');
 var CardHeader = require('./CardHeader.js');
 var CardFooter = require('./CardFooter.js');
@@ -23,7 +24,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "title", "titleSize"],
+var _Incomplete, _CheckmarkOutline;
+var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -47,11 +49,16 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    _ref$metadata = _ref.metadata,
+    metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
     children = _ref.children,
     className = _ref.className,
     _ref$clickZone = _ref.clickZone,
     clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
     description = _ref.description,
+    disabled = _ref.disabled,
+    footerActionIcon = _ref.footerActionIcon,
+    getStarted = _ref.getStarted,
     label = _ref.label,
     media = _ref.media,
     _ref$mediaPosition = _ref.mediaPosition,
@@ -83,12 +90,18 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
     secondaryButtonText = _ref.secondaryButtonText,
     slug = _ref.slug,
+    status = _ref.status,
+    sequence = _ref.sequence,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var getIcons = function getIcons() {
+    return getStarted ? metadata : actionIcons;
+  };
   var blockClass = "".concat(settings.pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasHeaderActions = hasActions && actionsPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -120,13 +133,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }, rest));
       })));
     }
-    var icons = actionIcons.map(function (_ref3) {
+    var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,
         Icon = _ref3.icon,
         onClick = _ref3.onClick,
         iconDescription = _ref3.iconDescription,
         href = _ref3.href,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
+      if (getStarted) {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: id,
+          className: "".concat(blockClass, "__icon")
+        }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+          "aria-label": iconDescription
+        }), iconDescription);
+      }
       if (productive) {
         return /*#__PURE__*/React__default["default"].createElement(react.Button, _rollupPluginBabelHelpers["extends"]({}, rest, {
           key: id,
@@ -166,7 +187,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx__default["default"](blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -182,7 +203,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
+      noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
       onSecondaryButtonClick: onSecondaryButtonClick,
@@ -191,7 +212,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       primaryButtonText: primaryButtonText,
       primaryButtonDisabled: primaryButtonDisabled,
       description: description,
-      hasActions: hasActions,
+      hasActions: hasHeaderActions,
       inClickableCard: hasClickEvent,
       label: label,
       secondaryButtonDisabled: secondaryButtonDisabled,
@@ -215,6 +236,8 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return {
       actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
+      disabled: disabled,
+      footerActionIcon: footerActionIcon,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -234,13 +257,21 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), media && /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__pictogram")
-  }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(Pictogram, null)), getStarted && sequence && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__sequence")
+  }, sequence), getStarted && status && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__status")
+  }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default["default"].createElement(icons.Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content-container")
-  }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
+  }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__header-container")
+  }, /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));
 });
 Card.propTypes = {
   actionIcons: index["default"].arrayOf(index["default"].shape({
@@ -256,9 +287,17 @@ Card.propTypes = {
   className: index["default"].string,
   clickZone: index["default"].oneOf(['one', 'two', 'three']),
   description: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  disabled: index["default"].bool,
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  getStarted: index["default"].bool,
   label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
   media: index["default"].node,
   mediaPosition: index["default"].oneOf(['top', 'left']),
+  metadata: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string,
+    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+    iconDescription: index["default"].string
+  })),
   onClick: index["default"].func,
   onKeyDown: index["default"].func,
   onPrimaryButtonClick: index["default"].func,
@@ -284,11 +323,13 @@ Card.propTypes = {
   secondaryButtonKind: index["default"].oneOf(['secondary', 'ghost']),
   secondaryButtonPlacement: index["default"].oneOf(['top', 'bottom']),
   secondaryButtonText: index["default"].string,
+  sequence: index["default"].number,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
   slug: index["default"].oneOfType([index["default"].node, index["default"].bool]),
+  status: index["default"].oneOf(['complete', 'incomplete']),
   title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
   titleSize: index["default"].oneOf(['default', 'large'])
 };

package/lib/components/Card/CardFooter.d.ts

@@ -1,5 +1,7 @@
-export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
+export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
     actions?: any[] | undefined;
+    disabled: any;
+    footerActionIcon: any;
     hasActions: any;
     hasButton: any;
     onPrimaryButtonClick: any;
@@ -21,6 +23,8 @@ export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClic
 export namespace CardFooter {
     export namespace propTypes {
         let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let footerActionIcon: PropTypes.Requireable<object>;
         let hasActions: PropTypes.Requireable<boolean>;
         let hasButton: PropTypes.Requireable<boolean>;
         let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;

package/lib/components/Card/CardFooter.js

@@ -15,12 +15,14 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var index = require('../../node_modules/prop-types/index.js');
 var settings = require('../../settings.js');
+var icons = require('@carbon/react/icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
+var _Error;
 var componentName = 'CardFooter';
 var defaults = {
   actions: Object.freeze([]),
@@ -31,6 +33,8 @@ var defaults = {
 var CardFooter = function CardFooter(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+    disabled = _ref.disabled,
+    FooterActionIcon = _ref.footerActionIcon,
     hasActions = _ref.hasActions,
     hasButton = _ref.hasButton,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -72,10 +76,16 @@ var CardFooter = function CardFooter(_ref) {
     disabled: primaryButtonDisabled
   }, primaryButtonText), hasActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, actions));
+  }, actions), FooterActionIcon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__action-icon")
+  }, disabled ? _Error || (_Error = /*#__PURE__*/React__default["default"].createElement(icons.Error, {
+    size: 16
+  })) : /*#__PURE__*/React__default["default"].createElement(FooterActionIcon, null)));
 };
 CardFooter.propTypes = {
   actions: index["default"].oneOfType([index["default"].array, index["default"].node]),
+  disabled: index["default"].bool,
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
   hasActions: index["default"].bool,
   hasButton: index["default"].bool,
   onPrimaryButtonClick: index["default"].func,

package/lib/components/Carousel/Carousel.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface CarouselProps {
+export interface CarouselProps {
     /**
      * Provide the contents of the Carousel.
      */
@@ -41,6 +41,10 @@ interface CarouselProps {
      * a value between 0 and 1.
      */
     onScroll?: (scrollPercent: number) => void;
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
 }
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
@@ -58,5 +62,5 @@ interface CarouselProps {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Carousel };