@carbon/ibm-products 2.34.0 → 2.35.0

package/es/components/ActionSet/ActionSet.d.ts

@@ -1,3 +1,39 @@
+/**
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React from 'react';
+import { ButtonProps } from '@carbon/react';
+export declare const ButtonSizes: readonly ["sm", "md", "lg", "xl", "2xl"];
+export type ButtonSize = (typeof ButtonSizes)[number];
+interface ActionSetProps {
+    /**
+     * The action buttons to show. Each action is specified as an object
+     * representation of a Carbon button.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions: ButtonProps[];
+    /**
+     * The size of buttons to use for the actions. The allowed values are
+     * those for the size prop of carbon Button. If this prop is specified, all
+     * the buttons will be set to this size, overriding any 'size' values (if any)
+     * supplied in the actions array (if any).
+     */
+    buttonSize?: ButtonSize;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * The size of the action set. Different button arrangements are used at
+     * different sizes, to make best use of the available space.
+     */
+    size?: ButtonSize;
+}
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'
@@ -10,5 +46,5 @@
  * it appears at the left side. If there is a primary button it appears at the
  * right.
  */
-export const ActionSet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare const ActionSet: React.ForwardRefExoticComponent<ActionSetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/ActionSet/ActionSet.js

@@ -18,9 +18,6 @@ var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpress
   _excluded2 = ["actions", "buttonSize", "className", "size"];
 var blockClass = "".concat(pkg.prefix, "--action-set");
 var componentName = 'ActionSet';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
 var ActionSetButton = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -53,7 +50,6 @@ var willStack = function willStack(size, numberOfActions) {
 var defaults = {
   size: 'md'
 };
-
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'sm'
@@ -124,6 +120,7 @@ ActionSet.displayName = componentName;
  * @returns null if the actions meet the requirements, or an Error object with
  * an explanatory message.
  */
+/**@ts-ignore*/
 ActionSet.validateActions = function (sizeFn) {
   return function (props, propName, componentName, location, propFullName) {
     var name = propFullName || propName;
@@ -166,7 +163,8 @@ ActionSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
+  actions: allPropTypes([/**@ts-ignore*/
+  ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,

package/es/components/CoachmarkFixed/CoachmarkFixed.js

@@ -85,7 +85,7 @@ var CoachmarkFixed = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     }
   }, [prefersReducedMotion.matches]);
   var handleTransitionEnd = function handleTransitionEnd(e) {
-    console.log('Hererrrrrreee at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
+    console.log('Here at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
     if (e.propertyName === 'transform' && !fixedIsVisible) {
       setIsOpen(false);
       onClose();

package/es/components/ConditionBuilder/ConditionBuilder.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TODO: A description of the component.
+ */
+export let ConditionBuilder: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/ConditionBuilder/ConditionBuilder.js

@@ -0,0 +1,125 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { VStack } from '@carbon/react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import ConditionBuilderContent from './ConditionBuilderContent/ConditionBuilderContent.js';
+import { ConditionBuilderProvider } from './ConditionBuilderContext/DataTreeContext.js';
+
+var _excluded = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold"];
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+var componentName = 'ConditionBuilder';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that 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.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+var ConditionBuilder = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    inputConfig = _ref.inputConfig,
+    startConditionLabel = _ref.startConditionLabel,
+    popOverSearchThreshold = _ref.popOverSearchThreshold,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(ConditionBuilderProvider, {
+    inputConfig: inputConfig,
+    popOverSearchThreshold: popOverSearchThreshold
+  }, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(VStack, null, /*#__PURE__*/React__default.createElement(ConditionBuilderContent, {
+    startConditionLabel: startConditionLabel
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+ConditionBuilder = pkg.checkComponentEnabled(ConditionBuilder, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+ConditionBuilder.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.
+ConditionBuilder.propTypes = {
+  /**
+   * Provide the contents of the ConditionBuilder.
+   */
+  //children: PropTypes.node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: PropTypes.shape({
+    properties: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      label: PropTypes.string,
+      icon: PropTypes.func,
+      type: PropTypes.oneOf(['text', 'number', 'date', 'option']),
+      config: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          id: PropTypes.string,
+          label: PropTypes.string,
+          icon: PropTypes.func
+        })),
+        includeSearch: PropTypes.bool
+      })
+    }))
+  }).isRequired,
+  /**
+   * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
+   */
+  popOverSearchThreshold: PropTypes.number.isRequired,
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: PropTypes.string.isRequired
+
+  /* TODO: add types and DocGen for all props. */
+};
+
+export { ConditionBuilder };

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts

@@ -0,0 +1,10 @@
+export default ConditionBuilderContent;
+declare function ConditionBuilderContent({ startConditionLabel }: {
+    startConditionLabel: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionBuilderContent {
+    namespace propTypes {
+        let startConditionLabel: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
+import { pkg } from '../../../settings.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { Button } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { ConditionBuilderContext, emptyState } from '../ConditionBuilderContext/DataTreeContext.js';
+
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+function ConditionBuilderContent(_ref) {
+  var _rootState$groups2;
+  var startConditionLabel = _ref.startConditionLabel;
+  var _useContext = useContext(ConditionBuilderContext),
+    rootState = _useContext.rootState,
+    setRootState = _useContext.setRootState;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isConditionBuilderActive = _useState2[0],
+    setIsConditionBuilderActive = _useState2[1];
+  var conditionBuilderRef = useRef();
+  useEffect(function () {
+    var _rootState$groups;
+    if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
+      setIsConditionBuilderActive(false);
+      if (rootState.groups[0].conditions.length == 1 && rootState.groups[0].conditions[0].property == undefined) {
+        // when the add condition clicked to start the condition building, we by default open the popover of the first property
+        setTimeout(function () {
+          conditionBuilderRef.current.querySelector('.propertyField').click();
+        }, 0);
+      }
+    } else {
+      setIsConditionBuilderActive(true);
+    }
+  }, [rootState]);
+  var onStartConditionBuilder = function onStartConditionBuilder() {
+    //when add condition button is clicked.
+    setIsConditionBuilderActive(false);
+    setRootState(emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    //or we can even pre-populate some existing builder and continue editing
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: conditionBuilderRef,
+    className: "".concat(blockClass, "__content-container")
+  }, isConditionBuilderActive && /*#__PURE__*/React__default.createElement(Button, {
+    className: "".concat(blockClass, "__condition-builder"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React__default.createElement(Add, _extends({
+        size: 16
+      }, props));
+    },
+    iconDescription: startConditionLabel,
+    kind: "ghost",
+    size: "sm",
+    onClick: onStartConditionBuilder
+  }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function () {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "conditionBuilder group renders here")
+    // <ConditionBuilderGroup
+    //   state={eachGroup}
+    //   onRemove={() => {
+    //     onRemove(groupIndex);
+    //   }}
+    //   onChange={(updatedGroup) => {
+    //     /**
+    //      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
+    //      * This gets the updated group as argument.
+    //      */
+    //     setRootState({
+    //       ...rootState,
+    //       groups: rootState.groups.map((group, gIndex) =>
+    //         groupIndex === gIndex ? updatedGroup : group
+    //       ),
+    //     });
+    //   }}
+    //>
+    ;
+  })));
+}
+ConditionBuilderContent.propTypes = {
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: PropTypes.string.isRequired
+};
+
+export { ConditionBuilderContent as default };

package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts

@@ -0,0 +1,38 @@
+export namespace emptyState {
+    let groups: {
+        groupSeparateOperator: null;
+        groupOperator: string;
+        statement: string;
+        conditions: {
+            property: undefined;
+            operator: string;
+            value: string;
+        }[];
+    }[];
+}
+export const ConditionBuilderContext: React.Context<any>;
+export function ConditionBuilderProvider(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderProvider {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let inputConfig: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            properties: PropTypes.Requireable<(PropTypes.InferProps<{
+                id: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                config: PropTypes.Requireable<PropTypes.InferProps<{
+                    options: PropTypes.Requireable<(PropTypes.InferProps<{
+                        id: PropTypes.Requireable<string>;
+                        label: PropTypes.Requireable<string>;
+                        icon: PropTypes.Requireable<(...args: any[]) => any>;
+                    }> | null | undefined)[]>;
+                    includeSearch: PropTypes.Requireable<boolean>;
+                }>>;
+            }> | null | undefined)[]>;
+        }>>>;
+        let popOverSearchThreshold: PropTypes.Validator<number>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, createContext } from 'react';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+
+var emptyState = {
+  groups: [{
+    groupSeparateOperator: null,
+    groupOperator: 'and',
+    statement: 'if',
+    conditions: [{
+      property: undefined,
+      operator: '',
+      value: ''
+    }]
+  }]
+};
+var ConditionBuilderContext = /*#__PURE__*/createContext();
+
+// const rootReducer=(state,action)=>{
+//   switch(action.type){
+//   case 'update':
+//      ;
+//     return {
+//       ...state,
+//       ...action.payload
+//     }
+//     break;
+//     default:
+//       return state;
+//   }
+
+// }
+
+var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
+  var _useState = useState({
+      groups: []
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    rootState = _useState2[0],
+    setRootState = _useState2[1];
+  return /*#__PURE__*/React__default.createElement(ConditionBuilderContext.Provider, {
+    value: {
+      rootState: rootState,
+      setRootState: setRootState,
+      inputConfig: props.inputConfig,
+      popOverSearchThreshold: props.popOverSearchThreshold
+    }
+  },
+  // eslint-disable-next-line react/prop-types
+  props.children);
+};
+ConditionBuilderProvider.propTypes = {
+  /**
+   * Provide the contents of the ConditionBuilder.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: PropTypes.shape({
+    properties: PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      label: PropTypes.string,
+      icon: PropTypes.func,
+      type: PropTypes.oneOf(['text', 'number', 'date', 'option']),
+      config: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          id: PropTypes.string,
+          label: PropTypes.string,
+          icon: PropTypes.func
+        })),
+        includeSearch: PropTypes.bool
+      })
+    }))
+  }).isRequired,
+  popOverSearchThreshold: PropTypes.number.isRequired
+  /* TODO: add types and DocGen for all props. */
+};
+
+export { ConditionBuilderContext, ConditionBuilderProvider, emptyState };

package/es/components/ConditionBuilder/assets/sampleInput.d.ts

@@ -0,0 +1,58 @@
+export declare const inputData: {
+    properties: ({
+        id: string;
+        label: string;
+        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        type: string;
+        config: {
+            options: {
+                label: string;
+                id: string;
+            }[];
+            includeSearch?: undefined;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        type: string;
+        config: {
+            options: {
+                label: string;
+                id: string;
+                icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+            }[];
+            includeSearch: boolean;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        type: string;
+        config: {
+            options?: undefined;
+            includeSearch?: undefined;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType;
+        type: string;
+        config: {
+            min: number;
+            step: number;
+            unit: string;
+            options?: undefined;
+            includeSearch?: undefined;
+        };
+    })[];
+};

package/es/components/ConditionBuilder/index.d.ts

@@ -0,0 +1 @@
+export { ConditionBuilder } from "./ConditionBuilder";

package/es/components/CreateFullPage/CreateFullPage.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useRef, useEffect, createContext } from 'react';
+import React__default, { useState, useEffect, createContext } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -118,11 +118,6 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState22 = _slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
-  var _useState23 = useState(0),
-    _useState24 = _slicedToArray(_useState23, 2),
-    headerHeight = _useState24[0],
-    setHeaderHeight = _useState24[1];
-  var headerRef = useRef(null);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -139,13 +134,6 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
-  useEffect(function () {
-    var headerHeight = 0;
-    if (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) {
-      headerHeight = headerRef.current.getBoundingClientRect().height;
-    }
-    setHeaderHeight(headerHeight);
-  }, [title, breadcrumbs]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -193,8 +181,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     ref: ref,
     className: cx(blockClass, className)
   }, getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__header"),
-    ref: headerRef
+    className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/React__default.createElement(SimpleHeader, {
     title: title,
     breadcrumbs: breadcrumbs,
@@ -202,10 +189,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
     maxVisible: maxVisibleBreadcrumbs
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__influencer-and-body-container"),
-    style: {
-      height: "calc(100vh - ".concat(headerHeight, "px)")
-    }
+    className: "".concat(blockClass, "__influencer-and-body-container")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/React__default.createElement(CreateInfluencer, {

package/es/components/CreateFullPage/CreateFullPageStep.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useContext, useState, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useState, useEffect, isValidElement } from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
 import { pkg } from '../../settings.js';
@@ -83,6 +83,24 @@ var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     span: 50
   }; // Half.
 
+  var renderDescription = function renderDescription() {
+    if (description) {
+      var common = _objectSpread2({
+        children: description,
+        className: "".concat(blockClass, "-description")
+      }, span);
+      if (typeof description === 'string') {
+        return /*#__PURE__*/React__default.createElement(Column, _extends({}, common, {
+          as: "p"
+        }));
+      } else if ( /*#__PURE__*/isValidElement(description)) {
+        return /*#__PURE__*/React__default.createElement(Column, _extends({}, common, {
+          as: "div"
+        }));
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/React__default.createElement("section", _extends({}, rest, {
     className: cx(blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
@@ -92,10 +110,7 @@ var CreateFullPageStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, span), title), subtitle && /*#__PURE__*/React__default.createElement(Column, _extends({
     className: "".concat(blockClass, "-subtitle"),
     as: "h6"
-  }, span), subtitle), description && /*#__PURE__*/React__default.createElement(Column, _extends({
-    className: "".concat(blockClass, "-description"),
-    as: "p"
-  }, span), description)))), hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
+  }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
@@ -115,7 +130,7 @@ CreateFullPageStep.propTypes = {
   /**
    * Sets an optional description on the progress step component
    */
-  description: PropTypes.string,
+  description: PropTypes.node,
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */