DistrictItem

DistrictItem

The DistrictItem component renders an individual item within a DistrictSelection list. It displays an icon (based on the item's kind), the item name, and optionally the item ID. The component supports loading states and dynamically changes the icon to a checkmark when the item is selected.

Props

Name	Type	Required	Description
client	DistrictType	✅	The item data to display (id, name, kind)
isSelected	boolean	✅	Whether this item is currently selected
isLoading	boolean	❌	If true, displays a skeleton placeholder instead of item content

Types

DistrictType

export type DistrictType = {
  id: string;        // Unique identifier for the item
  name: string;      // Display name for the item
  kind: string;      // Type/category code (maps to an icon)
};

Usage

import DistrictItem from '@/components/core/DistrictSelection/DistrictItem';

// Regular item
<DistrictItem
  client={{ id: '00000001', name: 'COMPANY ONE', kind: 'C' }}
  isSelected={false}
  isLoading={false}
/>

// Selected item (shows checkmark)
<DistrictItem
  client={{ id: '00000002', name: 'COMPANY TWO', kind: 'F' }}
  isSelected={true}
  isLoading={false}
/>

// Loading state
<DistrictItem
  client={{ id: '00000003', name: 'Loading...', kind: 'I' }}
  isSelected={false}
  isLoading={true}
/>

// Deselect option
<DistrictItem
  client={DESELECT_CLIENT}
  isSelected={true}
  isLoading={false}
/>

Icon Mapping

The component uses the ClientTypeIconMap constant to map kind codes to Carbon Design System icons:

Kind Code	Icon Type	Description
A	Partnership	Association
B	EventsAlt	First Nation Band
C	Building	Corporation
F	Tree	Ministry of Forests and Range
G	Finance	Government
I	UserAvatar	Individual
L	Group	Limited Partnership
P	Events	General Partnership
R	EventsAlt	First Nation Group
S	GroupPresentation	Society
T	GroupPresentation	First Nation Tribal Council
U	Enterprise	Unregistered Company
Z	Blockchain	Deselected / None
D	Location	District

If a kind code is not found in the map, a Help icon is displayed as a fallback.

Visual States

Selected State

When isSelected={true}, the icon is replaced with a CheckmarkFilled icon to indicate the current selection, regardless of the original kind code.

Loading State

When isLoading={true}, a Carbon ButtonSkeleton component is displayed instead of the item content.

ID Display

The item ID is only displayed if it exists (i.e., client.id is not empty). This allows for items like the deselect option to omit the ID line.

Layout Structure

The component renders two rows:

1. Icon and Name Row: Displays the icon and item name horizontally
2. Sub Info Row: Displays the ID below (if present)

┌─────────────────────────────┐
│ [Icon]  Item Name           │
│         ID 00000001         │
└─────────────────────────────┘

Styling

The component uses the following CSS classes from the parent DistrictSelection component:

Icon and Name Row

.icon-and-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;

  .org-item-icon {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    fill: var(--border-interactive);
  }

  .client-name {
    @include type.type-style('body-01');
    margin-left: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
  }
}

Sub Info Row

.sub-info-row {
  @include type.type-style('body-compact-02');
  color: var(--text-secondary);
  margin-left: 3rem;
}

Design Tokens

• Icon color: --border-interactive (blue-60)
• Primary text: --text-primary
• Secondary text: --text-secondary (gray-70)
• Typography: Carbon body-01 and body-compact-02

Accessibility

• Icons have data-testid attributes for testing
• The component is designed to work within an accessible button/list structure
• Text overflow is handled with ellipsis to prevent layout breaking
• Loading states use Carbon's accessible skeleton components

Best Practices

1. Always wrap in a button or interactive element: This component is designed to be used within DistrictSelection's button elements
2. Provide valid DistrictType data: Ensure id, name, and kind are properly set
3. Handle empty IDs: Use empty string for ID when you don't want to display it (like deselect options)
4. Extend icon mapping as needed: Add new entries to ClientTypeIconMap for custom entity types
5. Test loading states: Always test the isLoading prop to ensure skeleton displays correctly

Related Components

• DistrictSelection: Parent container component that uses DistrictItem
• ClientListing: Uses DistrictItem for displaying forest clients
• DistrictListing: Uses DistrictItem for displaying districts

Notes

• The component is purely presentational and doesn't handle any click events
• Selection state only affects the icon display; border and background styling is handled by the parent
• The Help icon fallback ensures the UI never breaks with unknown kind values