@carbon/ibm-products 2.29.0-alpha.10 → 2.29.0

package/es/global/js/package-settings.d.ts

@@ -89,6 +89,7 @@ declare namespace defaults {
         let CoachmarkOverlayElement: boolean;
         let CoachmarkOverlayElements: boolean;
         let CoachmarkStack: boolean;
+        let Decorator: boolean;
         let DescriptionList: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;

package/es/global/js/package-settings.js

@@ -91,6 +91,7 @@ var defaults = {
     CoachmarkOverlayElement: false,
     CoachmarkOverlayElements: false,
     CoachmarkStack: false,
+    Decorator: false,
     DescriptionList: false,
     SearchBar: false,
     UserAvatar: false,

package/es/index.js

@@ -105,6 +105,7 @@ export { InterstitialScreen } from './components/InterstitialScreen/Interstitial
 export { InterstitialScreenView } from './components/InterstitialScreenView/InterstitialScreenView.js';
 export { InterstitialScreenViewModule } from './components/InterstitialScreenViewModule/InterstitialScreenViewModule.js';
 export { DelimitedList } from './components/DelimitedList/DelimitedList.js';
+export { Decorator } from './components/Decorator/Decorator.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';

package/es/settings.d.ts

@@ -75,6 +75,7 @@ export const pkg: {
         CoachmarkOverlayElement: boolean;
         CoachmarkOverlayElements: boolean;
         CoachmarkStack: boolean;
+        Decorator: boolean;
         DescriptionList: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;

package/lib/components/AboutModal/AboutModal.d.ts

@@ -1,3 +1,74 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+import React, { ReactNode } from 'react';
+interface AboutModalProps {
+    /**
+     * If you are legally required to display logos of technologies used
+     * to build your product you can provide this in the additionalInfo.
+     * Additional information will be displayed in the footer.
+     */
+    additionalInfo?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the modal root node.
+     */
+    className?: string;
+    /**
+     * The accessibility title for the close icon.
+     */
+    closeIconDescription: string;
+    /**
+     * Subhead text providing any relevant product disclaimers including
+     * legal information (optional)
+     */
+    content?: ReactNode;
+    /**
+     * Trademark and copyright information. Displays first year of
+     * product release to current year.
+     */
+    copyrightText: string;
+    /**
+     * An array of Carbon `Link` component if there are additional information
+     * to call out within the card. The about modal should be used to display
+     * the product information and not where users go to find help (optional)
+     */
+    links?: ReactNode[];
+    /**
+     * A visual symbol used to represent the product.
+     */
+    logo: ReactNode;
+    /**
+     * Specifies aria label for AboutModal
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specifies an optional handler which is called when the AboutModal
+     * is closed. Returning `false` prevents the AboutModal from closing.
+     */
+    onClose?: () => void | boolean;
+    /**
+     * Specifies whether the AboutModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Header text that provides the product name. The IBM Services logo
+     * consists of two discrete, but required, elements: the iconic
+     * IBM 8-bar logo represented alongside the IBM Services logotype.
+     * Please follow these guidelines to ensure proper execution.
+     */
+    title: ReactNode;
+    /**
+     * Text that provides information on the version number of your product.
+     */
+    version: string;
+}
 /**
  * The `AboutModal` component provides a way to communicate product information
  * to users. It is triggered by a user’s action, appears on top of the main
@@ -5,5 +76,5 @@
  * should be immediately apparent to the user, with a clear and obvious path
  * to completion.
  */
-export let AboutModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let AboutModal: React.ForwardRefExoticComponent<AboutModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/AboutModal/AboutModal.js

@@ -10,15 +10,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
 var React = require('react');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var settings = require('../../settings.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var react = require('@carbon/react');
+var settings = require('../../settings.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,7 +30,6 @@ var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrig
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--about-modal");
 var componentName = 'AboutModal';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -59,22 +58,27 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     hasScrollingContent = _useState2[0],
     setHasScrollingContent = _useState2[1];
-  var bodyRef = React.useRef();
-  var contentRef = React.useRef();
+  var bodyRef = React.useRef(null);
+  var contentRef = React.useRef(null);
   var contentId = uuidv4["default"]();
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
   var handleResize = function handleResize() {
+    var _bodyRef$current, _bodyRef$current2, _bodyRef$current3, _bodyRef$current4;
+    if (!((_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.clientHeight)) {
+      return;
+    }
     setHasScrollingContent(
     // if our scroll height exceeds the client height enable scrolling
-    bodyRef.current.clientHeight < (hasScrollingContent ?
+    ((_bodyRef$current2 = bodyRef.current) === null || _bodyRef$current2 === void 0 ? void 0 : _bodyRef$current2.clientHeight) < (hasScrollingContent ?
     // Carbon modal adds 32px bottom margin when scrolling content is enabled
-    bodyRef.current.scrollHeight - 32 : bodyRef.current.scrollHeight));
+    ((_bodyRef$current3 = bodyRef.current) === null || _bodyRef$current3 === void 0 ? void 0 : _bodyRef$current3.scrollHeight) - 32 : (_bodyRef$current4 = bodyRef.current) === null || _bodyRef$current4 === void 0 ? void 0 : _bodyRef$current4.scrollHeight));
   };
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
   React.useEffect(function () {
-    bodyRef.current = contentRef.current.parentElement;
+    var _contentRef$current;
+    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
 
   // Detect resize of the ModalBody to recalculate whether scrolling is enabled
@@ -98,8 +102,8 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     label: title,
     labelClassName: "".concat(blockClass, "__title")
   }), /*#__PURE__*/React__default["default"].createElement(react.ModalBody, {
-    "aria-label": hasScrollingContent ? '' : null,
-    "aria-labelledby": hasScrollingContent ? contentId : null,
+    "aria-label": hasScrollingContent ? '' : undefined,
+    "aria-labelledby": hasScrollingContent ? contentId : undefined,
     className: "".concat(blockClass, "__body"),
     hasScrollingContent: hasScrollingContent
   }, /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/components/Decorator/Decorator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
+ */
+export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/Decorator/Decorator.js

@@ -0,0 +1,355 @@
+/**
+ * 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');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var utils = require('./utils.js');
+var DecoratorIcon = require('./DecoratorIcon.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", "disabled", "hideIcon", "href", "kind", "label", "setLabelTitle", "onClick", "onClickLabel", "onClickValue", "onContextMenu", "onContextMenuLabel", "onContextMenuValue", "score", "scoreThresholds", "small", "theme", "truncateValue", "value", "valueTitle"];
+var blockClass = "".concat(settings.pkg.prefix, "--decorator");
+var componentName = 'Decorator';
+var defaults = {
+  kind: 'default',
+  onClick: function onClick() {},
+  onClickLabel: function onClickLabel() {},
+  onClickValue: function onClickValue() {},
+  onContextMenu: function onContextMenu() {},
+  onContextMenuLabel: function onContextMenuLabel() {},
+  onContextMenuValue: function onContextMenuValue() {},
+  scoreThresholds: [0, 4, 7, 10],
+  theme: 'light'
+};
+
+/**
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
+ */
+exports.Decorator = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    disabled = _ref.disabled,
+    hideIcon = _ref.hideIcon,
+    href = _ref.href,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? defaults.kind : _ref$kind,
+    label = _ref.label,
+    setLabelTitle = _ref.setLabelTitle,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
+    _ref$onClickLabel = _ref.onClickLabel,
+    onClickLabel = _ref$onClickLabel === void 0 ? defaults.onClickLabel : _ref$onClickLabel,
+    _ref$onClickValue = _ref.onClickValue,
+    onClickValue = _ref$onClickValue === void 0 ? defaults.onClickValue : _ref$onClickValue,
+    _ref$onContextMenu = _ref.onContextMenu,
+    onContextMenu = _ref$onContextMenu === void 0 ? defaults.onContextMenu : _ref$onContextMenu,
+    _ref$onContextMenuLab = _ref.onContextMenuLabel,
+    onContextMenuLabel = _ref$onContextMenuLab === void 0 ? defaults.onContextMenuLabel : _ref$onContextMenuLab,
+    _ref$onContextMenuVal = _ref.onContextMenuValue,
+    onContextMenuValue = _ref$onContextMenuVal === void 0 ? defaults.onContextMenuValue : _ref$onContextMenuVal,
+    score = _ref.score,
+    _ref$scoreThresholds = _ref.scoreThresholds,
+    scoreThresholds = _ref$scoreThresholds === void 0 ? defaults.scoreThresholds : _ref$scoreThresholds,
+    small = _ref.small,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    truncateValue = _ref.truncateValue,
+    value = _ref.value,
+    valueTitle = _ref.valueTitle,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var magnitude = utils.getMagnitude(score, scoreThresholds);
+  var _labelTitle = setLabelTitle && setLabelTitle(score, scoreThresholds, magnitude);
+  var _value = utils.truncate(value, truncateValue);
+
+  // These class names apply to all types of Decorator.
+  var classNames = cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(theme), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small), "".concat(blockClass, "--truncate-end"), truncateValue === 'end'), "".concat(blockClass, "--truncate-start"), truncateValue === 'start'), "".concat(blockClass, "--truncate-midline"), truncateValue === null || truncateValue === void 0 ? void 0 : truncateValue.maxLength));
+
+  // These properties apply to all <DecoratorIcons>.
+  var decoratorIconsProps = {
+    className: "".concat(blockClass, "__icon"),
+    magnitude: magnitude.toLowerCase(),
+    // e.g. "Medium" -> "medium"
+    small: small
+  };
+
+  // Optional callback functions if `kind` is "link" or "single-button".
+  var handleOnClick = function handleOnClick(event) {
+    onClick(event, {
+      score: score,
+      label: label,
+      value: value,
+      magnitude: magnitude
+    });
+  };
+  var handleOnContextMenu = function handleOnContextMenu(event) {
+    onContextMenu(event, {
+      score: score,
+      label: label,
+      value: value,
+      magnitude: magnitude
+    });
+  };
+
+  // RETURN DUAL BUTTONS
+  if (kind === 'dual-button') {
+    // Optional callback functions if `kind` is "dual-button" only.
+    var handleOnClickLabel = function handleOnClickLabel(event) {
+      onClickLabel(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnClickValue = function handleOnClickValue(event) {
+      onClickValue(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnContextMenuLabel = function handleOnContextMenuLabel(event) {
+      onContextMenuLabel(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    var handleOnContextMenuValue = function handleOnContextMenuValue(event) {
+      onContextMenuValue(event, {
+        score: score,
+        label: label,
+        value: value,
+        magnitude: magnitude
+      });
+    };
+    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
+      className: cx__default["default"](classNames, "".concat(blockClass, "--buttons"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "".concat(blockClass, "__label"),
+      disabled: disabled,
+      onClick: !disabled && handleOnClickLabel,
+      onContextMenu: !disabled && handleOnContextMenuLabel,
+      title: _labelTitle || label,
+      type: "button"
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "".concat(blockClass, "__value"),
+      disabled: disabled,
+      onClick: !disabled && handleOnClickValue,
+      onContextMenu: !disabled && handleOnContextMenuValue,
+      title: valueTitle || value,
+      type: "button"
+    }, _value));
+  }
+
+  // RETURN SINGLE BUTTON
+  if (kind === 'single-button') {
+    return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
+      className: cx__default["default"](classNames, "".concat(blockClass, "--button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "-disabled"), disabled)),
+      disabled: disabled,
+      onClick: !disabled && handleOnClick,
+      onContextMenu: !disabled && handleOnContextMenu,
+      ref: ref,
+      type: "button"
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__label"),
+      title: _labelTitle || label
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__value"),
+      title: valueTitle || value
+    }, _value));
+  }
+
+  // RETURN LINK
+  if (kind === 'link') {
+    return /*#__PURE__*/React__default["default"].createElement("a", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
+      href: href,
+      className: cx__default["default"](classNames, "".concat(blockClass, "--link")),
+      onClick: handleOnClick,
+      onContextMenu: handleOnContextMenu,
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__label"),
+      title: _labelTitle || label
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__value"),
+      title: valueTitle || value
+    }, _value));
+  }
+
+  // RETURN DEFAULT (NON-INTERACTIVE)
+  if (kind === 'default') {
+    return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({}, rest, devtools.getDevtoolsProps(componentName), {
+      className: cx__default["default"](classNames, "".concat(blockClass, "--default")),
+      ref: ref
+    }), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__label"),
+      title: _labelTitle || label
+    }, !hideIcon && /*#__PURE__*/React__default["default"].createElement(DecoratorIcon.DecoratorIcon, decoratorIconsProps), !!label && label), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "".concat(blockClass, "__value"),
+      title: valueTitle || value
+    }, _value));
+  }
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.Decorator = settings.pkg.checkComponentEnabled(exports.Decorator, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.Decorator.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.Decorator.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * `disabled` only applies if `kind` is "single-button" or "dual-button".
+   */
+  disabled: index["default"].bool,
+  /**
+   * Do not show the icon, regardless of score.
+   */
+  hideIcon: index["default"].bool,
+  /**
+   * `href` is req'd if `kind` is "link".
+   *
+   * These two properties together will render the `label` and `value` as a single anchor tag.
+   */
+  href: index["default"].string,
+  /**
+   * If `kind` is "dual-button" then refer to the `onClickLabel`, `onClickValue`, `onContextMenuLabel`, and `onContextMenuValue` callback functions.
+   *
+   * If `kind` is "single-button" then refer to the `onClick` and `onContextMenu` callback functions.
+   *
+   * If `kind` is "link" then also populate `href`.
+   *
+   * `kind's` default value is "default" and has no other requirements.
+   */
+  kind: index["default"].oneOf(['default', 'link', 'single-button', 'dual-button']),
+  /**
+   * The label for the data.
+   */
+  label: index["default"].string,
+  /**
+   * Optional callback function if `kind` is "link" or "single-button".
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClick: index["default"].func,
+  /**
+   * Optional callback functions if `kind` is "dual-button" only.
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickLabel: index["default"].func,
+  /**
+   * Optional callback functions if `kind` is "dual-button" only.
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onClickValue: index["default"].func,
+  /**
+   * Optional callback function if `kind` is "link" or "single-button".
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenu: index["default"].func,
+  /**
+   * Optional callback functions if `kind` is "dual-button" only.
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuLabel: index["default"].func,
+  /**
+   * Optional callback functions if `kind` is "dual-button" only.
+   *
+   * Returns two objects: `event` and `{ score, label, value, magnitude }`
+   */
+  onContextMenuValue: index["default"].func,
+  /**
+   * Used in conjunction with `scoreThresholds`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * If you don't want to show the icon at all, set `hideIcon={true}`.
+   */
+  score: index["default"].number,
+  /**
+   * Used in conjunction with `score`, determines the color, shape, and type of magnitude of the icon.
+   *
+   * An array of 4 numbers determines the range of thresholds.
+   *
+   * Example using `[0, 4, 7, 10]`:
+   * <br/>- `<= 0` "Benign"
+   * <br/>- `1-3` "Low"
+   * <br/>- `4-6` "Medium"
+   * <br/>- `7-9` "High"
+   * <br/>- `>= 10` "Critical"
+   * <br/>- `NaN` "Unknown"
+   */
+  scoreThresholds: index["default"].arrayOf(index["default"].number),
+  /**
+   * Callback function for building the label's descriptive text for screen readers.
+   *
+   * The default description is in the form of `"(magnitude)" magnitude: score X out of Y"`.
+   * E.g. `"Medium" magnitude: score 5 out of 10`.
+   *
+   * Where `magnitude` is the label associated with the specific score,
+   * X is the `score`, and Y is the last element of the `setLabelTitle` array.
+   *
+   * If not defined, the title will default to the `label` prop.
+   */
+  setLabelTitle: index["default"].func,
+  /**
+   * Styled smaller to better fit inline with text.
+   */
+  small: index["default"].bool,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: index["default"].oneOf(['light', 'dark']),
+  /**
+   * If not defined, it will behave as `display:inline-block`.
+   *
+   * If `end` it will append "..." to the `value` if there is not enough space.
+   *
+   * If `start` it will prepend "..." to the `value` if there is not enough space.
+   *
+   * If `{maxLength, front, back}` it will inject "..." in the middle
+   * of the `value` regardless of available space.
+   */
+  truncateValue: index["default"].oneOfType([index["default"].oneOf(['end', 'start']), index["default"].shape({
+    maxLength: index["default"].number,
+    front: index["default"].number,
+    back: index["default"].number
+  })]),
+  /**
+   * The value of the data.
+   */
+  value: index["default"].string.isRequired,
+  /**
+   * Overrides the default title for the Decorator's value.
+   */
+  valueTitle: index["default"].string
+};

