[WIP] [DO NOT MERGE] Redesign No. 10 organisation page

app/assets/stylesheets/views/_organisation.scss

@@ -71,3 +71,13 @@
   background-position: 50% 0;
   text-align: center;
 }
+
+.organisation__no10-yt-link {
+  display: none;
+}
+
+.js-enabled {
+  .organisation__no10-yt-link {
+    display: block;
+  }
+}

app/helpers/latest_news_helper.rb

@@ -0,0 +1,39 @@
+module LatestNewsHelper
+  include ActionView::Helpers::TranslationHelper
+
+  def latest_news_items(organisation, get_first_image: false, count: 5)
+    search_results = Services.search_api.search({
+      filter_content_purpose_supergroup: %w[news_and_communications],
+      filter_organisations: [organisation.slug],
+      order: "-public_timestamp",
+      count:,
+    })
+
+    first_image = get_news_item_header_image_from(search_results) if get_first_image
+
+    search_results["results"].each_with_index.map do |result, index|
+      {
+        href: result["link"],
+        image_src: first_image && index.zero? ? first_image["url"] : nil,
+        image_alt: first_image && index.zero? ? first_image["alt_text"] : nil,
+        heading_text: result["title"],
+        text: result["title"],
+        metadata: nil,
+        brand: organisation.brand,
+      }
+    end
+  end
+
+  def get_news_item_header_image_from(results)
+    return nil unless results["results"].any?
+
+    news_item = Services.content_store.content_item(results["results"].first["link"])
+    news_item.parsed_content["details"]["image"]
+  rescue StandardError
+    GovukError.notify("News item in Latest News Section doesn't exist or doesn't have an image")
+    {
+      "url" => "https://assets.publishing.service.gov.uk/media/5a37dae940f0b649cceb1841/s300_number10.jpg",
+      "alt_text" => "Front door of No. 10 Downing Street",
+    }
+  end
+end

app/helpers/promotional_feature_helper.rb

@@ -0,0 +1,96 @@
+module PromotionalFeatureHelper
+  include ActionView::Helpers::TranslationHelper
+
+  def is_video_promotional_feature?(feature)
+    return false unless feature[:items]&.any?
+
+    feature[:items].first[:youtube_video_id].present?
+  end
+
+  def promotional_video_feature_item_links
+    promotional_video_feature[:items].first[:extra_details].map do |link|
+      { href: link[:href], text: link[:text] }
+    end
+  end
+
+  def promotional_video_feature_youtube_url
+    "https://www.youtube.com/watch?v=#{promotional_video_feature[:items].first[:youtube_video_id]}"
+  end
+
+  def promotional_video_feature_title
+    promotional_video_feature[:items].first[:youtube_video_alt]
+  end
+
+  def promotional_video_feature
+    promotional_features.select { |feature| is_video_promotional_feature?(feature) }.first
+  end
+
+  def promotional_image_features
+    promotional_features.reject { |feature| is_video_promotional_feature?(feature) }
+  end
+
+  def has_promotional_video_feature?
+    promotional_features.select { |feature| is_video_promotional_feature?(feature) }.any?
+  end
+
+  def has_promotional_features?
+    org.ordered_promotional_features.present?
+  end
+
+  def promotional_features
+    org.ordered_promotional_features.map do |feature|
+      number_of_items = feature["items"].length
+      {
+        title: feature["title"],
+        number_of_items:,
+        child_column_class: promotions_child_column_class(number_of_items),
+        items: items_for_a_promotional_feature(feature),
+      }
+    end
+  end
+
+  def promotions_child_column_class(number_of_items)
+    return "govuk-grid-column-one-half" if number_of_items == 2
+
+    "govuk-grid-column-one-third" if number_of_items == 3
+  end
+
+  def items_for_a_promotional_feature(feature)
+    number_of_items = feature["items"].length
+    feature["items"].map do |item|
+      data = {
+        description: item["summary"].gsub("\r\n", "<br/>").html_safe,
+        href: promotional_feature_link(item["href"]),
+        image_src: item.dig("image", "url"),
+        image_alt: item.dig("image", "alt_text"),
+        youtube_video_id: item.dig("youtube_video", "id"),
+        youtube_video_alt: item.dig("youtube_video", "alt_text"),
+        extra_details: item["links"].map do |link|
+          {
+            text: link["title"],
+            href: link["href"],
+          }
+        end,
+        brand: org.brand,
+        heading_level: 3,
+        extra_details_no_indent: true,
+      }.merge(make_full_width(number_of_items))
+
+      if item["title"].present?
+        data[:heading_text] = item["title"]
+      end
+
+      data
+    end
+  end
+
+  def promotional_feature_link(link)
+    link.presence
+  end
+
+  def make_full_width(number_of_items)
+    return {} unless number_of_items == 1
+
+    { large: true }
+  end
+end

app/models/organisation.rb

@@ -46,6 +46,14 @@ def is_promotional_org?
     is_no_10? || organisation_type == "civil_service"
   end
 
+  def has_more_videos_link?
+    more_videos_link.present?
+  end
+
+  def more_videos_link
+    is_no_10? ? "https://www.youtube.com/number10gov" : nil
+  end
+
   def is_sub_organisation?
     organisation_type == "sub_organisation"
   end

app/presenters/organisations/documents_presenter.rb

@@ -1,6 +1,8 @@
 module Organisations
   class DocumentsPresenter
     include OrganisationHelper
+    include PromotionalFeatureHelper
+
     attr_reader :org
 
     def initialize(organisation)
@@ -25,22 +27,6 @@ def remaining_featured_news
       featured_news(org.ordered_featured_documents)
     end
 
-    def has_promotional_features?
-      org.ordered_promotional_features.present?
-    end
-
-    def promotional_features
-      org.ordered_promotional_features.map do |feature|
-        number_of_items = feature["items"].length
-        {
-          title: feature["title"],
-          number_of_items:,
-          child_column_class: promotions_child_column_class(number_of_items),
-          items: items_for_a_promotional_feature(feature),
-        }
-      end
-    end
-
     def has_latest_documents?
       latest_documents[:items].present?
     end
@@ -66,41 +52,6 @@ def latest_documents_excluding_org_page
       documents.reject { |doc| doc["link"] == @org.base_path }.take(3)
     end
 
-    def items_for_a_promotional_feature(feature)
-      number_of_items = feature["items"].length
-      feature["items"].map do |item|
-        data = {
-          description: item["summary"].gsub("\r\n", "<br/>").html_safe,
-          href: promotional_feature_link(item["href"]),
-          image_src: item.dig("image", "url"),
-          image_alt: item.dig("image", "alt_text"),
-          youtube_video_id: item.dig("youtube_video", "id"),
-          youtube_video_alt: item.dig("youtube_video", "alt_text"),
-          extra_details: item["links"].map do |link|
-            {
-              text: link["title"],
-              href: link["href"],
-            }
-          end,
-          brand: org.brand,
-          heading_level: 3,
-          extra_details_no_indent: true,
-        }.merge(make_full_width(number_of_items))
-
-        if item["title"].present?
-          data[:heading_text] = item["title"]
-        end
-
-        data
-      end
-    end
-
-    def make_full_width(number_of_items)
-      return {} unless number_of_items == 1
-
-      { large: true }
-    end
-
     def featured_news(featured, first_featured: false)
       news_stories = []
 
@@ -127,15 +78,5 @@ def featured_news(featured, first_featured: false)
 
       news_stories
     end
-
-    def promotions_child_column_class(number_of_items)
-      return "govuk-grid-column-one-half" if number_of_items == 2
-
-      "govuk-grid-column-one-third" if number_of_items == 3
-    end
-
-    def promotional_feature_link(link)
-      link.presence
-    end
   end
 end

app/views/organisations/_corporate_information.html.erb

@@ -42,7 +42,7 @@
         lang: t_fallback('organisations.follow_us')
       } %>
       <div lang="en">
-        <%= render "govuk_publishing_components/components/share_links", @what_we_do.share_links.merge({ ga4_extra_data: { section: t('organisations.follow_us', locale: :en) }}) %>
+        <%= render "govuk_publishing_components/components/share_links", @what_we_do.share_links.merge({ ga4_extra_data: { section: t('organisations.follow_us', locale: :en, brand: @organisation.brand ) }}) %>
       </div>
   <% end %>
 </div>

app/views/organisations/_featured_news_small.html.erb

@@ -0,0 +1,34 @@
+<% if @documents.has_featured_news? %>
+<%
+  ga4_image_card_json = {
+    "event_name": "navigation",
+    "type": "image card",
+    "section": t('shared.featured', locale: :en)
+  }.to_json
+%>
+<section class="brand--<%= @organisation.brand %> brand__border-color organisation__brand-border-top organisation__section-wrap organisation__margin-bottom" id="featured-documents-small">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render "govuk_publishing_components/components/heading", {
+          text: t('shared.featured'),
+          padding: true,
+          margin_bottom: 3,
+          lang: t_fallback('shared.featured')
+      } %>
+    </div>
+  </div>
+
+  <% @documents.remaining_featured_news.first(6).in_groups_of(3, false) do |news| %>
+    <div class="govuk-grid-row" data-module="ga4-link-tracker" data-ga4-track-links-only data-ga4-link="<%= ga4_image_card_json %>">
+      <% news.each do |news_item| %>
+        <% classes = %w[] %>
+        <% classes << "govuk-grid-column-one-third" %>
+
+        <%= content_tag(:div, class: classes) do %>
+          <%= render "govuk_publishing_components/components/image_card", news_item.merge({ large: false }) %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</section>
+<% end %>

app/views/organisations/_header.html.erb

@@ -1,27 +1,25 @@
-<% if @organisation.is_no_10? %>
-  <h1 class="organisation__no10-banner organisation__margin-bottom"><%= @header.org.title %></h1>
-<% else %>
-  <h1 class="govuk-visually-hidden"><%= @header.org.title %></h1>
 
-  <div class="govuk-grid-row">
-    <div class="<%= @header.logo_wrapper_class %> organisation__margin-bottom">
-      <%= render "govuk_publishing_components/components/organisation_logo", {
-        organisation: @header.organisation_logo
-      } %>
+<h1 class="govuk-visually-hidden"><%= @header.org.title %></h1>
 
-      <% if @organisation.is_sub_organisation? %>
-        <div class="organisation__parent-organisations brand--<%= @organisation.brand %>">
-          <%= t('organisations.part_of') %>
-          <%= @show.parent_organisations %>
-        </div>
-      <% end %>
-    </div>
+<div class="govuk-grid-row">
+  <div class="<%= @header.logo_wrapper_class %> organisation__margin-bottom">
+    <%= render "govuk_publishing_components/components/organisation_logo", {
+      organisation: @header.organisation_logo
+    } %>
 
-    <% if @organisation.is_live? %>
-      <div class="<%= @header.link_wrapper_class %> organisation__margin-bottom">
-        <%= render "govuk_publishing_components/components/translation_nav", @header.translation_links %>
-        <%= render "components/document_navigation_list", @header.ordered_featured_links.merge({ ga4_data: { section: @header.org.title } }) %>
+    <% if @organisation.is_sub_organisation? %>
+      <div class="organisation__parent-organisations brand--<%= @organisation.brand %>">
+        <%= t('organisations.part_of') %>
+        <%= @show.parent_organisations %>
       </div>
     <% end %>
   </div>
-<% end %>
+
+  <% if @organisation.is_live? %>
+    <div class="<%= @header.link_wrapper_class %> organisation__margin-bottom">
+      <%= render "govuk_publishing_components/components/translation_nav", @header.translation_links %>
+      <%= render "components/document_navigation_list", @header.ordered_featured_links.merge({ brand: @organisation.brand, ga4_data: { section: @header.org.title } }) %>
+    </div>
+  <% end %>
+</div>
+

app/views/organisations/_latest_news.html.erb

@@ -0,0 +1,33 @@
+<%
+  ga4_image_card_json = {
+    "event_name": "navigation",
+    "type": "image card",
+    "section": t("organisations.latest_news", lang: :en)
+  }.to_json
+%>
+<section class="brand--<%= @organisation.brand %> brand__border-color organisation__brand-border-top organisation__section-wrap organisation__margin-bottom" id="latest-news">
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render "govuk_publishing_components/components/heading", {
+          text: t("organisations.latest_news"),
+          padding: true,
+          margin_bottom: 3,
+          lang: "en"
+      } %>
+    </div>
+  </div>
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-one-half" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_image_card_json %>" data-ga4-track-links-only>
+      <% latest_news_items = latest_news_items(@organisation, get_first_image: true) %>
+      <%= render "govuk_publishing_components/components/image_card", latest_news_items.shift %>
+    </div>
+    <div class="govuk-grid-column-one-half">
+      <%= render "govuk_publishing_components/components/list",
+        brand: @organisation.brand,
+        extra_spacing: true,
+        items: latest_news_items.map { |item| sanitize("<a href=\"#{item[:href]}\" rel=\"noopener\" class=\"govuk-link brand__color\">#{item[:text]}</a>") }
+      %>
+    </div>
+  </div>
+</section>