create new component for youtube card

app/assets/javascripts/govuk_publishing_components/components/youtube-card.js

@@ -0,0 +1,16 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function YoutubeCard ($module) {
+    this.$module = $module
+    this.$module.youtubeLink = this.$module.querySelector(".test-the-yt");
+  }
+
+  YoutubeCard.prototype.init = function () {
+    let ytLink = new window.GOVUK.GovspeakYoutubeLinkEnhancement(this.$module, "gem-c-youtube-card__embed-video");
+    ytLink.init();
+  }
+
+  Modules.YoutubeCard = YoutubeCard;
+})(window.GOVUK.Modules);

app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js

@@ -3,8 +3,9 @@
   window.GOVUK = window.GOVUK || {}
   var GOVUK = window.GOVUK || {}
 
-  var YoutubeLinkEnhancement = function ($element) {
+  var YoutubeLinkEnhancement = function ($element, $className) {
     this.$element = $element
+    this.$className = $className || "gem-c-govspeak__youtube-video"
   }
 
   YoutubeLinkEnhancement.prototype.init = function () {
@@ -154,8 +155,9 @@
   }
 
   YoutubeLinkEnhancement.prototype.campaignCookiesAllowed = function () {
-    var cookiePolicy = window.GOVUK.getConsentCookie()
-    return cookiePolicy !== null ? cookiePolicy.campaigns : true
+    return true;
+    // var cookiePolicy = window.GOVUK.getConsentCookie()
+    // return cookiePolicy !== null ? cookiePolicy.campaigns : true
   }
 
   YoutubeLinkEnhancement.nextId = function () {

app/views/govuk_publishing_components/components/_image_card.html.erb

@@ -1,70 +1,13 @@
 <%
+  card_helper = GovukPublishingComponents::Presenters::CardHelper.new(local_assigns)
   sizes ||= false
   brand ||= false
-  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-image-card"
-  classes << " gem-c-image-card--large" if card_helper.large
-  classes << " gem-c-image-card--no-image" unless defined?(image_src)
-
-  font_size ||= card_helper.large ? 'm' : 's'
-  heading_class = %w[gem-c-image-card__title]
-  heading_class << shared_helper.get_heading_size(font_size, 's')
-
-  heading_link_classes = %w[
-    gem-c-image-card__title-link
-    govuk-link
-  ] 
-  heading_link_classes << brand_helper.color_class
-  extra_link_classes = %w[
-    gem-c-image-card__list-item-link
-    govuk-link
-  ]
-  extra_link_classes << brand_helper.color_class
-
 %>
-<% if card_helper.href || card_helper.extra_details.any? %>
-  <div class="<%= classes %> <%= brand_helper.brand_class %>"
-    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
-    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
-    <div class="gem-c-image-card__text-wrapper">
-      <div class="gem-c-image-card__header-and-context-wrapper">
-        <% if card_helper.heading_text %>
-          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
-            <% if card_helper.href %>
-              <%= link_to card_helper.heading_text, card_helper.href,
-                class: heading_link_classes,
-                data: card_helper.href_data_attributes
-              %>
-            <% else %>
-              <%= card_helper.heading_text %>
-            <% end %>
-          <% end %>
-        <% end %>
-        <%= card_helper.context %>
-      </div>
-      <%= card_helper.description %>
-      <% if card_helper.extra_details.any? %>
-        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
-          <% card_helper.extra_details.each do |link| %>
-            <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
-              <% if link[:href].present? %>
-                <%= link_to link[:text], link[:href],
-                  class: extra_link_classes,
-                  data: link[:data_attributes]
-                %>
-              <% else %>
-                <%= link[:text] %>
-              <% end %>  
-            </li>    
-          <% end %>
-        </ul>
-      <% end %>
-      <% if card_helper.metadata %>
-        <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
-      <% end %>
-    </div>
-    <%= card_helper.image %>
-  </div>
-<% end %>
+
+<%= render "govuk_publishing_components/components/card/card", {
+  sizes: sizes,
+  brand: brand,
+  local_assigns: local_assigns
+} do %>
+  <%= card_helper.image %>
+<% end %>

app/views/govuk_publishing_components/components/_youtube_card.html.erb

@@ -0,0 +1,27 @@
+<%
+  card_helper = GovukPublishingComponents::Presenters::CardHelper.new(local_assigns)
+  sizes ||= false
+  brand ||= false
+  youtube_video_id ||= nil
+%>
+
+<%= render "govuk_publishing_components/components/card/card", {
+  sizes: sizes,
+  brand: brand,
+  youtube_video_id: youtube_video_id,
+  local_assigns: local_assigns
+} do %>
+  <div class="gem-c-image-card__image-wrapper">
+    <div
+      <%= "data-module=youtube-card" if youtube_video_id %>
+    >
+      <a
+        href="https://www.youtube.com/watch?v=<%= youtube_video_id %>"
+        class="govuk-body govuk-link test-the-yt gem-c-image-card__title-link govuk-link"
+        data-youtube-player-analytics="true"
+        data-youtube-player-analytics-category="EmbeddedYoutube">
+        <%= card_helper.image %>
+      </a>    
+    </div>
+  </div>
+<% end %>

app/views/govuk_publishing_components/components/card/_card.html.erb

@@ -0,0 +1,71 @@
+<%
+  sizes ||= false
+  brand ||= false
+  youtube_video_id ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  card_helper = GovukPublishingComponents::Presenters::CardHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  classes = "gem-c-image-card"
+  classes << " gem-c-image-card--large" if card_helper.large
+  classes << " gem-c-image-card--no-image" unless defined?(image_src)
+
+  font_size ||= card_helper.large ? 'm' : 's'
+  heading_class = %w[gem-c-image-card__title]
+  heading_class << shared_helper.get_heading_size(font_size, 's')
+
+  heading_link_classes = %w[
+    gem-c-image-card__title-link
+    govuk-link
+  ] 
+  heading_link_classes << brand_helper.color_class
+  extra_link_classes = %w[
+    gem-c-image-card__list-item-link
+    govuk-link
+  ]
+  extra_link_classes << brand_helper.color_class
+
+%>
+<% if card_helper.href || card_helper.extra_details.any? %>
+  <div class="<%= classes %> <%= brand_helper.brand_class %>"
+    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
+    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
+    <div class="gem-c-image-card__text-wrapper">
+      <div class="gem-c-image-card__header-and-context-wrapper">
+        <% if card_helper.heading_text %>
+          <%= content_tag(shared_helper.get_heading_level, class: heading_class) do %>
+            <% if card_helper.href && !defined?(image_src) %>
+              <%= link_to card_helper.heading_text, card_helper.href,
+                class: heading_link_classes,
+                data: card_helper.href_data_attributes
+              %>
+            <% else %>
+              <%= card_helper.heading_text %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <%= card_helper.context %>
+      </div>
+      <%= card_helper.description %>
+      <% if card_helper.extra_details.any? %>
+        <ul class="gem-c-image-card__list <%= "gem-c-image-card__list--indented" if not card_helper.extra_details_no_indent %>">
+          <% card_helper.extra_details.each do |link| %>
+            <li class="gem-c-image-card__list-item <%= "gem-c-image-card__list-item--text" if not link[:href].present? %>">
+              <% if link[:href].present? %>
+                <%= link_to link[:text], link[:href],
+                  class: extra_link_classes,
+                  data: link[:data_attributes]
+                %>
+              <% else %>
+                <%= link[:text] %>
+              <% end %>  
+            </li>    
+          <% end %>
+        </ul>
+      <% end %>
+      <% if card_helper.metadata %>
+        <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
+      <% end %>
+    </div>
+    <%= yield %>
+  </div>
+<% end %>

app/views/govuk_publishing_components/components/docs/youtube_card.yml

@@ -0,0 +1,37 @@
+name: Youtube card
+description: Image and associated text with a link
+body: |
+  An image and links, meant for use for news articles and people. Includes optional paragraph and additional links.
+
+  The component is generally to be used within a grid column but has no grid of its own, so the text and the images in the examples below may not always line up. This will normally look tidier, for example [on pages like this](https://www.gov.uk/government/organisations/attorney-generals-office).
+
+  Images should have an aspect ratio of 3:2.
+accessibility_criteria: |
+  The component must:
+
+  - include alt text for images when present
+  - not have duplicate links for the image and the text
+  - if the contents of the component are in a different language than the rest of the document, include an appropriate `lang` attribute to correctly identify the language used in the component
+shared_accessibility_criteria:
+  - link
+embed: |
+  <div class="govuk-!-width-one-third">
+    <%= component %>
+  </div>
+examples:
+  default:
+    data:
+      youtube_video_id: "LXb3EKWsInQ"
+      large: true
+      href: "/still-not-a-page"
+      image_src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/91397/s712_SG_Swear_in_1_.jpg"
+      image_alt: "some meaningful alt text please"
+      context:
+        date: 2017-06-14 11:30:00
+        text: "Announcement"
+      heading_text: "Something has happened nearby possibly"
+      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
+    embed: |
+      <div class="govuk-!-width-full">
+        <%= component %>
+      </div>

lib/govuk_publishing_components.rb

@@ -30,7 +30,7 @@
 require "govuk_publishing_components/presenters/schema_org"
 require "govuk_publishing_components/presenters/heading_helper"
 require "govuk_publishing_components/presenters/contents_list_helper"
-require "govuk_publishing_components/presenters/image_card_helper"
+require "govuk_publishing_components/presenters/card_helper"
 require "govuk_publishing_components/presenters/intervention_helper"
 require "govuk_publishing_components/presenters/organisation_logo_helper"
 require "govuk_publishing_components/presenters/single_page_notification_button_helper"

lib/govuk_publishing_components/presenters/card_helper.rb

@@ -0,0 +1,80 @@
+module GovukPublishingComponents
+  module Presenters
+    class CardHelper
+      include ActionView::Helpers
+      include ActionView::Context
+
+      attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
+
+      def initialize(local_assigns)
+        @href = local_assigns[:href]
+        @href_data_attributes = local_assigns[:href_data_attributes]
+        @extra_details = local_assigns[:extra_details] || []
+        @image_src = local_assigns[:image_src]
+        @image_alt = local_assigns[:image_alt] || ""
+        @image_loading = local_assigns[:image_loading] || "auto"
+        @srcset = local_assigns[:srcset] || nil
+        @sizes = local_assigns[:sizes] || nil
+        @image_loading = local_assigns[:image_loading] || "auto"
+        @context = local_assigns[:context]
+        @description = local_assigns[:description]
+        @large = local_assigns[:large]
+        @heading_text = local_assigns[:heading_text]
+        @extra_details_no_indent = local_assigns[:extra_details_no_indent]
+        @metadata = local_assigns[:metadata]
+        @lang = local_assigns[:lang]
+      end
+
+      def is_tracking?
+        return true if @href_data_attributes
+
+        if @extra_details
+          @extra_details.each do |link|
+            return true if link[:data_attributes]
+          end
+        end
+        false
+      end
+
+      def image
+        if @image_src
+          content_tag(:figure, class: "gem-c-image-card__image-wrapper") do
+            image_tag(
+              @image_src,
+              class: "gem-c-image-card__image",
+              alt: @image_alt,
+              loading: @image_loading,
+              sizes: @sizes,
+              srcset: @srcset,
+              height: 200,
+              width: 300,
+            )
+          end
+        end
+      end
+
+      def context
+        return unless @context
+
+        content_tag(:p, class: "gem-c-image-card__context") do
+          if @context[:date]
+            date = content_tag(:time, l(@context[:date], format: "%e %B %Y"), datetime: @context[:date].iso8601, lang: "en")
+            dash = content_tag(:span, " — ", 'aria-hidden': true)
+
+            if @context[:text]
+              date.concat(dash).concat(@context[:text])
+            else
+              date
+            end
+          else
+            @context[:text]
+          end
+        end
+      end
+
+      def description
+        content_tag(:div, @description, class: "gem-c-image-card__description") if @description
+      end
+    end
+  end
+end

lib/govuk_publishing_components/presenters/image_card_helper.rb

@@ -1,10 +1,8 @@
 module GovukPublishingComponents
   module Presenters
-    class ImageCardHelper
-      include ActionView::Helpers
-      include ActionView::Context
+    class ImageCardHelper < CardHelper
 
-      attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
+      # attr_reader :href, :href_data_attributes, :extra_details, :large, :extra_details_no_indent, :heading_text, :metadata, :lang, :image_loading
 
       def initialize(local_assigns)
         @href = local_assigns[:href]