CodeDescriptionTag

CodeDescriptionTag

The CodeDescriptionTag component displays a formatted code and description pair in a simple inline format. It renders CodeDescriptionDto objects consistently throughout the application.

Props

Name	Type	Required	Description
value	CodeDescriptionDto	✅	A code-description pair containing the information to display

Types

CodeDescriptionDto

type CodeDescriptionDto = {
  code: string;
  description: string;
};

The standard data type used throughout the application to represent a paired code and text description.

Usage

import CodeDescriptionTag from '@/components/waste/CodeDescriptionTag';

// Direct inline usage with object literal
<CodeDescriptionTag value={{ code: 'A', description: 'Alpha' }} />

// With variable
const status = { code: 'ACT', description: 'Active' };
<CodeDescriptionTag value={status} />

// Common waste search result fields
<CodeDescriptionTag value={searchResult.client} />
<CodeDescriptionTag value={searchResult.district} />
<CodeDescriptionTag value={searchResult.status} />
<CodeDescriptionTag value={searchResult.sampling} />

Output Format

The component renders the code and description in the format: {code} - {description}

Examples

• Input: { code: 'A', description: 'Alpha' } → Output: A - Alpha
• Input: { code: 'ACT', description: 'Active' } → Output: ACT - Active
• Input: { code: '01', description: 'Reporting Unit' } → Output: 01 - Reporting Unit

Implementation Details

Rendering

The component renders as a simple <span> element containing the code, a dash separator, and the description:

<span>
  {value.code} - {value.description}
</span>

Styling

• No built-in styling or CSS classes (renders as plain text by default)
• Can be styled through parent container styling or wrapper components
• Inherits text properties from parent element

Behavior

• Simple presentational component with no state or side effects
• Renders all truthy code and description values as-is
• No validation or formatting of input values
• Does not handle null/undefined values gracefully (will render as text)

Test Coverage

The component includes unit test coverage:

• ✅ Renders code and description in correct format
• ✅ Combines values with dash separator
• ✅ Works with various code and description values

Common Use Cases

1. Search Results: Display code-description pairs in waste search result tables
2. Inline Data: Show client, district, or status information inline
3. List Items: Render descriptions in lists with categorization codes
4. Data Tables: Display paired code/description cells in tables

Related Components

• ColorTag: Also displays code-description pairs but with styling and tooltips
• Waste Search Results: Primary consumer of this component
• Data Tables: Often wraps this component in table cells

Dependencies

Type Definition

• CodeDescriptionDto from @/services/search.types

React

• FC<>: Functional Component type

Best Practices

1. Consistent Data: Ensure values are properly typed as CodeDescriptionDto
2. Styling: Wrap in styled containers or use parent styling if custom appearance is needed
3. Null Handling: Validate values before passing to component if they may be undefined
4. Sparse Rendering: Due to no built-in error handling, ensure data is always valid

Related Components

• ColorTag (@/components/core/Tags/ColorTag): Enhanced code-description display with color, tooltips, and styling
• DataTable: Typically renders CodeDescriptionTag in table cells

Notes

• Very lightweight, minimal dependencies component
• Pure presentational component with no lifecycle or hooks
• Suitable for rendering structured data in lists and tables
• For more complex formatting needs (colors, tooltips, validation), see ColorTag component