fix(carousel): centralize the slide item content

package.json

@@ -84,7 +84,7 @@
     "postcss-scss": "^4.0.6",
     "prettier": "3.0.0",
     "prop-types": "^15.8.1",
-    "puppeteer": "^21.5.2",
+    "puppeteer": "^22.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.26.3",

packages/core/src/components.d.ts

@@ -54,9 +54,11 @@ export namespace Components {
         "autoplay"?: boolean;
         "autoplayDelay"?: AutoplayOptions['delay'];
         "centerInsufficientSlides"?: boolean;
+        "centeredSlides"?: boolean;
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;
+        "navigationButtonSize"?: 'medium' | 'xxlarge';
         "pagination"?: boolean;
         "paginationClickable"?: boolean;
         "paginationType"?: PaginationOptions['type'] | 'thumbnails';
@@ -498,9 +500,11 @@ declare namespace LocalJSX {
         "autoplay"?: boolean;
         "autoplayDelay"?: AutoplayOptions['delay'];
         "centerInsufficientSlides"?: boolean;
+        "centeredSlides"?: boolean;
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;
+        "navigationButtonSize"?: 'medium' | 'xxlarge';
         "onAtomChange"?: (event: AtomCarouselCustomEvent<string>) => void;
         "onAtomClickNext"?: (event: AtomCarouselCustomEvent<string>) => void;
         "onAtomClickPrev"?: (event: AtomCarouselCustomEvent<string>) => void;

packages/core/src/components/badge/badge.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   line-height: 0;
 }

packages/core/src/components/button/button.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   display: inline-block;
 }

packages/core/src/components/carousel/carousel-item/carousel-item.scss

@@ -0,0 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
+.atom-carousel-item {
+  width: fit-content;
+}

packages/core/src/components/carousel/carousel-item/carousel-item.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, Host, h } from '@stencil/core'
 @Component({
   tag: 'atom-carousel-item',
+  styleUrl: 'carousel-item.scss',
   shadow: false,
 })
 export class AtomCarouselItem {

packages/core/src/components/carousel/carousel.scss

@@ -1,24 +1,22 @@
+@import '~@atomium/scss-utils/index';
 @import '~swiper/swiper-bundle.css';
 @import '~swiper/swiper.css';
 
 ::part(button-prev),
 ::part(button-next) {
-  background: var(--color-neutral-white);
-  border: 1px solid transparent;
+  background: var(--color-brand-secondary-regular);
   border-radius: var(--border-radius-full);
   box-shadow: var(--elevation-3);
-  color: var(--color-brand-secondary-dark-1);
-  height: var(--spacing-medium);
+  color: var(--color-neutral-white);
   padding: var(--spacing-small);
   transition:
     border var(--transition-duration),
     box-shadow var(--transition-duration),
     opacity var(--transition-duration);
-  width: var(--spacing-medium);
   will-change: border, box-shadow;
 
   &:hover {
-    border-color: var(--color-brand-secondary-dark-1);
+    background: var(--color-brand-secondary-light-1);
   }
 }
 
@@ -64,4 +62,4 @@
   height: var(--spacing-giant);
   object-fit: contain;
   width: var(--spacing-giant);
-}
+}

packages/core/src/components/carousel/carousel.tsx

@@ -7,8 +7,9 @@ import {
   Prop,
   h,
 } from '@stencil/core'
-import 'swiper/swiper-element-bundle.js'
+import { register } from 'swiper/element/bundle'
 import { AutoplayOptions, PaginationOptions, Swiper } from 'swiper/types'
+register()
 
 import { renderThumbs } from './utils/render-thumbs'
 
