Skip to main content

Additional Status Components

Additional status components provide specialized status displays and customizable status formatting beyond the main status components. These components handle policy violations, custom status mapping, and advanced badge configurations.

Overview​

This document covers additional status components that provide specialized functionality for displaying various status states, policy violations, and customizable status badges.

Components Overview​

Badge Components​

PolicyViolationBadge​

A specialized badge component for displaying policy violation status with optional tooltip information.

Component Location​

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

Props​

PropTypeRequiredDefaultDescription
statusTextstring✓-The status text to display
tooltipstring--Optional tooltip text for additional information

TypeScript Interface​

interface TPolicyViolationBadge {
  statusText: string;
  tooltip?: string;
}

Usage Examples​

Basic Usage​

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

function PolicyStatus() {
  return <PolicyViolationBadge statusText='Policy Violation' />;
}

With Tooltip​

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

function DetailedPolicyStatus() {
  return (
    <PolicyViolationBadge
      statusText='Attendance Policy Violation'
      tooltip='Employee exceeded maximum allowed late arrivals for this month'
    />
  );
}

In Table Display​

import PolicyViolationBadge from 'components/Status/PolicyViolationBadge';

function EmployeeTable() {
  const renderPolicyStatus = employee => {
    if (employee.policyViolations?.length > 0) {
      return (
        <PolicyViolationBadge
          statusText={`${employee.policyViolations.length} Violation(s)`}
          tooltip={employee.policyViolations.map(v => v.description).join(', ')}
        />
      );
    }
    return &lt;Text&gt;No Violations</Text>;
  };

  return (
    &lt;Table&gt;
      {/* Table structure */}
      &lt;Td&gt;{renderPolicyStatus(employee)}</Td>
    </Table>
  );
}

Styling​

Colors​

  • Background: hue-green.50
  • Border: 1px solid hue-green.400
  • Text color: navy
  • Badge color: hue-green.600

Layout​

  • Display: flex
  • Align items: center
  • Flex wrap: nowrap
  • Width: fit-content
  • Variant: outline

Typography​

  • Font weight: normal
  • Font size: 12px
  • Line height: 22px
  • Text style: body-small

Accessibility​

  • Tooltip with arrow for additional information
  • Keyboard accessible tooltip
  • Screen reader friendly text
  • High contrast colors for readability

WpBaseStatusFormatter​

A highly customizable status badge component with flexible styling, icon support, and configurable status mapping.

Component Location​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

Props​

PropTypeRequiredDefaultDescription
statusstring✓-Status value to display
statusMapStatusMap-defaultStatusMapCustom status mapping configuration
titlestring--Optional title override
hasDotboolean-trueShow status dot indicator
leftIconIconConfig--Custom left icon configuration
rightIconIconConfig--Custom right icon configuration
customColorsPartial<StatusEntry>--Custom color overrides
sizestring-'md'Badge size

TypeScript Interfaces​

interface StatusEntry {
  bgColor: string;
  color: string;
  dotColor: string;
  defaultTitle: string;
}

interface StatusMap {
  [key: string]: StatusEntry;
}

interface IconConfig {
  icon?: ReactNode;
  tooltip: string;
}

interface WpBaseStatusBadgeProps<T extends string> {
  status: T;
  statusMap?: StatusMap;
  title?: string;
  hasDot?: boolean;
  leftIcon?: IconConfig;
  rightIcon?: IconConfig;
  customColors?: Partial&lt;StatusEntry&gt;;
  size?: string;
}

Default Status Map​

The component includes a comprehensive default status map:

const defaultStatusMap = {
  success: {
    bgColor: 'hue-green.100',
    color: 'hue-green.800',
    dotColor: 'hue-green.400',
    defaultTitle: 'Success',
  },
  warning: {
    bgColor: 'hue-chrome.100',
    color: 'hue-chrome.800',
    dotColor: 'hue-chrome.400',
    defaultTitle: 'Warning',
  },
  error: {
    bgColor: 'hue-red.100',
    color: 'hue-red.800',
    dotColor: 'hue-red.400',
    defaultTitle: 'Error',
  },
  neutral: {
    bgColor: 'hue-gray.100',
    color: 'hue-gray.800',
    dotColor: 'hue-gray.400',
    defaultTitle: 'Neutral',
  },
  info: {
    bgColor: 'hue-sea.100',
    color: 'hue-sea.800',
    dotColor: 'hue-sea.400',
    defaultTitle: 'Info',
  },
};

