mi6 / mi6/ic-ui-kit

ICDS Timeline Component

Open
#4,066 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary
The component will dsplay a sequence of events or milestones in chronological order, allowing users to track progress.

### 💬 Description
The component should allow users to view their progress of a task, event and activities along a vertical or horizontal line. Each event is represented as an item containing information such as a title, date, description, and optional media (icons, images, or links).

### 💰 User value
This is important as users can keep track of an automated workflow or see the history of a task they've automated to see at what stage it may have failed. This allows better transparancy and auditing as they will no longer need to hit an API or see an error alert banner to try and understand what went wrong and instead see a very intuitive ui.

### 📚 User Stories
As an ICDS user:
I need to be able to demonstrate a UI feature that lets users see progess of their automated tests. This is currently not possible as the current ICDS components are limiting that functionality and I was unable to find an alternative library that was lightweight or compatible with ICDS.

### 📝 Acceptance Criteria
Given the description, id and state of an event. When a user sees the component they should be able to see the progress of their event, and when they hover over, a popup should show the description of the event.

### ✏ Designs
There is no Figma design that has been refined but I have attached a mock-up

Image
Image

### 🚨 Urgency (low, medium or high)
- Low = Does not have significant impact and can be addressed at a convenient time without causing delays.

### Additional info
I have already created this component with fully functional CSS, and its currently being used in Prod for my team. If you would like to reach out I am more than welcome to help with this component as the main features are already done

Contributor guide

Open the contributing guide

Research direction

No repository files, tests, or entry points are named. Start by reviewing the existing ic-ui-kit component patterns and the attached mock-ups, then clarify the component API, supported orientations, event states, and hover description behavior. Done means the timeline displays event progress and descriptions as specified.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.