Timeline Component

[LuisDuarte1]

Closes #282

Screenshots

Review checklist

• Contains enough appropriate tests
• Behavior is as expected
• Clean, well-structured code

[LuisDuarte1]

The HorizontalTimeline for now:

I've changed the design from the mockups (because it's more intuitive having the arrows for interacting with the timeline imo). wdyt? @MRita443

Also, should I change this PR to be the HorizontalTimeline only? because I think that #163 depends on it

[LuisDuarte1]

There's some things that I still have to consider:

• Should we change the displayedSize according to width? (must be done on js though)
• Should we have transition animations? (not sure what kind of animations would be suitable for this)
• What color should we use to indicate that you can't go futher right/left?
• Testing the component 😅

[MRita443]

The HorizontalTimeline for now:

I've changed the design from the mockups (because it's more intuitive having the arrows for interacting with the timeline imo). wdyt? @MRita443

Also, should I change this PR to be the HorizontalTimeline only? because I think that #163 depends on it

I also agree this way is more intuitive for knowing there are more years to scroll through, but let's ask @NIAEFEUP/design-website for an opinion too!

If you see the PR is getting large or that it might take you a bit to finish the whole page go ahead and separate it, but I don't think #163 will be worked on for now.

Keep up the good work :)

[codecov]

Codecov Report

Attention: 5 lines in your changes are missing coverage. Please review.

Comparison is base (e45855f) 95.21% compared to head (5b34800) 93.60%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #220      +/-   ##
===========================================
- Coverage    95.21%   93.60%   -1.61%     
===========================================
  Files           20       21       +1     
  Lines          188      219      +31     
  Branches        38       48      +10     
===========================================
+ Hits           179      205      +26     
- Misses           9       14       +5     

Files	Coverage Δ
src/lib/component/Icons.ts	100.00% <ø> (ø)
src/lib/layout/HorizontalTimeline.svelte	83.87% <83.87%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.