Implementation Time Indicators

Implementation Time Indicators provide a way to display estimated time requirements for tasks, tutorials, or content sections. These components help users manage expectations and plan their learning or implementation process.

Key Features

• Flexible Time Formatting: Display times in minutes, hours, or a combination
• Multiple Display Styles: Choose from various visual styles based on context
• User Preferences: Allow users to set global preferences for time display
• Contextual Badges: Color-coded badges for quick, medium, or lengthy tasks
• Tooltip Option: Non-intrusive time indicators as tooltips
• Persistence: Remember user preferences between sessions

Available Components

The implementation time system includes multiple components:

• ImplementationTime: Main component to display time estimates
• ImplementationTimeControl: Controls for users to set display preferences
• ImplementationTimeProvider: Context provider for state management

Basic Usage

import { ImplementationTime } from '@site/src/components/MDX';

<ImplementationTime minutes={45} />

This renders a simple time indicator showing "Implementation time: 45 mins".

Provider Setup

For implementation time components to work correctly, they must be wrapped in an ImplementationTimeProvider. You can add this to individual pages:

import { ImplementationTimeProvider } from '@site/src/components/MDX';

<ImplementationTimeProvider>
  {/* Your content with implementation time indicators */}
</ImplementationTimeProvider>

Or, for site-wide support, add the provider to your theme layout in src/theme/Layout.js.

Display Styles

The ImplementationTime component supports multiple display styles:

// Default style
<ImplementationTime minutes={30} />

// Compact style (smaller, less prominent)
<ImplementationTime minutes={30} style="compact" />

// Prominent style (with background)
<ImplementationTime minutes={30} style="prominent" />

// Subtle style (more muted appearance)
<ImplementationTime minutes={30} style="subtle" />

// Tooltip style (shows on hover)
<ImplementationTime minutes={30} style="tooltip" />

// Badge style (color-coded by duration)
<ImplementationTime minutes={30} style="badge" />

Custom Labels

You can customize the label text:

<ImplementationTime 
  minutes={15} 
  label="Estimated coding time:" 
/>

User Preference Controls

Allow users to set their preferred display format and style:

import { ImplementationTimeProvider, ImplementationTimeControl } from '@site/src/components/MDX';

<ImplementationTimeProvider>
  <ImplementationTimeControl />
  
  {/* Your content with implementation time indicators */}
</ImplementationTimeProvider>

The control panel provides options for both time format (minutes, hours, etc.) and display style.

Component Props

ImplementationTime

Prop	Type	Default	Description
minutes	number	required	Estimated time in minutes
style	string	'default'	Display style ('default', 'compact', 'prominent', 'subtle', 'tooltip', 'badge')
label	string	'Implementation time:'	Custom label text
tooltipText	string	(auto)	Custom tooltip text (for tooltip style)
className	string	''	Additional CSS class for styling

ImplementationTimeControl

Prop	Type	Default	Description
showFormatControls	boolean	true	Whether to show format control options
showStyleControls	boolean	true	Whether to show style control options
className	string	''	Additional CSS class for styling

ImplementationTimeProvider

Prop	Type	Default	Description
children	ReactNode	required	Content to be wrapped by the provider

Time Formatting

The time formatting is handled automatically based on the user's preference:

• Auto: Uses minutes for short durations, hours and minutes for longer ones
• Minutes: Always shows time in minutes (e.g., "45 mins")
• Hours: Always shows time in hours (e.g., "0.8 hrs")
• Hours & Minutes: Shows in hours and minutes (e.g., "2 hrs, 30 mins")

Badge Colors

When using the badge style, colors are automatically assigned based on duration:

• Green: Quick tasks (≤15 minutes)
• Yellow: Medium tasks (16-60 minutes)
• Red: Longer tasks (>60 minutes)

Integrating with Other Components

Implementation time indicators work well with other progressive disclosure components:

import { GuidedLearningPath, LearningStep, ImplementationTime } from '@site/src/components/MDX';

<GuidedLearningPath id="tutorial" title="API Tutorial">
  <LearningStep title="Setup">
    <ImplementationTime minutes={10} />
    {/* Step content */}
  </LearningStep>
  
  <LearningStep title="Implementation">
    <ImplementationTime minutes={45} />
    {/* Step content */}
  </LearningStep>
</GuidedLearningPath>

Accessibility Considerations

• Time indicators maintain sufficient color contrast
• Tooltip versions include proper ARIA attributes
• Controls have appropriate ARIA labels and states
• Time information is available to screen readers

Best Practices

• Be realistic: Provide accurate time estimates based on average user experience
• Consider user levels: Time estimates may vary by user expertise level
• Update estimates: Keep time indicators updated as content changes
• Use consistent styles: Maintain the same style of time indicators throughout related content
• Place strategically: Position indicators where they're noticed before users begin a task
• Combine with ExperienceToggle: Different time estimates may be appropriate for different skill levels

Examples

See the examples page for live demonstrations of all implementation time indicator styles and formats.