@carbon/ibm-products 1.4.0 → 1.5.0

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

@@ -6,13 +6,13 @@ var _excluded = ["value1", "setValue1"];
 /* 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.
  */
 import React, { useState } from 'react';
-import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput, Checkbox } from 'carbon-components-react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
@@ -107,6 +107,11 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       isInvalid = _useState22[0],
       setIsInvalid = _useState22[1];
 
+  var _useState23 = useState(false),
+      _useState24 = _slicedToArray(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
+
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
     setTopicDescriptionValue('');
@@ -117,6 +122,7 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     setIsInvalid(false);
     setOpen(false);
     setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
@@ -219,12 +225,26 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  })))), /*#__PURE__*/React.createElement(CustomStep, {
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
+  })))), /*#__PURE__*/React.createElement(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.createElement(CustomStep, {
     title: "Location",
     subtitle: "Custom step subtitle",
     description: "Custom step description (see storybook implementation for new custom step capability)",
     value1: value1,
-    setValue1: setValue1
+    setValue1: setValue1,
+    hasFieldset: false
   }), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* 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.
@@ -154,14 +154,16 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {

package/es/components/ExportModal/ExportModal.js

@@ -2,7 +2,7 @@ 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 = ["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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, useRef, forwardRef } from 'react';
-import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading, PasswordInput } from 'carbon-components-react';
 import cx from 'classnames';
 import { ErrorFilled16, CheckmarkFilled16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
@@ -31,7 +31,9 @@ export var ExportModal = /*#__PURE__*/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,
@@ -42,6 +44,7 @@ export var ExportModal = /*#__PURE__*/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,
@@ -103,6 +106,17 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var internalId = useRef(uuidv4());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
   var submitted = loading || error || successful;
+
+  var commonInputProps = _defineProperty({
+    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.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     "aria-label": title,
@@ -134,16 +148,13 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       labelText: "".concat(o.extension, " (").concat(o.description, ")"),
       "data-modal-primary-focus": true
     });
-  }))) : /*#__PURE__*/React.createElement(TextInput, {
-    id: "text-input--".concat(internalId.current),
-    value: name,
-    onChange: onNameChangeHandler,
-    labelText: inputLabel,
-    invalid: hasInvalidExtension(),
-    invalidText: invalidInputText,
-    onBlur: onBlurHandler,
-    "data-modal-primary-focus": true
-  })), /*#__PURE__*/React.createElement("div", {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__input-container")
+  }, inputType === 'text' ? /*#__PURE__*/React.createElement(TextInput, commonInputProps) : /*#__PURE__*/React.createElement(PasswordInput, _extends({}, commonInputProps, {
+    showPasswordLabel: showPasswordLabel,
+    hidePasswordLabel: hidePasswordLabel,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Loading, {
     small: true,
@@ -193,11 +204,21 @@ ExportModal.propTypes = {
    */
   filename: PropTypes.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to hide key
+   */
+  hidePasswordLabel: PropTypes.string,
+
   /**
    * label for the text input
    */
   inputLabel: PropTypes.string,
 
+  /**
+   * specify the type of text input
+   */
+  inputType: PropTypes.oneOf(['text', 'password']),
+
   /**
    * text for an invalid input
    */
@@ -251,6 +272,11 @@ ExportModal.propTypes = {
    */
   secondaryButtonText: PropTypes.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to show key
+   */
+  showPasswordLabel: PropTypes.string,
+
   /**
    * messaging to display if the export was successful
    */
@@ -272,6 +298,7 @@ ExportModal.propTypes = {
   validExtensions: PropTypes.array
 };
 ExportModal.defaultProps = {
+  inputType: 'text',
   preformattedExtensions: [],
   validExtensions: []
 };

package/es/components/SidePanel/SidePanel.js

@@ -508,7 +508,7 @@ SidePanel.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/Tearsheet.js

@@ -82,7 +82,7 @@ Tearsheet.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'max';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -78,7 +78,7 @@ TearsheetNarrow.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'lg';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetShell.js

@@ -281,7 +281,7 @@ TearsheetShell.propTypes = _objectSpread({
   actions: PropTypes.arrayOf( // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/global/js/hooks/index.js

@@ -11,4 +11,5 @@ export { useCreateComponentFocus } from './useCreateComponentFocus';
 export { useCreateComponentStepChange } from './useCreateComponentStepChange';
 export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
+export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';

package/es/global/js/hooks/useCreateComponentStepChange.js

@@ -2,14 +2,16 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 /**
- * 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.
  */
 import { useCallback, useEffect } from 'react';
 export var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
-  var totalStepCount = _ref.totalStepCount,
+  var firstIncludedStep = _ref.firstIncludedStep,
+      lastIncludedStep = _ref.lastIncludedStep,
+      stepData = _ref.stepData,
       onNext = _ref.onNext,
       isSubmitDisabled = _ref.isSubmitDisabled,
       setCurrentStep = _ref.setCurrentStep,
@@ -174,20 +176,29 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       };
     }();
 
-    if (totalStepCount > 0) {
+    if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 0) {
       var buttons = [];
 
-      if (totalStepCount > 1 && !shouldViewAll) {
+      if ((stepData === null || stepData === void 0 ? void 0 : stepData.length) > 1 && !shouldViewAll) {
         buttons.push({
           key: 'create-action-button-back',
           label: backButtonText,
           onClick: function onClick() {
             return setCurrentStep(function (prev) {
-              return prev - 1;
+              // Find previous included step to render
+              // There will always be a previous step otherwise we will
+              // have disabled the back button since we have reached the first visible step
+              do {
+                var _stepData;
+
+                prev--;
+              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+
+              return prev;
             });
           },
           kind: 'secondary',
-          disabled: currentStep === 1
+          disabled: currentStep === firstIncludedStep
         });
       }
 
@@ -201,8 +212,8 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       buttons.push({
         key: 'create-action-button-submit',
-        label: shouldViewAll ? submitButtonText : currentStep < totalStepCount ? nextButtonText : submitButtonText,
-        onClick: shouldViewAll ? handleSubmit : currentStep < totalStepCount ? handleNext : handleSubmit,
+        label: shouldViewAll ? submitButtonText : currentStep < lastIncludedStep ? nextButtonText : submitButtonText,
+        onClick: shouldViewAll ? handleSubmit : currentStep < lastIncludedStep ? handleNext : handleSubmit,
         disabled: isSubmitDisabled,
         kind: 'primary',
         loading: isSubmitting,
@@ -210,11 +221,20 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
       });
       setCreateComponentActions(buttons);
     }
-  }, [totalStepCount, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
+  }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
   var continueToNextStep = useCallback(function () {
     setIsSubmitting(false);
     setCurrentStep(function (prev) {
-      return prev + 1;
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData2;
+
+        prev++;
+      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
+
+      return prev;
     });
-  }, [setCurrentStep, setIsSubmitting]);
+  }, [setCurrentStep, setIsSubmitting, stepData]);
 };

package/es/global/js/hooks/useResetCreateComponent.js

@@ -1,5 +1,5 @@
 /**
- * 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.
@@ -8,6 +8,7 @@ import { useEffect } from 'react';
 /**
  * Resets the current step of the create component if it has been closed.
  * @param {object} useResetCreateComponent - Create component that uses this custom hook
+ * @param {object} useResetCreateComponent.firstIncludedStep
  * @param {object} useResetCreateComponent.previousState
  * @param {boolean} useResetCreateComponent.open
  * @param {Function} useResetCreateComponent.setCurrentStep
@@ -17,7 +18,8 @@ import { useEffect } from 'react';
  */
 
 export var useResetCreateComponent = function useResetCreateComponent(_ref) {
-  var previousState = _ref.previousState,
+  var firstIncludedStep = _ref.firstIncludedStep,
+      previousState = _ref.previousState,
       open = _ref.open,
       setCurrentStep = _ref.setCurrentStep,
       initialStep = _ref.initialStep,
@@ -28,7 +30,8 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
       if (initialStep && totalSteps && Number(initialStep) <= Number(totalSteps) && Number(initialStep) > 0) {
         setCurrentStep(Number(initialStep));
       } else {
-        setCurrentStep(1);
+        // default should be fist includedStep instead of just 1
+        setCurrentStep(firstIncludedStep);
       } // An invalid initialStep value was provided, we'll default to rendering the first step in this scenario
 
 
@@ -36,5 +39,5 @@ export var useResetCreateComponent = function useResetCreateComponent(_ref) {
         console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
       }
     }
-  }, [open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
+  }, [firstIncludedStep, open, previousState, setCurrentStep, initialStep, totalSteps, componentName]);
 };

package/es/global/js/hooks/useRetrieveStepData.js

@@ -0,0 +1,51 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+import { useEffect } from 'react';
+/**
+ * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
+ * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * @param {object} useResetCreateComponent
+ * @param {object} useResetCreateComponent.stepsContext
+ * @param {number} useResetCreateComponent.stepNumber
+ * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.shouldIncludeStep
+ * @param {string} useResetCreateComponent.secondaryLabel
+ * @param {string} useResetCreateComponent.title
+ */
+
+export var useRetrieveStepData = function useRetrieveStepData(_ref) {
+  var stepsContext = _ref.stepsContext,
+      stepNumber = _ref.stepNumber,
+      introStep = _ref.introStep,
+      shouldIncludeStep = _ref.shouldIncludeStep,
+      secondaryLabel = _ref.secondaryLabel,
+      title = _ref.title;
+  useEffect(function () {
+    if (stepsContext) {
+      stepsContext.setStepData(function (prev) {
+        var stepItem = {
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep,
+          shouldIncludeStep: shouldIncludeStep
+        };
+        var previousItem = prev[stepNumber - 1];
+
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+          var clone = _toConsumableArray(prev);
+
+          clone[stepNumber - 1] = stepItem;
+          return clone;
+        }
+
+        return prev;
+      });
+    }
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+};

package/es/global/js/utils/lastIndexInArray.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+
+/**
+ * This utility will return the index of the last instance of an
+ * item in the given array of objects whose key is equal to the value
+ * parameter. If there are no matches, -1 is returned as similar to findIndex
+ * @param {Array<Object.*>} array
+ * @param {string} key
+ * @param {string|boolean|number} value
+ */
+export var lastIndexInArray = function lastIndexInArray(array, key, value) {
+  for (var i = array.length - 1; i >= 0; i--) {
+    var _array$i;
+
+    if (((_array$i = array[i]) === null || _array$i === void 0 ? void 0 : _array$i[key]) === value) {
+      return i + 1;
+    }
+  }
+
+  return -1;
+};

package/lib/components/ActionSet/ActionSet.js

@@ -46,7 +46,7 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
     isExpressive: true,
-    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost')]),
+    className: (0, _classnames.default)(className, ["".concat(blockClass, "__action-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__action-button--ghost"), kind === 'ghost' || kind === 'danger--ghost')]),
     disabled: disabled || loading || false,
     kind: kind,
     onClick: onClick,
@@ -57,7 +57,7 @@ var ActionSetButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
 ActionSetButton.displayName = 'ActionSetButton';
 ActionSetButton.propTypes = _objectSpread(_objectSpread({}, _carbonComponentsReact.Button.PropTypes), {}, {
-  kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+  kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
   label: _propTypes.default.string,
   loading: _propTypes.default.bool
 });
@@ -90,13 +90,24 @@ var ActionSet = /*#__PURE__*/_react.default.forwardRef(function (_ref3, ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   var buttons = actions && ((_actions$slice = actions.slice) === null || _actions$slice === void 0 ? void 0 : _actions$slice.call(actions, 0)) || []; // We stack the buttons in a xs/sm set, or if there are three or more in a md set.
 
-  var stacking = willStack(size, buttons.length); // order the actions with ghost buttons first and primary buttons last
-  // (and the opposite way if we're stacking)
+  var stacking = willStack(size, buttons.length); // Order of button kinds: ghost first, then danger--ghost, then most other types,
+  // then danger, and finally primary
+
+  var buttonOrder = function buttonOrder(kind) {
+    var _ghost$dangerGhost$;
+
+    return (_ghost$dangerGhost$ = {
+      ghost: 1,
+      'danger--ghost': 2,
+      danger: 4,
+      primary: 5
+    }[kind]) !== null && _ghost$dangerGhost$ !== void 0 ? _ghost$dangerGhost$ : 3;
+  }; // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last
+  // (or the opposite way if we're stacking)
+
 
   buttons.sort(function (action1, action2) {
-    var kind1 = action1.kind || defaultKind;
-    var kind2 = action2.kind || defaultKind;
-    return kind1 === 'ghost' || kind2 === 'primary' ? stacking ? 1 : -1 : kind1 === 'primary' || kind2 === 'ghost' ? stacking ? -1 : 1 : 0;
+    return (buttonOrder(action1.kind || defaultKind) - buttonOrder(action2.kind || defaultKind)) * (stacking ? -1 : 1);
   });
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ButtonSet, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-single"), !stacking && buttons.length === 1), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-double"), !stacking && buttons.length === 2), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-triple"), !stacking && buttons.length === 3), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--row-quadruple"), !stacking && buttons.length >= 4), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "--stacking"), stacking), _cx), "".concat(blockClass, "--").concat(size)),
@@ -147,13 +158,14 @@ ActionSet.validateActions = function (sizeFn) {
 
       var primaryActions = countActions('primary');
       var secondaryActions = countActions('secondary');
-      var ghostActions = countActions('ghost');
+      var dangerActions = countActions('danger');
+      var ghostActions = countActions('ghost') + countActions('danger--ghost');
       stacking && actions > 3 && problems.push("you cannot have more than three actions in this size of ".concat(componentName));
       actions > 4 && problems.push("you cannot have more than four actions in a ".concat(componentName));
       primaryActions > 1 && problems.push("you cannot have more than one 'primary' action in a ".concat(componentName));
       ghostActions > 1 && problems.push("you cannot have more than one 'ghost' action in a ".concat(componentName));
       stacking && actions > 1 && ghostActions > 0 && problems.push("you cannot have a 'ghost' button in conjunction with other action types in this size of ".concat(componentName));
-      actions > primaryActions + secondaryActions + ghostActions && problems.push("you can only have 'primary', 'secondary' and 'ghost' buttons in a ".concat(componentName));
+      actions > primaryActions + secondaryActions + dangerActions + ghostActions && problems.push("you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ".concat(componentName));
     }
 
     return problems.length > 0 ? new Error("Invalid ".concat(location, " `").concat(name, "` supplied to `").concat(componentName, "`: ").concat(problems.join(', and '), ".")) : null;
