@carbon/ibm-products 2.2.0 → 2.3.0

package/lib/components/Datagrid/utils/DatagridActions.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DatagridActions = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
+var _react = require("@carbon/react");
+var _ButtonMenu = require("../../ButtonMenu");
+var _react2 = _interopRequireWildcard(require("react"));
 var _addonActions = require("@storybook/addon-actions");
 var _settings = require("../../../settings");
-var _ButtonMenu = require("../../ButtonMenu");
-var _Filtering = require("../Datagrid/addons/Filtering");
+var _hooks = require("../Datagrid/addons/Filtering/hooks");
 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; }
 /**
@@ -26,8 +25,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridActions = function DatagridActions(datagridState) {
-  var _useContext = (0, _react.useContext)(_Filtering.FilterContext),
-    setPanelOpen = _useContext.setPanelOpen;
+  var _useFilterContext = (0, _hooks.useFilterContext)(),
+    setPanelOpen = _useFilterContext.setPanelOpen;
   var selectedFlatRows = datagridState.selectedFlatRows,
     setGlobalFilter = datagridState.setGlobalFilter,
     CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
@@ -52,38 +51,31 @@ var DatagridActions = function DatagridActions(datagridState) {
     }
   };
   var renderFilterFlyout = function renderFilterFlyout() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react.default.createElement(FilterFlyout, getFilterFlyoutProps());
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/_react2.default.createElement(FilterFlyout, getFilterFlyoutProps());
   };
   var renderFilterPanelButton = function renderFilterPanelButton() {
-    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && /*#__PURE__*/_react2.default.createElement(_react.IconButton, {
       kind: "ghost",
-      hasIconOnly: true,
-      tooltipPosition: "bottom",
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/_react.default.createElement(_icons.Filter, (0, _extends2.default)({
-          size: 16
-        }, props));
-      },
-      iconDescription: filterProps.panelIconDescription,
+      align: "bottom",
+      label: filterProps.panelIconDescription,
       className: "".concat(blockClass, "-filter-panel-open-button"),
       onClick: function onClick() {
         return setPanelOpen(function (open) {
           return !open;
         });
       },
-      disabled: data.length === 0,
-      tooltipAlignment: "start"
-    });
+      disabled: data.length === 0
+    }, /*#__PURE__*/_react2.default.createElement(_icons.Filter, null));
   };
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     modalOpen = _useState2[0],
     setModalOpen = _useState2[1];
-  var _useState3 = (0, _react.useState)(window.innerWidth),
+  var _useState3 = (0, _react2.useState)(window.innerWidth),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     size = _useState4[0],
     setSize = _useState4[1];
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react2.useLayoutEffect)(function () {
     function updateSize() {
       setSize(window.innerWidth);
     }
@@ -94,54 +86,54 @@ var DatagridActions = function DatagridActions(datagridState) {
   }, []);
   var mobileToolbar = size < 672 ? true : false;
   var items = ['Option 1', 'Option 2', 'Option 3'];
-  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, {
+  return isNothingSelected && (useDenseHeader && useDenseHeader ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, {
     size: "sm"
-  }, !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement("div", {
+  }, !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+  })), renderFilterFlyout(), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement("div", {
     style: style,
     className: "".concat(blockClass, "__toolbar-divider")
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     renderIcon: _icons.Add,
     iconDescription: 'Action'
-  }, "Ghost button"))) : /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+  }, "Ghost button"))) : /*#__PURE__*/_react2.default.createElement(_react.OverflowMenu, {
     "aria-label": "Tools",
     size: "md",
     flipped: true
-  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Filter",
     hasDivider: true,
     requireTitle: true,
     onClick: function onClick() {
       return setModalOpen(true);
     }
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Export",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Settings",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Import items",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -149,40 +141,40 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Restart,
     iconDescription: 'Refresh',
     onClick: refreshColumns
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.Button, {
     kind: "ghost",
     hasIconOnly: true,
     tooltipPosition: "bottom",
     renderIcon: _icons.Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), CustomizeColumnsButton && /*#__PURE__*/_react.default.createElement("div", {
+  })), CustomizeColumnsButton && /*#__PURE__*/_react2.default.createElement("div", {
     style: style
-  }, /*#__PURE__*/_react.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
+  }, /*#__PURE__*/_react2.default.createElement(CustomizeColumnsButton, null)), /*#__PURE__*/_react2.default.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenu, {
     label: "Primary button",
     renderIcon: _icons.ChevronDown,
     menuOptionsClass: "".concat(blockClass, "__toolbar-options")
-  }, /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }, /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 1",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 1")
-  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 2",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 2")
-  }), /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_ButtonMenu.ButtonMenuItem, {
     itemText: "Option 3",
     onClick: (0, _addonActions.action)("Click on ButtonMenu Option 3")
-  }))) : /*#__PURE__*/_react.default.createElement(_react2.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react.default.createElement(_react2.TableToolbarSearch, {
+  }))) : /*#__PURE__*/_react2.default.createElement(_react.TableToolbarContent, null, renderFilterPanelButton(), /*#__PURE__*/_react2.default.createElement(_react.TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -190,59 +182,59 @@ var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), renderFilterFlyout(), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+  }), renderFilterFlyout(), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenu, {
     "aria-label": "Tools",
     size: "lg",
     flipped: true,
     renderIcon: _icons.ChevronDown,
     className: "".concat(blockClass, "__toolbar-menu__trigger"),
     menuOptionsClass: "".concat(blockClass, "__toolbar-options")
-  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Filter",
     hasDivider: true,
     requireTitle: true,
     onClick: function onClick() {
       return setModalOpen(true);
     }
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Export",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Settings",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Import items",
     hasDivider: true,
     requireTitle: true
-  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.OverflowMenuItem, {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  })), modalOpen && /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, {
+  })), modalOpen && /*#__PURE__*/_react2.default.createElement(_react.ComposedModal, {
     size: "lg",
     open: modalOpen && modalOpen,
     onClose: function onClose() {
       return setModalOpen(false);
     },
     className: "".concat(blockClass, "__mobile-toolbar-modal")
-  }, /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, null, /*#__PURE__*/_react.default.createElement("h4", null, "Filters")), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, null, /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.ModalHeader, null, /*#__PURE__*/_react2.default.createElement("h4", null, "Filters")), /*#__PURE__*/_react2.default.createElement(_react.ModalBody, null, /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter1"
-  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter2"
-  }), /*#__PURE__*/_react.default.createElement(_react2.Dropdown, {
+  }), /*#__PURE__*/_react2.default.createElement(_react.Dropdown, {
     initialSelectedItem: items[2],
     items: items,
     titleText: "Label",
     id: "filter3"
-  })), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
+  })), /*#__PURE__*/_react2.default.createElement(_react.ModalFooter, {
     primaryButtonText: "Apply",
     secondaryButtonText: "Cancel"
   }))));

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

