@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/es/components/CreateFullPage/CreateFullPage.js

@@ -0,0 +1,454 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "includeViewAllToggle", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "sideNavAriaLabel", "submitButtonText", "viewAllToggleLabelText", "viewAllToggleOffLabelText", "viewAllToggleOnLabelText"];
+
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React, { useEffect, useCallback, useState } from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+import { CREATE_FULL_PAGE_SECTION, CREATE_FULL_PAGE_STEP } from './constants'; // Carbon and package components we use.
+
+import { Grid, ModalFooter, ComposedModal, ModalHeader, ModalBody, Button, Form } from 'carbon-components-react';
+import { CreateInfluencer } from '../CreateInfluencer';
+import { ActionSet } from '../ActionSet';
+import { usePreviousValue, useValidCreateStepCount, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
+import { hasValidChildrenType } from '../../global/js/utils/hasValidType';
+var blockClass = "".concat(pkg.prefix, "--create-full-page");
+var componentName = 'CreateFullPage';
+export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var backButtonText = _ref.backButtonText,
+      cancelButtonText = _ref.cancelButtonText,
+      children = _ref.children,
+      className = _ref.className,
+      includeViewAllToggle = _ref.includeViewAllToggle,
+      modalDangerButtonText = _ref.modalDangerButtonText,
+      modalDescription = _ref.modalDescription,
+      modalSecondaryButtonText = _ref.modalSecondaryButtonText,
+      modalTitle = _ref.modalTitle,
+      nextButtonText = _ref.nextButtonText,
+      onClose = _ref.onClose,
+      onRequestSubmit = _ref.onRequestSubmit,
+      sideNavAriaLabel = _ref.sideNavAriaLabel,
+      submitButtonText = _ref.submitButtonText,
+      viewAllToggleLabelText = _ref.viewAllToggleLabelText,
+      viewAllToggleOffLabelText = _ref.viewAllToggleOffLabelText,
+      viewAllToggleOnLabelText = _ref.viewAllToggleOnLabelText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      createFullPageActions = _useState2[0],
+      setCreateFullPageActions = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      shouldViewAll = _useState4[0],
+      setShouldViewAll = _useState4[1];
+
+  var _useState5 = useState(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentStep = _useState6[0],
+      setCurrentStep = _useState6[1];
+
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      activeSectionIndex = _useState8[0],
+      setActiveSectionIndex = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isSubmitting = _useState10[0],
+      setIsSubmitting = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      modalIsOpen = _useState12[0],
+      setModalIsOpen = _useState12[1];
+
+  var previousState = usePreviousValue({
+    currentStep: currentStep,
+    open: open
+  }); // returns an array of full page steps
+
+  var getFullPageSteps = useCallback(function () {
+    var _childrenArray$;
+
+    var steps = [];
+    var childrenArray = Array.isArray(children) ? children : [children];
+    var extractedChildren = childrenArray && ((_childrenArray$ = childrenArray[0]) === null || _childrenArray$ === void 0 ? void 0 : _childrenArray$.type) === React.Fragment ? childrenArray[0].props.children : childrenArray;
+    extractedChildren.forEach(function (child) {
+      if (isFullPageStep(child)) {
+        steps.push(child);
+      }
+    });
+    return steps;
+  }, [children]);
+  useCreateComponentFocus(previousState, currentStep, getFullPageSteps, blockClass);
+  useValidCreateStepCount(getFullPageSteps, componentName);
+  useCreateComponentStepChange({
+    setCurrentStep: setCurrentStep,
+    setIsSubmitting: setIsSubmitting,
+    setShouldViewAll: setShouldViewAll,
+    onClose: onClose,
+    onRequestSubmit: onRequestSubmit,
+    componentName: componentName,
+    getComponentSteps: getFullPageSteps,
+    currentStep: currentStep,
+    shouldViewAll: shouldViewAll,
+    backButtonText: backButtonText,
+    cancelButtonText: cancelButtonText,
+    submitButtonText: submitButtonText,
+    nextButtonText: nextButtonText,
+    isSubmitting: isSubmitting,
+    componentBlockClass: blockClass,
+    setCreateComponentActions: setCreateFullPageActions,
+    setModalIsOpen: setModalIsOpen
+  }); // Log a warning to the console in the event there are no CreateFullPageSection components
+  // inside of the CreateFullPageSteps when the viewAll toggle is provided and turned on.
+  // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+  /* istanbul ignore next */
+
+  useEffect(function () {
+    if (includeViewAllToggle && shouldViewAll) {
+      var childrenArray = Array.isArray(children) ? children : [children];
+      var fullPageStepComponents = childrenArray.filter(function (child) {
+        return isFullPageStep(child);
+      });
+      var fullPageSectionComponents = [];
+      fullPageStepComponents.forEach(function (child, index) {
+        // We have received children for a FullPageStep
+        if (shouldViewAll && typeof child.props.children !== 'undefined') {
+          // Only a string was provided as children of CreateFullPageStep, this is not permitted when using view all toggle
+          if (typeof child.props.children === 'string') {
+            console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
+          } else {
+            // The FullPageStep has an array of children, lets check each one to see if it is a FullPageSection
+            if (child.props.children.length) {
+              child.props.children.forEach(function (stepChild) {
+                if (isFullPageSection(stepChild)) {
+                  fullPageSectionComponents.push(stepChild);
+                }
+              });
+            } else {
+              // The FullPageStep only has a single React element as a child, lets check to see if it is a FullPageSection
+              if (isFullPageSection(child.props.children)) {
+                fullPageSectionComponents.push(child.props.children);
+              }
+            }
+          }
+        } // If there are fewer CreateFullPageSection components than CreateFullPageStep components
+        // it means that each CreateFullPageStep does not have at least one CreateFullPageSection
+        // this is not permitted when using view all toggle
+
+
+        if (fullPageSectionComponents.length < fullPageStepComponents.length && index === fullPageStepComponents.length - 1 // wait until we've finished checking each FullPageStep before giving a warning
+        ) {
+          console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
+        } // We have received a single child element, lets check to see that it is
+        // a CreateFullPageSection component, if it is not we should add a console
+        // warning, as each CreateFullPageStep required at least one CreateFullPageSection,
+        // when using the view all toggle
+
+
+        if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
+          if (!isFullPageSection(child.props.children)) {
+            console.warn("".concat(componentName, ": You must have at least one CreateFullPageSection component in a CreateFullPageStep when using the 'includeViewAllToggle' prop."));
+          }
+        }
+      });
+    }
+  }, [includeViewAllToggle, shouldViewAll, children]); // check if child is a full page step component
+
+  var isFullPageStep = function isFullPageStep(child) {
+    if (child && child.props && child.props.type === CREATE_FULL_PAGE_STEP) {
+      return true;
+    }
+
+    return false;
+  }; // check if child is a full page section component
+  // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+  /* istanbul ignore next */
+
+
+  var isFullPageSection = function isFullPageSection(child) {
+    if (child && child.props && child.props.type === CREATE_FULL_PAGE_SECTION) {
+      return true;
+    }
+
+    return false;
+  }; // renders the step progression components in the left influencer area
+
+
+  var getFullPageComponents = function getFullPageComponents(childrenElements) {
+    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
+    var fullPageStepComponents = childrenArray.filter(function (child) {
+      return isFullPageStep(child);
+    });
+    var sectionChildElements = [];
+    fullPageStepComponents.forEach(function (child) {
+      // we have received an array of children, lets check to see that each child is
+      // a FullPageSection component before adding it to sectionChildElements
+      // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+      /* istanbul ignore next */
+      if (shouldViewAll && child.props.children.length) {
+        child.props.children.forEach(function (stepChild) {
+          if (isFullPageSection(stepChild)) {
+            sectionChildElements.push(stepChild);
+          }
+        });
+      } // we have received a single child element, lets check to see that it is
+      // a CreateFullPageSection component before adding it to sectionChildElements
+
+
+      if (shouldViewAll && typeof child.props.children !== 'undefined' && !child.props.children.length) {
+        // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+        /* istanbul ignore next */
+        if (isFullPageSection(child.props.children)) {
+          sectionChildElements.push(child.props.children);
+        }
+      }
+    });
+    return {
+      sections: sectionChildElements,
+      steps: fullPageStepComponents
+    };
+  }; // renders all children (CreateFullPageSteps and regular children elements)
+
+
+  var renderChildren = function renderChildren(childrenElements) {
+    var step = 0;
+    var childrenArray = Array.isArray(childrenElements) ? childrenElements : [childrenElements];
+    var indexOfLastFullPageStep = childrenArray.map(function (el) {
+      var _el$props;
+
+      return el === null || el === void 0 ? void 0 : (_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.type;
+    }).lastIndexOf(CREATE_FULL_PAGE_STEP);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, childrenArray.map(function (child, stepIndex) {
+      var _cx;
+
+      if (!isFullPageStep(child)) {
+        return child;
+      }
+
+      step++;
+      return /*#__PURE__*/React.cloneElement(child, {
+        className: cx(child.props.className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), !shouldViewAll && currentStep !== step), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), currentStep === step), _cx)),
+        key: "key_".concat(stepIndex)
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, renderStepChildren(child.props.children, indexOfLastFullPageStep === step - 1)));
+    }));
+  };
+
+  var renderStepChildren = function renderStepChildren(fullPageStepComponent, isLastFullPageStep) {
+    var fullPageStepComponents = Array.isArray(fullPageStepComponent) ? fullPageStepComponent : [fullPageStepComponent];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fullPageStepComponents.map(function (child, index) {
+      var _cx2;
+
+      if (!isFullPageSection(child)) {
+        return child;
+      } // Needed to be able to not render the divider
+      // line on the last section of the last step
+      // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+      /* istanbul ignore next */
+
+
+      var isLastSectionOfLastStep = isLastFullPageStep && fullPageStepComponents.length - 1 === index;
+      /* istanbul ignore next */
+
+      return /*#__PURE__*/React.cloneElement(child, {
+        className: cx(child.props.className, (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__step--hidden-section"), child.props.viewAllOnly && !shouldViewAll), _defineProperty(_cx2, "".concat(blockClass, "__step--visible-section"), !child.props.viewAllOnly || child.props.viewAllOnly && shouldViewAll), _cx2)),
+        key: "key_".concat(index)
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, shouldViewAll && /*#__PURE__*/React.createElement("h4", {
+        className: "".concat(blockClass, "__step-title")
+      }, child.props.title), child, shouldViewAll && !isLastSectionOfLastStep && /*#__PURE__*/React.createElement("span", {
+        className: "".concat(blockClass, "__section-divider")
+      })));
+    }));
+  }; // currently, we are not supporting the use of 'view all' toggle state or CreateFullPageSection -- this may be a future feature
+
+  /* istanbul ignore next */
+
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: ref,
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__influencer")
+  }, /*#__PURE__*/React.createElement(CreateInfluencer, {
+    activeSectionIndex: activeSectionIndex,
+    componentBlockClass: blockClass,
+    createComponentName: componentName,
+    currentStep: currentStep,
+    createComponents: getFullPageComponents(children),
+    includeViewAllToggle: includeViewAllToggle,
+    handleToggleState: function handleToggleState(toggleState) {
+      return setShouldViewAll(toggleState);
+    },
+    handleActiveSectionIndex: function handleActiveSectionIndex(index) {
+      return setActiveSectionIndex(index);
+    },
+    previousState: previousState,
+    sideNavAriaLabel: sideNavAriaLabel,
+    toggleState: shouldViewAll,
+    viewAllToggleLabelText: viewAllToggleLabelText,
+    viewAllToggleOffLabelText: viewAllToggleOffLabelText,
+    viewAllToggleOnLabelText: viewAllToggleOnLabelText
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__main")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Form, {
+    className: "".concat(blockClass, "__form")
+  }, renderChildren(children)))), /*#__PURE__*/React.createElement(ActionSet, {
+    className: "".concat(blockClass, "__buttons"),
+    actions: createFullPageActions,
+    size: "max"
+  }))), /*#__PURE__*/React.createElement(ComposedModal, {
+    className: "".concat(blockClass, "__modal"),
+    size: "sm",
+    open: modalIsOpen,
+    "aria-label": modalTitle
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    title: modalTitle
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, modalDescription)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    kind: "secondary",
+    onClick: function onClick() {
+      setModalIsOpen(!modalIsOpen);
+    }
+  }, modalSecondaryButtonText), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    kind: "danger",
+    onClick: onClose
+  }, modalDangerButtonText))));
+}); // Return a placeholder if not released and not enabled by feature flag.
+
+CreateFullPage = pkg.checkComponentEnabled(CreateFullPage, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+CreateFullPage.displayName = componentName; // The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+CreateFullPage.propTypes = {
+  /**
+   * The back button text
+   */
+  backButtonText: PropTypes.string.isRequired,
+
+  /**
+   * The cancel button text
+   */
+  cancelButtonText: PropTypes.string.isRequired,
+
+  /**
+   * The main content of the full page
+   */
+  children: hasValidChildrenType({
+    componentName: componentName,
+    childType: CREATE_FULL_PAGE_STEP
+  }),
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * @ignore
+   * An optional prop that provides a toggle element in the left side influencer panel
+   */
+  includeViewAllToggle: PropTypes.bool,
+
+  /**
+   * The primary 'danger' button text in the modal
+   */
+  modalDangerButtonText: PropTypes.string.isRequired,
+
+  /**
+   * The description located below the title in the modal
+   */
+  modalDescription: PropTypes.string,
+
+  /**
+   * The secondary button text in the modal
+   */
+  modalSecondaryButtonText: PropTypes.string.isRequired,
+
+  /**
+   * The title located in the header of the modal
+   */
+  modalTitle: PropTypes.string.isRequired,
+
+  /**
+   * The next button text
+   */
+  nextButtonText: PropTypes.string.isRequired,
+
+  /**
+   * An optional handler that is called when the user closes the full page (by
+   * clicking the secondary button, located in the modal, which triggers after
+   * clicking the ghost button in the modal
+   */
+  onClose: PropTypes.func,
+
+  /**
+   * Specify a handler for submitting the multi step full page (final step).
+   * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
+   */
+  onRequestSubmit: PropTypes.func.isRequired,
+
+  /**
+   * @ignore
+   * The aria label to be used for the UI Shell SideNav Carbon component
+   */
+  sideNavAriaLabel: PropTypes.string,
+
+  /**
+   * The submit button text
+   */
+  submitButtonText: PropTypes.string.isRequired,
+
+  /**
+   * The main title of the full page, displayed in the header area.
+   */
+  title: PropTypes.node,
+
+  /**
+   * @ignore
+   * Sets the label text for the view all toggle component
+   */
+  viewAllToggleLabelText: PropTypes.string,
+
+  /**
+   * @ignore
+   * Sets the label text for the view all toggle `off` text
+   */
+  viewAllToggleOffLabelText: PropTypes.string,
+
+  /**
+   * @ignore
+   * Sets the label text for the view all toggle `on` text
+   */
+  viewAllToggleOnLabelText: PropTypes.string
+};
+CreateFullPage.defaultProps = {
+  includeViewAllToggle: false
+};

