diff --git a/src/app/highlight-cards/HighlightCard.spec.ts b/src/app/highlight-cards/HighlightCard.spec.ts index 5b429f488..d73ebd5fd 100644 --- a/src/app/highlight-cards/HighlightCard.spec.ts +++ b/src/app/highlight-cards/HighlightCard.spec.ts @@ -24,8 +24,8 @@ describe('highlightCard', () => { cardFromApi ); - expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/wmg-purple-texture.jpg'); - expect(highlightCardForHomepage.iconColor).toBe('brand-wgmf-purple'); + expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/wmg-purple-texture.jpg'); + expect(highlightCardForHomepage.icon?.color).toBe('brand-wgmf-purple'); }); it('should use appropriate colour for emergency campaign', () => { @@ -47,8 +47,8 @@ describe('highlightCard', () => { ); // todo - check what background we had for EMF cards in the past. - expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/emergency-card.webp'); - expect(highlightCardForHomepage.iconColor).toBe('brand-emf-yellow'); + expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/emergency-card.webp'); + expect(highlightCardForHomepage.icon?.color).toBe('brand-emf-yellow'); }); it('should use blue primary colour by default', () => { @@ -69,8 +69,8 @@ describe('highlightCard', () => { cardFromApi ); - expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/blue-texture.jpg'); - expect(highlightCardForHomepage.iconColor).toBe('primary'); + expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/blue-texture.jpg'); + expect(highlightCardForHomepage.icon?.color).toBe('primary'); }); function cardLinkingTo(href: string): SfApiHighlightCard { @@ -160,8 +160,8 @@ describe('highlightCard', () => { cardFromApi ); - expect(highlightCardForHomepage.backgroundImageUrl.href).toBe('https://example.com/assets/images/join-mailing-list.webp'); - expect(highlightCardForHomepage.iconColor).toBe('primary'); + expect(highlightCardForHomepage.background.image.href).toBe('https://example.com/assets/images/join-mailing-list.webp'); + expect(highlightCardForHomepage.icon?.color).toBe('primary'); }); }); diff --git a/src/app/highlight-cards/HighlightCard.ts b/src/app/highlight-cards/HighlightCard.ts index c398204c3..8fedf846a 100644 --- a/src/app/highlight-cards/HighlightCard.ts +++ b/src/app/highlight-cards/HighlightCard.ts @@ -2,12 +2,16 @@ import {brandColour} from "@biggive/components/dist/types/globals/brand-colour" import {environment} from "../../environments/environment"; export type HighlightCard = { - backgroundImageUrl: URL, + background: { + // colour appears 'behind' the image, only seen if image doesn't load or during loading. + color?: brandColour; + image: URL + }, // There is ambiguity in the components library about whether brand-6 is grey or turquoise. Best to avoid using brand-6 and // use brand-mhf-turquoise instead. // See https://github.com/thebiggive/donate-frontend/pull/1076#issuecomment-1523472452 // For other colour details see https://github.com/thebiggive/components/blob/develop/src/globals/brand-colour.ts - iconColor: brandColour, + icon?: {color: brandColour}, headerText: string, bodyText: string, button: { @@ -25,7 +29,7 @@ export type campaignFamilyName = |'artsforImpact' |'emergencyMatch'; -export type SfApiHighlightCard = Omit & { +export type SfApiHighlightCard = Omit & { campaignFamily: campaignFamilyName | null cardStyle: 'DONATE_NOW' | 'SEE_RESULTS' | 'APPLY_NOW' | 'SAVE_THE_DATE' | 'JOIN_MAILING_LIST' | 'REGISTER_INTEREST' | 'EXPLORE', button: { @@ -66,11 +70,12 @@ export const SFAPIHighlightCardToHighlightCard = (experienceUriPrefix: string, b href = new URL(donateUriPrefix + '/christmas-challenge-2024'); } + const color = iconColor(sfApiHighlightCard, campaignFamilyColours); return { headerText: sfApiHighlightCard.headerText, bodyText: sfApiHighlightCard.bodyText, - iconColor: iconColor(sfApiHighlightCard, campaignFamilyColours), - backgroundImageUrl, + icon: {color}, + background: {image: backgroundImageUrl, color }, button: { text: sfApiHighlightCard.button.text, href: href, diff --git a/src/app/highlight-cards/highlight-cards.component.html b/src/app/highlight-cards/highlight-cards.component.html index c9a7b8c31..4ad1d01ba 100644 --- a/src/app/highlight-cards/highlight-cards.component.html +++ b/src/app/highlight-cards/highlight-cards.component.html @@ -8,9 +8,10 @@ [headingLevel]="2" [buttonColourScheme]="'clear-primary'" [class]="'basic-card-padding'" - [iconColour]="highlightCards[0]!.iconColor" - [backgroundColour]="highlightCards[0]!.iconColor" - [backgroundImageUrl]="highlightCards[0]!.backgroundImageUrl.toString()" + [iconColour]="highlightCards[0]!.icon?.color" + [icon]="!! highlightCards[0]!.icon" + [backgroundColour]="highlightCards[0]!.icon?.color" + [backgroundImageUrl]="highlightCards[0]!.background.image.toString()" [mainTitle]="highlightCards[0]!.headerText" [subtitle]="highlightCards[0]!.bodyText" [buttonLabel]="highlightCards[0]!.button.text" @@ -25,9 +26,10 @@ [headingLevel]="2" [buttonColourScheme]="'clear-primary'" [class]="'basic-card-padding'" - [iconColour]="card.iconColor" - [backgroundColour]="card.iconColor" - [backgroundImageUrl]="card.backgroundImageUrl.toString()" + [iconColour]="card.icon?.color" + [icon]="!! card.icon" + [backgroundColour]="card.background.color" + [backgroundImageUrl]="card.background.image.toString()" [mainTitle]="card.headerText" [subtitle]="card.bodyText" [buttonLabel]="card.button.text" diff --git a/src/app/my-account/my-account.component.ts b/src/app/my-account/my-account.component.ts index 9b2d85ca9..6f31ea3b4 100644 --- a/src/app/my-account/my-account.component.ts +++ b/src/app/my-account/my-account.component.ts @@ -45,20 +45,24 @@ export class MyAccountComponent implements OnDestroy, OnInit { this.actions = [ { - backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'), - iconColor: 'secondary', + background: { + color: 'brand-mhf-turquoise', + image: new URL(environment.donateUriPrefix + '/assets/images/turquoise-texture.jpg') + }, headerText: 'Transfer Donation Funds', - bodyText: '', + bodyText: 'Use a bank transfer to make donations to charities on our platform.', button: { text: '', href: new URL(environment.donateUriPrefix + '/transfer-funds') } }, { - backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'), - iconColor: 'secondary', + background: { + color: 'brand-c4c-orange', + image: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png') + }, headerText: 'Your donations', - bodyText: '', + bodyText: 'View all the donations you\'ve made while logged in', button: { text: '', href: new URL(environment.donateUriPrefix + '/my-account/donations') @@ -68,10 +72,12 @@ export class MyAccountComponent implements OnDestroy, OnInit { if (flags.regularGivingEnabled) { this.actions.push( { - backgroundImageUrl: new URL(environment.donateUriPrefix + '/assets/images/red-coral-texture.png'), - iconColor: 'secondary', + background: { + color: 'brand-afa-pink', + image: new URL(environment.donateUriPrefix + '/assets/images/peach-texture.jpg') + }, headerText: 'Your Regular Giving', - bodyText: '', + bodyText: 'View and manage your regular giving mandates', button: { text: '', href: new URL(environment.donateUriPrefix + '/my-account/regular-giving')