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

package/es/components/PageHeader/PageHeader.js

@@ -85,7 +85,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)
 
@@ -446,6 +446,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 +455,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
@@ -498,9 +500,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 +536,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;
   }),
 
   /**

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/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/cloud-cognitive/".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/PageHeader/PageHeader.js

@@ -116,7 +116,7 @@ var PageHeader = /*#__PURE__*/_react.default.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)
 
@@ -477,6 +477,8 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       var handleWidthChange = isBreadcrumbRow && hasBreadcrumbRow ? handlePageActionWidthChange : function () {};
       return /*#__PURE__*/_react.default.createElement(_Tag, {
         className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__page-actions--in-breadcrumb"), inBreadcrumbRow))
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__page-actions-content"))
       }, (_pageActions$content = pageActions.content) !== null && _pageActions$content !== void 0 ? _pageActions$content : /*#__PURE__*/_react.default.createElement(_ButtonSetWithOverflow.ButtonSetWithOverflow, {
         classname: "".concat(_PageHeaderUtils.blockClass, "__button-set-with-overflow"),
         menuOptionsClass: (0, _classnames.default)(pageActionsMenuOptionsClass, "".concat(_PageHeaderUtils.blockClass, "__button-set-menu-options")),
@@ -484,7 +486,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         buttons: pageActions,
         buttonSetOverflowLabel: pageActionsOverflowLabel,
         rightAlign: true
-      }));
+      })));
     }
   }
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -531,9 +533,8 @@ PageHeader.propTypes = {
    * NOTE: This prop is required if actionBarItems are supplied
    */
   actionBarOverflowAriaLabel: _propTypes.default.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;
   }),
 
   /**
@@ -568,9 +569,8 @@ PageHeader.propTypes = {
    * It is used in an overflow menu when there is insufficient space to display all breadcrumbs inline.
    */
   breadcrumbOverflowAriaLabel: _propTypes.default.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;
   }),
 
   /**

package/lib/components/_Canary/Canary.js

@@ -34,7 +34,7 @@ var Canary = function Canary(_ref
   var className = _ref.className,
       componentName = _ref.componentName,
       rest = (0, _objectWithoutProperties2.default)(_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.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className)
   }), /*#__PURE__*/_react.default.createElement("h2", null, "This component ", /*#__PURE__*/_react.default.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/_react.default.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.CodeSnippet, {

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

@@ -5,7 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareStory = exports.getStoryTitle = exports.getStoryId = void 0;
+exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.CodesandboxLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _csf = require("@storybook/csf");
 
@@ -69,5 +73,28 @@ var prepareStory = function prepareStory(template, options) {
   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.
+ */
+
+
+exports.prepareStory = prepareStory;
+
+var CodesandboxLink = function CodesandboxLink(_ref) {
+  var exampleDirectory = _ref.exampleDirectory;
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://codesandbox.io/s/github/carbon-design-system/ibm-cloud-cognitive/tree/main/examples/cloud-cognitive/".concat(exampleDirectory)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    alt: "Edit on CodeSandbox",
+    src: "https://codesandbox.io/static/img/play-codesandbox.svg"
+  }));
+};
 
-exports.prepareStory = prepareStory;
+exports.CodesandboxLink = CodesandboxLink;
+CodesandboxLink.propTypes = {
+  /**
+   * directory withing examples codesandbox will be found
+   */
+  exampleDirectory: _propTypes.default.string
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -86,5 +86,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "c3983ff27a76cc490c04e2901b254f9996800cb2"
+  "gitHead": "5b7378009e0e2bfcf264d7a0fdfe8293a9f4242e"
 }

package/scss/components/PageHeader/_page-header.scss

@@ -45,12 +45,29 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     background-color: var(--to-color);
   }
 }
+@keyframes background-and-shadow-appear {
+  from {
+    background-color: var(--from-color);
+    box-shadow: 0 1px 0 var(--from-color);
+  }
+  to {
+    background-color: var(--to-color);
+    box-shadow: 0 1px 0 var(--to-color-shadow);
+  }
+}
 
-@mixin appearingBackground($from-color: $ui-background, $to-color: $ui-01) {
+@mixin appearingBackground(
+  $with-shadow: false,
+  $from-color: $ui-background,
+  $to-color: $ui-01,
+  $to-color-shadow: $ui-03
+) {
   // stylelint-disable-next-line carbon/theme-token-use
   --from-color: #{$from-color};
   // stylelint-disable-next-line carbon/theme-token-use
   --to-color: #{$to-color};
+  // stylelint-disable-next-line carbon/theme-token-use
+  --to-color-shadow: #{$to-color-shadow};
 
   position: absolute;
   top: 0;
@@ -61,8 +78,13 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
   // This transitions the background-color between from-color and to-color
   $duration: 1000ms;
-  // stylelint-disable-next-line carbon/motion-token-use
-  animation: background-appear $duration
+
+  $animation: background-appear;
+  @if ($with-shadow) {
+    $animation: background-and-shadow-appear;
+  }
+
+  animation: $animation $duration
     calc((-1 * $duration * var(--#{$block-class}--background-opacity))) linear
     paused forwards;
 
@@ -98,10 +120,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     &::before {
-      @include appearingBackground();
+      @include appearingBackground(true);
 
       z-index: -1;
-      box-shadow: 0 1px 0 $ui-03;
     }
 
     .#{$block-class}--width--xl {
@@ -465,6 +486,12 @@ $right-section-alt-width: 100% - $left-section-alt-width;
       @include appearingBackground();
     }
 
+    .#{$block-class}__page-actions-content {
+      position: relative; // ensure appears over ::before
+      width: 100%;
+      height: 100%;
+    }
+
     .#{$block-class}__title-row .#{$block-class}__page-actions--in-breadcrumb {
       opacity: 0;
       visibility: hidden;
@@ -489,7 +516,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     }
 
     .#{$block-class}__subtitle {
-      @include carbon--type-style('body-long-02');
+      @include carbon--type-style('body-long-01');
     }
 
     .#{$block-class}__available-row {