From 593515be0999703864bb55ecf6c29f9678e006b8 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Fri, 13 Dec 2024 12:51:01 +0100
Subject: [PATCH] Implement VAR for C24_WMDE_Mobile_DE_13

VAR has an auto-collapse feature

Ticket: https://phabricator.wikimedia.org/T381954
---
 .../C24_WMDE_Mobile_DE_13/banner_var.ts       |   4 +-
 .../components/BannerVar.vue                  |  54 +++-
 .../components/MinimisedBanner.vue            |  20 ++
 .../content/MinimisedText.vue                 |  10 +
 .../C24_WMDE_Mobile_DE_13/event_map_var.ts    |  36 +++
 .../styles/BannerVar.scss                     |  59 +++++
 .../styles/MinimisedBanner.scss               |  58 ++++
 .../styles/styles_var.scss                    |  30 +++
 .../useScrollMinimiser.ts                     |  21 ++
 docs/2025PostCampaignCleanUp.md               |  17 ++
 package-lock.json                             | 247 ++----------------
 src/components/Icons/InfoIconStraight.vue     |   2 +-
 src/components/Slider/KeenSlider.vue          |   4 +-
 src/themes/Modo/swatches/color_light.scss     |  20 +-
 src/themes/Modo/swatches/skin_default.scss    |   2 +
 .../components/BannerVar.spec.ts              |  15 +-
 test/components/Slider/KeenSlider.spec.ts     |  10 +
 test/features/AutoCollapseMobile.ts           | 122 +++++++++
 18 files changed, 478 insertions(+), 253 deletions(-)
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
 create mode 100644 banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
 create mode 100644 test/features/AutoCollapseMobile.ts

diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
index 64233ae0a..639e571d3 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/banner_var.ts
@@ -1,6 +1,6 @@
 import { createVueApp } from '@src/createVueApp';
 
-import './styles/styles.scss';
+import './styles/styles_var.scss';
 
 import BannerConductor from '@src/components/BannerConductor/BannerConductor.vue';
 import Banner from './components/BannerVar.vue';
@@ -16,7 +16,7 @@ import DynamicTextPlugin from '@src/DynamicTextPlugin';
 import { LocalImpressionCount } from '@src/utils/LocalImpressionCount';
 import { WindowPageScroller } from '@src/utils/PageScroller/WindowPageScroller';
 import { LegacyTrackerWPORG } from '@src/tracking/LegacyTrackerWPORG';
-import eventMappings from './event_map';
+import eventMappings from './event_map_var';
 import messages from './messages';
 import { LocaleFactoryDe } from '@src/utils/LocaleFactory/LocaleFactoryDe';
 import { createFormItems } from './form_items';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
index 8b2c17d15..135877e1e 100644
--- a/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.vue
@@ -1,9 +1,10 @@
 <template>
 	<div class="wmde-banner-wrapper" :class="contentState">
 		<MiniBanner
+			v-if="contentState === ContentStates.Mini"
 			@close="onCloseMiniBanner"
-			@show-full-page-banner="onshowFullPageBanner"
-			@show-full-page-banner-preselected="onshowFullPageBannerPreselected"
+			@show-full-page-banner="onShowFullPageBanner"
+			@show-full-page-banner-preselected="onShowFullPageBannerPreselected"
 		>
 			<template #banner-slides>
 				<KeenSlider :with-navigation="false" :play="slideshowShouldPlay" :interval="5000">
@@ -18,6 +19,12 @@
 			</template>
 		</MiniBanner>
 
+		<MinimisedBanner
+			v-if="contentState === ContentStates.Minimised"
+			@close="onCloseMinimisedBanner"
+			@show-full-page-banner="onShowFullPageBannerFromMinimised"
+		/>
+
 		<FullPageBanner
 			@showFundsModal="isFundsModalVisible = true"
 			@close="() => onClose( 'FullPageBanner', CloseChoices.Hide )"
