Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Add a Carousel component #320

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Conversation

titouanmathis
Copy link
Contributor

@titouanmathis titouanmathis commented Nov 16, 2024

To replace the Slider component with native scroll-snap for touch devices.

πŸ”— Linked issue

No issue.

❓ Type of change

  • πŸ“– Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

This PR adds a new Carousel component which aims to replace the existing Slider component.

It aims to be more minimalist by using scroll-snapping on touch device instead of handling drag and drop in JS.

Playground

To-do

  • Fix a bug with the prev/next buttons on Chrome
  • Ensure the Carousel implementation is agnostic enough to be able to create different types of animations

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have added tests (if possible).
  • I have updated the documentation accordingly.
  • I have updated the changelog.

Copy link

github-actions bot commented Nov 16, 2024

Export Size

@studiometa/ui

Name Size Diff
Carousel 1 B +1 B (+100.00%) πŸ”Ί
CarouselBtn 1 B +1 B (+100.00%) πŸ”Ί
CarouselDots 1 B +1 B (+100.00%) πŸ”Ί
CarouselDrag 1 B +1 B (+100.00%) πŸ”Ί
CarouselItem 1 B +1 B (+100.00%) πŸ”Ί
CarouselProgress 1 B +1 B (+100.00%) πŸ”Ί
CarouselWrapper 1 B +1 B (+100.00%) πŸ”Ί
Unchanged

@studiometa/ui

Name Size Diff
AbstractPrefetch 1 B -
AbstractScrollAnimation 1 B -
AbstractSliderChild 1 B -
Accordion 1 B -
AccordionItem 1 B -
Action 1 B -
ALL 1 B -
AnchorNav 1 B -
AnchorNavLink 1 B -
AnchorNavTarget 1 B -
AnchorScrollTo 1 B -
animationScrollWithEase 1 B -
ATOMS 1 B -
CircularMarquee 1 B -
Cursor 1 B -
DataBind 1 B -
DataComputed 1 B -
DataEffect 1 B -
DataModel 1 B -
Draggable 1 B -
Figure 1 B -
FigureShopify 1 B -
FigureTwicpics 1 B -
FigureVideo 1 B -
FigureVideoTwicpics 1 B -
Frame 1 B -
FrameAnchor 1 B -
FrameForm 1 B -
FrameTarget 1 B -
LargeText 1 B -
LazyInclude 1 B -
Menu 1 B -
MenuBtn 1 B -
MenuList 1 B -
Modal 1 B -
ModalWithTransition 1 B -
MOLECULES 1 B -
ORGANISMS 1 B -
Panel 1 B -
PrefetchWhenOver 1 B -
PrefetchWhenVisible 1 B -
PRIMITIVES 1 B -
ScrollAnimation 1 B -
ScrollAnimationChild 1 B -
ScrollAnimationChildWithEase 1 B -
ScrollAnimationParent 1 B -
ScrollAnimationWithEase 1 B -
ScrollReveal 1 B -
Sentinel 1 B -
Slider 1 B -
SliderBtn 1 B -
SliderCount 1 B -
SliderDots 1 B -
SliderDrag 1 B -
SliderItem 1 B -
SliderProgress 1 B -
Sticky 1 B -
TableOfContent 1 B -
TableOfContentAnchor 1 B -
Tabs 1 B -
Target 1 B -
Transition 1 B -

Copy link

codecov bot commented Nov 16, 2024

Codecov Report

Attention: Patch coverage is 67.64706% with 88 lines in your changes missing coverage. Please review.

Project coverage is 79.38%. Comparing base (7c41d79) to head (121132e).

Files with missing lines Patch % Lines
...ges/ui/molecules/Carousel/AbstractCarouselChild.ts 41.93% 18 Missing ⚠️
packages/ui/molecules/Carousel/CarouselWrapper.ts 43.75% 18 Missing ⚠️
packages/ui/molecules/Carousel/CarouselBtn.ts 42.30% 15 Missing ⚠️
packages/ui/molecules/Carousel/CarouselItem.ts 48.14% 14 Missing ⚠️
packages/ui/molecules/Carousel/utils.ts 7.14% 13 Missing ⚠️
packages/ui/molecules/Carousel/CarouselDots.ts 57.89% 8 Missing ⚠️
packages/ui/molecules/Carousel/CarouselProgress.ts 83.33% 2 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop     #320      +/-   ##
===========================================
- Coverage    80.35%   79.38%   -0.97%     
===========================================
  Files           96      106      +10     
  Lines         3298     3570     +272     
  Branches       324      332       +8     
===========================================
+ Hits          2650     2834     +184     
- Misses         648      736      +88     
Flag Coverage Ξ”
unittests 79.38% <67.64%> (-0.97%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

β˜” View full report in Codecov by Sentry.
πŸ“’ Have feedback on the report? Share it here.

To replace the Slider component with native scroll-snap for touch
devices.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant