feat(carousel): add space and improve full-height

baloise · Jan 31, 2025 · c32fec0 · c32fec0
1 parent 3e58a06
commit c32fec0
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 4 deletions.
diff --git a/.changeset/fuzzy-impalas-smile.md b/.changeset/fuzzy-impalas-smile.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**carousel**: full-height option makes all item the same height
diff --git a/.changeset/wicked-wombats-pump.md b/.changeset/wicked-wombats-pump.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**carousel**: add space prop to define the gap between items
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -419,6 +419,10 @@ export namespace Components {
           * If `true` vertical scrolling on mobile is enabled.
          */
         "scrollY": boolean;
+        /**
+          * Defines the layout of the navigation controls.
+         */
+        "space": 'normal' | 'medium' | 'none';
         /**
           * When how many slides are moved when going forward or backward.
          */
@@ -5511,6 +5515,10 @@ declare namespace LocalJSX {
           * If `true` vertical scrolling on mobile is enabled.
          */
         "scrollY"?: boolean;
+        /**
+          * Defines the layout of the navigation controls.
+         */
+        "space"?: 'normal' | 'medium' | 'none';
         /**
           * When how many slides are moved when going forward or backward.
          */

diff --git a/packages/core/src/components/bal-carousel/bal-carousel.sass b/packages/core/src/components/bal-carousel/bal-carousel.sass
@@ -5,6 +5,9 @@
 .bal-carousel--full-height
   height: 100%
 
+.bal-carousel--full-height .bal-carousel__item
+  height: auto
+
 .bal-carousel__inner--full-height
   height: 100%
 

diff --git a/packages/core/src/components/bal-carousel/bal-carousel.tsx b/packages/core/src/components/bal-carousel/bal-carousel.tsx
@@ -94,6 +94,16 @@ export class Carousel
     this.swiper.controls = this.controls
   }
 
+  /**
+   * Defines the layout of the navigation controls.
+   */
+  @Prop() space: 'normal' | 'medium' | 'none' = 'none'
+
+  @Watch('space')
+  onSpaceChange() {
+    this.swiper.gapSpace = this.space
+  }
+
   /**
    * @deprecated
    * Defines the role of the carousel.
@@ -128,7 +138,7 @@ export class Carousel
 
   @Watch('interface')
   onInterFaceChange() {
-    this.swiper.gapSize = this.interface === 'product' ? 16 : 0
+    this.swiper.gapSpace = this.interface === 'product' ? 'normal' : this.space
   }
 
   /**
@@ -159,9 +169,10 @@ export class Carousel
   connectedCallback(): void {
     this.swiper.connectedCallback(this)
     this.onControlsChange()
-    this.onInterFaceChange()
     this.onItemsPerViewChange()
     this.onStepsChange()
+    this.onSpaceChange()
+    this.onInterFaceChange()
     this.onValueChange()
   }
 

diff --git a/packages/core/src/utils/swiper/swiper.sass b/packages/core/src/utils/swiper/swiper.sass
@@ -46,6 +46,13 @@
   transition-duration: 0ms
   transform: translate3d(0px,0px,0px)
 
+.bal-swiper__container--gap-none
+  gap: 0
+.bal-swiper__container--gap-normal
+  gap: 1rem
+.bal-swiper__container--gap-medium
+  gap: 1.5rem
+
 // Controls
 // --------------------------------------------------
 

diff --git a/packages/core/src/utils/swiper/swiper.type.ts b/packages/core/src/utils/swiper/swiper.type.ts
@@ -23,6 +23,7 @@ export interface SwiperSlide {
 }
 
 export type SwiperControl = 'small' | 'large' | 'dots' | 'none' | 'tabs'
+export type SwiperGapSpace = 'normal' | 'medium' | 'none'
 export type SwiperItemsPerView = 'auto' | 1 | 2 | 3 | 4
 
 export type SwiperInterface = {

diff --git a/packages/core/src/utils/swiper/swiper.util.tsx b/packages/core/src/utils/swiper/swiper.util.tsx
@@ -9,6 +9,7 @@ import type {
   SwiperChildItem,
   SwiperControl,
   SwiperControlItem,
+  SwiperGapSpace,
   SwiperInterface,
   SwiperItemsPerView,
   SwiperSlide,
@@ -31,12 +32,12 @@ export class SwiperUtil {
   borderEl?: HTMLElement
 
   index = 0
-  gapSize = 0
   steps = 1
   noNeedForControls = true
   isLastSlideVisible = false
   itemsPerView: SwiperItemsPerView = 1
   controls: SwiperControl = 'none'
+  gapSpace: SwiperGapSpace = 'none'
 
   /**
    * LIFECYCLE
@@ -185,6 +186,7 @@ export class SwiperUtil {
 
   public cssSwiperContainer = () => ({
     ...this.cssBlock.element('container').class(this.active),
+    ...this.cssBlock.element('container').modifier(`gap-${this.gapSpace}`).class(this.active),
   })
 
   /**
@@ -350,7 +352,12 @@ export class SwiperUtil {
     const index = slideIndex === undefined ? this.lastIndex() : slideIndex
 
     if (items.length > index && index >= 0) {
-      const gapSize = this.gapSize
+      const gaps = {
+        none: 0,
+        normal: 16,
+        medium: 24,
+      }
+      const gapSize = gaps[this.gapSpace]
 
       const transformNext = items
         .filter((_, n) => n < index + 1)