@openshift-console/dynamic-plugin-sdk/lib/app/components/status/StatusIconAndText.js

Provides core APIs, types and utilities used by dynamic plugins at runtime.

import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { css } from '@patternfly/react-styles';
import { DASH } from '../../constants';
import CamelCaseWrap from '../utils/camel-case-wrap';
/**
 * Component for displaying a status icon and text
 * @param {string} [title] - (optional) status text
 * @param {boolean} [iconOnly] - (optional) if true, only displays icon
 * @param {boolean} [noTooltip] - (optional) if true, tooltip won't be displayed
 * @param {string} [className] - (optional) additional class name for the component
 * @param {React.ReactElement} [icon] - (optional) icon to be displayed
 * @param {boolean} [spin] - (optional) if true, icon rotates
 * @example
 * ```tsx
 * <StatusIconAndText title={title} icon={renderIcon} />
 * ```
 */
const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
    if (!title) {
        return _jsx(_Fragment, { children: DASH });
    }
    return (_jsxs("span", { className: css('co-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined, children: [icon &&
                React.cloneElement(icon, {
                    className: css(spin && 'co-spin', icon.props.className, !iconOnly && 'co-icon-and-text__icon co-icon-flex-child'),
                }), !iconOnly && _jsx(CamelCaseWrap, { value: title, dataTest: "status-text" })] }));
};
export default StatusIconAndText;