@carbon/ibm-products 1.0.0 → 1.2.1

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],
@@ -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);
@@ -476,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.
@@ -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/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

@@ -61,7 +61,7 @@ export var prepareStory = function prepareStory(template, options) {
 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/cloud-cognitive/".concat(exampleDirectory)
+    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"

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
   })),
 
   /**

package/lib/components/PageHeader/PageHeader.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PageHeader = void 0;
+exports.deprecatedProps = exports.PageHeader = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -51,7 +51,7 @@ var _PageHeaderUtils = require("./PageHeaderUtils");
 
 var _PageHeaderTitle = require("./PageHeaderTitle");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,7 +64,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var componentName = 'PageHeader';
 
 var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref5, _cx2, _ref6, _cx4, _cx7;
+  var _withoutBackground, _ref5, _cx2, _ref6, _cx4, _cx7;
 
   var actionBarItems = _ref.actionBarItems,
       actionBarMenuOptionsClass = _ref.actionBarMenuOptionsClass,
@@ -72,7 +72,7 @@ var PageHeader = /*#__PURE__*/_react.default.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,
@@ -93,7 +93,11 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       subtitle = _ref.subtitle,
       tags = _ref.tags,
       title = _ref.title,
+      withoutBackground = _ref.withoutBackground,
       rest = (0, _objectWithoutProperties2.default)(_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 = (0, _react.useState)({}),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -313,8 +317,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullWidthGrid, narrowGrid]);
   (0, _react.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(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
@@ -332,13 +336,13 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     setPageHeaderStyles(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, (0, _defineProperty2.default)({}, "--".concat(_PageHeaderUtils.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]);
   (0, _react.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]);
   (0, _react.useEffect)(function () {
     // Determine if space is needed in the breadcrumb for a collapse button
     setSpaceForCollapseButton(hasCollapseButton && !(navigation || tags) && metrics.headerHeight);
@@ -509,7 +513,14 @@ var TYPES = {
   'high-contrast': 'High-Contrast'
 };
 var tagTypes = Object.keys(TYPES);
-PageHeader.propTypes = {
+var deprecatedProps = {
+  /**
+   * **Deprecated** see property `withoutBackground`
+   */
+  hasBackgroundAlways: (0, _propsHelper.deprecateProp)(_propTypes.default.bool, 'Property replaced by `withoutBackground`')
+};
+exports.deprecatedProps = deprecatedProps;
+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.
@@ -636,13 +647,13 @@ PageHeader.propTypes = {
   collapseHeader: _propTypes.default.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.default.string.isRequired.if(function (_ref11) {
-    var hasBackgroundAlways = _ref11.hasBackgroundAlways,
+    var withoutBackground = _ref11.withoutBackground,
         hasCollapseHeaderToggle = _ref11.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -658,13 +669,13 @@ PageHeader.propTypes = {
   disableBreadcrumbScroll: _propTypes.default.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.default.string.isRequired.if(function (_ref12) {
-    var hasBackgroundAlways = _ref12.hasBackgroundAlways,
+    var withoutBackground = _ref12.withoutBackground,
         hasCollapseHeaderToggle = _ref12.hasCollapseHeaderToggle;
-    return hasBackgroundAlways && hasCollapseHeaderToggle;
+    return !withoutBackground && hasCollapseHeaderToggle;
   }),
 
   /**
@@ -673,12 +684,6 @@ PageHeader.propTypes = {
    */
   fullWidthGrid: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.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.default.bool,
-
   /**
    * Adds a button as the last element of the bottom row which collapses and expands the header.
    *
@@ -802,11 +807,16 @@ PageHeader.propTypes = {
     content: _propTypes.default.node.isRequired,
     breadcrumbContent: _propTypes.default.node,
     asText: _propTypes.default.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.default.bool
+}, deprecatedProps);
 PageHeader.defaultProps = {
   fullWidthGrid: false,
-  hasBackgroundAlways: true,
   narrowGrid: false
 };
 PageHeader.displayName = componentName;

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -53,7 +53,8 @@ ProductiveCard.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
   })),
 
   /**
@@ -119,7 +120,7 @@ ProductiveCard.propTypes = {
   /**
    * The text that's displayed in the primary button
    */
-  primaryButtonText: _propTypes.default.string,
+  primaryButtonText: _propTypes.default.node,
 
   /**
    * Title that's displayed at the top of the card

package/lib/components/Toolbar/ToolbarButton.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarButton = void 0;
+exports.blockClass = exports.ToolbarButton = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,7 +33,10 @@ 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(_Toolbar.blockClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
+
+exports.blockClass = blockClass;
 var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useContext;
 
@@ -45,12 +48,12 @@ var ToolbarButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     tooltipPosition: ((_useContext = (0, _react.useContext)(_Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
     ref: ref,
-    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(_Toolbar.blockClass, "__button--caret"), caret)),
+    className: (0, _classnames.default)(className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
     size: "md",
     hasIconOnly: true
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, caret && /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(_Toolbar.blockClass, "__button__caret")
+    className: "".concat(blockClass, "__caret")
   })));
 });
 exports.ToolbarButton = ToolbarButton;

package/lib/components/index.js

@@ -99,12 +99,6 @@ Object.defineProperty(exports, "ErrorEmptyState", {
     return _EmptyStates.ErrorEmptyState;
   }
 });
-Object.defineProperty(exports, "ExampleComponent", {
-  enumerable: true,
-  get: function get() {
-    return _ExampleComponent.ExampleComponent;
-  }
-});
 Object.defineProperty(exports, "ExportModal", {
   enumerable: true,
   get: function get() {
@@ -300,8 +294,6 @@ var _CreateTearsheetNarrow = require("./CreateTearsheetNarrow");
 
 var _EmptyStates = require("./EmptyStates");
 
-var _ExampleComponent = require("./ExampleComponent");
-
 var _ExportModal = require("./ExportModal");
 
 var _ExpressiveCard = require("./ExpressiveCard");

package/lib/global/js/package-settings.js

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