feat(carousel): add controls small & large

packages/components/src/components/bal-carousel/bal-carousel.sass

@@ -1,9 +1,6 @@
 @import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import './bal-carousel.vars'
 
-section
-  background: pink
-
 .bal-carousel
   display: block
   position: relative
@@ -34,7 +31,7 @@ section
 .bal-carousel__item
   text-align: center
   font-size: 18px
-  background: lime
+  min-height: 2rem
   display: flex
   justify-content: center
   align-items: center
@@ -85,10 +82,14 @@ section
         padding-right: 2.5rem
     .bal-carousel__item
       width: calc(100% - 2rem)
+      padding-top: 1rem
+      padding-bottom: 1rem
       padding-left: 1rem
       padding-right: 1rem
       +tablet
         width: calc(100% - 5rem)
+        padding-top: 2.5rem
+        padding-bottom: 2.5rem
         padding-left: 2.5rem
         padding-right: 2.5rem
 
@@ -99,7 +100,6 @@ section
     top: var(--bal-carousel-sticky-top)
 
 .bal-carousel__controls--tabs
-  padding-bottom: 2rem
   .bal-card
     padding: 0
   .bal-card-content
@@ -224,3 +224,50 @@ section
     overflow: hidden
     line-height: 1.15rem
     word-break: break-word
+
+.bal-carousel--controls-large
+  .bal-carousel__inner
+    +tablet
+      margin-left: 2rem
+      margin-right: 2rem
+
+.bal-carousel__controls--large
+  +mobile
+    display: flex
+    justify-content: center
+    width: 100%
+    gap: 2rem
+    margin-top: 1rem
+
+  +tablet
+    .bal-carousel__controls__button
+      position: absolute
+      top: calc(50% - 24px)
+      z-index: 7
+    .bal-carousel__controls__button--left
+      left: 0
+    .bal-carousel__controls__button--right
+      right: 0
+
+.bal-carousel__controls--small
+  .bal-carousel__controls__button
+    position: absolute
+    top: calc(50% - 16px)
+    z-index: 7
+  .bal-carousel__controls__button--left
+    left: 0
+  .bal-carousel__controls__button--right
+    right: 0
+  .bal-carousel__controls__button--hidden
+    display: none !important
+    visibility: hidden !important
+
+.bal-carousel--controls-small
+  .bal-carousel__inner--shadow-left
+    margin-left: 2rem
+  .bal-carousel__inner--shadow-right
+    margin-right: 2rem
+  .bal-carousel__inner--shadow-left::before
+    left: -1rem
+  .bal-carousel__inner--shadow-right::after
+    right: -1rem

packages/components/src/components/bal-carousel/bal-carousel.tsx

@@ -19,6 +19,8 @@ import { BalSlide, ControlItem } from './bal-carousel.type'
 import { Events } from '../../types'
 import { TabControl } from './controls/tab-control'
 import { DotControl } from './controls/dot-control'
+import { LargeControl } from './controls/large-control'
+import { SmallControl } from './controls/small-control'
 
 @Component({
   tag: 'bal-carousel',
@@ -83,7 +85,6 @@ export class Carousel implements ComponentInterface {
 
   @Method()
   async previous(steps = this.steps): Promise<void> {
-    console.log('previous')
     let previousValue = this.value - steps
     if (previousValue < 0) {
       previousValue = 0
@@ -106,7 +107,6 @@ export class Carousel implements ComponentInterface {
 
   @Method()
   async next(steps = this.steps): Promise<void> {
-    console.log('next')
     const items = this.getAllItemElements()
     const length = items.length
     let nextValue = this.value + steps
@@ -180,7 +180,6 @@ export class Carousel implements ComponentInterface {
   }
 
   private async itemsChanged() {
-    console.log('itemsChanged')
     const activeSlide = await this.getSlide(this.value)
 
     if (activeSlide) {
@@ -214,6 +213,14 @@ export class Carousel implements ComponentInterface {
     return this.hasShadow() && (!this.isLastSlideVisible || this.interface === 'card')
   }
 
+  private isFirst(): boolean {
+    return this.value === 0
+  }
+
+  private isLast(): boolean {
+    return this.isLastSlideVisible
+  }
+
   /**
    * EVENT BINDING
    * ---------------------------
@@ -244,11 +251,9 @@ export class Carousel implements ComponentInterface {
    */
 
   render() {
-    console.log('render')
     const block = BEM.block('carousel')
     const inner = block.element('inner')
     const container = inner.element('container')
-    const controls = block.element('controls')
 
     const controlItems = this.getAllControlItems()
 
@@ -301,13 +306,27 @@ export class Carousel implements ComponentInterface {
           ''
         )}
 
-        <div class={{ ...controls.class() }}>
-          <bal-button-group>
-            <bal-button onClick={this.onPreviousButtonClick}>Previous</bal-button>
-            <bal-button onClick={this.onNextButtonClick}>Next</bal-button>
-          </bal-button-group>
-        </div>
-        {this.value}
+        {this.controls === 'large' ? (
+          <LargeControl
+            isFirst={this.isFirst()}
+            isLast={this.isLast()}
+            onNextClick={() => this.onNextButtonClick()}
+            onPreviousClick={() => this.onPreviousButtonClick()}
+          ></LargeControl>
+        ) : (
+          ''
+        )}
+
+        {this.controls === 'small' ? (
+          <SmallControl
+            isFirst={this.isFirst()}
+            isLast={this.isLast()}
+            onNextClick={() => this.onNextButtonClick()}
+            onPreviousClick={() => this.onPreviousButtonClick()}
+          ></SmallControl>
+        ) : (
+          ''
+        )}
       </Host>
     )
   }

packages/components/src/components/bal-carousel/controls/large-control.tsx

@@ -0,0 +1,46 @@
+import { FunctionalComponent, h } from '@stencil/core'
+import { BEM } from '../../../utils/bem'
+
+export interface LargeControlProps {
+  isFirst: boolean
+  isLast: boolean
+  onPreviousClick: () => void
+  onNextClick: () => void
+}
+
+export const LargeControl: FunctionalComponent<LargeControlProps> = ({
+  isFirst,
+  isLast,
+  onNextClick,
+  onPreviousClick,
+}) => {
+  const block = BEM.block('carousel')
+  const controls = block.element('controls')
+  const button = controls.element('button')
+
+  return (
+    <div
+      class={{
+        ...controls.class(),
+        ...controls.modifier('large').class(),
+      }}
+    >
+      <bal-button
+        class={{ ...button.class(), ...button.modifier('left').class() }}
+        square
+        icon="nav-go-left"
+        rounded
+        onClick={() => onPreviousClick()}
+        disabled={isFirst}
+      ></bal-button>
+      <bal-button
+        class={{ ...button.class(), ...button.modifier('right').class() }}
+        square
+        icon="nav-go-right"
+        rounded
+        onClick={() => onNextClick()}
+        disabled={isLast}
+      ></bal-button>
+    </div>
+  )
+}

packages/components/src/components/bal-carousel/controls/small-control.tsx

@@ -0,0 +1,56 @@
+import { FunctionalComponent, h } from '@stencil/core'
+import { BEM } from '../../../utils/bem'
+
+export interface SmallControlProps {
+  isFirst: boolean
+  isLast: boolean
+  onPreviousClick: () => void
+  onNextClick: () => void
+}
+
+export const SmallControl: FunctionalComponent<SmallControlProps> = ({
+  isFirst,
+  isLast,
+  onNextClick,
+  onPreviousClick,
+}) => {
+  const block = BEM.block('carousel')
+  const controls = block.element('controls')
+  const button = controls.element('button')
+
+  return (
+    <div
+      class={{
+        ...controls.class(),
+        ...controls.modifier('small').class(),
+      }}
+    >
+      <bal-button
+        class={{
+          ...button.class(),
+          ...button.modifier('left').class(),
+          ...button.modifier('hidden').class(isFirst),
+        }}
+        square
+        size="small"
+        icon="nav-go-left"
+        rounded
+        onClick={() => onPreviousClick()}
+        disabled={isFirst}
+      ></bal-button>
+      <bal-button
+        class={{
+          ...button.class(),
+          ...button.modifier('right').class(),
+          ...button.modifier('hidden').class(isLast),
+        }}
+        square
+        size="small"
+        icon="nav-go-right"
+        rounded
+        onClick={() => onNextClick()}
+        disabled={isLast}
+      ></bal-button>
+    </div>
+  )
+}