@carbon/ibm-products 2.1.1 → 2.1.3

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -37,6 +37,20 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
+  var continueToNextStep = (0, _react.useCallback)(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData;
+        prev++;
+      } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, setIsSubmitting, stepData]);
+
   // useEffect to handle multi step logic
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
@@ -164,9 +178,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
               // There will always be a previous step otherwise we will
               // have disabled the back button since we have reached the first visible step
               do {
-                var _stepData;
+                var _stepData2;
                 prev--;
-              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
               return prev;
             });
           },
@@ -194,18 +208,5 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       setCreateComponentActions(buttons);
     }
   }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
-  var continueToNextStep = (0, _react.useCallback)(function () {
-    setIsSubmitting(false);
-    setCurrentStep(function (prev) {
-      // Find next included step to render
-      // There will always be a next step otherwise we will
-      // have reach the onSubmit
-      do {
-        var _stepData2;
-        prev++;
-      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-      return prev;
-    });
-  }, [setCurrentStep, setIsSubmitting, stepData]);
 };
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

package/lib/global/js/utils/StoryDocsPage.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryDocsPage = exports.CustomBlocks = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _blocks = require("@storybook/blocks");
+var _changeCase = require("change-case");
+var _storyHelper = require("./story-helper");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * Copyright IBM Corp. 2023, 2023
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          *
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * This source code is licensed under the Apache-2.0 license found in the
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * LICENSE file in the root directory of this source tree.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var CustomBlocks = function CustomBlocks(_ref) {
+  var blocks = _ref.blocks;
+  return blocks.map(function (block, index) {
+    var source = _objectSpread({}, block === null || block === void 0 ? void 0 : block.source);
+    if (source.code && !source.language) {
+      source.language = 'jsx';
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "block-index--".concat(index)
+    }, block.title && /*#__PURE__*/_react.default.createElement("h3", {
+      id: (0, _changeCase.paramCase)(block.title)
+    }, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
+      of: block.story
+    }), block.source && /*#__PURE__*/_react.default.createElement(_blocks.Source, source));
+  });
+};
+
+/**
+ * This function checks blocks against stories and then
+ * - Adds title if no alternative is supplied
+ * - Adds blocks for unreferenced stories if omitUnreferencedStories is false
+ */
+exports.CustomBlocks = CustomBlocks;
+var processBlocks = function processBlocks(blocks, stories, omitUnreferencedStories) {
+  var blocksWithStoryTitles = blocks ? (0, _toConsumableArray2.default)(blocks) : [];
+  var restOfStories = [];
+  var storyKeys = Object.keys(stories);
+  storyKeys.forEach(function (sk) {
+    var story = stories[sk].moduleExport;
+    var storyName = stories[sk].name;
+    var matchingBlock = blocksWithStoryTitles.find(function (block) {
+      return block.story === story;
+    });
+    if (matchingBlock) {
+      var _matchingBlock$title;
+      matchingBlock.title = (_matchingBlock$title = matchingBlock.title) !== null && _matchingBlock$title !== void 0 ? _matchingBlock$title : storyName;
+    } else if (!omitUnreferencedStories) {
+      restOfStories.push({
+        story: story,
+        title: storyName
+      });
+    }
+  });
+  if (!omitUnreferencedStories) {
+    return blocksWithStoryTitles.concat(restOfStories);
+  }
+  return blocksWithStoryTitles;
+};
+
+/**
+ * Calling with no parameters will produce the default output.
+ * Customize by providing alternative values and/or blocks defining sections
+ * @param {*} param0
+ * @returns
+ */
+var StoryDocsPage = function StoryDocsPage(_ref2) {
+  var _csfFile$meta, _csfFile$meta$paramet, _processedBlocks$filt;
+  var altTitle = _ref2.altTitle,
+    altDescription = _ref2.altDescription,
+    altGuidelinesHref = _ref2.altGuidelinesHref,
+    blocks = _ref2.blocks,
+    omitCodedExample = _ref2.omitCodedExample,
+    omitUnreferencedStories = _ref2.omitUnreferencedStories;
+  var _useOf = (0, _blocks.useOf)('meta', ['meta']),
+    csfFile = _useOf.csfFile;
+  var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
+  var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
+  var isFullScreen = (csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : (_csfFile$meta$paramet = _csfFile$meta.parameters) === null || _csfFile$meta$paramet === void 0 ? void 0 : _csfFile$meta$paramet.layout) === 'fullscreen' || false;
+  var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
+  var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
+  console.log(processBlocks);
+  var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
+    return !!block.story;
+  }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
+    var href = _ref3.href,
+      label = _ref3.label;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index > 0 && ' | ', /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+      key: href,
+      href: href
+    }, label));
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: guidelinesHref
+  }, altTitle ? "".concat(altTitle, " usage guidelines") : storyInfo.guidelinesLinkLabel) : null, /*#__PURE__*/_react.default.createElement("h2", {
+    style: {
+      marginTop: guidelinesHref ? '16px' : ''
+    }
+  }, "Table of contents"), /*#__PURE__*/_react.default.createElement("ul", null, ['Overview', 'Coded examples', 'Example usage', 'Component API'].map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: item
+    }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+      href: "#".concat((0, _changeCase.paramCase)(item))
+    }, item), processedBlocks && item === 'Example usage' ? /*#__PURE__*/_react.default.createElement("ul", null, processedBlocks.map(function (block) {
+      return block !== null && block !== void 0 && block.title ? /*#__PURE__*/_react.default.createElement("li", {
+        key: block.title
+      }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+        href: "#".concat((0, _changeCase.paramCase)(block.title))
+      }, block.title)) : null;
+    })) : null);
+  })), /*#__PURE__*/_react.default.createElement("h2", {
+    id: "overview"
+  }, "Overview"), /*#__PURE__*/_react.default.createElement(_blocks.Description, null, altDescription), !omitCodedExample && storyInfo.expectCodedExample ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    id: "coded-examples"
+  }, "Coded examples"), /*#__PURE__*/_react.default.createElement("p", null, "Coded examples can be edited and are a great way to try out a component."), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
+    key: "codesandbox"
+  }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: (0, _storyHelper.codeSandboxHref)(storyInfo.title)
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      height: '16px',
+      width: '16px',
+      color: 'black',
+      boxShadow: '0 0 0 2px white',
+      marginRight: '8px',
+      verticalAlign: '-2px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0h23.987v24H0V0Zm21.533 2.455v19.09H2.453V2.456h19.08Z",
+    fill: "currentColor"
+  })), "CodeSandbox")), /*#__PURE__*/_react.default.createElement("li", {
+    key: "stackblitz"
+  }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: (0, _storyHelper.stackblitzHref)(storyInfo.title)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg",
+    alt: "Stackblitz logo",
+    style: {
+      verticalAlign: '-2px',
+      marginRight: '8px'
+    }
+  }), "Stackblitz")))) : null, /*#__PURE__*/_react.default.createElement("h2", {
+    id: "example-usage"
+  }, "Example usage"), /*#__PURE__*/_react.default.createElement("div", {
+    className: storyHelperClass
+  }, processedBlocks ? /*#__PURE__*/_react.default.createElement(CustomBlocks, {
+    blocks: processedBlocks
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.Stories, null)), /*#__PURE__*/_react.default.createElement("h2", {
+    id: "component-api"
+  }, "Component API"), storyCount > 1 && /*#__PURE__*/_react.default.createElement("p", null, "NOTE: Changing the controls below affects the default/primary example shown on the docs page."), /*#__PURE__*/_react.default.createElement(_blocks.Controls, null));
+};
+exports.StoryDocsPage = StoryDocsPage;
+StoryDocsPage.propTypes = {
+  /**
+   * Uses doc block from the component where possible.
+   *
+   * Note: use `export default { component: ExampleComponent }` in the story if the main component is wrapped by some
+   * additional code. This will allow the doc block to pass through.
+   *
+   * If passed as string treated as markdown.
+   */
+  altDescription: _propTypes.default.node,
+  /**
+   * location if any of guidelines on the PAL site, constructed by default
+   */
+  altGuidelinesHref: _propTypes.default.oneOfType(_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
+    href: _propTypes.default.string,
+    label: _propTypes.default.string
+  }))),
+  /**
+   * Uses component name by default
+   */
+  altTitle: _propTypes.default.string,
+  /**
+   * Array with content sections
+   */
+  blocks: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * Optional title story name used by default<h3>
+     */
+    title: _propTypes.default.string,
+    /**
+     * Optional subTitle a <h4>
+     */
+    subTitle: _propTypes.default.string,
+    /**
+     * Optional description, strings treated as markdown.
+     */
+    description: _propTypes.default.node,
+    /**
+     * Story imported from story file
+     */
+    story: _propTypes.default.func,
+    /**
+     * Some source code
+     * default language `jsx`
+     */
+    source: _propTypes.default.shape({
+      language: _propTypes.default.oneOf('javascript', 'css', 'jsx'),
+      code: _propTypes.default.string
+    })
+  })),
+  /**
+   * Set to true if no published example exists (all components and patterns should have an example)
+   */
+  omitCodedExample: _propTypes.default.bool,
+  /**
+   * Stories unreferenced in blocks included by default
+   */
+  omitUnreferencedStories: _propTypes.default.bool
+};

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

