Take part document

README.md

@@ -52,6 +52,10 @@ Transaction start pages:
 * https://www.gov.uk/bank-holidays
 * https://www.gov.uk/when-do-the-clocks-change
 
+### Take Part
+
+* https://www.gov.uk/government/get-involved/take-part/improve-your-social-housing
+
 ### Misc
 
 | URL  | Related views |

app/assets/stylesheets/components/_figure.scss

@@ -0,0 +1,47 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.app-c-figure {
+  border-top: 1px solid $govuk-border-colour;
+  padding-top: govuk-spacing(3);
+  margin: 0;
+  margin-bottom: govuk-spacing(8);
+
+  @include govuk-clearfix;
+  @include govuk-media-query($until: tablet) {
+    margin-bottom: govuk-spacing(6);
+  }
+}
+
+.app-c-figure__image {
+  display: block;
+  width: 100%;
+
+  @include govuk-media-query($from: tablet) {
+    float: left;
+    width: 50%;
+  }
+}
+
+.app-c-figure__figcaption {
+  @include govuk-font(16);
+
+  @include govuk-media-query($from: tablet) {
+    display: block;
+    vertical-align: top;
+    box-sizing: border-box;
+    float: left;
+    padding-left: govuk-spacing(3);
+    width: 50%;
+  }
+
+  @include govuk-media-query($until: tablet) {
+    margin-top: govuk-spacing(2);
+  }
+}
+
+.app-c-figure__figcaption-text {
+  margin: 0;
+  margin-bottom: govuk-spacing(2);
+
+  @include govuk-font(16);
+}

app/controllers/content_items_controller.rb

@@ -26,7 +26,7 @@ def content_item
   end
 
   def content_item_slug
-    nil # set to override content item fetched from Content Store
+    request.path
   end
 
   def content_item_hash

app/controllers/take_part_controller.rb

@@ -0,0 +1,2 @@
+class TakePartController < ContentItemsController
+end

app/helpers/locale_helper.rb

@@ -6,4 +6,30 @@ def lang_attribute(locale)
   def page_text_direction
     I18n.t("i18n.direction", locale: I18n.locale, default: "ltr")
   end
+
+  def native_language_name_for(locale)
+    I18n.t("language_names.#{locale}", locale:)
+  end
+
+  def translations_for_nav(translations)
+    translations.map do |translation|
+      {
+        locale: translation["locale"],
+        base_path: translation["base_path"],
+        text: native_language_name_for(translation["locale"]),
+      }.tap do |h|
+        h[:active] = true if h[:locale] == I18n.locale.to_s
+      end
+    end
+  end
+
+  def t_locale_fallback(key, options = {})
+    options[:locale] = I18n.locale
+    options[:fallback] = nil
+    translation = I18n.t(key, **options)
+
+    if translation.nil? || translation.downcase.include?("translation missing")
+      I18n.default_locale
+    end
+  end
 end

app/models/content_item.rb

@@ -22,6 +22,8 @@ def initialize(content_store_response, override_content_store_hash: nil)
     @public_updated_at = content_store_hash["public_updated_at"]
 
     @attachments = get_attachments(content_store_hash.dig("details", "attachments"))
+
+    content_store_hash["links"]["ordered_related_items"] = ordered_related_items(content_store_hash["links"]) if content_store_hash["links"]
   end
 
   alias_method :to_h, :content_store_hash
@@ -41,11 +43,25 @@ def method_missing(method_name, *_args, &_block)
     end
   end
 
+  def available_translations
+    translations = content_store_response["links"]["available_translations"] || []
+
+    translations.sort_by { |t| t["locale"] == I18n.default_locale.to_s ? "" : t["locale"] }
+  end
+
 private
 
   def get_attachments(attachment_hash)
     return [] unless attachment_hash
 
     attachment_hash.map { OpenStruct.new(_1) }
   end
+
+  def ordered_related_items(links)
+    return [] if links["ordered_related_items_overrides"].present?
+
+    links["ordered_related_items"].presence || links.fetch(
+      "suggested_ordered_related_items", []
+    )
+  end
 end

app/views/components/_figure.html.erb

@@ -0,0 +1,25 @@
+<% add_app_component_stylesheet("figure") %>
+<%
+  alt ||= ''
+  caption ||= ''
+  credit ||= ''
+%>
+<figure class="app-c-figure" lang="en">
+  <% if src.present? %>
+    <img class="app-c-figure__image" src="<%= src %>" alt="<%= alt %>">
+  <% end %>
+  <% if caption.present? || credit.present? %>
+    <figcaption class="app-c-figure__figcaption">
+      <% if caption.present? %>
+        <p class="app-c-figure__figcaption-text">
+          <%= caption %>
+        </p>
+      <% end %>
+      <% if credit.present? %>
+        <p class="app-c-figure__figcaption-text">
+          <%= I18n.t("components.figure.image_credit", credit: credit) %>
+        </p>
+      <% end %>
+    </figcaption>
+  <% end %>
+</figure>

app/views/components/docs/figure.yml

