@carbon/ibm-products
Version:
Carbon for IBM Products
274 lines (267 loc) • 11.2 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.
*/
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import { Pending, CheckmarkOutline, InProgress, InformationSquareFilled, CheckmarkFilled, UnknownFilled, UndefinedFilled, WarningAltFilled, WarningAltInvertedFilled, ErrorFilled, Misuse } from '@carbon/react/icons';
import React__default, { forwardRef } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
import { pkg } from '../../settings.js';
const blockClass = `${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.
*/
let StatusIcon = /*#__PURE__*/forwardRef((_ref2, ref) => {
let {
kind,
theme,
size,
className,
iconDescription,
...rest
} = _ref2;
const forwardedRef = ref;
const icons = {
fatal: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Misuse, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Misuse, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Misuse, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Misuse, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
critical: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(ErrorFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(ErrorFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(ErrorFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(ErrorFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
'major-warning': {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltInvertedFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltInvertedFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltInvertedFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltInvertedFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
'minor-warning': {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(WarningAltFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
undefined: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UndefinedFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UndefinedFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UndefinedFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UndefinedFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
unknown: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UnknownFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UnknownFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UnknownFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(UnknownFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
normal: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
info: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InformationSquareFilled, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InformationSquareFilled, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InformationSquareFilled, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InformationSquareFilled, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
'in-progress': {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InProgress, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InProgress, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InProgress, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(InProgress, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
running: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkOutline, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkOutline, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkOutline, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(CheckmarkOutline, _extends({
size: 32,
ref: forwardedRef
}, props)))
},
pending: {
sm: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Pending, _extends({
size: 16,
ref: forwardedRef
}, props))),
md: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Pending, _extends({
size: 20,
ref: forwardedRef
}, props))),
lg: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Pending, _extends({
size: 24,
ref: forwardedRef
}, props))),
xl: /*#__PURE__*/forwardRef((props, _ref) => /*#__PURE__*/React__default.createElement(Pending, _extends({
size: 32,
ref: forwardedRef
}, props)))
}
};
const IconComponent = icons[kind]?.[size];
const classNames = cx(className, blockClass, `${blockClass}--${theme}`, {
[`${blockClass}--${theme}-${kind}`]: kind
});
return IconComponent && /*#__PURE__*/React__default.createElement(IconComponent, _extends({}, rest, {
className: classNames,
ref
}, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("title", null, iconDescription));
});
StatusIcon = pkg.checkComponentEnabled(StatusIcon, componentName);
StatusIcon.displayName = componentName;
StatusIcon.propTypes = {
/**
* Provide an optional class to be applied to the modal root node.
*/
className: PropTypes.string,
/**
* A required prop that provides a title element and tooltip for the icon for accessibility purposes
*/
iconDescription: PropTypes.string.isRequired,
/**
* A required prop that displays the respective icon associated with the status
*/
kind: PropTypes.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: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']).isRequired,
/**
* A required prop that displays the theme of the icon associated with the status
*/
theme: PropTypes.oneOf(['light', 'dark']).isRequired
};
export { StatusIcon };