@@ -4,12 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.StackblitzLink = exports.CodesandboxLink = void 0;
+exports.storyDocsPageTitle = exports.storyDocsPageInfo = exports.storyDocsGuidelines = exports.stackblitzHref = exports.prepareStory = exports.palUsageHref = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.codeSandboxHref = exports.StackblitzLink = exports.CodesandboxLink = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _csf = require("@storybook/csf");
 var _packageSettings = _interopRequireDefault(require("../package-settings"));
 var _storyStructure = require("../../../../../core/story-structure");
+var _changeCase = require("change-case");
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -73,12 +76,15 @@ var prepareStory = function prepareStory(template, options) {
  */
 exports.prepareStory = prepareStory;
 var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
+var codeSandboxHref = function codeSandboxHref(exampleDirectory) {
+  return "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
+};
+exports.codeSandboxHref = codeSandboxHref;
 var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
-  // const stackblitz = `https://stackblitz.com/${packagePath}/${dir}?file=src%2FExample%2FExample.jsx`;
-  var codesandbox = "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
+  var href = codeSandboxHref(exampleDirectory);
   return /*#__PURE__*/_react.default.createElement("a", {
-    href: codesandbox
+    href: href
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"
@@ -91,11 +97,15 @@ CodesandboxLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
+var stackblitzHref = function stackblitzHref(exampleDirectory) {
+  return "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
+};
+exports.stackblitzHref = stackblitzHref;
 var StackblitzLink = function StackblitzLink(_ref2) {
   var exampleDirectory = _ref2.exampleDirectory;
-  var stackblitz = "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
+  var href = stackblitzHref(exampleDirectory);
   return /*#__PURE__*/_react.default.createElement("a", {
-    href: stackblitz
+    href: href
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on Stackblitz",
     src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
@@ -108,13 +118,111 @@ StackblitzLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
+var palUsageHref = function palUsageHref(csfFile) {
+  var _csfFile$meta;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
+  var _title$split = title.split('/'),
+    _title$split2 = (0, _slicedToArray2.default)(_title$split, 3),
+    _pkg = _title$split2[0],
+    kind = _title$split2[1],
+    section = _title$split2[2];
+  if (/components|patterns/i.test(kind) && name) {
+    return "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat((0, _changeCase.paramCase)(section), "/usage");
+  }
+};
+exports.palUsageHref = palUsageHref;
+var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
+  var _csfFile$meta2;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
+  var _title$split3 = title.split('/'),
+    _title$split4 = (0, _toArray2.default)(_title$split3),
+    _pkg = _title$split4[0],
+    kind = _title$split4[1],
+    a = _title$split4[2],
+    b = _title$split4[3],
+    rest = _title$split4.slice(4);
+  var component;
+  if (/components|patterns/i.test(kind)) {
+    // components and patterns have an additional level
+    component = b;
+  } else {
+    component = a;
+  }
+  var name = component.split('#')[0]; // canary always written as Example#canary};
+
+  if (name) {
+    if (rest.length > 0) {
+      return "".concat(name, " (").concat(rest.join(' '), ")");
+    } else {
+      return name;
+    }
+  }
+  console.error('Error: unable to parse title from metadata.');
+  return title;
+};
+exports.storyDocsPageTitle = storyDocsPageTitle;
+var storyDocsPageInfo = function storyDocsPageInfo(csfFile) {
+  var _csfFile$meta3;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
+  var _title$split5 = title.split('/'),
+    _title$split6 = (0, _toArray2.default)(_title$split5),
+    pkg = _title$split6[0],
+    kind = _title$split6[1],
+    a = _title$split6[2],
+    b = _title$split6[3],
+    rest = _title$split6.slice(4);
+  var result = {
+    package: pkg,
+    kind: kind,
+    expectCodedExample: false
+  };
+  var component;
+  if (/components|patterns/i.test(kind)) {
+    result.expectCodedExample = true;
+    // components and patterns have an additional level
+    component = b;
+    result.section = a;
+    result.guidelinesHref = "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat((0, _changeCase.paramCase)(result.section), "/usage");
+  } else {
+    component = a;
+  }
+  var nameSplit = component.split('#'); // canary always written as Example#canary};
+  var name = nameSplit[0];
+  if (nameSplit.length > 1 && nameSplit[1] === 'canary') {
+    result.canary = true;
+  }
+  if (name) {
+    if (rest.length > 0) {
+      result.component = result.title = "".concat(name, " (").concat(rest.join(' '), ")");
+    } else {
+      result.component = name;
+      result.title = name;
+    }
+  } else {
+    console.error('Error: unable to parse title from metadata.');
+    result.title = title;
+  }
+  if (result.guidelinesHref) {
+    result.guidelinesLinkLabel = "".concat(result.title, " usage guidelines");
+  }
+  return result;
+};
+exports.storyDocsPageInfo = storyDocsPageInfo;
+var storyDocsGuidelines = function storyDocsGuidelines(csfFile) {
+  var storyInfo = storyDocsPageInfo(csfFile);
+  return {
+    href: storyInfo.guidelinesHref,
+    label: storyInfo.guidelinesLinkLabel
+  };
+};
 
 /**
  * A helper function that finds the designated theme on the Storybook canvas.
  * @returns "dark" or "light"
  */
+exports.storyDocsGuidelines = storyDocsGuidelines;
 var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
-  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
   return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };
 exports.getSelectedCarbonTheme = getSelectedCarbonTheme;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.35",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.22",
+    "jest-config-ibm-cloud-cognitive": "^0.24.23",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
@@ -85,14 +85,14 @@
     "react-window": "^1.8.9"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.14.0",
-    "@carbon/layout": "^11.14.0",
-    "@carbon/motion": "^11.11.0",
-    "@carbon/react": "~1.30.0",
-    "@carbon/themes": "^11.19.0",
-    "@carbon/type": "^11.18.0",
+    "@carbon/grid": "^11.15.0",
+    "@carbon/layout": "^11.15.0",
+    "@carbon/motion": "^11.12.0",
+    "@carbon/react": "~1.31.3",
+    "@carbon/themes": "^11.20.0",
+    "@carbon/type": "^11.19.0",
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "30b5fa97e450c8587e04b5e2e1be98c9a7379d45"
+  "gitHead": "8fb7c59793ba9325124d55ae01191adb45acff4e"
 }

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

@@ -8,8 +8,9 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
-#root {
-  width: 100%;
+#storybook-docs .docs-story {
+  /* stylelint-disable-next-line carbon/layout-token-use */
+  padding: 30px 0;
 }
 
 .box {

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

@@ -4,3 +4,9 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+
+$story-anchor: 'data-spreadsheet';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

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

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2022, 2022
+// Copyright IBM Corp. 2022, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -20,7 +20,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
   height: 100vh;
 }
 
-.sb-show-main.sb-main-centered #root {
+.sb-show-main.sb-main-centered #storybook-root {
   width: 100%;
   height: 100vh;
   padding: $spacing-07;
@@ -122,3 +122,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     width: 100vw;
   }
 }