@@ -32,6 +33,8 @@ export class AtomCarousel {
   @Prop({ mutable: true })
   autoplayDelay?: AutoplayOptions['delay']
   @Prop({ mutable: true })
+  centeredSlides?: boolean = false
+  @Prop({ mutable: true })
   centerInsufficientSlides?: boolean = false
   @Prop({ mutable: true })
   freeMode?: boolean
@@ -57,12 +60,8 @@ export class AtomCarousel {
   thumbnailImages?: string = ''
   @Prop({ mutable: true })
   videoIcons?: boolean = false
-
-  // If you need more info please read the ADR 0012 at Caveat sections
-  private injectStyles = [
-    '.swiper-button-disabled { opacity: 0 !important}',
-    '.swiper-pagination-custom { display: flex; justify-content: center; column-gap: var(--spacing-base); } ',
-  ]
+  @Prop({ mutable: true })
+  navigationButtonSize?: 'medium' | 'xxlarge' = 'medium'
 
   componentDidLoad() {
     this.swiperEl = this.host.querySelector('swiper-container')
@@ -111,6 +110,13 @@ export class AtomCarousel {
     Object.assign(this.swiperEl, params)
   }
   render() {
+    const injectStyles = [
+      '.swiper-button-disabled { opacity: 0 !important}',
+      '.swiper-pagination-custom { display: flex; justify-content: center; column-gap: var(--spacing-base); } ',
+      `.swiper-button-next { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`,
+      `.swiper-button-prev { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`,
+    ]
+
     return (
       <Host>
         <swiper-container
@@ -124,9 +130,10 @@ export class AtomCarousel {
           free-mode={this.freeMode}
           autoplay={this.autoplay}
           autoplay-delay={this.autoplayDelay}
-          injectStyles={this.injectStyles}
+          injectStyles={injectStyles}
           touch-start-prevent-default='false'
           center-insufficient-slides={this.centerInsufficientSlides}
+          centered-slides={this.centeredSlides}
         ></swiper-container>
       </Host>
     )

packages/core/src/components/carousel/stories/carousel.core.stories.tsx

@@ -37,23 +37,32 @@ const createComponent = (args, itemClass: string) => {
       : ''
   }
 
-
+  ${
+    args.navigationButtonSize !== undefined
+      ? `navigationButtonSize="${args.navigationButtonSize}"`
+      : ''
+  }
   ${args.loop !== undefined ? `loop="${args.loop}"` : ''}
   ${args.autoplay !== undefined ? `autoplay="${args.autoplay}"` : ''}
-  ${args.speed !== undefined ? `speed="${args.speed}"` : ''} >
-    <atom-carousel-item ><div class="${itemClass}">Slide 1</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 2</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 3</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 4</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 5</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 6</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 7</div></atom-carousel-item>
-      <atom-carousel-item><div class="${itemClass}">Slide 8</div></atom-carousel-item>
-      <atom-carousel-item lazy="true">
-        <div class="${itemClass}">Slide 9
-          <img loading="lazy" width="100px" src="https://user-images.githubusercontent.com/3603793/257943112-fb180815-7bd7-45f7-ad14-bd1677079931.png"/>
-        </div>
-      </atom-carousel-item>
+  ${args.speed !== undefined ? `speed="${args.speed}"` : ''} 
+  ${
+    args.centeredSlides !== undefined
+      ? `centered-slides="${args.centeredSlides}"`
+      : ''
+  } >
+    <atom-carousel-item><div class="${itemClass}">Slide 1</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 2</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 3</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 4</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 5</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 6</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 7</div></atom-carousel-item>
+    <atom-carousel-item><div class="${itemClass}">Slide 8</div></atom-carousel-item>
+    <atom-carousel-item lazy="true">
+      <div class="${itemClass}">Slide 9
+        <img loading="lazy" width="100px" src="https://user-images.githubusercontent.com/3603793/257943112-fb180815-7bd7-45f7-ad14-bd1677079931.png"/>
+      </div>
+    </atom-carousel-item>
   </atom-carousel>
   <script>
   const  atomCarousel${carouselStoryId} = document.querySelector('atom-carousel#carousel-${carouselStoryId}');
@@ -77,9 +86,9 @@ export const Default: StoryObj = {
     createComponent(
       {
         pagination: true,
-        slidesPerView: 3,
         spaceBetween: 40,
         paginationClickable: true,
+        centeredSlides: true,
       },
       'item-default'
     ),
@@ -115,3 +124,18 @@ export const PaginationType: StoryObj = {
       'item-pag-type'
     ),
 }
+
+export const CenteredSlide: StoryObj = {
+  render: () =>
+    createComponent(
+      {
+        pagination: true,
+        slidesPerView: 'auto',
+        slidesPerGroup: 'auto',
+        spaceBetween: 20,
+        paginationClickable: true,
+        centeredSlides: true,
+      },
+      'item-smaller'
+    ),
+}

packages/core/src/components/carousel/stories/style.css

@@ -4,7 +4,7 @@
   display: flex;
   height: 400px;
   justify-content: center;
-  width: 100% !important;
+  width: 100%;
 }
 
 .item-loop {
@@ -13,7 +13,7 @@
   display: flex;
   height: 400px;
   justify-content: center;
-  width: 100% !important;
+  width: 100%;
 }
 
 .item-pag-type {
@@ -22,5 +22,14 @@
   display: flex;
   height: 400px;
   justify-content: center;
-  width: 100% !important;
+  width: 100%;
+}
+
+.item-smaller {
+  align-items: center;
+  background: coral;
+  display: flex;
+  height: 400px;
+  justify-content: center;
+  width: 400px;
 }

packages/core/src/components/chip/chip.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   --icon-size: var(--spacing-base);
   display: inline-flex;

packages/core/src/components/grid/grid.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 .atom-grid {
   display: flex;
   flex-wrap: wrap;

packages/core/src/components/input/input.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   --atom-icon-color: var(--color-neutral-regular);
   --atom-icon-grid: var(--spacing-xxxxlarge);

packages/core/src/components/select/select.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   --atom-icon-color: var(--color-neutral-regular);
   --atom-icon-grid: var(--spacing-xxxxlarge);

packages/core/src/components/tag/tag.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   --icon-size: var(--spacing-small);
   --atom-tag-height: 10px;

packages/core/src/components/textarea/textarea.scss

@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   --atom-icon-color: var(--color-neutral-regular);
   --atom-icon-grid: var(--spacing-xxxxlarge);