Skip to content

feat: lukso-timeline component#846

Merged
dzbo merged 26 commits intomainfrom
feat-lukso-timeline
Apr 20, 2026
Merged

feat: lukso-timeline component#846
dzbo merged 26 commits intomainfrom
feat-lukso-timeline

Conversation

@federico-freddi
Copy link
Copy Markdown
Contributor

federico-freddi and others added 15 commits April 16, 2026 15:07
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…plates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…r Controls interactivity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 16, 2026

Storybook deployed with Cloudflare Pages ☁️ 📖 🚀

Storybook

Built from commit 24dd22c

@dzbo dzbo changed the title Feat lukso timeline feat: lukso-timeline component Apr 17, 2026
@dzbo dzbo requested a review from Copilot April 17, 2026 05:36
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new lukso-timeline web component to the design system package, including Storybook documentation and package exports so it can be consumed from the published build.

Changes:

  • Introduces lukso-timeline component implementation and Tailwind-based styling.
  • Adds Storybook stories demonstrating multiple timeline states (before start, in range, after end, forever).
  • Exposes the new component via the library barrel export and package.json exports (and bumps package version).

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
src/components/lukso-timeline/style.css Defines base host styling for the new component.
src/components/lukso-timeline/lukso-timeline.stories.ts Adds Storybook examples for the component’s various states.
src/components/lukso-timeline/index.ts Implements the timeline rendering, date parsing, formatting, and progress computation.
src/components/index.ts Re-exports the new component from the components barrel.
package/package.json Bumps version and adds exports entries for the new component build outputs.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/lukso-timeline/index.ts Outdated
Comment thread src/components/lukso-timeline/index.ts Outdated
Comment thread src/components/lukso-timeline/index.ts Outdated
Comment thread src/components/lukso-timeline/index.ts Outdated
Comment thread src/components/lukso-timeline/lukso-timeline.stories.ts Outdated
Comment thread src/components/lukso-timeline/index.ts Outdated
Copy link
Copy Markdown
Collaborator

@dzbo dzbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few things need improvement:

  1. When start date is today we need to display like this, note short left side and "Now" word
Image
  1. Arrows are not in color of line
Image
  1. "Today After End" doesn't exist, we don't show timeline after the end date

  2. Before event start we show solid line not the one in progress

Image
  1. On design this arrow is shorter, let's remove "-" under label it doesn't do anything
Image
  1. Any time we are in progres (green bar appears) we show grey bar in progress too
Image
  1. Peter forgot to add this but when we are within range we show "Today" above line
  2. The in progress line color looks odd, should be matching with solid line

@federico-freddi federico-freddi marked this pull request as draft April 17, 2026 10:50
@federico-freddi
Copy link
Copy Markdown
Contributor Author

Few things need improvement:

  1. When start date is today we need to display like this, note short left side and "Now" word
Image 2. Arrows are not in color of line Image 3. "Today After End" doesn't exist, we don't show timeline after the end date 4. Before event start we show solid line not the one in progress Image 5. On design this arrow is shorter, let's remove "-" under label it doesn't do anything Image 6. Any time we are in progres (green bar appears) we show grey bar in progress too Image 7. Peter forgot to add this but when we are within range we show "Today" above line 8. The in progress line color looks odd, should be matching with solid line

@federico-freddi federico-freddi requested a review from dzbo April 20, 2026 12:13
@federico-freddi federico-freddi marked this pull request as ready for review April 20, 2026 13:15
Copy link
Copy Markdown
Collaborator

@dzbo dzbo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. The missing dot
Image
  1. Progress style
Image

Comment thread src/components/lukso-timeline/lukso-timeline.stories.ts Outdated
@federico-freddi federico-freddi requested a review from dzbo April 20, 2026 15:37
@dzbo dzbo merged commit f6f52c7 into main Apr 20, 2026
8 checks passed
@dzbo dzbo deleted the feat-lukso-timeline branch April 20, 2026 15:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

4 participants