+
+$story-anchor: 'datagrid';
+div[id*='#{$story-anchor}'] .docs-story > div:first-child > div:first-child {
+  overflow: auto;
+  width: 100%;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -631,3 +631,17 @@
   .#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$pkg-prefix}--button-menu {
   padding: 0;
 }
+
+// TODO: Revisit batch action list button and button icon alignment after
+// https: //github.com/carbon-design-system/carbon/issues/14021 is fixed
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn {
+  align-items: center;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--action-list
+  .#{c4p-settings.$carbon-prefix}--btn__icon {
+  margin-top: 0;
+}

package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss

@@ -75,6 +75,13 @@ $action-set-height: rem(64px);
 }
 
 // Carbon overrides
+.#{variables.$block-class}-filter-flyout__trigger.#{c4p-settings.$carbon-prefix}--btn {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+}
+
 .#{variables.$block-class}-filter-flyout__trigger--open.#{c4p-settings.$carbon-prefix}--btn.#{c4p-settings.$carbon-prefix}--btn--icon-only {
   position: relative;
   background-color: $layer-02;

package/scss/components/Datagrid/styles/addons/_FilterPanel.scss

@@ -124,6 +124,10 @@
 }
 
 .#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  display: flex;
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
   border-right: 1px solid $layer-accent-01;
   border-bottom: none;
 }

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

