@carbon/ibm-products 2.1.3 → 2.2.0

package/lib/components/CreateModal/CreateModal.docs-page.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./CreateModal.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#modal",
-    blocks: [{
-      story: stories.Default
-    }, {
-      title: 'Form validation',
-      description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n  are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
-    }, {
-      title: 'Overriding Carbon theme',
-      description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",
-      source: {
-        language: 'css',
-        code: "  .#{$pkg-prefix}--create-modal {\n    @include carbon--theme(\n      $theme: $carbon--theme--g90\n    );\n  }"
-      }
-    }, {
-      description: "Alternatively, the required Carbon theme can be set as above in a custom CSS\nclass which is then applied to the CreateModal using the `className` prop."
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js

@@ -1,29 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./CreateSidePanel.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: [{
-      href: 'https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#side-panel',
-      label: 'Carbon create flows side panel usage guidelines'
-    }],
-    blocks: [{
-      story: stories.Default
-    }, {
-      title: 'Form validation',
-      description: "All forms, including that within the `CreateSidePanel` should follow C&CS\nguidelines for form validation.\n\nThis includes the following:\n\n- The `Submit` button in the side panel should be disabled, until all required\n  inputs are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n  loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n  input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./CreateTearsheet.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#wide-tearsheet",
-    blocks: [{
-      story: stories.multiStepTearsheet,
-      description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateTearsheet />` component and the `<CreateTearsheetStep />`\ncomponent with form items as children:",
-      source: {
-        code: "    <CreateTearsheet {...props}>\n      <CreateTearsheetStep\n          title=\"Required title\"\n          subtitle=\"Optional subtitle\"\n          description=\"Optional description\"\n          onNext={() => {'Optional function'}}\n          disableSubmit={}\n          >\n        <TextInput\n          id=\"test-1\"\n          invalidText=\"A valid value is required\"\n          labelText=\"Topic name\"\n          placeholder=\"Enter topic name\"\n        />\n      </CreateTearsheetStep>\n    </CreateTearsheet>"
-      }
-    }, {
-      title: 'Using custom components',
-      description: "It is possible to use custom components that return `CreateTearsheetStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateTearsheet`. _It is required that each child of the `CreateTearsheet`\neither be a custom step or a `CreateTearsheetStep`_. An example of this could\nlook like the following:",
-      source: {
-        code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n  return (\n    <CreateTearsheetStep\n      {...rest}\n      subtitle={subtitle}\n      title=\"Step 1\"\n      onNext={() => console.log('optional validation check')}\n      onMount={() => console.log('optional onMount fn')}\n      disableSubmit={false}\n    >\n      step content here\n    </CreateTearsheetStep>\n  );\n};\n\nconst CreateComponent = () => {\n  return (\n    <CreateTearsheet {...createTearsheetProps}>\n      <CreateStepCustom subtitle=\"Custom step subtitle\" />\n      <CreateTearsheetStep\n        title=\"Topic name\"\n        fieldsetLegendText=\"Topic information\"\n        disableSubmit={!value}\n        subtitle=\"This is the unique name used to recognize your topic\"\n        description=\"It will also be used by your producers and consumers as part of the\n        connection information, so make it something easy to recognize.\"\n      >\n        Content for second step\n      </CreateTearsheetStep>\n    </CreateTearsheet>\n  );\n};"
-      }
-    }, {
-      title: 'Using dynamic steps',
-      description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
-      code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n  const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n    useState(false);\n  return (\n    <CreateTearsheet {...createTearsheetProps}>\n      <CreateTearsheetStep {...step1Props}>\n        Step 1 content\n        <Checkbox\n          labelText={`Include additional step`}\n          id=\"include-additional-step-checkbox\"\n          onChange={(value) => setShouldIncludeAdditionalStep(value)}\n          checked={shouldIncludeAdditionalStep}\n        />\n      </CreateTearsheetStep>\n      <CreateTearsheetStep\n        {...step2Props}\n        includeStep={shouldIncludeAdditionalStep}\n      >\n        Dynamic step content\n      </CreateTearsheetStep>\n      <CreateTearsheetStep {...step3Props}>\n        Final step content\n      </CreateTearsheetStep>\n    </CreateTearsheet>\n  );\n};"
-    }, {
-      title: 'Class names',
-      description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                            | Element     | Features                                                   |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__step--title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__step--subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__step--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-tearsheet__step--fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n| `#{$pkg-prefix}--create-tearsheet__section--divider`  | divider     | Includes a `1px` divider line inside the `main` content    |\n"
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/EditFullPage/EditFullPage.docs-page.js

@@ -1,50 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./EditFullPage.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#full-page-edit",
-    blocks: [{
-      description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
-    }, {
-      story: stories.editFullPage,
-      description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:",
-      source: {
-        code: "<CreateFullPage {...props}>\n      <CreateFullPageStep\n          title=\"Required title\"\n          subtitle=\"Optional subtitle\"\n          description=\"Optional description\"\n          onNext={() => {'Optional function'}}\n          >\n          <Row>\n            <Column xlg={5} lg={5} md={4} sm={4}>\n              <TextInput\n                id=\"test-1\"\n                invalidText=\"A valid value is required\"\n                labelText=\"Topic name\"\n                placeholder=\"Enter topic name\"\n              />\n            </Column>\n          </Row>\n      </CreateFullPageStep>\n    </CreateFullPage>"
-      }
-    }, {
-      story: stories.editFullPageWithSections,
-      description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
-      source: {
-        code: "<CreateFullPageStep\n    title=\"Required title\"\n    subtitle=\"Optional subtitle\"\n    description=\"Optional description\"\n    onNext={() => {'Optional function'}}\n    >\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-1\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n    <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n    <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n    <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n      Optional subtitle\n    </h6>\n    <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n      Optional description\n    </p>\n    <Row>\n      <Column xlg={5} lg={5} md={4} sm={4}>\n        <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n          <TextInput\n            id=\"test-2\"\n            invalidText=\"A valid value is required\"\n            labelText=\"Topic name\"\n            placeholder=\"Enter topic name\"\n          />\n        </fieldset>\n      </Column>\n    </Row>\n</CreateFullPageStep>"
-      }
-    }, {
-      title: 'Using custom components',
-      description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
-      source: {
-        code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n  return (\n    <CreateFullPageStep\n      {...rest}\n      subtitle={subtitle}\n      title=\"Step 1\"\n      onNext={() => console.log('optional validation check')}\n      onMount={() => console.log('optional onMount fn')}\n      disableSubmit={false}\n    >\n      step content here\n    </CreateFullPageStep>\n  );\n};\n\nconst CreateComponent = () => {\n  return (\n    <CreateFullPage {...createFullPageProps}>\n      <CreateStepCustom subtitle=\"Custom step subtitle\" />\n      <CreateFullPageStep\n        title=\"Topic name\"\n        fieldsetLegendText=\"Topic information\"\n        disableSubmit={!value}\n        subtitle=\"This is the unique name used to recognize your topic\"\n        description=\"It will also be used by your producers and consumers as part of the\n        connection information, so make it something easy to recognize.\"\n      >\n        Content for second step\n      </CreateFullPageStep>\n    </CreateFullPage>\n  );\n};"
-      }
-    }, {
-      title: 'Using dynamic steps',
-      description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
-      source: {
-        code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n  const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n    useState(false);\n  return (\n    <CreateFullPage {...createFullPageProps}>\n      <CreateFullPageStep {...step1Props}>\n        Step 1 content\n        <Checkbox\n          labelText={`Include additional step`}\n          id=\"include-additional-step-checkbox\"\n          onChange={(value) => setShouldIncludeAdditionalStep(value)}\n          checked={shouldIncludeAdditionalStep}\n        />\n      </CreateFullPageStep>\n      <CreateFullPageStep\n        {...step2Props}\n        includeStep={shouldIncludeAdditionalStep}\n      >\n        Dynamic step content\n      </CreateFullPageStep>\n      <CreateFullPageStep {...step3Props}>\n        Final step content\n      </CreateFullPageStep>\n    </CreateFullPage>\n  );\n};"
-      }
-    }, {
-      title: 'Class names',
-      description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                           | Element     | Features                                                   |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-full-page__step-fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n| `#{$pkg-prefix}--create-full-page__section-divider`  | divider     | Includes a `1px` divider line inside the `main` content    |\n"
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/EditTearsheet/EditTearsheet.docs-page.js

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./EditTearsheet.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/edit/usage#tearsheet-edit",
-    blocks: [{
-      story: stories.multiFormEditTearsheet,
-      description: "This is used when you have one section per step. This can be created by passing\nin the overall `<EditTearsheet />` component and the `<EditTearsheetForm />`\ncomponent with form items as children:",
-      source: {
-        code: "<EditTearsheet {...props}>\n  <EditTearsheetForm\n    title=\"Required title\"\n    subtitle=\"Optional subtitle\"\n    description=\"Optional description\"\n    onNext={() => {\n      'Optional function';\n    }}\n  >\n    <TextInput\n      id=\"test-1\"\n      invalidText=\"A valid value is required\"\n      labelText=\"Topic name\"\n      placeholder=\"Enter topic name\"\n    />\n  </EditTearsheetForm>\n</EditTearsheet>"
-      }
-    }, {
-      title: 'Using custom components',
-      description: "It is possible to use custom components that return `EditTearsheetForms` in\norder to help reduce the amount of logic in the component that contains the main\n`EditTearsheet`. _It is required that each child of the `EditTearsheet` either\nbe a custom step or a `EditTearsheetForm`_. An example of this could look like\nthe following:",
-      source: {
-        code: "const CreateFormCustom = ({ subtitle, ...rest }) => {\n  return (\n    <EditTearsheetForm {...rest} subtitle={subtitle} title=\"Form 1\">\n      form content here\n    </EditTearsheetForm>\n  );\n};\n\nconst CreateComponent = () => {\n  return (\n    <EditTearsheet {...EditTearsheetProps}>\n      <CreateFormCustom subtitle=\"Custom form subtitle\" />\n      <EditTearsheetForm\n        title=\"Topic name\"\n        fieldsetLegendText=\"Topic information\"\n        subtitle=\"This is the unique name used to recognize your topic\"\n        description=\"It will also be used by your producers and consumers as part of the\n        connection information, so make it something easy to recognize.\"\n      >\n        Content for second form\n      </EditTearsheetForm>\n    </EditTearsheet>\n  );\n};"
-      }
-    }, {
-      title: "Class names",
-      description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name                                            | Element     | Features                                                   |\n| ----------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-tearsheet__form--title`       | title       | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-tearsheet__form--subtitle`    | subtitle    | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-tearsheet__form--description` | description | `body-long-01` & `margin-bottom` of `$spacing-06`          |\n| `#{$pkg-prefix}--create-tearsheet__form--fieldset`    | fieldset    | `margin-bottom` of `$spacing-05` to all children elements  |\n"
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/ExampleComponent/ExampleComponent.docs-page.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./ExampleComponent.stories"));
-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); }
-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; }
-/**
- * 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.
- */
-
-/**
- * OPTIONAL: required only to customize default docs page
- */
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      description: 'Here it is in use.',
-      story: stories.exampleComponent
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/ImportModal/ImportModal.docs-page.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var _blocks = require("@storybook/blocks");
-var _storyHelper = require("../../global/js/utils/story-helper");
-var DocsPage = function DocsPage() {
-  var _useOf = (0, _blocks.useOf)('meta', ['meta']),
-    csfFile = _useOf.csfFile;
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
-      href: 'https://www.carbondesignsystem.com/components/modal/usage',
-      label: 'Carbon Modal usage guidelines'
-    }, {
-      href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
-      label: 'Carbon Modal documentation'
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/add-and-select/usage",
-    blocks: [{
-      title: 'Structuring items',
-      description: "The `items` object has a lot of customization potential and can greatly effect\nthe way the component is displayed and how you interact with it.\n\nLet's walk through an example.",
-      source: {
-        code: "items: {\n  modifiers: { // adds a modifier dropdown inside the items\n    label: PropTypes.string, // label for the dropdown\n    options: PropTypes.array, // list of options / values for the dropdown\n  },\n  sortBy: ['title'], // designates which properties should be used to sort the column when using a hierarchy\n  entries: [ // the actual list of items / entries\n    {\n      id: '1', // required unique id for the entry\n      value: '1', // required value of the entry\n      title: 'item 1', // required title to display\n      subtitle: 'item 1 subtitle', // subtitle to display\n      children: { // designates if entry has children. if the children prop is found a hierarchy list will be used\n        sortBy: ['title', 'size'],\n        filterBy: 'fileType', // designates which property should be used to filter the column of items\n        entries: [\n          {\n            id: '1-1',\n            value: 'file1.pdf',\n            title: 'file1.pdf',\n            fileType: 'pdf',\n            size: '100',\n            icon: Document16, // designates if an icon should be displayed. While similar to avatar icon, both have different displays.\n            tag: 'business',\n            avatar: { // designates if an avatar should be displayed\n              alt: 'alt text',\n              icon: <Icon />,\n              src: 'avatar.png',\n            },\n          },\n        ],\n      },\n    },\n  ],\n}"
-      }
-    }, {
-      description: "The properties that have been commented on like `id`, `value`, and `icon` have\nspecific use within the component and are generally required. Other properties\nlike `fileType` and `size` do not and will simply show up as details in the\nsidebar when selected."
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/RemoveModal/RemoveModal.docs-page.js

@@ -1,26 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var _blocks = require("@storybook/blocks");
-var _storyHelper = require("../../global/js/utils/story-helper");
-var DocsPage = function DocsPage() {
-  var _useOf = (0, _blocks.useOf)('meta', ['meta']),
-    csfFile = _useOf.csfFile;
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
-      href: 'https://www.carbondesignsystem.com/components/modal/usage',
-      label: 'Carbon Modal usage guidelines'
-    }, {
-      href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
-      label: 'Carbon Modal documentation'
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/add-and-select/usage",
-    blocks: [{
-      title: 'Structuring items',
-      description: "The `items` object has a lot of customization potential and can greatly effect\nthe way the component is displayed and how you interact with it..\n\nLet's walk through an example.",
-      source: {
-        code: "items: {\n  entries: [ // the actual list of items / entries\n    {\n      id: '1', // required unique id for the entry\n      value: '1', // required value of the entry\n      title: 'item 1', // required title to display\n      subtitle: 'item 1 subtitle', // subtitle to display\n      children: { // designates if entry has children. if the children prop is found a hierarchy list will be used\n        entries: [\n          {\n            id: '1-1',\n            value: 'file1.pdf',\n            title: 'file1.pdf',\n          },\n        ],\n      },\n    },\n  ],\n}"
-      }
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/StatusIcon/StatusIcon.docs-page.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./StatusIcon.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      story: stories.Default
-    }, {
-      title: 'Accessibility',
-      description: "The `StatusIcon` component follows the Carbon guidelines for status icons with\nsome added specifications around illustration usage. For additional usage\nguidelines and documentation please refer to the links above.\n\n_Status icons_ are an important method of communicating severity level\ninformation to users. The shapes and colors, communicate severity that enable\nusers to quickly assess and identify status and respond accordingly."
-    }, {
-      title: 'Sizing',
-      description: "\n| Size    | Pixels  |\n| ------- | ------- |\n| small   | 16 x 16 |\n| medium  | 20 x 20 |\n| large   | 24 x 24 |\n| x-large | 32 x 32 |\n          "
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/Toolbar/Toolbar.docs-page.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./Toolbar.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      story: stories._Toolbar
-    }, {
-      story: stories.vertical,
-      description: "A toolbar orientation for floating the toolbar on the canvas."
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/UserProfileImage/UserProfileImage.docs-page.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./UserProfileImage.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      story: stories.Default
-    }, {
-      story: stories.WithGroupIcon,
-      description: "By passing in icon prop with a value of `group`, the avatar will display the group icon"
-    }, {
-      story: stories.WithInitials,
-      description: "When passing a display name to the component, the display name will be distilled down to the first and last initials of the display name. `Thomas Watson` and `Thomas J. Watson` will both display `TW` as the initials."
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;

package/lib/components/WebTerminal/WebTerminal.docs-page.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
-var stories = _interopRequireWildcard(require("./WebTerminal.stories"));
-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); }
-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 DocsPage = function DocsPage() {
-  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
-    blocks: [{
-      description: "To get started using the WebTerminal, you have to first wrap your\n              application with the `<WebTerminalProvider>`\n              component. This will allow all the WebTerminal components to be\n              used with the `useWebTerminal()` custom hook.\n          ",
-      title: 'Getting Started',
-      source: {
-        code: "import { WebTerminalProvider } from '@carbon/ibm-products';\n\nconst App = () => {\n  return (\n    <WebTerminalProvider>\n      ...\n    <WebTerminalProvider>\n  )\n};"
-      }
-    }, {
-      title: 'useWebTerminal()',
-      source: {
-        code: "const { open, openWebTerminal, closeWebTerminal, toggleWebTerminal } =\n  useWebTerminal();"
-      }
-    }, {
-      description: "The `useWebTerminal()` hook returns an object with 4 properties:\n1. Read the `open` state (true or false)\n2. `openWebTerminal` sets the `open` state to true\n3. `closeWebTerminal` sets the `open` state to false\n4. `toggleWebTerminal` toggles between true and false\n\nExample:\n",
-      source: {
-        code: "const MyComponent = () => {\n  const { open, openWebTerminal, closeWebTerminal, toggleWebTerminal } =\n    useWebTerminal();\n\n  return (\n    <div>\n      <button onClick={() => openWebTerminal()}>Open web terminal</button>\n      <button onClick={() => closeWebTerminal()}>Close web terminal</button>\n      <button onClick={() => toggleWebTerminal()}>Toggle web terminal</button>\n      <p>The web terminal is now {open}</p>\n\n      <WebTerminal>...</WebTerminal>\n    </div>\n  );\n};"
-      }
-    }, {
-      subTitle: 'Passing in your own terminal.',
-      description: "The `WebTerminal` is wrapper component for your own\nterminal component that you may have been using for your product.\nSimply pass your own terminal component as children.\n            "
-    }, {
-      subTitle: 'Optional wrapper component.',
-      description: "Optionally you can import `WebTerminalContentWrapper` to have\n              content adjust their width based off the `WebTerminal` width when\n              it is opened.",
-      source: {
-        code: "<WebTerminalContentWrapper>\n  content\n</WebTerminalContentWrapper>\n\n<WebTerminal>\n  ...\n</WebTerminal>"
-      }
-    }, {
-      description: 'The default web terminal is one which opens and the terminal loads. Then if the user desires to dismiss it they can click the close icon on the top right corner of the component.',
-      story: stories.Default
-    }, {
-      story: stories.WithDocumentationLinks
-    }, {
-      subTitle: 'Help users with helpful documentation links',
-      description: "Optionally you can pass documentation links to help point your users to useful\ndocumentation for your terminal, or kubernetes commands etc.\n\nThe documentation links should reflect the same props as `OverflowMenuItem` from\ncarbon.\n\nLearn more:\nhttps://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default\n",
-      source: {
-        code: "const documentationLinks = [\n  {\n    itemText: 'BX/ICP docs',\n    href: '#',\n    onClick: () => console.log('clicked'),\n  },\n  {\n    itemText: 'Kubernetes docs',\n    href: '#',\n    onClick: () => console.log('clicked'),\n  },\n  {\n    itemText: 'Docker docs',\n    href: '#',\n    onClick: () => console.log('clicked'),\n  },\n  {\n    itemText: 'Helm docs',\n    href: '#',\n    onClick: () => console.log('clicked'),\n  },\n];"
-      }
-    }, {
-      story: stories.WithActions
-    }, {
-      description: "Optionally you can add actions to the web terminal header bar. To add actions\nyou need to pass in an array of actions with objects for each object.",
-      source: {
-        code: "<WebTerminal\n  actions={[\n    {\n      renderIcon: Code32,\n      onClick: () => {},\n      iconDescription: 'Create new deployment',\n    },\n  ]}\n>\n  ...\n</WebTerminal>"
-      }
-    }]
-  });
-};
-var _default = DocsPage;
-exports.default = _default;