UnderConstructionTag

UnderConstructionTag

UnderConstructionTag is a status tag used to mark pages or features that are still in progress. It renders a Carbon Tag with a construction icon and wraps it in a tooltip with contextual copy.

Props

Name	Type	Required	Default	Description
type	'page' | 'feature'	No	'feature'	Controls the noun used in the tooltip text (This page... or This feature...).

Behavior

The component always renders:

• a Carbon Tag with text Under construction
• type="cyan"
• size="md"
• Construction icon (renderIcon={Construction})
• class under-construction-tag

The tag is wrapped in a Carbon Tooltip aligned to the bottom.

Tooltip label format:

This <type> is under development. Features may be incomplete or display incorrect data.

Examples:

• type="page" => This page is under development...
• type="feature" => This feature is under development...

Usage

import UnderConstructionTag from "@/components/core/Tags/UnderConstructionTag";

<UnderConstructionTag />;
<UnderConstructionTag type="page" />;

Companion Wrapper

This folder also includes TagWrapper, a small layout helper that places UnderConstructionTag beside arbitrary child content.

TagWrapper props:

• children: ReactElement (required)
• position?: 'left' | 'right' (default right)
• type?: 'page' | 'feature' (passed through to UnderConstructionTag)

Example:

import TagWrapper from "@/components/core/Tags/UnderConstructionTag/TagWrapper";

<TagWrapper position="left" type="page">
  <h2>New Intake Screen</h2>
</TagWrapper>;

Styling

index.scss defines two classes:

• .under-construction-tag: sets tag height to fit-content
• .under-const-wrapper: horizontal flex layout with 0.5rem gap and centered alignment

Testing Notes

Current unit tests cover:

• default tag rendering
• tooltip copy for both page and feature types
• TagWrapper class and child rendering
• TagWrapper left/right placement behavior