@carbon/ibm-products
Version:
Carbon for IBM Products
274 lines (267 loc) • 12.3 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2025
*
* 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 _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var icons = require('@carbon/react/icons');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var devtools = require('../../global/js/utils/devtools.js');
var settings = require('../../settings.js');
const blockClass = `${settings.pkg.prefix}--status-icon`;
const componentName = 'StatusIcon';
/**
The `StatusIcon` component follows the Carbon guidelines for status icons with
some added specifications around illustration usage. For additional usage
guidelines and documentation please refer to the links above.
_Status icons_ are an important method of communicating severity level
information to users. The shapes and colors, communicate severity that enable
users to quickly assess and identify status and respond accordingly.
*/
exports.StatusIcon = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
kind,
theme,
size,
className,
iconDescription,
...rest
} = _ref2;
const forwardedRef = ref;
const icons$1 = {
fatal: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Misuse, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Misuse, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Misuse, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Misuse, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
critical: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.ErrorFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.ErrorFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.ErrorFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.ErrorFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
'major-warning': {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltInvertedFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
'minor-warning': {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.WarningAltFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
undefined: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UndefinedFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
unknown: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UnknownFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UnknownFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UnknownFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.UnknownFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
normal: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
info: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InformationSquareFilled, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
'in-progress': {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InProgress, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InProgress, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InProgress, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.InProgress, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
running: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.CheckmarkOutline, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
},
pending: {
sm: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Pending, _rollupPluginBabelHelpers.extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Pending, _rollupPluginBabelHelpers.extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Pending, _rollupPluginBabelHelpers.extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/React.forwardRef((props, _ref) => /*#__PURE__*/React.createElement(icons.Pending, _rollupPluginBabelHelpers.extends({
size: 32,
ref: forwardedRef
}, props)))
}
};
const IconComponent = icons$1[kind]?.[size];
const classNames = cx(className, blockClass, `${blockClass}--${theme}`, {
[`${blockClass}--${theme}-${kind}`]: kind
});
return IconComponent && /*#__PURE__*/React.createElement(IconComponent, _rollupPluginBabelHelpers.extends({}, rest, {
className: classNames,
ref
}, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("title", null, iconDescription));
});
exports.StatusIcon = settings.pkg.checkComponentEnabled(exports.StatusIcon, componentName);
exports.StatusIcon.displayName = componentName;
exports.StatusIcon.propTypes = {
/**
* Provide an optional class to be applied to the modal root node.
*/
className: index.default.string,
/**
* A required prop that provides a title element and tooltip for the icon for accessibility purposes
*/
iconDescription: index.default.string.isRequired,
/**
* A required prop that displays the respective icon associated with the status
*/
kind: index.default.oneOf(['fatal', 'critical', 'major-warning', 'minor-warning', 'undefined', 'unknown', 'normal', 'info', 'in-progress', 'running', 'pending']).isRequired,
/**
* A required prop that displays the size of the icon associate with the status
*/
size: index.default.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
/**
* A required prop that displays the theme of the icon associated with the status
*/
theme: index.default.oneOf(['light', 'dark']).isRequired
};