@carbon/ibm-products 1.0.0-rc.2 → 1.2.0

package/es/components/Card/Card.js

@@ -87,7 +87,8 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown;
+          onKeyDown = _ref3.onKeyDown,
+          href = _ref3.href;
 
       if (productive) {
         return /*#__PURE__*/React.createElement(Button, {
@@ -97,10 +98,22 @@ export var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
           onClick: onClick,
           size: actionsPlacement === 'top' ? 'sm' : 'field',
           iconDescription: iconDescription,
-          kind: "ghost"
+          kind: "ghost",
+          href: href
         });
       }
 
+      if (href) {
+        return /*#__PURE__*/React.createElement("a", {
+          key: id,
+          className: "".concat(blockClass, "__icon"),
+          href: href,
+          onClick: onClick
+        }, /*#__PURE__*/React.createElement(Icon, {
+          "aria-label": iconDescription
+        }));
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         key: id,
         className: "".concat(blockClass, "__icon"),
@@ -195,7 +208,8 @@ Card.propTypes = {
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
   children: PropTypes.node,
@@ -219,7 +233,7 @@ Card.propTypes = {
   primaryButtonHref: PropTypes.string,
   primaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   primaryButtonKind: PropTypes.oneOf(['primary', 'ghost']),
-  primaryButtonText: PropTypes.string,
+  primaryButtonText: PropTypes.node,
   productive: PropTypes.bool,
   secondaryButtonHref: PropTypes.string,
   secondaryButtonIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -22,14 +22,15 @@ export var ExpressiveCard = /*#__PURE__*/forwardRef(function (props, ref) {
 ExpressiveCard = pkg.checkComponentEnabled(ExpressiveCard, componentName);
 ExpressiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
 
   /**

package/es/components/PageHeader/PageHeader.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title"];
+var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -22,7 +22,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { Grid, Column, Row, Button, Tag } from 'carbon-components-react';
 import { useWindowResize, useNearestScroll } from '../../global/js/hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { prepareProps } from '../../global/js/utils/props-helper';
+import { deprecateProp, prepareProps } from '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
 import { ActionBar } from '../ActionBar/';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow';
@@ -33,7 +33,7 @@ var componentName = 'PageHeader';
 import { blockClass, utilCheckUpdateVerticalSpace, utilGetBreadcrumbItemForTitle, utilSetCollapsed } from './PageHeaderUtils';
 import { PageHeaderTitle } from './PageHeaderTitle';
 export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref5, _cx2, _ref6, _cx4, _cx7;
+  var _withoutBackground, _ref5, _cx2, _ref6, _cx4, _cx7;
 
   var actionBarItems = _ref.actionBarItems,
       actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -41,7 +41,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       allTagsModalSearchLabel = _ref.allTagsModalSearchLabel,
       allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
       allTagsModalTitle = _ref.allTagsModalTitle,
-      hasBackgroundAlways = _ref.hasBackgroundAlways,
+      deprecated_hasBackgroundAlways = _ref.hasBackgroundAlways,
       breadcrumbOverflowAriaLabel = _ref.breadcrumbOverflowAriaLabel,
       breadcrumbs = _ref.breadcrumbs,
       children = _ref.children,
@@ -62,8 +62,13 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       subtitle = _ref.subtitle,
       tags = _ref.tags,
       title = _ref.title,
+      withoutBackground = _ref.withoutBackground,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  // handle deprecated props - START
+  // if withoutBackground is null check deprecated_hasBackgroundAlways and default false
+  (_withoutBackground = withoutBackground) !== null && _withoutBackground !== void 0 ? _withoutBackground : withoutBackground = !(deprecated_hasBackgroundAlways !== null && deprecated_hasBackgroundAlways !== void 0 ? deprecated_hasBackgroundAlways : true); // handle deprecated props - END
+
   var _useState = useState({}),
       _useState2 = _slicedToArray(_useState, 2),
       metrics = _useState2[0],
@@ -85,7 +90,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }; // state based on props only
 
 
-  var hasActionBar = actionBarItems && actionBarItems.length;
+  var hasActionBar = actionBarItems && actionBarItems.length > 0;
   var hasBreadcrumbRow = breadcrumbs || actionBarItems; // NOTE: The buffer is used to add space between the bottom of the header and the last content
   // Not pre-collapsed and (subtitle or children)
 
@@ -282,8 +287,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullWidthGrid, narrowGrid]);
   useEffect(function () {
-    // Determines if the hasBackgroundAlways should be one based on the header height or scroll
-    var result = hasBackgroundAlways ? 1 : 0;
+    // Determines the appropriate header background opacity based on the header config/height/scroll and the withoutBackground setting
+    var result = withoutBackground ? 0 : 1;
 
     if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
       var startAddingAt = parseFloat(layout05, 10) * parseInt(baseFontSize);
@@ -301,13 +306,13 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, "--".concat(blockClass, "--background-opacity"), result));
     });
-  }, [actionBarItems, hasBackgroundAlways, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
+  }, [actionBarItems, withoutBackground, breadcrumbs, headerRef, metrics.breadcrumbRowHeight, metrics.headerHeight, navigation, scrollYValue, hasCollapseHeaderToggle, tags]);
   useEffect(function () {
-    // only has toggle if requested and has hasBackgroundAlways
+    // only has toggle if requested and withoutBackground is unset/falsy
     // NOTE: prop-types isRequired.if for the expand and collapse
     // icon descriptions depends on the this.
-    setHasCollapseButton(hasCollapseHeaderToggle && hasBackgroundAlways);
-  }, [hasBackgroundAlways, hasCollapseHeaderToggle]);
+    setHasCollapseButton(hasCollapseHeaderToggle && !withoutBackground);
+  }, [withoutBackground, hasCollapseHeaderToggle]);
   useEffect(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
     setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
@@ -446,6 +451,8 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
       return /*#__PURE__*/React.createElement(_Tag, {
         className: cx("".concat(blockClass, "__page-actions"), _defineProperty({}, "".concat(blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cx("".concat(blockClass, "__page-actions-content"))
       }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/React.createElement(ButtonSetWithOverflow, {
         classname: "".concat(blockClass, "__button-set-with-overflow"),
         menuOptionsClass: cx(pageActionsMenuOptionsClass, "".concat(blockClass, "__button-set-menu-options")),
@@ -453,7 +460,7 @@ export var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
         rightAlign: true
-      }));
+      })));
     }
   }
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -474,7 +481,13 @@ var TYPES = {
   'high-contrast': 'High-Contrast'
 };
 var tagTypes = Object.keys(TYPES);
-PageHeader.propTypes = {
+export var deprecatedProps = {
+  /**
+   * **Deprecated** see property `withoutBackground`
+   */
+  hasBackgroundAlways: deprecateProp(PropTypes.bool, 'Property replaced by `withoutBackground`')
+};
+PageHeader.propTypes = _objectSpread({
   /**
    * Specifies the action bar items which are the final items in the row top of the PageHeader.
    * Each item is specified as an object with the properties of a Carbon Button in icon only form.
@@ -498,9 +511,8 @@ PageHeader.propTypes = {
    * NOTE: This prop is required if actionBarItems are supplied
    */
   actionBarOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref8) {
-    var actionBarItems = _ref8.actionBarItems,
-        actionBarOverflowLabel = _ref8.actionBarOverflowLabel;
-    return actionBarItems && actionBarItems.length > 0 && !actionBarOverflowLabel;
+    var actionBarItems = _ref8.actionBarItems;
+    return actionBarItems && actionBarItems.length > 0;
   }),
 
   /**
@@ -535,9 +547,8 @@ PageHeader.propTypes = {
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
   breadcrumbOverflowAriaLabel: PropTypes.string.isRequired.if(function (_ref9) {
-    var breadcrumbs = _ref9.breadcrumbs,
-        breadcrumbItems = _ref9.breadcrumbItems;
-    return breadcrumbs && breadcrumbs.length > 0 || breadcrumbItems && breadcrumbItems.length > 0;
+    var breadcrumbs = _ref9.breadcrumbs;
+    return breadcrumbs && breadcrumbs.length > 0;
   }),
 
   /**
@@ -603,13 +614,13 @@ PageHeader.propTypes = {
   collapseHeader: PropTypes.bool,
 
   /**
-   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
-   * for both the expend and collapse states of the button component used.
+   * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
+   * required for both the expend and collapse states of the button component used.
    */
   collapseHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref11) {
-    var hasBackgroundAlways = _ref11.hasBackgroundAlways,
+    var withoutBackground = _ref11.withoutBackground,
         hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -625,13 +636,13 @@ PageHeader.propTypes = {
   disableBreadcrumbScroll: PropTypes.bool,
 
   /**
-   * If `hasCollapseHeaderToggle` and `hasBackgroundAlways` are set then assistive text is required
-   * for both the expend and collapse states of the button component used.
+   * If `hasCollapseHeaderToggle` is set and `withoutBackground` is unset/falsy then assistive text is
+   * required for both the expend and collapse states of the button component used.
    */
   expandHeaderIconDescription: PropTypes.string.isRequired.if(function (_ref12) {
-    var hasBackgroundAlways = _ref12.hasBackgroundAlways,
+    var withoutBackground = _ref12.withoutBackground,
         hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -640,12 +651,6 @@ PageHeader.propTypes = {
    */
   fullWidthGrid: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['xl'])]),
 
-  /**
-   * Specifies if the PageHeader should have a background always on and defaults to the preferred `true`.
-   * When false some parts of the header gain a background if they stick to the top of the PageHeader on scroll.
-   */
-  hasBackgroundAlways: PropTypes.bool,
-
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
    *
@@ -769,11 +774,16 @@ PageHeader.propTypes = {
     content: PropTypes.node.isRequired,
     breadcrumbContent: PropTypes.node,
     asText: PropTypes.string.isRequired
-  })])
-};
+  })]),
+
+  /**
+   * Specifies if the PageHeader should appear without a background color, and defaults to the preferred `false` (a background color is shown).
+   * Note that when `true` some parts of the header still gain a background if and when they stick to the top of the PageHeader on scroll.
+   */
+  withoutBackground: PropTypes.bool
+}, deprecatedProps);
 PageHeader.defaultProps = {
   fullWidthGrid: false,
-  hasBackgroundAlways: true,
   narrowGrid: false
 };
 PageHeader.displayName = componentName;