package/lib/components/Decorator/DecoratorIcon.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The shape and color of the Decorator's icon.
+ */
+export let DecoratorIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/Decorator/DecoratorIcon.js

@@ -0,0 +1,102 @@
+/**
+ * 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');
+var cx = require('classnames');
+var icons = require('@carbon/react/icons');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.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", "magnitude", "small"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--decorator-icon");
+var componentName = 'DecoratorIcon';
+var defaults = {
+  magnitude: 'unknown',
+  small: false
+};
+
+/**
+ * The shape and color of the Decorator's icon.
+ */
+exports.DecoratorIcon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$magnitude = _ref.magnitude,
+    magnitude = _ref$magnitude === void 0 ? defaults.magnitude : _ref$magnitude,
+    _ref$small = _ref.small,
+    small = _ref$small === void 0 ? defaults.small : _ref$small,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var Icon;
+  switch (magnitude) {
+    case 'benign':
+      Icon = icons.CircleFill;
+      break;
+    case 'low':
+      Icon = icons.SquareFill;
+      break;
+    case 'medium':
+      Icon = icons.DiamondFill;
+      break;
+    case 'high':
+      Icon = icons.Caution;
+      break;
+    case 'critical':
+      Icon = icons.ChevronMini;
+      break;
+    default:
+      Icon = icons.CircleStroke;
+      break;
+  }
+  return /*#__PURE__*/React__default["default"].createElement(Icon, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-hidden": true,
+    className: cx__default["default"](blockClass, className, "".concat(blockClass, "__magnitude-").concat(magnitude), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--sm"), small)),
+    focusable: false,
+    ref: ref
+    // Adding viewBox allows resizing `svg` elements via CSS.
+    // The "ChevronMini" icon is half size,
+    //   so set to '8 8 8 8' to match the size of the other icons.
+    ,
+    viewBox: magnitude === 'critical' ? '8 8 8 8' : '0 0 16 16'
+  }, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.DecoratorIcon = settings.pkg.checkComponentEnabled(exports.DecoratorIcon, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.DecoratorIcon.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.DecoratorIcon.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Determines the shape and color of the icon.
+   */
+  magnitude: index["default"].oneOf(['unknown', 'benign', 'low', 'medium', 'high', 'critical']),
+  /**
+   * Reduce the size of the icon in proportion to a smaller Decorator.
+   */
+  small: index["default"].bool
+};

package/lib/components/Decorator/index.d.ts

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

package/lib/components/Decorator/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export function getMagnitude(score: any, thresholds: any): "Medium" | "Unknown" | "Benign" | "Low" | "High" | "Critical";
+export function truncate(inputText: any, truncateValue?: {}): any;