From 0f4e761a2229098ac224c9befacb963338a65baa Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Thu, 14 Dec 2023 16:47:04 +0000 Subject: [PATCH 01/18] make manual card reusable --- src/lib/gam.ts | 2 +- src/templates/components/ManualCard.svelte | 48 +++------ .../csr/events-multiple/index.svelte | 23 +++-- .../csr/manual-multiple/index.svelte | 99 +++++++++++++++++++ 4 files changed, 128 insertions(+), 44 deletions(-) create mode 100644 src/templates/csr/manual-multiple/index.svelte diff --git a/src/lib/gam.ts b/src/lib/gam.ts index 55aecec0..65aeba76 100644 --- a/src/lib/gam.ts +++ b/src/lib/gam.ts @@ -1,7 +1,7 @@ const CLICK_MACRO = '%%CLICK_URL_UNESC%%'; const CACHE_BUST = '%%CACHEBUSTER%%'; -type GAMVariable = `[%${T}%]`; +type GAMVariable = `[%${T}%]` | ''; const gamVar = (s: T): GAMVariable => `[%${s}%]`; diff --git a/src/templates/components/ManualCard.svelte b/src/templates/components/ManualCard.svelte index ef026052..51b5633c 100644 --- a/src/templates/components/ManualCard.svelte +++ b/src/templates/components/ManualCard.svelte @@ -1,6 +1,5 @@ - +
- +
+
-

{boldTitle}{regularTitle}

-

{EventDateTime}

+

+

