TagWrapper

TagWrapper

TagWrapper wraps any child element with any tag element, positioning the tag either to the left or right of the content. The tag can be toggled on or off without unmounting the child.

Rationale

Use TagWrapper when a component needs to annotate a heading, label, or UI element with a status tag while keeping the layout logic in one place. Because the tag prop accepts any ReactElement, TagWrapper works with any tag type — LegacyDataTag, UnderConstructionTag, or any future tag component — without needing dedicated wrapper variants per tag type.

Source References

• Source: frontend/src/components/core/Tags/TagWrapper/index.tsx
• Tests: frontend/src/components/core/Tags/TagWrapper/index.unit.test.tsx

Public Interface

Props

Name	Type	Required	Default	Description
children	ReactElement	Yes	—	The primary content to display.
tag	ReactElement	Yes	—	The tag element to display alongside the children.
position	'left' | 'right'	No	'right'	Position of the tag relative to the children.
enabled	boolean	No	true	When false, the tag is hidden entirely. Children are always rendered.

Behavior

• Renders a div.tag-wrapper that contains the children and optionally the tag.
• When position="right" (default): renders {children} {tag}.
• When position="left": renders {tag} {children}.
• When enabled=false: the tag element is not rendered; children is always rendered regardless of enabled.

Examples

Happy path: tag to the right of a heading

import TagWrapper from '@/components/core/Tags/TagWrapper';
import LegacyDataTag from '@/components/core/Tags/LegacyDataTag';

<TagWrapper tag={<LegacyDataTag url="/record/1" />}>
  <PageTitle title="Reporting Unit no.: 1234" />
</TagWrapper>

Edge case: tag hidden when a condition is false

<TagWrapper
  position="right"
  enabled={!data.grade?.code}
  tag={<LegacyDataTag url={`/legacy?id=${data.id}`} />}
>
  <h1>{data.name}</h1>
</TagWrapper>

When data.grade.code is truthy, enabled evaluates to false and the tag is suppressed.

Known Constraints

• children must be a single ReactElement. Wrapping multiple elements requires a fragment or container.
• The tag-wrapper CSS class must be present in the compiled stylesheet (index.scss). Visual layout depends on the accompanying styles.
• enabled hides the tag element only; the children prop renders unconditionally.

Change Impact

• codes/frontend/Components.md — catalog entry for core tags section.
• codes/frontend/core/Tags/LegacyDataTag.md — primary tag used with TagWrapper in the RU details page.
• pages/ReportingUnitDetails — nests two TagWrapper instances to annotate the page title with both LegacyDataTag and UnderConstructionTag.

See Also

• LegacyDataTag
• UnderConstructionTag
• Components