@carbon/ibm-products 2.5.0 → 2.6.0

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -10,7 +10,7 @@ var _excluded = ["children", "className", "description", "disableSubmit", "field
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useContext, useEffect, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useState, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Column, FormGroup, Grid } from '@carbon/react';
@@ -83,6 +83,21 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  var renderDescription = function renderDescription() {
+    if (description) {
+      if (typeof description === 'string') {
+        return /*#__PURE__*/React.createElement("p", {
+          className: "".concat(blockClass, "--description")
+        }, description);
+      }
+      if ( /*#__PURE__*/isValidElement(description)) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(blockClass, "--description")
+        }, description);
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
@@ -95,9 +110,7 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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)), /*#__PURE__*/React.createElement(Column, {
+  }, subtitle), renderDescription()), /*#__PURE__*/React.createElement(Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
     legendText: fieldsetLegendText,
@@ -119,7 +132,7 @@ CreateTearsheetStep.propTypes = {
   /**
    * Sets an optional description on the step component
    */
-  description: PropTypes.string,
+  description: PropTypes.node,
   /**
    * This will conditionally disable the submit button in the multi step Tearsheet
    */

package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -11,7 +11,7 @@ var _excluded = ["value1", "setValue1"];
  */
 
 import React, { useState } from 'react';
-import { Button, Column, Grid, InlineNotification, RadioButtonGroup, RadioButton, TextInput, Toggle, NumberInput, Checkbox } from '@carbon/react';
+import { Button, Column, Grid, InlineNotification, RadioButtonGroup, RadioButton, TextInput, Toggle, NumberInput, Checkbox, Link } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
@@ -152,7 +152,9 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     fieldsetLegendText: "Topic information",
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
-    description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
+    description: /*#__PURE__*/React.createElement("div", null, "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize. ", /*#__PURE__*/React.createElement(Link, {
+      href: "#"
+    }, "Learn more."))
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 8,
     lg: 8,
@@ -206,8 +208,9 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
   }), /*#__PURE__*/React.createElement(Checkbox, {
     labelText: "Include additional step",
     id: "include-additional-step-checkbox",
-    onChange: function onChange(value) {
-      return setShouldIncludeAdditionalStep(value);
+    onChange: function onChange(event, _ref3) {
+      var checked = _ref3.checked;
+      return setShouldIncludeAdditionalStep(checked);
     },
     checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -92,6 +92,21 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
       stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
     }
   }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  var renderDescription = function renderDescription() {
+    if (description) {
+      if (typeof description === 'string') {
+        return /*#__PURE__*/_react.default.createElement("p", {
+          className: "".concat(blockClass, "--description")
+        }, description);
+      }
+      if ( /*#__PURE__*/(0, _react.isValidElement)(description)) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(blockClass, "--description")
+        }, description);
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/_react.default.createElement(_react2.Grid, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
@@ -104,9 +119,7 @@ var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, re
     className: "".concat(blockClass, "--title")
   }, title), subtitle && /*#__PURE__*/_react.default.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
-  }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
-    className: "".concat(blockClass, "--description")
-  }, description)), /*#__PURE__*/_react.default.createElement(_react2.Column, {
+  }, subtitle), renderDescription()), /*#__PURE__*/_react.default.createElement(_react2.Column, {
     span: 100
   }, hasFieldset ? /*#__PURE__*/_react.default.createElement(_react2.FormGroup, {
     legendText: fieldsetLegendText,
@@ -129,7 +142,7 @@ CreateTearsheetStep.propTypes = {
   /**
    * Sets an optional description on the step component
    */
-  description: _propTypes.default.string,
+  description: _propTypes.default.node,
   /**
    * This will conditionally disable the submit button in the multi step Tearsheet
    */

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -161,7 +161,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     fieldsetLegendText: "Topic information",
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
-    description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
+    description: /*#__PURE__*/_react.default.createElement("div", null, "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize. ", /*#__PURE__*/_react.default.createElement(_react2.Link, {
+      href: "#"
+    }, "Learn more."))
   }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 8,
     lg: 8,
@@ -215,8 +217,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
   }), /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
     labelText: "Include additional step",
     id: "include-additional-step-checkbox",
-    onChange: function onChange(value) {
-      return setShouldIncludeAdditionalStep(value);
+    onChange: function onChange(event, _ref3) {
+      var checked = _ref3.checked;
+      return setShouldIncludeAdditionalStep(checked);
     },
     checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "40fe19b4ef32f97f01e8664bbe81fc1e459d0f3f"
+  "gitHead": "f1e9562497e15c834c38b7b9bcd330102523d468"
 }