Merge pull request #359 from wmde/uof-content-colours

Set UoF colours from fun content
wmde · Jan 26, 2024 · b863d6d · b863d6d
2 parents a213851 + d375c4f
commit b863d6d
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 276 deletions.
diff --git a/src/components/UseOfFunds/FundsDistributionAccordion.vue b/src/components/UseOfFunds/FundsDistributionAccordion.vue
@@ -2,10 +2,13 @@
 	<div class="funds-distribution-accordion">
 		<div v-for="( fundsItem, idx ) in applicationOfFundsData" :key="idx" :class="[
 			'funds-distribution-accordion-item',
-			'funds-distribution-accordion-item-' + fundsItem.id,
 			{ 'active' : currentActiveItems.includes( String( idx ) ) }
 		]">
-			<button class="funds-distribution-accordion-item-title" @click="toggleActive( String( idx ) )">
+			<button
+				class="funds-distribution-accordion-item-title"
+				@click="toggleActive( String( idx ) )"
+				:style="{color: fundsItem.colour}"
+			>
 				{{ fundsItem.title }} {{ fundsItem.percentage }}% <ChevronDownIcon class="funds-distribution-accordion-item-chevron"/>
 			</button>
 			<div class="funds-distribution-accordion-item-text">

diff --git a/src/components/UseOfFunds/FundsDistributionInfo.vue b/src/components/UseOfFunds/FundsDistributionInfo.vue
diff --git a/src/domain/UseOfFunds/ApplicationOfFundsItem.ts b/src/domain/UseOfFunds/ApplicationOfFundsItem.ts
@@ -1,6 +1,6 @@
 export interface ApplicationOfFundsItem {
-	id: string;
 	title: string;
 	percentage: number;
+	colour: string;
 	text: string;
 }
diff --git a/src/themes/UseOfFunds/FundsDistributionAccordion.scss b/src/themes/UseOfFunds/FundsDistributionAccordion.scss
@@ -32,43 +32,6 @@
 			height: 0;
 		}
 
-		&-software,
-		&-infrastructure {
-			.funds-distribution-accordion-item-title {
-				color: colors.$grey;
-			}
-		}
-		&-international {
-			.funds-distribution-accordion-item-title {
-				color: colors.$dark-green;
-			}
-		}
-		&-diversity {
-			.funds-distribution-accordion-item-title {
-				color: colors.$pink;
-			}
-		}
-		&-access {
-			.funds-distribution-accordion-item-title {
-				color: colors.$orange;
-			}
-		}
-		&-communities {
-			.funds-distribution-accordion-item-title {
-				color: colors.$red;
-			}
-		}
-		&-society {
-			.funds-distribution-accordion-item-title {
-				color: colors.$purple;
-			}
-		}
-		&-operative {
-			.funds-distribution-accordion-item-title {
-				color: colors.$green;
-			}
-		}
-
 		&.active {
 			.funds-distribution-accordion-item-text {
 				height: auto;

diff --git a/src/themes/UseOfFunds/FundsDistributionInfo.scss b/src/themes/UseOfFunds/FundsDistributionInfo.scss
diff --git a/test/components/UseOfFunds/FundsDistributionAccordion.spec.ts b/test/components/UseOfFunds/FundsDistributionAccordion.spec.ts
@@ -4,10 +4,10 @@ import { shallowMount } from '@vue/test-utils';
 import { ApplicationOfFundsItem } from '@src/domain/UseOfFunds/ApplicationOfFundsItem';
 
 const applicationOfFundsData: ApplicationOfFundsItem[] = [
-	{ id: 'one', percentage: 10, text: 'text 01', title: 'title 01' },
-	{ id: 'two', percentage: 98, text: 'text 02', title: 'title 02' },
-	{ id: 'three', percentage: 43, text: 'text 03', title: 'title 03' },
-	{ id: 'four', percentage: 12, text: 'text 04', title: 'title 04' }
+	{ percentage: 10, colour: 'red', text: 'text 01', title: 'title 01' },
+	{ percentage: 98, colour: 'blue', text: 'text 02', title: 'title 02' },
+	{ percentage: 43, colour: 'green', text: 'text 03', title: 'title 03' },
+	{ percentage: 12, colour: 'orange', text: 'text 04', title: 'title 04' }
 ];
 
 describe( 'FundsDistributionAccordion.vue', () => {
@@ -18,10 +18,10 @@ describe( 'FundsDistributionAccordion.vue', () => {
 			}
 		} );
 
-		const item01 = wrapper.find( '.funds-distribution-accordion-item-one' );
-		const item02 = wrapper.find( '.funds-distribution-accordion-item-two' );
-		const item03 = wrapper.find( '.funds-distribution-accordion-item-three' );
-		const item04 = wrapper.find( '.funds-distribution-accordion-item-four' );
+		const item01 = wrapper.find( '.funds-distribution-accordion-item:nth-child(1)' );
+		const item02 = wrapper.find( '.funds-distribution-accordion-item:nth-child(2)' );
+		const item03 = wrapper.find( '.funds-distribution-accordion-item:nth-child(3)' );
+		const item04 = wrapper.find( '.funds-distribution-accordion-item:nth-child(4)' );
 
 		await item01.find( 'button' ).trigger( 'click' );
 		await item01.find( 'button' ).trigger( 'click' );

diff --git a/test/components/UseOfFunds/FundsDistributionInfo.spec.ts b/test/components/UseOfFunds/FundsDistributionInfo.spec.ts