@carbon/ibm-products 2.1.2 → 2.1.3

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,11 +118,109 @@ 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('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
   return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -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": "32a25a322d0213e135506f646b0ad5721e67d813"
+  "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/Datagrid/_storybook-styles.scss

@@ -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;

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/NotificationsPanel/_storybook-styles.scss

@@ -9,3 +9,15 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 
 $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
+
+.#{$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

@@ -57,24 +57,6 @@ $story-class: 'page-header-stories';
   flex-direction: column;
 }
 
-$story-anchor: 'page-header';
-div[id*='#{$story-anchor}'] .docs-story {
-  --story-height: 50vh;
-
-  min-height: var(--story-height);
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  overflow: hidden;
-  width: 100%;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
-}
-
 .#{$story-class}__viewport {
   overflow: hidden;
   height: 100vh;

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

@@ -36,16 +36,11 @@ $storybook-block-class: #{c4p-settings.$pkg-prefix}--notifications-panel__story;
 }
 
 $story-anchor: 'web-terminal';
-div[id*='#{$story-anchor}'] .docs-story {
-  min-height: 50vh;
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  width: 100%;
-  overflow: hidden;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
+#storybook-docs {
+  ul {
+    list-style: initial;
+  }
+  ol {
+    list-style: decimal;
+  }
 }

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

@@ -1,20 +0,0 @@
-// 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.
-//
-$story-anchor: 'http-errors';
-div[id*='#{$story-anchor}'] .docs-story {
-  min-height: 50vh;
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  transform: translateZ(0);
-}
-
-div[id*='#{$story-anchor}'] .docs-story > div:first-child {
-  overflow: auto;
-  width: 100%;
-}
-
-div[id*='#{$story-anchor}'] .docs-story .preview-position-fix {
-  min-height: 50vh;
-}