@carbon/ibm-products 1.2.5 → 1.6.0

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

@@ -11,6 +11,10 @@ exports.MultiStepTearsheet = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -23,30 +27,46 @@ var _CreateTearsheet = require("../CreateTearsheet");
 
 var _CreateTearsheetStep = require("../CreateTearsheetStep");
 
+var _excluded = ["value1", "setValue1"];
+
 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; }
 
-/* eslint-disable react/prop-types */
-
-/**
- * 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.
- */
 var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step");
 
-var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
-  var backButtonText = _ref.backButtonText,
-      cancelButtonText = _ref.cancelButtonText,
-      className = _ref.className,
-      description = _ref.description,
-      influencerWidth = _ref.influencerWidth,
-      label = _ref.label,
-      nextButtonText = _ref.nextButtonText,
-      submitButtonText = _ref.submitButtonText,
-      title = _ref.title;
+var CustomStep = function CustomStep(_ref) {
+  var value1 = _ref.value1,
+      setValue1 = _ref.setValue1,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, (0, _extends2.default)({}, rest, {
+    disableSubmit: !value1
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+    value: value1,
+    onChange: function onChange(event) {
+      return setValue1(event.target.value);
+    },
+    id: "custom-step-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  }))));
+};
+
+var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
+  var backButtonText = _ref2.backButtonText,
+      cancelButtonText = _ref2.cancelButtonText,
+      className = _ref2.className,
+      description = _ref2.description,
+      influencerWidth = _ref2.influencerWidth,
+      label = _ref2.label,
+      nextButtonText = _ref2.nextButtonText,
+      submitButtonText = _ref2.submitButtonText,
+      title = _ref2.title;
 
   var _useState = (0, _react.useState)(750),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
@@ -69,33 +89,43 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
 
   var _useState9 = (0, _react.useState)(''),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      stepOneTextInputValue = _useState10[0],
-      setStepOneTextInputValue = _useState10[1];
+      value1 = _useState10[0],
+      setValue1 = _useState10[1];
 
   var _useState11 = (0, _react.useState)(''),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      topicDescriptionValue = _useState12[0],
-      setTopicDescriptionValue = _useState12[1];
+      stepOneTextInputValue = _useState12[0],
+      setStepOneTextInputValue = _useState12[1];
 
   var _useState13 = (0, _react.useState)(''),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      topicVersionValue = _useState14[0],
-      setTopicVersionValue = _useState14[1];
+      topicDescriptionValue = _useState14[0],
+      setTopicDescriptionValue = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(1),
+  var _useState15 = (0, _react.useState)(''),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      stepTwoTextInputValue = _useState16[0],
-      setStepTwoTextInputValue = _useState16[1];
+      topicVersionValue = _useState16[0],
+      setTopicVersionValue = _useState16[1];
 
-  var _useState17 = (0, _react.useState)('one-day'),
+  var _useState17 = (0, _react.useState)(1),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      stepThreeTextInputValue = _useState18[0],
-      setStepThreeTextInputValue = _useState18[1];
+      stepTwoTextInputValue = _useState18[0],
+      setStepTwoTextInputValue = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(false),
+  var _useState19 = (0, _react.useState)('one-day'),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      isInvalid = _useState20[0],
-      setIsInvalid = _useState20[1];
+      stepThreeTextInputValue = _useState20[0],
+      setStepThreeTextInputValue = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      isInvalid = _useState22[0],
+      setIsInvalid = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
 
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
@@ -106,6 +136,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     setHasSubmitError(false);
     setIsInvalid(false);
     setOpen(false);
+    setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -160,9 +192,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     sm: 8
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     labelText: "Topic name",
+    placeholder: "Enter topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
     value: stepOneTextInputValue,
-    placeholder: "Enter topic name",
     onChange: function onChange(event) {
       if (event.target.value.length) {
         setIsInvalid(false);
@@ -208,7 +240,27 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Dynamic step",
+    subtitle: "Dynamic step subtitle",
+    description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
+    hasFieldset: false,
+    includeStep: shouldIncludeAdditionalStep
+  }, "dynamic step content"), /*#__PURE__*/_react.default.createElement(CustomStep, {
+    title: "Location",
+    subtitle: "Custom step subtitle",
+    description: "Custom step description (see storybook implementation for new custom step capability)",
+    value1: value1,
+    setValue1: setValue1,
+    hasFieldset: false
+  }), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -177,14 +177,16 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {

package/lib/components/ExportModal/ExportModal.js

@@ -33,7 +33,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
+var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"];
 
 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); }
 
@@ -52,7 +52,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       error = _ref.error,
       errorMessage = _ref.errorMessage,
       filename = _ref.filename,
+      hidePasswordLabel = _ref.hidePasswordLabel,
       inputLabel = _ref.inputLabel,
+      inputType = _ref.inputType,
       invalidInputText = _ref.invalidInputText,
       loading = _ref.loading,
       loadingMessage = _ref.loadingMessage,
@@ -63,6 +65,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
       primaryButtonText = _ref.primaryButtonText,
       secondaryButtonText = _ref.secondaryButtonText,
+      showPasswordLabel = _ref.showPasswordLabel,
       successMessage = _ref.successMessage,
       successful = _ref.successful,
       title = _ref.title,
@@ -124,6 +127,15 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
   var submitted = loading || error || successful;
+  var commonInputProps = (0, _defineProperty2.default)({
+    id: "text-input--".concat(internalId.current),
+    value: name,
+    onChange: onNameChangeHandler,
+    labelText: inputLabel,
+    invalid: hasInvalidExtension(),
+    invalidText: invalidInputText,
+    onBlur: onBlurHandler
+  }, 'data-modal-primary-focus', true);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "aria-label": title,
@@ -152,17 +164,16 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       key: o.extension,
       id: o.extension,
       value: o.extension,
-      labelText: "".concat(o.extension, " (").concat(o.description, ")")
+      labelText: "".concat(o.extension, " (").concat(o.description, ")"),
+      "data-modal-primary-focus": true
     });
