Implement VAR for C24_WMDE_Desktop_DE_06

- new footer (SmallPrintFooter) component that has it's own colors+layout
- fix chevron color being too dark (->white again)
- add title attributes to links with explanations

https://phabricator.wikimedia.org/T375599

banners/desktop/C24_WMDE_Desktop_DE_06/banner_var.ts

@@ -26,6 +26,7 @@ import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 // Channel specific form setup
 import { createFormItems } from './form_items';
 import { createFormActions } from '@src/createFormActions';
+import { createFAQPageURL } from '@src/createFAQPageURL';
 
 const date = new Date();
 const localeFactory = new LocaleFactoryDe();
@@ -45,7 +46,8 @@ const app = createVueApp( BannerConductor, {
 	bannerProps: {
 		useOfFundsContent: localeFactory.getUseOfFundsLoader().getContent(),
 		remainingImpressions: impressionCount.getRemainingImpressions( page.getMaxBannerImpressions( 'desktop' ) ),
-		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount )
+		donationLink: createFallbackDonationURL( page.getTracking(), impressionCount ),
+		faqPageLink: createFAQPageURL( page.getTracking() )
 	},
 	resizeHandler: new WindowResizeHandler(),
 	banner: Banner,

banners/desktop/C24_WMDE_Desktop_DE_06/components/BannerVar.vue

@@ -38,7 +38,7 @@
 			</template>
 
 			<template #footer>
-				<BannerFooter @showFundsModal="isFundsModalVisible = true"/>
+				<SmallPrintFooter @showFundsModal="isFundsModalVisible = true" :faqPageLink="faqPageLink"/>
 			</template>
 
 		</MainBanner>
@@ -75,7 +75,7 @@ import { CloseEvent } from '@src/tracking/events/CloseEvent';
 import { TrackingFeatureName } from '@src/tracking/TrackingEvent';
 import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
 import colors from '../styles/colors';
-import BannerFooter from '@src/components/Footer/BannerFooter.vue';
+import SmallPrintFooter from '@src/components/Footer/SmallPrintFooter.vue';
 
 enum ContentStates {
 	Main = 'wmde-banner-wrapper--main',
@@ -90,6 +90,7 @@ interface Props {
 	bannerState: BannerStates;
 	useOfFundsContent: useOfFundsContentInterface;
 	remainingImpressions: number;
+	faqPageLink: string;
 }
 
 defineProps<Props>();

banners/desktop/C24_WMDE_Desktop_DE_06/styles/MainBanner.scss

@@ -1,14 +1,11 @@
-@use 'src/themes/Mikings/variables/colors';
-
 $banner-height: 357px !default;
 $form-width: 300px !default;
 
 .wmde-banner {
-	/*
-		Temporary fix until desktop banners use swatches.
-		Mobile theme color is used because`Svingle` theme does not have `_colors.scss` file
-	 */
-	--slider-chevron: #{colors.$black-light};
+
+	.previous {
+		--slider-chevron: var( --previous-button-fill );
+	}
 
 	&-main {
 		min-height: $banner-height;

banners/desktop/C24_WMDE_Desktop_DE_06/styles/styles_var.scss

@@ -27,7 +27,7 @@
 	$font-size: 14px
 );
 @use 'src/themes/Svingle/DonationForm/Forms/CustomAmountForm';
-@use 'src/themes/Svingle/Footer/BannerFooter';
+@use 'src/themes/Svingle/Footer/SmallPrintFooter';
 @use 'src/themes/Svingle/Footer/SelectionInput';
 @use 'src/themes/Svingle/Message/Message';
 @use 'src/themes/Svingle/Slider/KeenSlider' with (