@@ -174,7 +186,7 @@ ActionSet.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: (0, _propsHelper.allPropTypes)([ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
-    kind: _propTypes.default.oneOf(['ghost', 'secondary', 'primary']),
+    kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: _propTypes.default.string,
     loading: _propTypes.default.bool,
     // we duplicate this Button prop to improve the DocGen here

package/lib/components/ActionSet/actions.js

@@ -11,22 +11,25 @@ exports.actionsOptions = exports.actionsMapping = exports.actionsLabels = void 0
  * 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 actionsOptions = [0, 1, 2, 3, 4, 5, 6, 7];
+var actionsOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 exports.actionsOptions = actionsOptions;
 var actionsLabels = {
   0: 'None',
   1: 'One button',
-  2: 'One ghost button',
-  3: 'Two buttons',
-  4: 'Two buttons including one ghost',
-  5: 'Three buttons',
-  6: 'Three buttons including one ghost',
-  7: 'Four buttons including one ghost'
+  2: 'A danger button',
+  3: 'A ghost button',
+  4: 'Two buttons',
+  5: 'Two buttons with one ghost',
+  6: 'Three buttons',
+  7: 'Three buttons with one ghost',
+  8: 'Three buttons with one danger',
+  9: 'Four buttons with one ghost',
+  10: 'Four buttons with two danger'
 };
 exports.actionsLabels = actionsLabels;
 
 var actionsMapping = function actionsMapping(labels, action) {
-  var _labels$primary, _labels$secondary, _labels$secondary2, _labels$ghost;
+  var _labels$primary, _labels$danger, _labels$secondary, _labels$secondary2, _labels$dangerGhost, _labels$ghost;
 
   var act = function act(label, kind, key) {
     var actionCall = action && action("Click on '".concat(label, "'"));
@@ -42,18 +45,23 @@ var actionsMapping = function actionsMapping(labels, action) {
   };
 
   var primary = act((_labels$primary = labels === null || labels === void 0 ? void 0 : labels.primary) !== null && _labels$primary !== void 0 ? _labels$primary : 'Primary', 'primary', 1);
-  var secondary = act((_labels$secondary = labels === null || labels === void 0 ? void 0 : labels.secondary) !== null && _labels$secondary !== void 0 ? _labels$secondary : 'Secondary', 'secondary', 2);
-  var secondary2 = act((_labels$secondary2 = labels === null || labels === void 0 ? void 0 : labels.secondary2) !== null && _labels$secondary2 !== void 0 ? _labels$secondary2 : 'Secondary', 'secondary', 3);
-  var ghost = act((_labels$ghost = labels === null || labels === void 0 ? void 0 : labels.ghost) !== null && _labels$ghost !== void 0 ? _labels$ghost : 'Ghost', 'ghost', 4);
+  var danger = act((_labels$danger = labels === null || labels === void 0 ? void 0 : labels.danger) !== null && _labels$danger !== void 0 ? _labels$danger : 'Danger', 'danger', 2);
+  var secondary = act((_labels$secondary = labels === null || labels === void 0 ? void 0 : labels.secondary) !== null && _labels$secondary !== void 0 ? _labels$secondary : 'Secondary', 'secondary', 3);
+  var secondary2 = act((_labels$secondary2 = labels === null || labels === void 0 ? void 0 : labels.secondary2) !== null && _labels$secondary2 !== void 0 ? _labels$secondary2 : 'Secondary', 'secondary', 4);
+  var dangerGhost = act((_labels$dangerGhost = labels === null || labels === void 0 ? void 0 : labels.dangerGhost) !== null && _labels$dangerGhost !== void 0 ? _labels$dangerGhost : 'Danger-ghost', 'danger--ghost', 5);
+  var ghost = act((_labels$ghost = labels === null || labels === void 0 ? void 0 : labels.ghost) !== null && _labels$ghost !== void 0 ? _labels$ghost : 'Ghost', 'ghost', 6);
   return {
     0: [],
     1: [primary],
-    2: [ghost],
-    3: [primary, secondary],
-    4: [primary, ghost],
-    5: [primary, secondary, secondary2],
-    6: [primary, secondary, ghost],
-    7: [primary, secondary, secondary2, ghost]
+    2: [danger],
+    3: [ghost],
+    4: [primary, secondary],
+    5: [primary, ghost],
+    6: [primary, secondary, secondary2],
+    7: [primary, secondary, ghost],
+    8: [danger, secondary, ghost],
+    9: [primary, secondary, secondary2, ghost],
+    10: [danger, secondary, secondary2, dangerGhost]
   };
 };