Usage Examples​

Basic Usage​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function BasicStatus() {
  return <WpBaseStatusFormatter status='success' />;
}

Custom Title​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function CustomTitleStatus() {
  return <WpBaseStatusFormatter status='success' title='Payroll Processed' />;
}

Custom Status Map​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function CustomStatusMap() {
  const payrollStatusMap = {
    draft: {
      bgColor: 'gray.100',
      color: 'gray.800',
      dotColor: 'gray.400',
      defaultTitle: 'Draft',
    },
    processing: {
      bgColor: 'blue.100',
      color: 'blue.800',
      dotColor: 'blue.400',
      defaultTitle: 'Processing',
    },
    completed: {
      bgColor: 'green.100',
      color: 'green.800',
      dotColor: 'green.400',
      defaultTitle: 'Completed',
    },
    failed: {
      bgColor: 'red.100',
      color: 'red.800',
      dotColor: 'red.400',
      defaultTitle: 'Failed',
    },
  };

  return (
    <WpBaseStatusFormatter status='processing' statusMap={payrollStatusMap} />
  );
}

With Custom Icons​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';
import { CheckCircleIcon, InfoIcon } from '@chakra-ui/icons';

function StatusWithIcons() {
  return (
    <WpBaseStatusFormatter
      status='success'
      leftIcon={{
        icon: <CheckCircleIcon />,
        tooltip: 'Operation completed successfully',
      }}
      rightIcon={{
        icon: <InfoIcon />,
        tooltip: 'Click for more details',
      }}
    />
  );
}

Without Dot Indicator​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function NoDotStatus() {
  return (
    <WpBaseStatusFormatter
      status='info'
      hasDot={false}
      title='Information Only'
    />
  );
}

Custom Color Override​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function CustomColorStatus() {
  return (
    <WpBaseStatusFormatter
      status='success'
      customColors={{
        bgColor: 'purple.100',
        color: 'purple.800',
        dotColor: 'purple.400',
      }}
      title='Custom Purple Status'
    />
  );
}

Employee Status Example​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function EmployeeStatusDisplay() {
  const employeeStatusMap = {
    active: {
      bgColor: 'green.100',
      color: 'green.800',
      dotColor: 'green.400',
      defaultTitle: 'Active',
    },
    inactive: {
      bgColor: 'gray.100',
      color: 'gray.800',
      dotColor: 'gray.400',
      defaultTitle: 'Inactive',
    },
    on_leave: {
      bgColor: 'orange.100',
      color: 'orange.800',
      dotColor: 'orange.400',
      defaultTitle: 'On Leave',
    },
    terminated: {
      bgColor: 'red.100',
      color: 'red.800',
      dotColor: 'red.400',
      defaultTitle: 'Terminated',
    },
  };

  return (
    <WpBaseStatusFormatter
      status='on_leave'
      statusMap={employeeStatusMap}
      rightIcon={{
        tooltip: 'Employee is currently on approved leave',
      }}
    />
  );
}

Integration Patterns​

Table Cell Status​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function StatusTableCell({ status, details }) {
  return (
    &lt;Td&gt;
      <WpBaseStatusFormatter
        status={status}
        rightIcon={
          details
            ? {
                tooltip: details,
              }
            : undefined
        }
      />
    </Td>
  );
}

Card Status Display​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function PayrollCard({ payroll }) {
  return (
    &lt;Card&gt;
      &lt;CardHeader&gt;
        <HStack justify='space-between'>
          &lt;Text&gt;Payroll {payroll.month}</Text>
          <WpBaseStatusFormatter
            status={payroll.status}
            statusMap={payrollStatusMap}
          />
        </HStack>
      </CardHeader>
    </Card>
  );
}

