feat: new prop to center corousel component (#356)

juntossomosmais · Dec 19, 2023 · e4e10a9 · e4e10a9
1 parent cdd4a91
commit e4e10a9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -53,6 +53,7 @@ export namespace Components {
     interface AtomCarousel {
         "autoplay"?: boolean;
         "autoplayDelay"?: AutoplayOptions['delay'];
+        "centerInsufficientSlides"?: boolean;
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;
@@ -496,6 +497,7 @@ declare namespace LocalJSX {
     interface AtomCarousel {
         "autoplay"?: boolean;
         "autoplayDelay"?: AutoplayOptions['delay'];
+        "centerInsufficientSlides"?: boolean;
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;

diff --git a/packages/core/src/components/carousel/carousel.spec.ts b/packages/core/src/components/carousel/carousel.spec.ts
@@ -25,7 +25,7 @@ describe('AtomCarousel', () => {
   it('should render component with passed props', async () => {
     const page = await newSpecPage({
       components: [AtomCarousel],
-      html: `<atom-carousel 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">
               <atom-carousel-item> Slide 1</atom-carousel-item>
               <atom-carousel-item> Slide 2</atom-carousel-item>
               </atom-carousel>`,
@@ -42,6 +42,7 @@ describe('AtomCarousel', () => {
     expect(swiperContainer?.outerHTML).not.toContain('navigation')
     expect(swiperContainer?.outerHTML).toContain('slides-per-view="2"')
     expect(swiperContainer?.outerHTML).toContain('slides-per-group="4"')
+    expect(swiperContainer?.outerHTML).toContain('center-insufficient-slides')
   })
 
   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
@@ -32,6 +32,8 @@ export class AtomCarousel {
   @Prop({ mutable: true })
   autoplayDelay?: AutoplayOptions['delay']
   @Prop({ mutable: true })
+  centerInsufficientSlides?: boolean = false
+  @Prop({ mutable: true })
   freeMode?: boolean
   @Prop({ mutable: true })
   loop?: boolean
@@ -112,6 +114,7 @@ export class AtomCarousel {
           autoplay-delay={this.autoplayDelay}
           injectStyles={this.injectStyles}
           touch-start-prevent-default='false'
+          center-insufficient-slides={this.centerInsufficientSlides}
         ></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
@@ -30,6 +30,15 @@ export const CarouselStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    centerInsufficientSlides: {
+      description:
+        'When enabled it center slides if the amount of slides less than slidesPerView',
+      defaultValue: { summary: false },
+
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     freeMode: {
       description: 'Set to `true` to enable free mode functionality',
       defaultValue: { summary: false },