@@ -151,9 +158,13 @@ import { FormItem } from '@src/utils/FormItemsBuilder/FormItem';
 import FormItemsBuilder from '@src/utils/FormItemsBuilder/FormItemsBuilder';
 import { Translator } from '@src/Translator';
 import { Currency } from '@src/utils/DynamicContent/formatters/Currency';
+import MinimisedBanner from '@banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+import { useScrollMinimiser } from '@banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser';
 
 enum ContentStates {
 	Mini = 'wmde-banner-wrapper--mini',
+	Minimised = 'wmde-banner-wrapper--minimised',
 	FullPage = 'wmde-banner-wrapper--full-page',
 	SoftClosing = 'wmde-banner-wrapper--soft-closing'
 }
@@ -193,6 +204,16 @@ const localFormItemsBuilder = new FormItemsBuilder( localTranslator, currencyFor
 const amountOptionsFive = localFormItemsBuilder.setAmounts( 5, 15, 25, 50, 100 ).getItems().amounts;
 const amountOptionsTen = localFormItemsBuilder.setAmounts( 10, 15, 25, 50, 100 ).getItems().amounts;
 const amountOptionsForForm = ref<FormItem[]>( amountOptionsTen );
+const wasMinimised = ref<boolean>( false );
+
+useScrollMinimiser( 500, wasMinimised, () => {
+	if ( props.bannerState === BannerStates.Visible && contentState.value === ContentStates.Mini ) {
+		contentState.value = ContentStates.Minimised;
+		wasMinimised.value = true;
+		slideShowStopped.value = true;
+		tracker.trackEvent( new MinimisedEvent( 'MiniBanner', 'minimised' ) );
+	}
+} );
 
 watch( contentState, async () => {
 	emit( 'bannerContentChanged' );
@@ -206,6 +227,14 @@ function onCloseMiniBanner(): void {
 	}
 }
 
+function onCloseMinimisedBanner(): void {
+	if ( props.remainingImpressions > 0 ) {
+		contentState.value = ContentStates.SoftClosing;
+	} else {
+		onClose( 'MinimisedBanner', CloseChoices.Hide );
+	}
+}
+
 function onClose( feature: TrackingFeatureName, userChoice: CloseChoices ): void {
 	emit( 'bannerClosed', new CloseEvent( feature, userChoice ) );
 	emit( 'modalClosed' );
@@ -224,24 +253,27 @@ const onSubmit = (): void => {
 	}
 };
 
-function onshowFullPageBanner(): void {
+function showFullPageBanner( fromFeature: string ): void {
 	slideShowStopped.value = true;
 	contentState.value = ContentStates.FullPage;
 	emit( 'modalOpened' );
+	tracker.trackEvent( new MobileMiniBannerExpandedEvent( fromFeature ) );
+}
 
+function onShowFullPageBanner(): void {
 	amountOptionsForForm.value = amountOptionsFive;
-
-	tracker.trackEvent( new MobileMiniBannerExpandedEvent() );
+	showFullPageBanner( '' );
 }
 
-function onshowFullPageBannerPreselected(): void {
-	slideShowStopped.value = true;
-
+function onShowFullPageBannerPreselected(): void {
 	amountOptionsForForm.value = amountOptionsTen;
-
 	formModel.selectedAmount.value = '10';
-	contentState.value = ContentStates.FullPage;
-	tracker.trackEvent( new MobileMiniBannerExpandedEvent( 'preselected' ) );
+	showFullPageBanner( 'preselected' );
+}
+
+function onShowFullPageBannerFromMinimised(): void {
+	amountOptionsForForm.value = amountOptionsFive;
+	showFullPageBanner( 'minimised' );
 }
 
 const onHideFundsModal = ( payload: { source: UseOfFundsCloseSources } ): void => {
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
new file mode 100644
index 000000000..ec1e871db
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/components/MinimisedBanner.vue
@@ -0,0 +1,20 @@
+<template>
+	<div class="wmde-banner-minimised">
+		<ButtonClose @close="$emit( 'close' )">
+			<span class="wmde-banner-close-icon">
+				<CloseIconMobile/>
+			</span>
+		</ButtonClose>
+
+		<MinimisedText @show-full-page-banner="$emit( 'showFullPageBanner' )"/>
+	</div>
+</template>
+
+<script setup lang="ts">
+
+import ButtonClose from '@src/components/ButtonClose/ButtonClose.vue';
+import CloseIconMobile from '@src/components/Icons/CloseIconMobile.vue';
+import MinimisedText from '@banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue';
+
+defineEmits( [ 'close', 'showFullPageBanner' ] );
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue b/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
new file mode 100644
index 000000000..a893242e3
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/content/MinimisedText.vue
@@ -0,0 +1,10 @@
+<template>
+	<InfoIconStraight/> Hat Wikipedia Ihnen in diesem Jahr Wissen im Wert einer Tasse Kaffee geschenkt?
+	<a class="wmde-banner-minimised-expand" href="#" @click.prevent="$emit( 'showFullPageBanner' )">Dann geben Sie jetzt etwas zurück!&nbsp;<HeartIcon/></a>
+</template>
+
+<script setup lang="ts">
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
+import HeartIcon from '@src/components/Icons/HeartIcon.vue';
+defineEmits( [ 'showFullPageBanner' ] );
+</script>
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
new file mode 100644
index 000000000..eb3a36efe
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/event_map_var.ts
@@ -0,0 +1,36 @@
+import { TrackingEventConverterFactory } from '@src/tracking/LegacyTrackerWPORG';
+import { WMDELegacyBannerEvent } from '@src/tracking/WPORG/WMDELegacyBannerEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+import { FormStepShownEvent } from '@src/tracking/events/FormStepShownEvent';
+import { mapFormStepShownEvent } from '@src/tracking/LegacyEventTracking/mapFormStepShownEvent';
+import { CloseEvent } from '@src/tracking/events/CloseEvent';
+import { mapCloseEvent } from '@src/tracking/LegacyEventTracking/mapCloseEvent';
+import { NotShownEvent } from '@src/tracking/events/NotShownEvent';
+import { mapNotShownEvent } from '@src/tracking/LegacyEventTracking/mapNotShownEvent';
+import { BannerSubmitEvent } from '@src/tracking/events/BannerSubmitEvent';
+import { WMDESizeIssueEvent } from '@src/tracking/WPORG/WMDEBannerSizeIssue';
+import { createViewportInfo } from '@src/tracking/LegacyEventTracking/createViewportInfo';
+import { BannerSubmitOnReturnEvent } from '@src/tracking/events/BannerSubmitOnReturnEvent';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+
+export default new Map<string, TrackingEventConverterFactory>( [
+	[ CloseEvent.EVENT_NAME, mapCloseEvent ],
+	[ MobileMiniBannerExpandedEvent.EVENT_NAME,
+		( e: MobileMiniBannerExpandedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ FormStepShownEvent.EVENT_NAME, mapFormStepShownEvent ],
+	[ NotShownEvent.EVENT_NAME, mapNotShownEvent ],
+
+	[ BannerSubmitEvent.EVENT_NAME, ( e: BannerSubmitEvent ): WMDESizeIssueEvent => {
+		switch ( e.feature ) {
+			case 'MiniBanner':
+			case 'UpgradeToYearlyForm':
+				return new WMDESizeIssueEvent( `submit-${e.userChoice}`, createViewportInfo(), 1 );
+			default:
+				return new WMDESizeIssueEvent( `submit`, createViewportInfo(), 1 );
+		}
+	} ],
+	[ BannerSubmitOnReturnEvent.EVENT_NAME,
+		( e: BannerSubmitOnReturnEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + ( e.userChoice !== '' ? `-${e.userChoice}` : '' ), 1 ) ],
+	[ MinimisedEvent.EVENT_NAME,
+		( e: MinimisedEvent ): WMDELegacyBannerEvent => new WMDELegacyBannerEvent( e.eventName + `-${ e.feature }-${ e.userChoice }`, 1 ) ]
+] );
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
new file mode 100644
index 000000000..b14cd2d2f
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/BannerVar.scss
@@ -0,0 +1,59 @@
+@use 'src/themes/Modo/variables/globals';
+@use 'src/themes/Modo/variables/fonts';
+
+@keyframes hide-mini {
+	0% {
+		opacity: 1;
+	}
+	99% {
+		opacity: 0;
+	}
+	100% {
+		display: none;
+	}
+}
+
+.wmde-banner {
+
+	&-full {
+		visibility: hidden;
+		opacity: 0;
+		transform: scale( 1.1 );
+		transition: opacity 500ms globals.$banner-easing, transform 500ms globals.$banner-easing;
+	}
+
+	&-wrapper {
+		font-size: 16px;
+		font-family: fonts.$ui;
+		box-shadow: var( --mini-box-shadow );
+		background-color: var( --main-background );
+		color: var( --main-color );
+
+		&--full-page {
+			.wmde-banner-mini {
+				animation: hide-mini 500ms;
+			}
+			.wmde-banner-full {
+				visibility: visible;
+				opacity: 1;
+				transform: scale( 1 );
+			}
+		}
+
+		&--soft-closing {
+			.wmde-banner-minimised {
+				display: none;
+			}
+			.wmde-banner-mini {
+				display: none;
+			}
+		}
+	}
+
+	&--closed,
+	&--not-shown {
+		.wmde-banner-wrapper {
+			display: none;
+		}
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
new file mode 100644
index 000000000..248511481
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/MinimisedBanner.scss
@@ -0,0 +1,58 @@
+.wmde-banner {
+	&-minimised {
+		--info-icon-background: var( --minimised-info-background );
+		--info-icon-color: var( --minimised-info-color );
+
+		background: var( --minimised-background );
+		color: var( --minimised-color );
+		position: relative;
+		padding: 5px 36px 5px 10px;
+		font-size: 16px;
+		line-height: 1.8;
+
+		.wmde-banner-close {
+			all: unset;
+			border: 0;
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 36px;
+			width: 36px;
+			cursor: pointer;
+			text-align: center;
+
+			&-icon {
+				background: var( --minimised-close-background );
+				display: inline-block;
+				height: 20px;
+				width: 20px;
+				border-radius: 50%;
+			}
+
+			svg {
+				position: relative;
+				display: inline-block;
+				width: 10px;
+				height: 10px;
+				top: -5px;
+			}
+		}
+
+		a {
+			color: var( --minimised-link-color );
+			font-weight: bold;
+			svg {
+				position: relative;
+				top: 2px;
+				path {
+					fill: var( --minimised-link-color );
+				}
+			}
+		}
+	}
+
+	&-info-icon {
+		position: relative;
+		top: 2px;
+	}
+}
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
new file mode 100644
index 000000000..0eb2d8f74
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/styles/styles_var.scss
@@ -0,0 +1,30 @@
+@use 'src/themes/Modo/swatches/skin_default' with (
+	$minimised-banner: true,
+	$upgrade-to-yearly-button-form: true,
+	$double-progress-bar: true,
+	$soft-close: true,
+	$thank-you-box: true
+);
+@use 'src/components/BannerConductor/banner-transition';
+@use 'src/themes/UseOfFunds/swatches/skin_default' as uof-default;
+@use 'src/themes/UseOfFunds/UseOfFunds';
+@use 'src/themes/Modo/defaults';
+@use 'BannerVar';
+@use 'MiniBanner' with (
+	$height: 336px,
+	$height-l-up: 306px
+);
+@use 'MinimisedBanner';
+@use 'FullPageBanner';
+@use 'src/themes/Modo/Footer/Footer';
+@use 'src/themes/Modo/ThankYouBox/ThankYouBox';
+@use 'src/themes/Modo/Footer/SelectionInput';
+@use 'src/themes/Modo/DonationForm/MultiStepDonation';
+@use 'src/themes/Modo/DonationForm/Forms/UpgradeToYearlyButtonForm';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectGroup';
+@use 'src/themes/Modo/DonationForm/SubComponents/SelectCustomAmount';
+@use 'src/themes/Modo/DonationForm/SubComponents/SmsBox';
+@use 'src/themes/Modo/Slider/Slider';
+@use 'src/themes/Modo/SoftClose/SoftClose';
+@use 'src/themes/Modo/ProgressBar/DoubleProgressBar';
+@use 'src/themes/Modo/Message/Message';
diff --git a/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts b/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
new file mode 100644
index 000000000..d25f66108
--- /dev/null
+++ b/banners/mobile/C24_WMDE_Mobile_DE_13/useScrollMinimiser.ts
@@ -0,0 +1,21 @@
+import { onMounted, onUnmounted, Ref, watch } from 'vue';
+
+export function useScrollMinimiser( switchThreshold: number, hasMinimised: Ref<boolean>, onScrollBelowThreshold: () => void ): void {
+	const scrollHandler = (): void => {
+		if ( window.scrollY > switchThreshold ) {
+			onScrollBelowThreshold();
+		}
+	};
+
+	onMounted( () => {
+		window.addEventListener( 'scroll', scrollHandler );
+	} );
+
+	onUnmounted( () => {
+		window.removeEventListener( 'scroll', scrollHandler );
+	} );
+
+	watch( hasMinimised, () => {
+		window.removeEventListener( 'scroll', scrollHandler );
+	} );
+}
diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
index 1d96a52d2..c4e74db9d 100644
--- a/docs/2025PostCampaignCleanUp.md
+++ b/docs/2025PostCampaignCleanUp.md
@@ -146,3 +146,20 @@ Ex. If main banner uses double progress bar and FB banner uses progress bar alte
 So, somehow the progress bar on FB banner is dependant on progress bar on main banner.
 
 Could we make them fully independent of each other?
+
+## Fix Heart Icon & Thank You Box
+
+This has a CSS variable setting it's fill, which doesn't work. The fill attribute should be removed from the svg element, and the path changed to `style="fill: var( --heart-icon-fill )"`. Then in the mobile banner themes it should be set up in the thank you box CSS, something like:
+
+```css
+.thank-you-container {
+   --heart-icon-fill: var( --thank-you-box-color );
+}
+```
+Also the CSS that's currently in the Vue component should be moved or removed.
+
+### Files to look at
+- `src/components/Icons/HeartIcon.vue`
+- `src/themes/Modo/ThankYouBox/ThankYouBox.scss`
+- `src/themes/Mikings/ThankYouBox/ThankYouBox.scss`
+- `src/components/ThankYouBox/ThankYouBox.vue`
diff --git a/package-lock.json b/package-lock.json
index 3d5f71755..2a5858a67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2179,65 +2179,6 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.11.0.tgz",
@@ -2274,7 +2215,6 @@
       "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "@typescript-eslint/visitor-keys": "8.11.0"
@@ -2311,83 +2251,12 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/types": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
       "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -2402,7 +2271,6 @@
       "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "@typescript-eslint/visitor-keys": "8.11.0",
@@ -2448,100 +2316,12 @@
         "eslint": "^8.57.0 || ^9.0.0"
       }
     },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.11.0.tgz",
-      "integrity": "sha512-Uholz7tWhXmA4r6epo+vaeV7yjdKy5QFCERMjs1kMVsLRKIrSdM6o21W2He9ftp5PP6aWOVpD5zvrvuHZC0bMQ==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.11.0.tgz",
-      "integrity": "sha512-tn6sNMHf6EBAYMvmPUaKaVeYvhUsrE6x+bXQTxjQRp360h1giATU0WvgeEys1spbvb5R+VpNOZ+XJmjD8wOUHw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.11.0.tgz",
-      "integrity": "sha512-yHC3s1z1RCHoCz5t06gf7jH24rr3vns08XXhfEqzYpd6Hll3z/3g23JRi0jM8A47UFKNc3u/y5KIMx8Ynbjohg==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "@typescript-eslint/visitor-keys": "8.11.0",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^1.3.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
-      "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
-      "dev": true,
-      "dependencies": {
-        "@typescript-eslint/types": "8.11.0",
-        "eslint-visitor-keys": "^3.4.3"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/utils/node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.11.0.tgz",
       "integrity": "sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/types": "8.11.0",
         "eslint-visitor-keys": "^3.4.3"
@@ -2560,7 +2340,6 @@
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -6161,9 +5940,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6186,7 +5965,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -6201,6 +5980,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/debug": {
@@ -6637,7 +6420,7 @@
     },
     "node_modules/fundraising-frontend-content": {
       "version": "1.0.0",
-      "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#23c5bb8aa1130d6d1a8ca95ce939e95e8751a5d2",
+      "resolved": "git+ssh://git@github.com/wmde/fundraising-frontend-content.git#9717c5dbc0a9d0c02a4b2a79c182640cd705490a",
       "license": "CC0-1.0"
     },
     "node_modules/get-intrinsic": {
@@ -8641,9 +8424,9 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
@@ -9337,9 +9120,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "dev": true,
       "license": "MIT"
     },
diff --git a/src/components/Icons/InfoIconStraight.vue b/src/components/Icons/InfoIconStraight.vue
index 12c760f4d..ce1b61856 100644
--- a/src/components/Icons/InfoIconStraight.vue
+++ b/src/components/Icons/InfoIconStraight.vue
@@ -1,5 +1,5 @@
 <template>
-	<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg class="wmde-banner-info-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<g clip-path="url(#clip0_2840_305)">
 			<circle cx="8" cy="8" r="8" style="fill: var( --info-icon-background );"/>
 			<path d="M8.8 5.73334V11.7173H10.2667V13.0667H5.96933V11.7173H7.33334V7.2H5.86667V5.73334H8.8ZM7.33334
diff --git a/src/components/Slider/KeenSlider.vue b/src/components/Slider/KeenSlider.vue
index bd0bb5288..022650a4d 100644
--- a/src/components/Slider/KeenSlider.vue
+++ b/src/components/Slider/KeenSlider.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, onMounted, ref, watch } from 'vue';
+import { inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import { KeenSliderOptions, useKeenSlider } from 'keen-slider/vue';
 import ChevronLeftIcon from '@src/components/Icons/ChevronLeftIcon.vue';
 import ChevronRightIcon from '@src/components/Icons/ChevronRightIcon.vue';
@@ -128,4 +128,6 @@ onMounted( () => {
 	emit( 'slide-changed', currentSlide.value, slider.value.slides.length );
 } );
 
+onUnmounted( stopAutoplay );
+
 </script>
diff --git a/src/themes/Modo/swatches/color_light.scss b/src/themes/Modo/swatches/color_light.scss
index 2040e4e93..262d3bbf4 100644
--- a/src/themes/Modo/swatches/color_light.scss
+++ b/src/themes/Modo/swatches/color_light.scss
@@ -42,7 +42,10 @@ $purple100: #6b4ba1;
 $red200: #f17678;
 $red300: #ff5233;
 
+$pink100: #ff33f1;
+
 @mixin swatch(
+	$minimised-banner: false,
 	$address-type-button-form: false,
 	$upgrade-to-yearly-button-form: false,
 	$select-group-image-label: false,
@@ -129,11 +132,18 @@ $red300: #ff5233;
 	);
 	/* stylelint-enable */
 
-	--minimise-background: #{$grey100};
-	--minimise-fill: #{$blue600};
-	--maximise-fill: #{$blue600};
-	--minimise-color: #{$blue600};
-	--minimise-text-highlight-background: #{$yellow100};
+	@if $minimised-banner {
+		--minimised-background: #{$green800};
+		--minimised-color: #{$white};
+
+		--minimised-close-background: #{$grey50};
+
+		--minimised-link-color: #{$yellow200};
+		--minimised-link-shadow: #{$pink100};
+
+		--minimised-info-background: #{$yellow200};
+		--minimised-info-color: #{$black};
+	}
 
 	@if $address-type-button-form {
 		--address-type-button-form-notice-color: #{$grey700};
diff --git a/src/themes/Modo/swatches/skin_default.scss b/src/themes/Modo/swatches/skin_default.scss
index 0ea568f4a..b2badbed7 100644
--- a/src/themes/Modo/swatches/skin_default.scss
+++ b/src/themes/Modo/swatches/skin_default.scss
@@ -1,5 +1,6 @@
 @use 'color_light';
 
+$minimised-banner: false !default;
 $address-type-button-form: false !default;
 $upgrade-to-yearly-button-form: false !default;
 $select-group-image-label: false !default;
@@ -11,6 +12,7 @@ $thank-you-box: false !default;
 
 .wmde-banner {
 	@include color_light.swatch(
+		$minimised-banner,
 		$address-type-button-form,
 		$upgrade-to-yearly-button-form,
 		$select-group-image-label,
diff --git a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
index 99fff7c95..050df56fa 100644
--- a/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
+++ b/test/banners/mobile/C24_WMDE_Mobile_DE_13/components/BannerVar.spec.ts
@@ -21,6 +21,7 @@ import { bannerContentAnimatedTextFeatures, bannerContentDateAndTimeFeatures } f
 import { softCloseSubmitTrackingFeatures } from '@test/features/SoftCloseSubmitTracking';
 import { Timer } from '@src/utils/Timer';
 import { TimerStub } from '@test/fixtures/TimerStub';
+import { autoCollapseFeatures } from '@test/features/AutoCollapseMobile';
 
 let pageScroller: PageScroller;
 let tracker: Tracker;
@@ -164,7 +165,6 @@ describe( 'BannerVar.vue', () => {
 	describe( 'Mini Banner', () => {
 		test.each( [
 			[ 'expectSlideShowPlaysWhenMiniBannerBecomesVisible' ],
-			[ 'expectSlideShowStopsWhenFullBannerBecomesVisible' ],
 			[ 'expectShowsFullPageWhenCallToActionIsClicked' ],
 			[ 'expectEmitsBannerContentChangedEventWhenCallToActionIsClicked' ]
 		] )( '%s', async ( testName: string ) => {
@@ -172,6 +172,19 @@ describe( 'BannerVar.vue', () => {
 		} );
 	} );
 
+	describe( 'Minimised Banner', () => {
+		test.each( [
+			[ 'expectAutoCollapsesTheMiniBanner' ],
+			[ 'expectTracksAutoCollapse' ],
+			[ 'expectRemovesEventListenerWhenCollapsed' ],
+			[ 'expectGoesToSoftCloseFromMinimised' ],
+			[ 'expectGoesToFullPageFromMinimised' ],
+			[ 'expectTracksExpandingToFullPage' ]
+		] )( '%s', async ( testName: string ) => {
+			await autoCollapseFeatures[ testName ]( getWrapper, tracker );
+		} );
+	} );
+
 	describe( 'Full Page Banner', () => {
 		test.each( [
 			[ 'expectEmitsCloseEvent' ],
diff --git a/test/components/Slider/KeenSlider.spec.ts b/test/components/Slider/KeenSlider.spec.ts
index 199937e9f..435ec0026 100644
--- a/test/components/Slider/KeenSlider.spec.ts
+++ b/test/components/Slider/KeenSlider.spec.ts
@@ -168,4 +168,14 @@ describe( 'KeenSlider', () => {
 
 		expect( wrapper.find( '.wmde-banner-slider--stopped' ).exists() ).toBeTruthy();
 	} );
+
+	it( 'should stop the auto play when unmounted', async () => {
+		const timerSpy = new TimerSpy();
+		const wrapper = getWrapper( timerSpy );
+		await wrapper.setProps( { play: true } );
+		wrapper.unmount();
+
+		expect( timerSpy.clearIntervalIds ).toStrictEqual( [ 0 ] );
+		expect( timerSpy.clearTimeoutIds ).toStrictEqual( [ 0 ] );
+	} );
 } );
diff --git a/test/features/AutoCollapseMobile.ts b/test/features/AutoCollapseMobile.ts
new file mode 100644
index 000000000..30817ef8b
--- /dev/null
+++ b/test/features/AutoCollapseMobile.ts
@@ -0,0 +1,122 @@
+import { VueWrapper } from '@vue/test-utils';
+import { Tracker } from '@src/tracking/Tracker';
+import { BannerStates } from '@src/components/BannerConductor/StateMachine/BannerStates';
+import { nextTick } from 'vue';
+import { expect, vi } from 'vitest';
+import { MinimisedEvent } from '@src/tracking/events/MinimisedEvent';
+import { MobileMiniBannerExpandedEvent } from '@src/tracking/events/MobileMiniBannerExpandedEvent';
+
+const expectAutoCollapsesTheMiniBanner = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 400 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+
+	scrollCallback();
+	await nextTick();
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--mini' );
+
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	scrollCallback();
+	await nextTick();
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--minimised' );
+};
+
+const expectTracksAutoCollapse = async ( getWrapper: () => VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new MinimisedEvent( 'MiniBanner', 'minimised' ) );
+};
+
+const expectRemovesEventListenerWhenCollapsed = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	const removeEventListener = vi.fn();
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+	Object.defineProperty( window, 'removeEventListener', { writable: true, configurable: true, value: removeEventListener } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+
+	scrollCallback();
+	await nextTick();
+
+	expect( removeEventListener ).toHaveBeenCalledWith( 'scroll', scrollCallback );
+};
+
+const expectGoesToSoftCloseFromMinimised = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised .wmde-banner-close' ).trigger( 'click' );
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--soft-closing' );
+};
+
+const expectGoesToFullPageFromMinimised = async ( getWrapper: () => VueWrapper<any> ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised-expand' ).trigger( 'click' );
+
+	expect( wrapper.classes() ).toContain( 'wmde-banner-wrapper--full-page' );
+};
+
+const expectTracksExpandingToFullPage = async ( getWrapper: () => VueWrapper<any>, tracker: Tracker ): Promise<any> => {
+	let scrollCallback: () => void;
+	Object.defineProperty( window, 'scrollY', { writable: true, configurable: true, value: 501 } );
+	Object.defineProperty( window, 'addEventListener', { writable: true, configurable: true, value: ( eventName: string, callback: () => void ) => {
+		scrollCallback = callback;
+	} } );
+
+	const wrapper = getWrapper();
+	await wrapper.setProps( { bannerState: BannerStates.Visible } );
+	scrollCallback();
+	await nextTick();
+
+	await wrapper.find( '.wmde-banner-minimised-expand' ).trigger( 'click' );
+
+	expect( tracker.trackEvent ).toHaveBeenCalledWith( new MobileMiniBannerExpandedEvent( 'minimised' ) );
+};
+
+export const autoCollapseFeatures: Record<string, ( getWrapper: () => VueWrapper<any>, tracker: Tracker ) => Promise<any>> = {
+	expectAutoCollapsesTheMiniBanner,
+	expectTracksAutoCollapse,
+	expectRemovesEventListenerWhenCollapsed,
+	expectGoesToSoftCloseFromMinimised,
+	expectGoesToFullPageFromMinimised,
+	expectTracksExpandingToFullPage
+};