Add swatch compatible info icons

All our desktop banners use info icon svgs. The existing one isn't currently compatible with our new swatches. This adds 2 new icons, 2 new css colour vars and replaces the icons in the latest banner in each of the channels.
wmde · Nov 21, 2024 · 4ce9956 · 4ce9956
1 parent 448749d
commit 4ce9956
Show file tree

Hide file tree

Showing 20 changed files with 75 additions and 27 deletions.
diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<div class="wmde-banner-message-title">
-			<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+			<InfoIconItalic class="wmde-banner-message-icon"/>
 			<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
 		</div>
 		<div class="wmde-banner-message-date">
@@ -39,7 +39,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/BannerText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<div class="wmde-banner-message-title">
-				<InfoIcon fill="#990000" width="21.5" height="21.5" type="italic"/>
+				<InfoIconItalic class="wmde-banner-message-icon"/>
 				<strong>&nbsp;Wikipedia ist unverkäuflich</strong>
 			</div>
 			<div class="wmde-banner-message-date">
@@ -29,7 +29,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 const {
 	currentDayName,

diff --git a/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue b/banners/desktop/C24_WMDE_Desktop_DE_13/content/FallbackText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-				<InfoIcon fill="#990a00"/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
+				<InfoIconItalic/> <strong>An alle, die Wikipedia in Deutschland nutzen</strong>
 			</p>
 			<p>
 				{{ campaignDaySentence }} Millionen Menschen nutzen Wikipedia, aber 99&nbsp;% spenden nicht – sie
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { inject } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconItalic from '@src/components/Icons/InfoIconItalic.vue';
 
 const {
 	campaignDaySentence

diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlides.vue
@@ -2,7 +2,7 @@
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
 			<strong>
-				<InfoIcon fill="#990a00"/>
+				<InfoIconStraight/>
 				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still can't be
 				sold.&#8221; - An important update for readers in Germany.
 			</strong>
@@ -32,10 +32,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerSlidesVar.vue
@@ -2,7 +2,7 @@
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
 			<strong>
-				<InfoIcon fill="#990a00"/>
+				<InfoIconStraight/>
 				{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “The internet we were promised“
 				- An important update for readers in Germany.
 			</strong>
@@ -36,7 +36,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerText.vue
@@ -3,7 +3,7 @@
 		<div>
 			<p>
 				<strong>
-					<InfoIcon fill="#990a00"/>
+					<InfoIconStraight/>
 					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: &#8220;Wikipedia still
 					can't be sold.&#8221; - An important update for readers in Germany.
 				</strong>
@@ -32,9 +32,9 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );

diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/BannerTextVar.vue
@@ -3,7 +3,7 @@
 		<div>
 			<p>
 				<strong>
-					<InfoIcon fill="#990a00"/>
+					<InfoIconStraight/>
 					{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }}: “The internet we were
 					promised“ - An important update for readers in Germany.
 				</strong>
@@ -33,7 +33,7 @@ import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const { currentDayName, currentDate, getCurrentDateAndTime }: DynamicContent = inject( 'dynamicCampaignText' );
 const { liveDateAndTime, startTimer, stopTimer } = useLiveDateAndTime( getCurrentDateAndTime );

diff --git a/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue b/banners/english/C24_WMDE_Desktop_EN_04/content/FallbackText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-				<InfoIcon fill="#990a00"/> <strong>Please don't ignore this 1-minute read</strong>
+				<InfoIconStraight/> <strong>Please don't ignore this 1-minute read</strong>
 			</p>
 			<p>
 				This {{ currentDayName }}, {{ liveDateAndTime.currentDate }} at {{ liveDateAndTime.currentTime }}, please
@@ -17,8 +17,8 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const {
 	currentDayName,

diff --git a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p>
-			<InfoIcon/>
+			<InfoIconStraight/>
 			{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
 			Deutschland nutzen: 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
@@ -31,10 +31,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue b/banners/pad/C24_WMDE_iPad_DE_01/content/BannerSlidesVar.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p>
-			<InfoIcon/>
+			<InfoIconStraight/>
 			{{ liveDateAndTime.currentDate }}, {{ liveDateAndTime.currentTime }} - An alle, die Wikipedia in
 			Deutschland nutzen: 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
@@ -31,10 +31,10 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerSlides.vue
@@ -1,7 +1,7 @@
 <template>
 	<KeenSliderSlide :is-current="currentSlide === 0">
 		<p class="headline">
-			<InfoIcon fill="#990a00"/>
+			<InfoIconStraight/>
 			<strong> An alle, die Wikipedia in Deutschland nutzen </strong>
 		</p>
 		<p>
@@ -37,9 +37,9 @@
 <script setup lang="ts">
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
 import { inject, onMounted, onUnmounted } from 'vue';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import KeenSliderSlide from '@src/components/Slider/KeenSliderSlide.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 interface Props {
 	currentSlide: number

diff --git a/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue b/banners/wpde_desktop/C24_WPDE_Desktop_01/content/BannerText.vue
@@ -2,7 +2,7 @@
 	<div class="wmde-banner-message">
 		<div>
 			<p>
-                <InfoIcon fill="#990a00"/> An diesem {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um
+                <InfoIconStraight/> An diesem {{ currentDayName }}, den {{ liveDateAndTime.currentDate }}, um
 				{{ liveDateAndTime.currentTime }} sind Sie gefragt:
 			</p>
 			<p>
@@ -24,9 +24,9 @@
 <script setup lang="ts">
 import { inject, onMounted, onUnmounted } from 'vue';
 import { DynamicContent } from '@src/utils/DynamicContent/DynamicContent';
-import InfoIcon from '@src/components/Icons/InfoIcon.vue';
 import AnimatedText from '@src/components/AnimatedText/AnimatedText.vue';
 import { useLiveDateAndTime } from '@src/components/composables/useLiveDateAndTime';
+import InfoIconStraight from '@src/components/Icons/InfoIconStraight.vue';
 
 const {
 	currentDayName,

diff --git a/docs/2025PostCampaignCleanUp.md b/docs/2025PostCampaignCleanUp.md
@@ -105,6 +105,14 @@ into the `MainDonationForm` messages.
 - `src/components/DonationForm/Forms/messages/MainDonationForm.*.ts`
 - `banners/*/*/messages.ts`
 
+## Delete Info Icon
+
+The `InfoIcon.vue` class is not compatible with the swatches. In the "starting" banners (With the "test number" `_00`) of 2025, all remaining instances of the class should be replaced with `InfoIconStraight.vue` or `InfoIconItalic.vue` and the old component should be deleted.
+
+### Files to look at:
+
+- `src/components/Icons/InfoIcon.vue`
+
 ## Remove deprecated urgencyMessageDaysLeft parameter from DynamicTextPlugin
 
 This was hardcoded in our banner entry points and is now moved into the campaign configuration. Deleting it from the plugin constructor items would cause backwards breaking changes so it is deprecated instead and should be removed in 2025.

diff --git a/src/components/Icons/InfoIconItalic.vue b/src/components/Icons/InfoIconItalic.vue
@@ -0,0 +1,8 @@
+<template>
+	<!-- eslint-disable max-len -->
+	<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
+		style="fill-rule: evenodd;clip-rule: evenodd;stroke-linejoin: round;stroke-miterlimit: 2;">
+		<circle cx="8" cy="8" r="8" style="fill: var( --info-icon-background );"/>
+		<path d="M9.195,1.782C9.559,1.782 9.865,1.908 10.114,2.16C10.363,2.412 10.487,2.716 10.487,3.074C10.487,3.431 10.361,3.736 10.109,3.988C9.857,4.24 9.553,4.366 9.195,4.366C8.844,4.366 8.542,4.24 8.29,3.988C8.038,3.736 7.912,3.431 7.912,3.074C7.912,2.716 8.037,2.412 8.286,2.16C8.535,1.908 8.838,1.782 9.195,1.782ZM9.74,5.825L7.938,12.074C7.839,12.431 7.789,12.666 7.789,12.777C7.789,12.841 7.815,12.901 7.868,12.957C7.921,13.013 7.977,13.041 8.035,13.041C8.135,13.041 8.234,12.997 8.334,12.909C8.598,12.692 8.914,12.299 9.283,11.731L9.582,11.907C8.697,13.448 7.757,14.218 6.761,14.218C6.38,14.218 6.077,14.111 5.851,13.897C5.625,13.684 5.513,13.413 5.513,13.084C5.513,12.868 5.563,12.592 5.662,12.258L6.884,8.057C7.001,7.653 7.06,7.348 7.06,7.143C7.06,7.014 7.004,6.9 6.893,6.8C6.781,6.701 6.629,6.651 6.436,6.651C6.348,6.651 6.242,6.654 6.119,6.66L6.233,6.308L9.213,5.825L9.74,5.825Z" style="fill: var( --info-icon-color );fill-rule: nonzero;"/>
+	</svg>
+</template>
diff --git a/src/components/Icons/InfoIconStraight.vue b/src/components/Icons/InfoIconStraight.vue
@@ -0,0 +1,14 @@
+<template>
+	<svg 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
+				2.8H8.8V4.26667H7.33334V2.8Z" style="fill: var( --info-icon-color );"/>
+		</g>
+		<defs>
+			<clipPath id="clip0_2840_305">
+				<rect width="16" height="16" fill="white"/>
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/themes/Svingle/Message/Message.scss b/src/themes/Svingle/Message/Message.scss
@@ -35,6 +35,12 @@ $font-sizes: ( breakpoints.$extra-small: 18px ) !default;
 			font-weight: bold;
 		}
 
+		&-icon {
+			position: relative;
+			width: 20px;
+			height: 20px;
+		}
+
 		&-date {
 			text-align: center;
 			padding-bottom: 15px;

diff --git a/src/themes/Svingle/swatches/color_dark.scss b/src/themes/Svingle/swatches/color_dark.scss
@@ -44,6 +44,9 @@ $blue800: #20303f;
 	--message-color: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red100};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};

diff --git a/src/themes/Svingle/swatches/color_light.scss b/src/themes/Svingle/swatches/color_light.scss
@@ -1,6 +1,3 @@
-$yellow100: #ffee00;
-$yellow200: #ffef9d;
-
 $white: #ffffff;
 $black: #000000;
 
@@ -23,6 +20,9 @@ $blue600: #4465a7;
 $blue650: #3366cc;
 $blue700: #2a4b8d;
 
+$yellow100: #ffee00;
+$yellow200: #ffef9d;
+
 @mixin swatch(
 	$slider: false,
 	$progress-bar: false,
@@ -46,6 +46,9 @@ $blue700: #2a4b8d;
 	--message-color: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--message-link: #{$yellow100};
 	--message-link-hover: #{$yellow200};
 

diff --git a/src/themes/Treedip/swatches/color_dark.scss b/src/themes/Treedip/swatches/color_dark.scss
@@ -39,6 +39,9 @@ $blue800: #20303f;
 	--message-background: #{$grey700};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red100};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};

diff --git a/src/themes/Treedip/swatches/color_light.scss b/src/themes/Treedip/swatches/color_light.scss
@@ -35,6 +35,9 @@ $blue700: #2a4b8d;
 	--message-background: #{$white};
 	--message-border: #{$red600};
 
+	--info-icon-background: #{$red600};
+	--info-icon-color: #{$white};
+
 	--color-error: #{$red600};
 	--button-close-fill: #{$grey600};
 	--button-background: #{$blue700};