- - Book tickets + + {callToAction} @@ -54,7 +41,8 @@ padding: 12px 10px; display: block; margin: 0px; - width: 50%; + max-width: 25%; + flex: 1; } a.card:nth-child(n + 3) { @@ -128,18 +116,6 @@ margin: 0px; } - a.split-into-2 { - width: 50%; - } - - a.split-into-3 { - width: 33%; - } - - a.split-into-4 { - width: 25%; - } - a.button { margin-top: 6px; margin-bottom: 10px; diff --git a/src/templates/csr/events-multiple/index.svelte b/src/templates/csr/events-multiple/index.svelte index 4b4f19f9..2921f78b 100644 --- a/src/templates/csr/events-multiple/index.svelte +++ b/src/templates/csr/events-multiple/index.svelte @@ -8,7 +8,6 @@ export let BannerDescription: GAMVariable; export let HeaderButtonText: GAMVariable; export let HeaderButtonUrl: GAMVariable; - export let NumberOfCards: GAMVariable; export let EventTitle1: GAMVariable; export let EventTitle2: GAMVariable; export let EventTitle3: GAMVariable; @@ -53,6 +52,8 @@ }, ]; + events = events.filter((event) => event.eventTitle !== ''); + let height: number = -1; @@ -61,12 +62,20 @@
{#each events as event} + image={event.eventImage} + url={event.eventUrl} + callToAction="Book tickets" + > + + {@const [boldTitle, regularTitle] = event.eventTitle.split(':')} + {#if regularTitle} + {boldTitle}:{regularTitle} + {:else} + {boldTitle} + {/if} + + {event.eventDateTime} + {/each}
diff --git a/src/templates/csr/manual-multiple/index.svelte b/src/templates/csr/manual-multiple/index.svelte new file mode 100644 index 00000000..09ab78c2 --- /dev/null +++ b/src/templates/csr/manual-multiple/index.svelte @@ -0,0 +1,99 @@ + + + + + + From cdadd740e56796f4ecb02783b075088570ea9fc7 Mon Sep 17 00:00:00 2001 From: Jake Lee Kennedy Date: Mon, 18 Dec 2023 12:07:30 +0000 Subject: [PATCH 02/18] Start migration of manual multiple --- package.json | 1 + src/lib/svg/glabs-logo.svg | 1 + src/lib/svg/guardian-bookshop-logo.svg | 55 ++++++++ src/lib/svg/guardian-brand-logo.svg | 65 ++++++++++ src/lib/svg/guardian-generic-logo.svg | 1 + src/lib/svg/guardian-holidays-logo.svg | 53 ++++++++ src/lib/svg/guardian-jobs-logo.svg | 48 +++++++ src/lib/svg/guardian-labs-logo-white.svg | 1 + src/lib/svg/guardian-labs-logo.svg | 1 + src/lib/svg/guardian-live-logo-horizontal.svg | 42 ++++++ src/lib/svg/guardian-live-logo.svg | 42 ++++++ src/lib/svg/guardian-masterclasses-logo.svg | 1 + src/lib/svg/guardian-members-logo.svg | 59 +++++++++ src/lib/svg/guardian-moneydeals-logo.svg | 61 +++++++++ src/lib/svg/guardian-patron-logo.svg | 72 +++++++++++ src/lib/svg/guardian-soulmates-logo.svg | 58 +++++++++ src/lib/svg/guardian-subscriptions-logo.svg | 65 ++++++++++ src/lib/svg/guardian-weekly-logo.svg | 48 +++++++ src/lib/svg/guardianlive-logo.svg | 8 ++ src/templates/components/ManualCard.svelte | 14 +- src/templates/components/ManualHeader.svelte | 120 +++++++++++++++++ src/templates/components/ToneLogo.svelte | 29 +++++ .../components/icons/SubscriptionsLogo.svelte | 65 ++++++++++ .../csr/events-multiple/index.svelte | 19 ++- .../csr/manual-multiple/index.svelte | 121 +++++++++++------- src/templates/csr/manual-multiple/test.json | 30 +++++ yarn.lock | 5 + 27 files changed, 1034 insertions(+), 51 deletions(-) create mode 100644 src/lib/svg/glabs-logo.svg create mode 100644 src/lib/svg/guardian-bookshop-logo.svg create mode 100644 src/lib/svg/guardian-brand-logo.svg create mode 100644 src/lib/svg/guardian-generic-logo.svg create mode 100644 src/lib/svg/guardian-holidays-logo.svg create mode 100644 src/lib/svg/guardian-jobs-logo.svg create mode 100644 src/lib/svg/guardian-labs-logo-white.svg create mode 100644 src/lib/svg/guardian-labs-logo.svg create mode 100644 src/lib/svg/guardian-live-logo-horizontal.svg create mode 100644 src/lib/svg/guardian-live-logo.svg create mode 100644 src/lib/svg/guardian-masterclasses-logo.svg create mode 100644 src/lib/svg/guardian-members-logo.svg create mode 100644 src/lib/svg/guardian-moneydeals-logo.svg create mode 100644 src/lib/svg/guardian-patron-logo.svg create mode 100644 src/lib/svg/guardian-soulmates-logo.svg create mode 100644 src/lib/svg/guardian-subscriptions-logo.svg create mode 100644 src/lib/svg/guardian-weekly-logo.svg create mode 100644 src/lib/svg/guardianlive-logo.svg create mode 100644 src/templates/components/ManualHeader.svelte create mode 100644 src/templates/components/ToneLogo.svelte create mode 100644 src/templates/components/icons/SubscriptionsLogo.svelte create mode 100644 src/templates/csr/manual-multiple/test.json diff --git a/package.json b/package.json index d35398c6..2706bd84 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "devDependencies": { "@guardian/eslint-config-typescript": "^1.0.2", "@guardian/prettier": "^2.0.0", + "@poppanator/sveltekit-svg": "^4.1.3", "@rollup/plugin-alias": "^3.1.8", "@rollup/plugin-node-resolve": "^13.1.1", "@rollup/plugin-typescript": "^8.3.0", diff --git a/src/lib/svg/glabs-logo.svg b/src/lib/svg/glabs-logo.svg new file mode 100644 index 00000000..42a25bc9 --- /dev/null +++ b/src/lib/svg/glabs-logo.svg @@ -0,0 +1 @@ + diff --git a/src/lib/svg/guardian-bookshop-logo.svg b/src/lib/svg/guardian-bookshop-logo.svg new file mode 100644 index 00000000..589a543b --- /dev/null +++ b/src/lib/svg/guardian-bookshop-logo.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-brand-logo.svg b/src/lib/svg/guardian-brand-logo.svg new file mode 100644 index 00000000..377b5381 --- /dev/null +++ b/src/lib/svg/guardian-brand-logo.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-generic-logo.svg b/src/lib/svg/guardian-generic-logo.svg new file mode 100644 index 00000000..8b03ecef --- /dev/null +++ b/src/lib/svg/guardian-generic-logo.svg @@ -0,0 +1 @@ + diff --git a/src/lib/svg/guardian-holidays-logo.svg b/src/lib/svg/guardian-holidays-logo.svg new file mode 100644 index 00000000..7acfd792 --- /dev/null +++ b/src/lib/svg/guardian-holidays-logo.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-jobs-logo.svg b/src/lib/svg/guardian-jobs-logo.svg new file mode 100644 index 00000000..dab45bbc --- /dev/null +++ b/src/lib/svg/guardian-jobs-logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-labs-logo-white.svg b/src/lib/svg/guardian-labs-logo-white.svg new file mode 100644 index 00000000..7e26571f --- /dev/null +++ b/src/lib/svg/guardian-labs-logo-white.svg @@ -0,0 +1 @@ + diff --git a/src/lib/svg/guardian-labs-logo.svg b/src/lib/svg/guardian-labs-logo.svg new file mode 100644 index 00000000..4a9560d8 --- /dev/null +++ b/src/lib/svg/guardian-labs-logo.svg @@ -0,0 +1 @@ + diff --git a/src/lib/svg/guardian-live-logo-horizontal.svg b/src/lib/svg/guardian-live-logo-horizontal.svg new file mode 100644 index 00000000..36ee13c9 --- /dev/null +++ b/src/lib/svg/guardian-live-logo-horizontal.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-live-logo.svg b/src/lib/svg/guardian-live-logo.svg new file mode 100644 index 00000000..638dcaa9 --- /dev/null +++ b/src/lib/svg/guardian-live-logo.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-masterclasses-logo.svg b/src/lib/svg/guardian-masterclasses-logo.svg new file mode 100644 index 00000000..1dfaa637 --- /dev/null +++ b/src/lib/svg/guardian-masterclasses-logo.svg @@ -0,0 +1 @@ + diff --git a/src/lib/svg/guardian-members-logo.svg b/src/lib/svg/guardian-members-logo.svg new file mode 100644 index 00000000..8ab2b5fb --- /dev/null +++ b/src/lib/svg/guardian-members-logo.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-moneydeals-logo.svg b/src/lib/svg/guardian-moneydeals-logo.svg new file mode 100644 index 00000000..2b111577 --- /dev/null +++ b/src/lib/svg/guardian-moneydeals-logo.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-patron-logo.svg b/src/lib/svg/guardian-patron-logo.svg new file mode 100644 index 00000000..c86a03ad --- /dev/null +++ b/src/lib/svg/guardian-patron-logo.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-soulmates-logo.svg b/src/lib/svg/guardian-soulmates-logo.svg new file mode 100644 index 00000000..5fce680a --- /dev/null +++ b/src/lib/svg/guardian-soulmates-logo.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-subscriptions-logo.svg b/src/lib/svg/guardian-subscriptions-logo.svg new file mode 100644 index 00000000..377b5381 --- /dev/null +++ b/src/lib/svg/guardian-subscriptions-logo.svg @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardian-weekly-logo.svg b/src/lib/svg/guardian-weekly-logo.svg new file mode 100644 index 00000000..d46ee7ed --- /dev/null +++ b/src/lib/svg/guardian-weekly-logo.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/svg/guardianlive-logo.svg b/src/lib/svg/guardianlive-logo.svg new file mode 100644 index 00000000..582c8ba1 --- /dev/null +++ b/src/lib/svg/guardianlive-logo.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/templates/components/ManualCard.svelte b/src/templates/components/ManualCard.svelte index 51b5633c..18c6e079 100644 --- a/src/templates/components/ManualCard.svelte +++ b/src/templates/components/ManualCard.svelte @@ -11,6 +11,7 @@ export let image: string; export let url: string; export let callToAction: string; + export let buttonColour: string; export let direction = 'row'; @@ -25,7 +26,12 @@

- + {callToAction} @@ -41,7 +47,6 @@ padding: 12px 10px; display: block; margin: 0px; - max-width: 25%; flex: 1; } @@ -98,7 +103,7 @@ font-weight: 700; font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; - background: #c83877; + background: var(--button-colour); color: #ffffff; text-decoration: none; border-radius: 10rem; @@ -110,6 +115,9 @@ } @media (min-width: 740px) { + a.card { + max-width: 25%; + } a.card:nth-child(n) { padding: 12px 10px; display: block; diff --git a/src/templates/components/ManualHeader.svelte b/src/templates/components/ManualHeader.svelte new file mode 100644 index 00000000..fe1be4bf --- /dev/null +++ b/src/templates/components/ManualHeader.svelte @@ -0,0 +1,120 @@ + + + + +
+ + + + +
+ + {buttonText} + + +
+
+ + diff --git a/src/templates/components/ToneLogo.svelte b/src/templates/components/ToneLogo.svelte new file mode 100644 index 00000000..6a769aec --- /dev/null +++ b/src/templates/components/ToneLogo.svelte @@ -0,0 +1,29 @@ + + + +``` diff --git a/src/templates/components/icons/SubscriptionsLogo.svelte b/src/templates/components/icons/SubscriptionsLogo.svelte new file mode 100644 index 00000000..377b5381 --- /dev/null +++ b/src/templates/components/icons/SubscriptionsLogo.svelte @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/templates/csr/events-multiple/index.svelte b/src/templates/csr/events-multiple/index.svelte index 2921f78b..a422ee9a 100644 --- a/src/templates/csr/events-multiple/index.svelte +++ b/src/templates/csr/events-multiple/index.svelte @@ -4,6 +4,8 @@ import ManualCard from '$templates/components/ManualCard.svelte'; import EventsHeader from '$templates/components/EventsHeader.svelte'; import Resizer from '$templates/components/Resizer.svelte'; + import ManualHeader from '$templates/components/ManualHeader.svelte'; + import LiveLogo from '$templates/components/icons/LiveLogo.svelte'; export let BannerDescription: GAMVariable; export let HeaderButtonText: GAMVariable; @@ -58,13 +60,27 @@