@openshift-console/dynamic-plugin-sdk
Version:
Provides core APIs, types and utilities used by dynamic plugins at runtime.
75 lines (74 loc) • 3.14 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Icon } from '@patternfly/react-core';
import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InfoCircleIcon, } from '@patternfly/react-icons';
import { css } from '@patternfly/react-styles';
import './icons.scss';
/**
* Component for displaying a green check mark circle icon.
* @param {string} [className] - (optional) additional class name for the component
* @param {string} [title] - (optional) icon title
* @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl', '2xl', '3xl', 'headingSm', 'headingMd', 'headingLg', 'headingXl', 'heading_2xl', 'heading_3xl', 'bodySm', 'bodyDefault', 'bodyLg')
* @example
* ```tsx
* <GreenCheckCircleIcon title="Healthy" />
* ```
*/
export const GreenCheckCircleIcon = ({ className, title, size }) => {
const icon = (_jsx(CheckCircleIcon, { "data-test": "success-icon", className: css('dps-icons__green-check-icon', className), title: title }));
if (size) {
return _jsx(Icon, { size: size, children: icon });
}
return icon;
};
/**
* Component for displaying a red exclamation mark circle icon.
* @param {string} [className] - (optional) additional class name for the component
* @param {string} [title] - (optional) icon title
* @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl')
* @example
* ```tsx
* <RedExclamationCircleIcon title="Failed" />
* ```
*/
export const RedExclamationCircleIcon = ({ className, title, size, }) => {
const icon = (_jsx(ExclamationCircleIcon, { className: css('dps-icons__red-exclamation-icon', className), title: title }));
if (size) {
return _jsx(Icon, { size: size, children: icon });
}
return icon;
};
/**
* Component for displaying a yellow triangle exclamation icon.
* @param {string} [className] - (optional) additional class name for the component
* @param {string} [title] - (optional) icon title
* @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl')
* @param {string} [dataTest] - (optional) icon test id
* @example
* ```tsx
* <YellowExclamationTriangleIcon title="Warning" />
* ```
*/
export const YellowExclamationTriangleIcon = ({ className, title, size, dataTest, }) => {
const icon = (_jsx(ExclamationTriangleIcon, { className: css('dps-icons__yellow-exclamation-icon', className), title: title, "data-test": dataTest }));
if (size) {
return _jsx(Icon, { size: size, children: icon });
}
return icon;
};
/**
* Component for displaying a blue info circle icon.
* @param {string} [className] - (optional) additional class name for the component
* @param {string} [title] - (optional) icon title
* @param {string} [size] - (optional) icon size: ('sm', 'md', 'lg', 'xl')
* @example
* ```tsx
* <BlueInfoCircleIcon title="Info" />
* ```
*/
export const BlueInfoCircleIcon = ({ className, title, size }) => {
const icon = (_jsx(InfoCircleIcon, { className: css('dps-icons__blue-info-icon', className), title: title }));
if (size) {
return _jsx(Icon, { size: size, children: icon });
}
return icon;
};