package/es/components/ProductiveCard/ProductiveCard.js

@@ -30,7 +30,8 @@ ProductiveCard.propTypes = {
     icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     onKeyDown: PropTypes.func,
     onClick: PropTypes.func,
-    iconDescription: PropTypes.string
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
   })),
 
   /**
@@ -96,7 +97,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: PropTypes.string,
+  primaryButtonText: PropTypes.node,
 
   /**
    * Title that's displayed at the top of the card

package/es/components/Toolbar/ToolbarButton.js

@@ -14,10 +14,11 @@ import cx from 'classnames';
 import { bool, node, string } from 'prop-types';
 import React, { forwardRef, useContext } from 'react';
 import { pkg } from '../../settings';
-import { blockClass, ToolbarContext } from './Toolbar';
+import { blockClass as toolbarClass, ToolbarContext } from './Toolbar';
+var blockClass = "".concat(toolbarClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 
-export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext;
 
   var caret = _ref.caret,
@@ -29,12 +30,12 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     tooltipPosition: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
     ref: ref,
-    className: cx(className, _defineProperty({}, "".concat(blockClass, "__button--caret"), caret)),
+    className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
     size: "md",
     hasIconOnly: true
   }), /*#__PURE__*/React.createElement(React.Fragment, null, children, caret && /*#__PURE__*/React.createElement("span", {
-    className: "".concat(blockClass, "__button__caret")
+    className: "".concat(blockClass, "__caret")
   })));
 });
 var componentName = 'ToolbarButton';
