Implement VAR for C24_WMDE_Desktop_DE_22

- Var has a different copy
- Adjust the banner height, so that both the banners have same height
- Make slider breakpoint at larger width
- Adjust the tests accordingly
Ticket: https://phabricator.wikimedia.org/T382301

banners/desktop/C24_WMDE_Desktop_DE_22/components/MainBanner.vue

@@ -34,7 +34,7 @@ const emit = defineEmits( [ 'formInteraction' ] );
 const slideShowStopped = ref<boolean>( false );
 const slideshowShouldPlay = computed( () => props.bannerState === BannerStates.Visible && !slideShowStopped.value );
 
-const onLargeScreen = useDisplaySwitch( 1300 );
+const onLargeScreen = useDisplaySwitch( 1550 );
 
 const onFormInteraction = (): void => {
 	slideShowStopped.value = true;

banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerSlidesVar.vue

@@ -14,13 +14,14 @@
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 2">
 		<p>
-			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Hat Wikipedia
-			Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+			Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Wenn
+			alle, die für Wikipedia dankbar sind, spenden, wäre unser Ziel in wenigen Stunden erreicht.
 		</p>
 	</KeenSliderSlide>
 	<KeenSliderSlide :is-current="currentSlide === 3">
 		<p>
-			Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
+			Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt? Dann entscheiden Sie sich,
+			eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück. Vielen Dank!
 		</p>
 	</KeenSliderSlide>
 </template>

banners/desktop/C24_WMDE_Desktop_DE_22/content/BannerTextVar.vue

@@ -3,14 +3,13 @@
 		<div>
 			<p>
 				Vielleicht kommen wir gerade ungelegen, aber dennoch: Klicken Sie jetzt bitte nicht weg! Am heutigen
-				{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu unterstützen.
-				{{campaignDaySentence}}
-				<AnimatedText :content="visitorsVsDonorsSentence"/>
-				Die meisten Menschen spenden, weil sie Wikipedia nützlich finden.
-				Die durchschnittliche Spende beträgt {{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter.
-				Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
-				Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein, und geben Sie etwas zurück.
-				Vielen Dank!
+				{{ currentDayName }}, den {{ currentDate }}, bitten wir Sie, die Unabhängigkeit von Wikipedia zu
+				unterstützen. {{ campaignDaySentence }} <AnimatedText :content="visitorsVsDonorsSentence"/> Die meisten
+				Menschen spenden, weil sie Wikipedia nützlich finden. Die durchschnittliche Spende beträgt
+				{{ averageDonation }}, doch bereits 5&nbsp;€ helfen uns weiter. Wenn alle, die für Wikipedia dankbar
+				sind, spenden, wäre unser Ziel in wenigen Stunden erreicht. Hat Wikipedia Ihnen in diesem Jahr Wissen
+				im Wert einer Tasse Kaffee geschenkt? Dann entscheiden Sie sich, eine der seltenen Ausnahmen zu sein,
+				und geben Sie etwas zurück. Vielen Dank!
 			</p>
 		</div>
 	</div>

banners/desktop/C24_WMDE_Desktop_DE_22/styles/styles.scss

@@ -12,7 +12,7 @@
 @use 'Banner';
 @use 'src/themes/UseOfFunds/UseOfFunds';
 @use 'MainBanner' with (
-	$banner-height: 357px,
+	$banner-height: 369px,
 	$form-width: 300px
 );
 @use 'src/themes/Treedip/defaults';

test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerCtrl.spec.ts

@@ -98,14 +98,14 @@ describe( 'BannerCtrl.vue', () => {
 			[ 'expectShowsSlideShowOnSmallSizes' ],
 			[ 'expectShowsMessageOnLargeSizes' ]
 		] )( '%s', async ( testName: string ) => {
-			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1550 );
 		} );
 
 		test.each( [
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
-		] )( '%s', async ( testName: string ) => {
-			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage', 1551 ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow', 1550 ]
+		] )( '%s', async ( testName: string, width: number ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper, width );
 		} );
 
 		test.each( [

test/banners/desktop/C24_WMDE_Desktop_DE_22/components/BannerVar.spec.ts

@@ -98,14 +98,14 @@ describe( 'BannerVar.vue', () => {
 			[ 'expectShowsSlideShowOnSmallSizes' ],
 			[ 'expectShowsMessageOnLargeSizes' ]
 		] )( '%s', async ( testName: string ) => {
-			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1300 );
+			await bannerContentDisplaySwitchFeatures[ testName ]( getWrapper, 1550 );
 		} );
 
 		test.each( [
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage' ],
-			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow' ]
-		] )( '%s', async ( testName: string ) => {
-			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper );
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInMessage', 1551 ],
+			[ 'expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow', 1550 ]
+		] )( '%s', async ( testName: string, width: number ) => {
+			await bannerContentAnimatedTextFeatures[ testName ]( getWrapper, width );
 		} );
 
 		test.each( [

test/features/BannerContent.ts

@@ -39,8 +39,9 @@ const expectHidesAnimatedVisitorsVsDonorsSentenceInMessage = async ( getWrapper:
 
 	expect( wrapper.find( '.wmde-banner-message .wmde-banner-text-animated-highlight' ).exists() ).toBeFalsy();
 };
-const expectShowsAnimatedVisitorsVsDonorsSentenceInMessage = async ( getWrapper: ( dynamicContent: DynamicContent ) => VueWrapper<any> ): Promise<any> => {
-	Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: 1301 } );
+const expectShowsAnimatedVisitorsVsDonorsSentenceInMessage = async ( getWrapper: ( dynamicContent: DynamicContent ) =>
+	VueWrapper<any>, minWidthForLargeScreen: number = 1301 ): Promise<any> => {
+	Object.defineProperty( window, 'innerWidth', { writable: true, configurable: true, value: minWidthForLargeScreen } );
 	const dynamicContent = newDynamicContent();
 	dynamicContent.visitorsVsDonorsSentence = 'Visitors vs donors sentence';
 	const wrapper = getWrapper( dynamicContent );
@@ -222,12 +223,13 @@ export const bannerContentAverageDonationFeatures: Record<string, ( getWrapper:
 	expectShowsAverageDonationInSlideshow
 };
 
-export const bannerContentAnimatedTextFeatures: Record<string, ( getWrapper: () => VueWrapper<any> ) => Promise<any>> = {
-	expectHidesAnimatedVisitorsVsDonorsSentenceInMessage,
-	expectShowsAnimatedVisitorsVsDonorsSentenceInMessage,
-	expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow,
-	expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow
-};
+export const bannerContentAnimatedTextFeatures: Record<string, ( getWrapper: () =>
+	VueWrapper<any>, minWidthForLargeScreen: number|void ) => Promise<any>> = {
+		expectHidesAnimatedVisitorsVsDonorsSentenceInMessage,
+		expectShowsAnimatedVisitorsVsDonorsSentenceInMessage,
+		expectHidesAnimatedVisitorsVsDonorsSentenceInSlideShow,
+		expectShowsAnimatedVisitorsVsDonorsSentenceInSlideShow
+	};
 
 export const bannerContentDateAndTimeFeatures: Record<string, ( getWrapper: () => VueWrapper<any> ) => Promise<any>> = {
 	expectShowsLiveDateAndTimeInMessage,