-  }))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
-    id: "text-input--".concat(internalId.current),
-    value: name,
-    onChange: onNameChangeHandler,
-    labelText: inputLabel,
-    invalid: hasInvalidExtension(),
-    invalidText: invalidInputText,
-    onBlur: onBlurHandler
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__input-container")
+  }, inputType === 'text' ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, commonInputProps) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, (0, _extends2.default)({}, commonInputProps, {
+    showPasswordLabel: showPasswordLabel,
+    hidePasswordLabel: hidePasswordLabel,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {
     small: true,
@@ -213,11 +224,21 @@ ExportModal.propTypes = {
    */
   filename: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to hide key
+   */
+  hidePasswordLabel: _propTypes.default.string,
+
   /**
    * label for the text input
    */
   inputLabel: _propTypes.default.string,
 
+  /**
+   * specify the type of text input
+   */
+  inputType: _propTypes.default.oneOf(['text', 'password']),
+
   /**
    * text for an invalid input
    */
@@ -271,6 +292,11 @@ ExportModal.propTypes = {
    */
   secondaryButtonText: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to show key
+   */
+  showPasswordLabel: _propTypes.default.string,
+
   /**
    * messaging to display if the export was successful
    */
@@ -292,6 +318,7 @@ ExportModal.propTypes = {
   validExtensions: _propTypes.default.array
 };
 ExportModal.defaultProps = {
+  inputType: 'text',
   preformattedExtensions: [],
   validExtensions: []
 };

package/lib/components/ImportModal/ImportModal.js

@@ -250,7 +250,8 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     accept: accept,
     labelText: fileDropLabel,
     onAddFiles: onAddFile,
-    disabled: hasFiles
+    disabled: hasFiles,
+    "data-modal-primary-focus": true
   }), inputLabel && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__label")
   }, inputLabel), /*#__PURE__*/_react.default.createElement("div", {