@@ -52,4 +53,5 @@ ToolbarButton.propTypes = {
 ToolbarButton.defaultProps = {
   caret: false
 };
-ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
+ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
+export { blockClass, ToolbarButton };

package/es/components/_Canary/Canary.js

@@ -30,7 +30,7 @@ export var Canary = function Canary(_ref
       componentName = _ref.componentName,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var instructions = "\nimport { pkg } from '@carbon/ibm-cloud-cognitive';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
+  var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className)
   }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/React.createElement(CodeSnippet, {

package/es/components/index.js

@@ -14,7 +14,6 @@ export { CreateSidePanel } from './CreateSidePanel';
 export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from './CreateTearsheet';
 export { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
 export { EmptyState, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from './EmptyStates';
-export { ExampleComponent } from './ExampleComponent';
 export { ExportModal } from './ExportModal';
 export { ExpressiveCard } from './ExpressiveCard';
 export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';

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

@@ -52,7 +52,6 @@ var defaults = {
     UnauthorizedEmptyState: true,
     UserProfileImage: true,
     // other public components not yet reviewed and released:
-    ExampleComponent: false,
     LoadingBar: false,
     ModifiedTabs: false,
     Toolbar: false,

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

@@ -4,6 +4,8 @@
 // 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 PropTypes from 'prop-types';
 import { sanitize } from '@storybook/csf';
 import pkg from '../package-settings';
 import { getPathForComponent } from '../../../../../core/story-structure';
@@ -50,4 +52,24 @@ export var prepareStory = function prepareStory(template, options) {
   (_result$parameters2$c = (_result$parameters2 = result.parameters).ccsSettings) !== null && _result$parameters2$c !== void 0 ? _result$parameters2$c : _result$parameters2.ccsSettings = {};
   result.parameters.ccsSettings.sequence = sequence++;
   return result;
+};
+/**
+ * A helper component that returns a codesandbox link to an example codesandbox for the component.
+ * The link URL is based on the example directory name and the standard codesandbox URL for package examples.
+ */
+
+export var CodesandboxLink = function CodesandboxLink(_ref) {
+  var exampleDirectory = _ref.exampleDirectory;
+  return /*#__PURE__*/React.createElement("a", {
+    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/carbon-for-ibm-products/".concat(exampleDirectory)
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "Edit on CodeSandbox",
+    src: "https://codesandbox.io/static/img/play-codesandbox.svg"
+  }));
+};
+CodesandboxLink.propTypes = {
+  /**
+   * directory withing examples codesandbox will be found
+   */
+  exampleDirectory: PropTypes.string
 };

package/lib/components/Card/Card.js

@@ -104,7 +104,8 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           Icon = _ref3.icon,
           onClick = _ref3.onClick,
           iconDescription = _ref3.iconDescription,
-          onKeyDown = _ref3.onKeyDown;
+          onKeyDown = _ref3.onKeyDown,
+          href = _ref3.href;
 
       if (productive) {
         return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -114,10 +115,22 @@ var Card = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           onClick: onClick,
           size: actionsPlacement === 'top' ? 'sm' : 'field',
           iconDescription: iconDescription,
-          kind: "ghost"
+          kind: "ghost",
+          href: href
         });
       }
 
+      if (href) {
+        return /*#__PURE__*/_react.default.createElement("a", {
+          key: id,
+          className: "".concat(blockClass, "__icon"),
+          href: href,
+          onClick: onClick
+        }, /*#__PURE__*/_react.default.createElement(Icon, {
+          "aria-label": iconDescription
+        }));
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
         key: id,
         className: "".concat(blockClass, "__icon"),
@@ -213,7 +226,8 @@ Card.propTypes = {
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
   actionsPlacement: _propTypes.default.oneOf(['top', 'bottom']),
   children: _propTypes.default.node,
@@ -237,7 +251,7 @@ Card.propTypes = {
   primaryButtonHref: _propTypes.default.string,
   primaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   primaryButtonKind: _propTypes.default.oneOf(['primary', 'ghost']),
-  primaryButtonText: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.node,
   productive: _propTypes.default.bool,
   secondaryButtonHref: _propTypes.default.string,
   secondaryButtonIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -45,14 +45,15 @@ exports.ExpressiveCard = ExpressiveCard;
 exports.ExpressiveCard = ExpressiveCard = _settings.pkg.checkComponentEnabled(ExpressiveCard, componentName);
 ExpressiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
    */
   actionIcons: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string,
     icon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     onKeyDown: _propTypes.default.func,
     onClick: _propTypes.default.func,
-    iconDescription: _propTypes.default.string
+    iconDescription: _propTypes.default.string,
+    href: _propTypes.default.string
   })),
 
   /**