@@ -0,0 +1,43 @@
+name: Figure
+description: A figure containing an image that never exceeds the component’s width
+body: |
+  A figure should be used for images that are referenced within a page, but which can be moved around without affecting the flow of the page [(see guidance here)](https://developer.mozilla.org/en/docs/Web/HTML/Element/figure)
+
+  Examples:
+
+  - [Case Study containing an image](/government/case-studies/2013-elections-in-swaziland)
+  - [Travel Advice containing a map (image)](/foreign-travel-advice/nepal)
+accessibility_criteria: |
+  The figure must:
+
+  - provide an informative text description, as alt text or caption
+
+examples:
+  default:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+  figure_with_alt_text:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      alt: 'An image of the lords chamber'
+  figure_with_caption:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      alt: 'An image of the lords chamber'
+      caption: 'The Lords Chamber'
+  right_to_left_with_caption:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg'
+      alt: 'تأشيرات'
+      caption: 'تأشيرات'
+    context:
+      right_to_left: true
+  figure_with_credit:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      credit: Wallis Crankled
+  figure_with_caption_and_credit:
+    data:
+      src: 'https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg'
+      caption: The Lords Chamber
+      credit: Wallis Crankled

app/views/layouts/application.html.erb

@@ -55,7 +55,7 @@
   </head>
 
   <body class="mainstream <%= yield :body_classes %>">
-    <div id="wrapper" class="<%= wrapper_class(publication || @presenter) %>">
+    <div id="wrapper" class="<%= wrapper_class(publication || @presenter) %> direction-<%= page_text_direction %>">
       <%= yield :body %>
     </div>
   </body>

app/views/shared/_translations.html.erb

@@ -0,0 +1,6 @@
+<% if @content_item.available_translations.any? %>
+  <div class="govuk-grid-column-one-third">
+    <%= render 'govuk_publishing_components/components/translation_nav',
+        translations: translations_for_nav(@content_item.available_translations) %>
+  </div>
+<% end %>

app/views/take_part/show.html.erb

@@ -0,0 +1,44 @@
+<% content_for :title do %>
+  <%= @content_item.title %> - GOV.UK
+<% end %>
+
+<% content_for :extra_headers do %>
+  <%= render "govuk_publishing_components/components/machine_readable_metadata", { content_item: @content_item.to_h, schema: :article } %>
+  <meta name="description" content="<%= strip_tags(@content_item.description) %>">
+<% end %>
+
+
+<main role="main" id="content" class="take-part" <%= lang_attribute(@content_item.locale) %>>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render "govuk_publishing_components/components/title", {
+          title: @content_item.title,
+          context: I18n.t("formats.#{@content_item.document_type}", count: 1),
+          context_locale: t_locale_fallback("formats.#{@content_item.document_type}", count: 1),
+        }
+      %>
+      <%= render "govuk_publishing_components/components/lead_paragraph", text: @content_item.description %>
+    </div>
+
+    <%= render 'shared/translations' %>
+  </div>
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <%= render 'components/figure',
+      src: @content_item.image["url"],
+      alt: @content_item.image["alt_text"],
+      credit: @content_item.image["credit"],
+      caption: @content_item.image["caption"] if @content_item.image %>
+
+      <%= render "govuk_publishing_components/components/govspeak", {
+        direction: page_text_direction
+      } do %>
+      <%= raw(@content_item.body) %>
+      <% end %>
+    </div>
+    <%= render 'shared/sidebar_navigation' %>
+  </div>
+</main>
+
+<%= render 'shared/footer_navigation' %>

config/govuk_examples.yml

@@ -11,5 +11,6 @@ homepage: /
 place: /find-regional-passport-office
 simple_smart_answer: /sold-bought-vehicle
 special-route: /find-local-council
+take_part: /government/get-involved/take-part/improve-your-social-housing
 transaction: /sign-in-universal-credit
 travel_advice_index: /foreign-travel-advice

config/initializers/dartsass.rb

@@ -1,6 +1,7 @@
 APP_STYLESHEETS = {
   "application.scss" => "application.css",
   "components/_calendar.scss" => "components/_calendar.css",
+  "components/_figure.scss" => "components/_figure.css",
   "components/_subscribe.scss" => "components/_subscribe.css",
   "components/_published-dates.scss" => "components/_published-dates.css",
   "views/_calendars.scss" => "views/_calendars.css",

config/locales/ar.yml

@@ -1,12 +1,89 @@
 ---
 ar:
   components:
+    figure:
+      image_credit: 'حقوق ملكية الصورة: %{credit}'
     published_dates:
       hidden_heading:
       hide_all_updates: إخفاء كافة التحديثات
       last_updated: تاريخ آخر تحديث %{date}
       published: تاريخ النشر %{date}
       see_all_updates: اطلع على كل التحديثات
       show_all_updates: إظهار كل التحديثات
+  formats:
+    take_part:
+      few:
+      many:
+      one:
+      other: شارك
+      two:
+      zero:
   i18n:
     direction: rtl
+  language_names:
+    ar: العربيَّة
+    az:
+    be:
+    bg:
+    bn:
+    cs:
+    cy:
+    da:
+    de:
+    dr:
+    el:
+    en:
+    es:
+    es-419:
+    et:
+    fa:
+    fi:
+    fr:
+    gd:
+    gu:
+    he:
+    hi:
+    hr:
+    hu:
+    hy:
+    id:
+    is:
+    it:
+    ja:
+    ka:
+    kk:
+    ko:
+    lt:
+    lv:
+    ms:
+    mt:
+    ne:
+    nl:
+    'no':
+    pa:
+    pa-pk:
+    pl:
+    ps:
+    pt:
+    ro:
+    ru:
+    si:
+    sk:
+    sl:
+    so:
+    sq:
+    sr:
+    sv:
+    sw:
+    ta:
+    th:
+    tk:
+    tr:
+    uk:
+    ur:
+    uz:
+    vi:
+    yi:
+    zh:
+    zh-hk:
+    zh-tw: