fix(carousel): centralize the slide item content (#385)

Co-authored-by: Felipe Fialho <[email protected]>
juntossomosmais · Feb 27, 2024 · f3464d8 · f3464d8
1 parent 63c2aef
commit f3464d8
Show file tree

Hide file tree

Showing 17 changed files with 354 additions and 149 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "@ionic/core": "^7.7.3",
     "@stencil/core": "^4.12.3",
-    "swiper": "^11.0.3"
+    "swiper": "^11.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
@@ -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",

diff --git a/packages/core/src/components.d.ts b/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;

diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   line-height: 0;
 }

diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 :host {
   display: inline-block;
 }

diff --git a/packages/core/src/components/carousel/carousel-item/carousel-item.scss b/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;
+}
diff --git a/packages/core/src/components/carousel/carousel-item/carousel-item.tsx b/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 {

diff --git a/packages/core/src/components/carousel/carousel.scss b/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);
-}
+}
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 })
+  centeredSlides?: boolean = false
+  @Prop({ mutable: true })
   centerInsufficientSlides?: boolean = false
   @Prop({ mutable: true })
   freeMode?: boolean
@@ -57,12 +59,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 +109,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 +129,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>
     )

diff --git a/packages/core/src/components/carousel/stories/carousel.core.stories.tsx b/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'
+    ),
+}
diff --git a/packages/core/src/components/carousel/stories/style.css b/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;
 }
diff --git a/packages/core/src/components/chip/chip.scss b/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;

diff --git a/packages/core/src/components/grid/grid.scss b/packages/core/src/components/grid/grid.scss
@@ -1,3 +1,5 @@
+@import '~@atomium/scss-utils/index';
+
 .atom-grid {
   display: flex;
   flex-wrap: wrap;

diff --git a/packages/core/src/components/input/input.scss b/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);

diff --git a/packages/core/src/components/select/select.scss b/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);

diff --git a/packages/core/src/components/tag/tag.scss b/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;

diff --git a/packages/core/src/components/textarea/textarea.scss b/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);