fix(bal-date): Year and Month functionality off (#1298)

* Create PR for #1297 * fix(date): Disabled years or months in the selection list cannot be selected anymore * fix(carousel): movement for large controls variant on mobile is optimized * chore: format files --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Jan 22, 2024 · 5b133aa · 5b133aa
1 parent 48125d1
commit 5b133aa
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 14 deletions.
diff --git a/.changeset/proud-beers-unite.md b/.changeset/proud-beers-unite.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Disabled years or months in the selection list cannot be selected anymore.
diff --git a/.changeset/young-carrots-remain.md b/.changeset/young-carrots-remain.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Carousel movement for large controls variant on mobile is optimized.
diff --git a/packages/components/src/components/bal-carousel/bal-carousel.tsx b/packages/components/src/components/bal-carousel/bal-carousel.tsx
@@ -44,7 +44,7 @@ export class Carousel
   private carouselId = `bal-carousel-${CarouselIds++}`
 
   @State() isLastSlideVisible = true
-  @State() areControlsHidden = !balBreakpoints.isMobile
+  @State() isMobile = balBreakpoints.isMobile
   @State() language: BalLanguage = defaultConfig.language
 
   @Element() el!: HTMLElement
@@ -156,7 +156,7 @@ export class Carousel
 
   @ListenToBreakpoints()
   breakpointListener(breakpoints: BalBreakpoints): void {
-    this.areControlsHidden = !breakpoints.mobile
+    this.isMobile = breakpoints.mobile
     this.itemsChanged()
   }
 
@@ -260,7 +260,7 @@ export class Carousel
 
             let transformValue = noNeedForSlide ? 0 : isLastSlideVisible ? maxAmount : amount
 
-            if (!isFirst && !noNeedForSlide && (hasSmallControls || hasLargeControls)) {
+            if (!isFirst && !noNeedForSlide && (hasSmallControls || (hasLargeControls && !this.isMobile))) {
               transformValue = transformValue - (isLastSlideVisible ? 0 : hasLargeControls ? 56 : 48)
             }
 
@@ -463,7 +463,7 @@ export class Carousel
             isFirst={this.isFirst()}
             isLast={this.isLast()}
             inverted={this.inverted}
-            areControlsHidden={this.areControlsHidden}
+            areControlsHidden={!this.isMobile}
             leftControlTitle={leftControlTitle}
             rightControlTitle={rightControlTitle}
             onNextClick={() => this.onNextButtonClick()}

diff --git a/packages/components/src/components/bal-carousel/test/bal-carousel.partner.html b/packages/components/src/components/bal-carousel/test/bal-carousel.partner.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+    <link rel="stylesheet" href="/assets/baloise-design-system.css" />
+    <script type="module" src="/build/design-system-components.esm.js"></script>
+    <script nomodule src="/build/design-system-components.js"></script>
+  </head>
+
+  <body>
+    <bal-app>
+      <main class="container is-compact py-medium">
+        <section class="my-normal">
+          <bal-heading>Product</bal-heading>
+          <bal-carousel interface="product" steps="2" items-per-view="auto" controls="large" border>
+            <bal-carousel-item
+              color="green"
+              label="0 Auto"
+              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item
+              color="yellow"
+              label="1 Haushalt"
+              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item
+              color="purple"
+              label="2 Hypothek"
+              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item color="red" label="3 Pensionsplanung" src="/assets/images/brand/bars.svg">
+            </bal-carousel-item>
+            <bal-carousel-item color="green" label="4 Anlegen" src="/assets/images/brand/plant.svg"></bal-carousel-item>
+            <bal-carousel-item
+              color="yellow"
+              label="5 Finanzplanung Finanzplanung Finanzplanung Finanzplanung Finanzplanung"
+              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+            ></bal-carousel-item>
+            <bal-carousel-item
+              color="purple"
+              label="6 E-Banking"
+              src="https://design.baloise.dev/assets/puzzle-green-d84dff8b.svg"
+            >
+            </bal-carousel-item>
+            <bal-carousel-item color="red" label="7 Sparen" src="/assets/images/brand/pig.svg"></bal-carousel-item>
+            <bal-carousel-item color="green" label="8 YouGo" src="/assets/images/brand/diamond.svg"></bal-carousel-item>
+            <bal-carousel-item color="yellow" label="9 Alle Gegenstände" src="/assets/images/brand/items.svg">
+            </bal-carousel-item>
+            <bal-carousel-item color="purple" label="10 Motorrad & Roller" src="/assets/images/brand/roller.svg">
+            </bal-carousel-item>
+          </bal-carousel>
+        </section>
+      </main>
+    </bal-app>
+  </body>
+</html>
diff --git a/packages/components/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx b/packages/components/src/components/bal-date/bal-date-calendar/bal-date-calendar.tsx
@@ -86,6 +86,7 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
         this.generateGridByDate(date)
         this.selectedDate = date.toISODate()
       }
+      this.updateSelections()
     }
   }
 