@@ -10,6 +10,14 @@
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
 
-.#{$storybook-block-class}--header {
-  @include theme(themes.$g100);
+.#{$storybook-block-class}--full-height {
+  height: 100vh;
+  max-height: var(--doc-story-height); // set in core if needed;
+}
+
+.#{$storybook-block-class}__add {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
 }

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

@@ -15,15 +15,6 @@
 
 $story-class: 'page-header-stories';
 
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  max-height: 500px;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $layer-accent-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
 .#{$story-class}__content-switcher {
   justify-content: flex-start;
 }
@@ -66,15 +57,34 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-.#{$story-class}__app--whole-page-scroll {
+.#{$story-class}__viewport {
   overflow: hidden;
+  height: 100vh;
 }
 
-.#{$story-class}__content-container {
-  height: 100%;
-  padding: 0;
+.#{$story-class}__viewport--scroll {
+  overflow-y: auto;
 }
 
-.#{$story-class}__app--whole-page-scroll .#{$story-class}__content-container {
+.#{$story-class}__viewport .#{$story-class}__content-container {
+  height: 100%;
   overflow-y: auto;
 }
+
+.#{$story-class}__viewport
+  .#{$story-class}__content-container--with-global-header {
+  height: calc(100% - #{$spacing-09});
+  margin-top: $spacing-09;
+}
+
+.#{$story-class}__viewport--scroll .#{$story-class}__content-container {
+  overflow-y: initial;
+}
+
+// cspell:disable-next-line
+.sbdocs .#{$story-class}__viewport {
+  max-height: 50vh;
+  background-color: $background;
+  box-shadow: 0 0 4px 1px $layer-accent-01;
+  color: $text-primary;
+}