diff --git a/.changeset/proud-beers-unite.md b/.changeset/proud-beers-unite.md new file mode 100644 index 0000000000..ec855e0f55 --- /dev/null +++ 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 new file mode 100644 index 0000000000..1ba7ba5715 --- /dev/null +++ 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 index a621c1d373..f2a16f2018 100644 --- 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 new file mode 100644 index 0000000000..56d413c8d6 --- /dev/null +++ b/packages/components/src/components/bal-carousel/test/bal-carousel.partner.html @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + +
+
+ Product + + + + + + + + + + + + + + + + + +
+
+ + + 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 index 7e4a3c91f0..50a76523c3 100644 --- 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 { - 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/packages/components/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx b/packages/components/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx index d5bf90179b..ac00981886 100644 --- a/packages/components/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx +++ b/packages/components/src/components/bal-date/bal-date-calendar/components/bal-date-calendar__list.tsx @@ -45,8 +45,13 @@ export const CalendarList: FunctionalComponent = ({ ...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} 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 index 13b1d6d4ca..463d1ab8d5 100644 --- 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 index fe2cfe3fa7..52471a8f0c 100644 --- 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') + }) })