registerNodeStatus

import registerNodeStatus from 'fontoxml-families/src/registerNodeStatus.js'

// The simplest option is to only specify a label to use with a certain id.
registerNodeStatus('needs-review', t('Review'));

// Or you can customize the default status badge component with some props:
registerNodeStatus('needs-review', t('Review'), {
    componentProps: {
        // These props are defined by the default component. Source code below.
        label: t('Review'),
        backgroundColor: 'state-message-error-color',
        clickOperation: 'scroll-node-into-view',
        tooltipContent: t('This document needs review.')
    }
});

// A powerful option is to register one (or more) node statuses:
registerNodeStatus('needs-review', t('Review'));

// And then only show that particular node status for elements where the `statusQuery` returns
// the id of the registered node status.
// Note, like any CVK related API, this line should be in a configureSxModule.js file instead of
// an install.js where the call to registerNodeStatus() belongs.
configureProperties('self::topic', { statusQuery: 'title eq "review" then "needs-review" else ''})

import PropTypes from 'prop-types';
import React, { useCallback, useMemo } from 'react';

import useOperation from 'fontoxml-fx/src/useOperation.js';

import { Block, Label } from 'fds/components';
import { applyCss, color } from 'fds/system';

const baseStyles = applyCss({
	padding: '10px 4px',
	borderRadius: '2px',
	height: '1rem',
	display: 'flex',
	alignItems: 'center'
});


function DefaultStatusBadge({
	backgroundColor,
	clickOperation,
	label,
	tooltipContent,
	contextNodeId,
	hierarchyNodeId
}) {
	const operationData = useMemo(() => ({ contextNodeId, hierarchyNodeId }), [
		contextNodeId,
		hierarchyNodeId
	]);

	const { executeOperation } = useOperation(clickOperation, operationData);
	const handleClick = useCallback(
		event => {
			if (!clickOperation) {
				return;
			}

			event.stopPropagation();
			event.preventDefault();
			executeOperation();
		},
		[clickOperation, executeOperation]
	);

	return (
		<Block
			applyCss={baseStyles}
			style={{ backgroundColor: color(backgroundColor) }}
			onClick={handleClick}
		>
			<Label size="s" tooltipContent={tooltipContent} colorName="masthead-text-color">
				{label}
			</Label>
		</Block>
	);
}

DefaultStatusBadge.defaultProps = {
	backgroundColor: 'text-color',
	clickOperation: null
};

DefaultStatusBadge.propTypes = {
	backgroundColor: PropTypes.string,
	clickOperation: PropTypes.string,
	label: PropTypes.string.isRequired,
	tooltipContent: PropTypes.string,
	contextNodeId: PropTypes.string,
	hierarchyNodeId: PropTypes.string
};

export default DefaultStatusBadge;

registerNodeStatus( 'needs-review', t('Review'), {
	component: NeedsReviewStatusBadge,
	componentProps: {
		anything: 'you-want'
	}
});