@carbon/ibm-products 2.34.0 → 2.35.0

package/lib/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/lib/components/ActionSet/ActionSet.js

@@ -27,9 +27,6 @@ var _excluded = ["className", "disabled", "kind", "label", "loading", "isExpress
   _excluded2 = ["actions", "buttonSize", "className", "size"];
 var blockClass = "".concat(settings.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["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
@@ -62,7 +59,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'
@@ -133,6 +129,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;
@@ -175,7 +172,8 @@ ActionSet.propTypes = {
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: propsHelper.allPropTypes([ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
+  actions: propsHelper.allPropTypes([/**@ts-ignore*/
+  ActionSet.validateActions(), index["default"].arrayOf(index["default"].shape(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, react.Button.propTypes), {}, {
     kind: index["default"].oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: index["default"].string,
     loading: index["default"].bool,

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -94,7 +94,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     }
   }, [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/lib/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/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -0,0 +1,132 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var react = require('@carbon/react');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilderContent.js');
+var DataTreeContext = require('./ConditionBuilderContext/DataTreeContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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(settings.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.
+ */
+
+exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    inputConfig = _ref.inputConfig,
+    startConditionLabel = _ref.startConditionLabel,
+    popOverSearchThreshold = _ref.popOverSearchThreshold,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(DataTreeContext.ConditionBuilderProvider, {
+    inputConfig: inputConfig,
+    popOverSearchThreshold: popOverSearchThreshold
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](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"
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
+    startConditionLabel: startConditionLabel
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.ConditionBuilder = settings.pkg.checkComponentEnabled(exports.ConditionBuilder, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.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.
+exports.ConditionBuilder.propTypes = {
+  /**
+   * Provide the contents of the ConditionBuilder.
+   */
+  //children: PropTypes.node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: index["default"].shape({
+    properties: index["default"].arrayOf(index["default"].shape({
+      id: index["default"].string,
+      label: index["default"].string,
+      icon: index["default"].func,
+      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      config: index["default"].shape({
+        options: index["default"].arrayOf(index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string,
+          icon: index["default"].func
+        })),
+        includeSearch: index["default"].bool
+      })
+    }))
+  }).isRequired,
+  /**
+   * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
+   */
+  popOverSearchThreshold: index["default"].number.isRequired,
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: index["default"].string.isRequired
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/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/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -0,0 +1,100 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var settings = require('../../../settings.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+var DataTreeContext = require('../ConditionBuilderContext/DataTreeContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
+function ConditionBuilderContent(_ref) {
+  var _rootState$groups2;
+  var startConditionLabel = _ref.startConditionLabel;
+  var _useContext = React.useContext(DataTreeContext.ConditionBuilderContext),
+    rootState = _useContext.rootState,
+    setRootState = _useContext.setRootState;
+  var _useState = React.useState(true),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isConditionBuilderActive = _useState2[0],
+    setIsConditionBuilderActive = _useState2[1];
+  var conditionBuilderRef = React.useRef();
+  React.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(DataTreeContext.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["default"].createElement("div", {
+    ref: conditionBuilderRef,
+    className: "".concat(blockClass, "__content-container")
+  }, isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+    className: "".concat(blockClass, "__condition-builder"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["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["default"].createElement(React__default["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: index["default"].string.isRequired
+};
+
+exports["default"] = ConditionBuilderContent;

package/lib/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/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js

@@ -0,0 +1,98 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../../node_modules/prop-types/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var emptyState = {
+  groups: [{
+    groupSeparateOperator: null,
+    groupOperator: 'and',
+    statement: 'if',
+    conditions: [{
+      property: undefined,
+      operator: '',
+      value: ''
+    }]
+  }]
+};
+var ConditionBuilderContext = /*#__PURE__*/React.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 = React.useState({
+      groups: []
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    rootState = _useState2[0],
+    setRootState = _useState2[1];
+  return /*#__PURE__*/React__default["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: index["default"].node.isRequired,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: index["default"].shape({
+    properties: index["default"].arrayOf(index["default"].shape({
+      id: index["default"].string,
+      label: index["default"].string,
+      icon: index["default"].func,
+      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      config: index["default"].shape({
+        options: index["default"].arrayOf(index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string,
+          icon: index["default"].func
+        })),
+        includeSearch: index["default"].bool
+      })
+    }))
+  }).isRequired,
+  popOverSearchThreshold: index["default"].number.isRequired
+  /* TODO: add types and DocGen for all props. */
+};
+
+exports.ConditionBuilderContext = ConditionBuilderContext;
+exports.ConditionBuilderProvider = ConditionBuilderProvider;
+exports.emptyState = emptyState;

package/lib/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/lib/components/ConditionBuilder/index.d.ts

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

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -127,11 +127,6 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
     lastIncludedStep = _useState22[0],
     setLastIncludedStep = _useState22[1];
-  var _useState23 = React.useState(0),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    headerHeight = _useState24[0],
-    setHeaderHeight = _useState24[1];
-  var headerRef = React.useRef(null);
   React.useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -148,13 +143,6 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
-  React.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.useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -202,8 +190,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     ref: ref,
     className: cx__default["default"](blockClass, className)
   }, devtools.getDevtoolsProps(componentName)), (title || (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) > 0) && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__header"),
-    ref: headerRef
+    className: "".concat(blockClass, "__header")
   }, /*#__PURE__*/React__default["default"].createElement(SimpleHeader.SimpleHeader, {
     title: title,
     breadcrumbs: breadcrumbs,
@@ -211,10 +198,7 @@ exports.CreateFullPage = /*#__PURE__*/React__default["default"].forwardRef(funct
     overflowAriaLabel: breadcrumbsOverflowAriaLabel,
     maxVisible: maxVisibleBreadcrumbs
   })), /*#__PURE__*/React__default["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["default"].createElement("div", {
     className: "".concat(blockClass, "__influencer")
   }, /*#__PURE__*/React__default["default"].createElement(CreateInfluencer.CreateInfluencer, {

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -92,6 +92,24 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     span: 50
   }; // Half.
 
+  var renderDescription = function renderDescription() {
+    if (description) {
+      var common = _rollupPluginBabelHelpers.objectSpread2({
+        children: description,
+        className: "".concat(blockClass, "-description")
+      }, span);
+      if (typeof description === 'string') {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "p"
+        }));
+      } else if ( /*#__PURE__*/React.isValidElement(description)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "div"
+        }));
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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
@@ -101,10 +119,7 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, span), title), subtitle && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
     className: "".concat(blockClass, "-subtitle"),
     as: "h6"
-  }, span), subtitle), description && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
-    className: "".concat(blockClass, "-description"),
-    as: "p"
-  }, span), description)))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
+  }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole["default"].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"));
@@ -124,7 +139,7 @@ exports.CreateFullPageStep.propTypes = {
   /**
    * Sets an optional description on the progress step component
    */
-  description: index["default"].string,
+  description: index["default"].node,
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */