Add Embed Card component

Update `application.mjs` to support multiple cookie banners on a page.

Create new Embed Card component. If require cookie not set (or script
fails to execute) placeholder image that links to YouTube video will be
created. If cookie is set then placeholder will be replaced with a YT
embed.

Add `lazyEmbedObserver` in `application.mjs`. Embed Card component will
only be initialized when the placeholder is in the viewport. This means
for a page with lots of embeds, the page the performance hit will be
limited if the user doesn't scroll the entire page.

Add tests for new Embed Card component.

__tests__/embed-card.test.js

@@ -0,0 +1,45 @@
+const { ports } = require('../config')
+
+const { goTo } = require('./helpers/puppeteer.js')
+
+const cookieParam = {
+  name: 'design_system_cookies_policy',
+  value: JSON.stringify({ analytics: null, campaign: null, version: 2 }),
+  url: `http://localhost:${ports.preview}`
+}
+
+describe('Embed Card', () => {
+  beforeEach(async () => {
+    await page.deleteCookie({
+      name: cookieParam.name,
+      url: cookieParam.url
+    })
+
+    await page.setJavaScriptEnabled(true)
+
+    await goTo(page, '/community/design-system-day-2024-day-1/')
+  })
+
+  it('will render placeholder if cookies not accepted', async () => {
+    await expect(page.$('.app-embed-card__placeholder')).resolves.not.toBe(null)
+  })
+
+  it('will render placeholder if cookies rejected', async () => {
+    const buttonReject = await page.$(
+      'div[data-cookie-category="campaign"] .js-cookie-banner-reject'
+    )
+    await buttonReject.click()
+    await expect(page.$('.app-embed-card__placeholder')).resolves.not.toBe(null)
+  })
+
+  it('will not render placeholder if cookies accepted', async () => {
+    const buttonAccept = await page.$(
+      'div[data-cookie-category="campaign"] .js-cookie-banner-accept'
+    )
+    await buttonAccept.click()
+
+    await new Promise((resolve) => setTimeout(resolve, 3000))
+
+    await expect(page.$('.app-embed-card__placeholder')).resolves.toBe(null)
+  })
+})

src/javascripts/application.mjs

@@ -12,6 +12,7 @@ import {
 } from './components/cookie-functions.mjs'
 import CookiesPage from './components/cookies-page.mjs'
 import Copy from './components/copy.mjs'
+import EmbedCard from './components/embed-card.mjs'
 import Example from './components/example.mjs'
 import Navigation from './components/navigation.mjs'
 import OptionsTable from './components/options-table.mjs'
@@ -24,12 +25,10 @@ createAll(NotificationBanner)
 createAll(SkipLink)
 
 // Initialise cookie banner
-const $cookieBanner = document.querySelector(
+const $cookieBanners = document.querySelectorAll(
   '[data-module="govuk-cookie-banner"]'
 )
-if ($cookieBanner) {
-  new CookieBanner($cookieBanner)
-}
+$cookieBanners.forEach(($cookieBanner) => new CookieBanner($cookieBanner))
 
 // Initialise analytics if consent is given
 const userConsent = getConsentCookie()
@@ -82,3 +81,42 @@ const $cookiesPage = document.querySelector('[data-module="app-cookies-page"]')
 if ($cookiesPage) {
   new CookiesPage($cookiesPage)
 }
+
+const $embedCards = document.querySelectorAll('[data-module="app-embed-card"]')
+
+const lazyEmbedObserver = new IntersectionObserver(function (
+  entries,
+  observer
+) {
+  entries.forEach(function (entry) {
+    if (entry.isIntersecting) {
+      new EmbedCard(entry.target)
+    }
+  })
+})
+
+$embedCards.forEach(function (lazyEmbed) {
+  lazyEmbedObserver.observe(lazyEmbed)
+})
+
+const campaignCookieBanner = document.querySelector(
+  '[data-cookie-category="campaign"]'
+)
+
+if (campaignCookieBanner) {
+  const callback = (mutationList, observer) => {
+    if (mutationList.length) {
+      $embedCards.forEach(function (lazyEmbed) {
+        lazyEmbedObserver.unobserve(lazyEmbed)
+        lazyEmbedObserver.observe(lazyEmbed)
+      })
+    }
+  }
+
+  const observer = new MutationObserver(callback)
+  observer.observe(campaignCookieBanner, {
+    attributes: true,
+    childList: true,
+    subtree: true
+  })
+}

src/javascripts/components/embed-card.mjs

@@ -0,0 +1,88 @@
+import { getConsentCookie } from './cookie-functions.mjs'
+
+/**
+ * Embed Card Youtube functionality
+ */
+class EmbedCard {
+  /**
+   * @param {Element} $module - HTML element
+   */
+  constructor($module) {
+    if (
+      !($module instanceof HTMLElement) ||
+      !document.body.classList.contains('govuk-frontend-supported')
+    ) {
+      return this
+    }
+
+    this.$module = $module
+
+    this.replacePlaceholder()
+  }
+
+  /**
+   * Replace placeholder
+   *
+   * Replaces the placeholder with the iframe if cookies are set.
+   */
+  replacePlaceholder() {
+    if (this.$module.querySelector('iframe')) {
+      return
+    }
+
+    const consentCookie = getConsentCookie()
+
+    if (consentCookie && consentCookie.campaign) {
+      const placeholder = this.$module.querySelector(
+        '.app-embed-card__placeholder'
+      )
+      const placeholderText = this.$module.querySelector(
+        '.app-embed-card__placeholder-text'
+      )
+
+      const title = placeholderText ? placeholderText.textContent : ''
+
+      const ytHref = placeholder.getAttribute('href')
+      const ytId = ytHref.match(
+        /(youtu\.be\/|youtube\.com\/(watch\?(.*&)?v=|(embed|v)\/))([^?&"'>]+)/
+      )[5]
+
+      const iframe = this.createIframe(ytId, title)
+
+      placeholder.remove()
+
+      const iframeContainer = this.$module.querySelector(
+        '.app-embed-card__placeholder-iframe-container'
+      )
+      iframeContainer.appendChild(iframe)
+    }
+  }
+
+  /**
+   * Create the iframe
+   *
+   * Create the iframe for YouTube embed
+   *
+   * @param {string} ytId - YouTube ID
+   * @param {string} title - Title for iFrame (for screen readers)
+   */
+  createIframe(ytId, title) {
+    const iframe = document.createElement('IFRAME')
+
+    iframe.setAttribute('src', `https://www.youtube-nocookie.com/embed/${ytId}`)
+    iframe.setAttribute('width', '560')
+    iframe.setAttribute('height', '315')
+    iframe.setAttribute('title', title)
+    iframe.setAttribute(
+      'allow',
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;'
+    )
+    iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin')
+    iframe.setAttribute('allowfullscreen', 'true')
+    iframe.setAttribute('frameborder', '0')
+
+    return iframe
+  }
+}
+
+export default EmbedCard

src/stylesheets/components/_embed-card.scss

@@ -0,0 +1,17 @@
+.app-embed-card__placeholder-thumb-container {
+  position: relative;
+}
+
+.app-embed-card__placeholder-thumb-container::before {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background:
+    url("/images/yt.svg") 50% center / 75px no-repeat,
+    linear-gradient(transparent, transparent);
+  background-position: 50% center;
+}

src/stylesheets/main.scss

@@ -51,6 +51,7 @@ $app-code-color: #d13118;
 @import "components/cookies-page";
 @import "components/call-to-action";
 @import "components/promo-banner";
+@import "components/embed-card";
 @import "components/example";
 @import "components/footer";
 @import "components/header";
@@ -429,3 +430,7 @@ pre .language-plaintext {
     font-weight: normal;
   }
 }
+
+.app-campaign-cookie-banner .govuk-grid-column-two-thirds {
+  width: 100%;
+}

views/partials/_embed-card.njk

@@ -0,0 +1,22 @@
+{% macro embedCard(params) %}
+  <div class="govuk-grid-row" data-module="app-embed-card">
+    <div class="govuk-grid-column-two-thirds-from-desktop">
+      {{- caller() if caller else params.content | safe -}}
+      <a class="app-embed-card__placeholder" href="https://www.youtube.com/watch?v={{ params.ytId }}">
+        <div class="app-embed-card__placeholder-thumb-container">
+          <img class="app-image--no-border app-embed-card__placeholder-thumb-image" alt="placeholder for {{ params.title }} youtube embed" src="https://img.youtube.com/vi/{{ params.ytId }}/hqdefault.jpg">
+          <span class="app-embed-card__placeholder-text govuk-visually-hidden">
+            {{ params.title }}
+          </span>
+        </div>
+      </a>
+      <div class="app-embed-card__placeholder-iframe-container"></div>
+      <p>
+        <a href="{{ params.transcriptHref }}">Read the full transcript</a>
+      </p>
+    </div>
+    <div class="govuk-grid-column-one-third-from-desktop">
+      <img class="app-image--no-border" src="{{ params.authorImgSrc }}" alt="{{ params.authorImgAlt }}" role="presentation">
+    </div>
+  </div>
+{% endmacro %}