@@ -122,8 +123,7 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
   @Watch('min')
   @Watch('max')
   rangePropChanged() {
-    this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max)
-    this.years = generateYears(this.year, this.minYear, this.maxYear)
+    this.updateSelections()
     this.generateGrid()
   }
 
@@ -140,7 +140,7 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
   @Watch('minYearProp')
   @Watch('maxYearProp')
   yearRangePropChanged() {
-    this.years = generateYears(this.year, this.minYear, this.maxYear)
+    this.updateSelections()
   }
 
   /**
@@ -168,11 +168,11 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
   @Method()
   @ListenToConfig()
   async configChanged(state: BalConfigState): Promise<void> {
-    this.years = generateYears(this.year, this.minYear, this.maxYear)
-    this.months = generateMonths(state.language, this.year, this.selectedDate, this.min, this.max)
-    this.weekdays = generateWeekDays(state.language)
-    this.monthFullNames = BalDate.infoMonths({ format: 'long', locale: state.language })
     this.language = state.language
+    this.monthFullNames = BalDate.infoMonths({ format: 'long', locale: this.language })
+    this.weekdays = generateWeekDays(this.language)
+
+    this.updateSelections()
   }
 
   @ListenToSwipe({ mobileOnly: true })
@@ -226,6 +226,11 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
    * ------------------------------------------------------
    */
 
+  private updateSelections() {
+    this.years = generateYears(this.year, this.minYear, this.maxYear)
+    this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max)
+  }
+
   private generateGrid() {
     const date = BalDate.fromISO(this.value)
     if (date.isValid) {
@@ -298,7 +303,7 @@ export class DateCalendar implements ComponentInterface, Loggable, BalConfigObse
   }
 
   private onClickSelectMonthAndYear = async () => {
-    this.months = generateMonths(this.language, this.year, this.selectedDate, this.min, this.max)
+    this.updateSelections()
 
     if (this.isCalendarVisible === true) {
       this.isCalendarVisible = false

diff --git a/...mponents/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx b/...mponents/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx
@@ -45,8 +45,13 @@ export const CalendarList: FunctionalComponent<CalendarListProps> = ({
               ...blockBodyList.element('item').modifier('selected').class(item.selected),
               ...blockBodyList.element('item').modifier('disabled').class(item.disabled),
             }}
+            disabled={item.disabled}
             tabIndex={-1}
-            onClick={() => onSelect(item)}
+            onClick={() => {
+              if (!item.disabled) {
+                onSelect(item)
+              }
+            }}
           >
             {item.label}
           </button>

diff --git a/packages/components/src/components/docs/bal-doc-app/bal-doc-app.tsx b/packages/components/src/components/docs/bal-doc-app/bal-doc-app.tsx
@@ -44,7 +44,9 @@ export class DocApp implements ComponentInterface {
       custom: this.logCustom,
     }
     if (balBrowser.hasWindow) {
-      ;(window as any).BaloiseDesignSystem.config.logger = logConfig
+      if (this.logComponents) {
+        ;(window as any).BaloiseDesignSystem.config.logger = logConfig
+      }
       if (this.region) {
         ;(window as any).BaloiseDesignSystem.config.region = this.region
       }

diff --git a/test/cypress/component/bal-date-calendar.cy.ts b/test/cypress/component/bal-date-calendar.cy.ts
@@ -76,4 +76,24 @@ describe('BalDateCalendar Component', () => {
     cy.get('@balChange').should('have.been.calledOnce')
     cy.get('@balChange').shouldHaveEventDetail('2022-12-11')
   })
+
+  it('check if month out of range is disabled', () => {
+    onBalChangeSpy = cy.spy().as('balChange')
+    cy.mount(BalDateCalendar, {
+      props: {
+        defaultDate: '2024-01-01',
+        min: '2023-12-23',
+        max: '2024-01-23',
+        onBalChange: onBalChangeSpy,
+      },
+    })
+
+    cy.waitForDesignSystem()
+
+    cy.waitForDesignSystem()
+
+    cy.getByRole('button', { name: 'Januar 2024' }).click()
+    cy.getByRole('button', { name: '2023' }).click()
+    cy.getByRole('button', { name: 'Februar' }).should('be.disabled')
+  })
 })