feat: add new watch-slides-progress carousel prop (#412)

juntossomosmais · Apr 11, 2024 · a5e29b2 · a5e29b2
1 parent 4a69f24
commit a5e29b2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -68,6 +68,7 @@ export namespace Components {
         "speed"?: number;
         "thumbnailImages"?: string;
         "videoIcons"?: boolean;
+        "watchSlidesProgress"?: boolean;
     }
     interface AtomCarouselItem {
     }
@@ -517,6 +518,7 @@ declare namespace LocalJSX {
         "speed"?: number;
         "thumbnailImages"?: string;
         "videoIcons"?: boolean;
+        "watchSlidesProgress"?: boolean;
     }
     interface AtomCarouselItem {
     }

diff --git a/packages/core/src/components/carousel/carousel.spec.ts b/packages/core/src/components/carousel/carousel.spec.ts
@@ -25,7 +25,8 @@ describe('AtomCarousel', () => {
   it('should render component with passed props', async () => {
     const page = await newSpecPage({
       components: [AtomCarousel],
-      html: `<atom-carousel center-insufficient-slides="true" pagination="false" navigation="false" slides-per-group="4" slides-per-view="2">
+      html: `<atom-carousel center-insufficient-slides="true" pagination="false"
+      navigation="false" slides-per-group="4" slides-per-view="2" watch-slides-progress="true">
               <atom-carousel-item> Slide 1</atom-carousel-item>
               <atom-carousel-item> Slide 2</atom-carousel-item>
               </atom-carousel>`,
@@ -43,6 +44,7 @@ describe('AtomCarousel', () => {
     expect(swiperContainer?.outerHTML).toContain('slides-per-view="2"')
     expect(swiperContainer?.outerHTML).toContain('slides-per-group="4"')
     expect(swiperContainer?.outerHTML).toContain('center-insufficient-slides')
+    expect(swiperContainer?.outerHTML).toContain('watch-slides-progress')
   })
 
   it('should render component with default props', async () => {

diff --git a/packages/core/src/components/carousel/carousel.tsx b/packages/core/src/components/carousel/carousel.tsx
@@ -61,6 +61,8 @@ export class AtomCarousel {
   videoIcons?: boolean = false
   @Prop({ mutable: true })
   navigationButtonSize?: 'medium' | 'xxlarge' = 'medium'
+  @Prop({ mutable: true })
+  watchSlidesProgress?: boolean = false
 
   componentDidLoad() {
     this.swiperEl = this.host.querySelector('swiper-container')
@@ -133,6 +135,7 @@ export class AtomCarousel {
           touch-start-prevent-default='false'
           center-insufficient-slides={this.centerInsufficientSlides}
           centered-slides={this.centeredSlides}
+          watch-slides-progress={this.watchSlidesProgress}
         ></swiper-container>
       </Host>
     )

diff --git a/packages/core/src/components/carousel/stories/carousel.args.ts b/packages/core/src/components/carousel/stories/carousel.args.ts
@@ -17,15 +17,13 @@ export const CarouselStoryArgs = {
     autoplay: {
       description: 'Set to `true` to enable carousel autoplay',
       defaultValue: { summary: false },
-
       table: {
         category: Category.PROPERTIES,
       },
     },
     autoplayDelay: {
       description: 'Delay between transitions (in ms)',
       defaultValue: { summary: 0 },
-
       table: {
         category: Category.PROPERTIES,
       },
@@ -34,7 +32,6 @@ export const CarouselStoryArgs = {
       description:
         'When enabled it center slides if the amount of slides less than slidesPerView',
       defaultValue: { summary: false },
-
       table: {
         category: Category.PROPERTIES,
       },
@@ -131,6 +128,14 @@ export const CarouselStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    watchSlidesProgress: {
+      description:
+        'Enable this feature to calculate each slides progress and visibility (slides in viewport will have additional visible class)',
+      defaultValue: { summary: false },
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     atomChange: {
       action: 'atomChange',
       description: 'Emitted when the visible item changes.',