package/es/components/CreateFullPage/CreateFullPageSection.js

@@ -0,0 +1,53 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+import { CREATE_FULL_PAGE_SECTION } from './constants';
+var blockClass = "".concat(pkg.prefix, "--create-full-page__section");
+export var CreateFullPageSection = /*#__PURE__*/forwardRef( // currently, we are not supporting the use of FullPageSections -- this may be a future feature
+
+/* istanbul ignore next */
+function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      id = _ref.id;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, className),
+    ref: ref,
+    id: id
+  }, children);
+});
+CreateFullPageSection.propTypes = {
+  /**
+   * Content that shows in the CreateFullPage step
+   */
+  children: PropTypes.node,
+
+  /**
+   * Sets an optional className to be added to the CreateFullPage step
+   */
+  className: PropTypes.string,
+
+  /**
+   * Sets the id of the CreateTearsheetSection outermost element
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Sets the title text for a CreateFullPage step
+   */
+  title: PropTypes.node.isRequired
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+CreateFullPageSection.defaultProps = {
+  type: CREATE_FULL_PAGE_SECTION
+};

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+import { CREATE_FULL_PAGE_STEP } from './constants.js';
+import { FormGroup } from 'carbon-components-react';
+var componentName = 'CreateFullPageStep';
+var blockClass = "".concat(pkg.prefix, "--create-full-page__step");
+export var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      subtitle = _ref.subtitle,
+      description = _ref.description,
+      title = _ref.title,
+      hasFieldset = _ref.hasFieldset,
+      fieldsetLegendText = _ref.fieldsetLegendText;
+  return /*#__PURE__*/React.createElement("section", {
+    className: cx(blockClass, className),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "".concat(blockClass, "-title")
+  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
+    className: "".concat(blockClass, "-subtitle")
+  }, subtitle), description && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "-description")
+  }, description), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
+    legendText: fieldsetLegendText,
+    className: "".concat(blockClass, "-fieldset")
+  }, children) : children);
+}); // Return a placeholder if not released and not enabled by feature flag
+
+CreateFullPageStep = pkg.checkComponentEnabled(CreateFullPageStep, componentName);
+CreateFullPageStep.propTypes = {
+  /**
+   * Content that shows in the CreateFullPage step
+   */
+  children: PropTypes.node,
+
+  /**
+   * Sets an optional className to be added to the CreateFullPage step
+   */
+  className: PropTypes.string,
+
+  /**
+   * Sets an optional description on the progress step component
+   */
+  description: PropTypes.string,
+
+  /**
+   * This will conditionally disable the submit button in the multi step CreateFullPage
+   */
+  disableSubmit: PropTypes.bool,
+
+  /**
+   * This is the legend text that appears above a fieldset html element for accessibility purposes. It is required when the optional `hasFieldset` prop is provided to a FullPageStep.
+   */
+  fieldsetLegendText: PropTypes.string.isRequired.if(function (_ref2) {
+    var hasFieldset = _ref2.hasFieldset;
+    return hasFieldset === true;
+  }),
+
+  /**
+   * This optional prop will render your form content inside of a fieldset html element
+   */
+  hasFieldset: PropTypes.bool,
+
+  /**
+   * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
+   */
+  introStep: PropTypes.bool,
+
+  /**
+   * Optional function to be called on initial mount of a step.
+   * For example, this can be used to fetch data that is required on a particular step.
+   */
+  onMount: PropTypes.func,
+
+  /**
+   * Optional function to be called on a step change.
+   * For example, this can be used to validate input fields before proceeding to the next step.
+   * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the next button.
+   */
+  onNext: PropTypes.func,
+
+  /**
+   * Sets the optional secondary label on the progress step component
+   */
+  secondaryLabel: PropTypes.string,
+
+  /**
+   * Sets an optional subtitle on the progress step component
+   */
+  subtitle: PropTypes.string,
+
+  /**
+   * Sets the title text for a create full page step
+   */
+  title: PropTypes.node.isRequired
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+CreateFullPageStep.defaultProps = {
+  type: CREATE_FULL_PAGE_STEP
+};

package/es/components/CreateFullPage/constants.js

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2021, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+export var CREATE_FULL_PAGE_STEP = 'CreateFullPageStep';
+export var CREATE_FULL_PAGE_SECTION = 'CreateFullPageSection';

package/es/components/CreateFullPage/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { CreateFullPage } from './CreateFullPage';
+export { CreateFullPageStep } from './CreateFullPageStep';
+export { CreateFullPageSection } from './CreateFullPageSection';