Filter Status Options​

import WpBaseStatusFormatter from 'components/Status/WpBaseStatusFormatter';

function StatusFilter({ onStatusChange }) {
  const statusOptions = ['all', 'active', 'inactive', 'pending'];

  return (
    &lt;HStack&gt;
      {statusOptions.map(status => (
        <Button
          key={status}
          variant='ghost'
          onClick={() => onStatusChange(status)}
        >
          <WpBaseStatusFormatter status={status} size='sm' />
        </Button>
      ))}
    </HStack>
  );
}

Styling​

Badge Properties​

  • Variant: subtle
  • Display: flex
  • Align items: center
  • Width: fit-content

Typography​

  • Font size: 12px
  • Text transform: capitalize
  • Margin: 1 (between elements)

Icon Support​

  • Left icon: Default dot or custom icon
  • Right icon: Optional with tooltip
  • Tooltip placement: bottom
  • Arrow size: 6

Accessibility​

  • ARIA-compliant badge structure
  • Keyboard accessible tooltips
  • Screen reader friendly status text
  • High contrast color combinations
  • Focus management for interactive elements

Performance Considerations​

  • Memoized status calculations
  • Efficient color mapping
  • Optimized re-renders
  • Minimal DOM structure

Customization​

Color Theming​

  • Supports Chakra UI color tokens
  • Custom color overrides
  • Consistent color patterns
  • Theme-aware implementations

Icon Customization​

  • Custom left/right icons
  • Tooltip integration
  • Icon positioning
  • Responsive icon sizing

Size Variants​

  • Multiple size options
  • Responsive sizing
  • Consistent proportions
  • Flexible layouts

Migration Notes​

From Legacy Status Components​

Update Status Badges​

// Old approach
<Badge colorScheme="green">Active</Badge>

// New approach
<WpBaseStatusFormatter
  status="active"
  title="Active Employee"
/>

Policy Status Migration​

// Old approach
<Badge variant="outline" colorScheme="red">
  Policy Violation
</Badge>

// New approach
<PolicyViolationBadge
  statusText="Policy Violation"
  tooltip="Attendance policy exceeded"
/>

Breaking Changes​

  • StatusFormatter props updated
  • Custom color structure changed
  • Icon configuration modified

Upgrade Paths​

  1. Replace basic status badges with WpBaseStatusFormatter
  2. Migrate policy indicators to PolicyViolationBadge
  3. Update custom status maps to new structure
  4. Implement new icon configuration patterns

Best Practices​

Status Mapping​

  • Use consistent status keys across application
  • Implement meaningful color coding
  • Provide clear status titles
  • Document status meanings

Tooltip Usage​

  • Provide helpful additional information
  • Keep tooltip text concise
  • Use appropriate placement
  • Consider mobile accessibility

Performance​

  • Implement proper memoization
  • Use consistent status maps
  • Minimize color calculations
  • Optimize re-render cycles

Color Guidelines​

  • Follow brand color patterns
  • Ensure accessibility compliance
  • Use semantic color meanings
  • Test color contrast ratios

Testing Strategies​

Unit Tests​

  • Test status mapping logic
  • Verify color applications
  • Test icon configurations
  • Validate tooltip functionality

Visual Testing​

  • Screenshot comparison tests
  • Cross-browser compatibility
  • Mobile responsive testing
  • Accessibility compliance testing

Integration Tests​

  • Test with real data
  • Verify table integrations
  • Test filter functionality
  • Validate state changes

Accessibility​

ARIA Support​

  • Proper badge semantics
  • Descriptive labels
  • Status announcements
  • Screen reader compatibility

Keyboard Navigation​

  • Focusable interactive elements
  • Tooltip keyboard access
  • Proper tab order
  • Escape key handling

Visual Accessibility​

  • High contrast colors
  • Clear visual hierarchy
  • Sufficient color contrast
  • Readable typography

Screen Reader Support​

  • Meaningful text alternatives
  • Status change announcements
  • Context information
  • Navigation landmarks