@@ -0,0 +1,50 @@
+"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/EditFullPage/EditFullPage.js

@@ -43,7 +43,8 @@ var componentName = 'EditFullPage';
 // };
 
 /**
- * TODO: A description of the component.
+ * Use when settings on a page need to always be shown in edit mode, or when the context of the page is needed to make several changes.
+ * See usage guidance for further details.
  */
 var EditFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -41,7 +41,7 @@ var defaults = {
 };
 
 /**
- * TODO: A description of the component.
+ * Use with medium complexity edits if the user needs page context.
  */
 var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,

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

@@ -0,0 +1,36 @@
+"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/EditTearsheet/EditTearsheet.js

@@ -44,6 +44,10 @@ var defaults = {
   verticalPosition: 'normal',
   influencerWidth: 'narrow'
 };
+
+/**
+ * Use Tearsheet with medium to complex edits. See usage guidance for further information.
+ */
 var EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,

package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -43,7 +43,7 @@ var componentName = 'EditTearsheetNarrow';
 // };
 
 /**
- * TODO: A description of the component.
+ * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
  */
 var EditTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,

package/lib/components/EditUpdateCards/EditUpdateCards.js

@@ -47,9 +47,10 @@ var componentName = 'EditUpdateCards';
 // };
 
 /**
- * TODO: A description of the component.
+ Editable cards allow a user to view, modify, and save the content contained within the card.
+ These cards are generally used in instances where a user needs to make changes to a resource instances
+ (ex. configuration details), account plan, etc. Editable cards allow a user to edit something within context.
  */
-
 var EditUpdateCards = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var actionIcons = _ref.actionIcons,
     actionsPlacement = _ref.actionsPlacement,

package/lib/components/EmptyStates/EmptyState.js

@@ -36,6 +36,10 @@ var defaults = {
   position: 'top',
   size: 'lg'
 };
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 exports.defaults = defaults;
 var EmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'ErrorEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'NoDataEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'NoTagsEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -31,6 +31,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var componentName = 'UnauthorizedEmptyState';
+
+/**
+ * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
+ */
 var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,

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

@@ -0,0 +1,33 @@
+"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/ExportModal/ExportModal.js

@@ -36,6 +36,10 @@ var defaults = {
   preformattedExtensions: Object.freeze([]),
   validExtensions: Object.freeze([])
 };
+
+/**
+ * Modal dialog version of the export pattern
+ */
 var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var body = _ref.body,
     className = _ref.className,

package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js

@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
 var componentName = 'HTTPError403';
+
+/**
+ * HTTP errors are used in an attempt to access something that isn’t available or
+the user doesn’t have permission for. This HTTPError component is generic so you
+can use it when you receive an error code that isn't provided.
+ */
 var HTTPError403 = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,

package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js

@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
 var componentName = 'HTTPError404';
+
+/**
+ * HTTP errors are used in an attempt to access something that isn’t available or
+the user doesn’t have permission for. This HTTPError component is generic so you
+can use it when you receive an error code that isn't provided.
+ */
 var HTTPError404 = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,

package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js

@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
 var componentName = 'HTTPErrorOther';
+
+/**
+ * HTTP errors are used in an attempt to access something that isn’t available or
+the user doesn’t have permission for. This HTTPError component is generic so you
+can use it when you receive an error code that isn't provided.
+ */
 var HTTPErrorOther = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     description = _ref.description,