govuk_publishing_components 63.2.0 → 63.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a21156257b5e597ea82c72a0c2d50ee9c1aa716b7ac8f266e9aefa07c46580e2
-  data.tar.gz: 5304c6a976883f19ee7077ea326894c424a56d8d1e288502892f0245a9a331d1
+  metadata.gz: 165109e571c6ba5445e74e15f2be52f24c787509790ad41a4ea88664e9efdb65
+  data.tar.gz: be9e4eafdc824e8cc3ae4e3ad5829f33a85a4df2e6ad3ac86a0c89fd52a2a084
 SHA512:
-  metadata.gz: 8e2f7d8055249839b700a30d2621e5a8383013f8d09b73f48fe316b595f487234a5f2e2908a93cbc385fbc5eb3533090d28d66aa915bb19ebf7db3568379c0e7
-  data.tar.gz: a07a2387f95f2c00321326973d3fa17a18d472cc22b2ff834d5f40f5eddb32a502d2e94a1759659400cc42737671d38b7dfc8cebca2e386eedd4df9a997cbd30
+  metadata.gz: a4b8872ec44bbe165d2962f38157b1919f3c6433e13c14a714738bfe001b46cab9ea75d0a6d4e7f8c4fd42f98e8e2a4a3c174ff39e6f8dc1fcdcd2d987613eca
+  data.tar.gz: 2a6335737c699d6a6c5d397a1149e1e8f30e02dae6ba84f11f49edb41bc69743f26b98d22cde3e227447f4dafc00ac90e754384d307a9041586730fcbf720d9c

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -59,6 +59,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             emergency_banner: document.querySelector('[data-ga4-emergency-banner]') ? 'true' : undefined,
             phase_banner: this.getElementAttribute('data-ga4-phase-banner') || undefined,
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
+            app_promo_banner: this.getBannerPresence('[data-ga4-app-promo-banner]'),
             cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
             intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
             global_bar: this.getBannerPresence('[data-ga4-global-banner]'),

data/app/assets/javascripts/govuk_publishing_components/components/app-promo-banner.js

@@ -0,0 +1,134 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  class AppPromoBanner {
+    constructor ($module) {
+      this.$module = $module
+      /** @type {HTMLButtonElement | null} */
+      this.$closeButton = this.$module.querySelector('.js-close-app-promo-banner')
+      this.APP_PROMO_BANNER_COOKIE = 'app_promo_banner'
+    }
+
+    /**
+     * Initialise the app promo banner
+     *
+     */
+    init () {
+      // Only display the banner on Android devices
+      if (!this.isAndroidDevice()) return
+
+      // Do not display the app promo banner if the cookie banner is visible
+      if (this.isCookieBannerVisible()) return
+
+      // Do not display the banner if it was previously closed
+      const cookieContents = this.getAppPromoBannerCookieContent()
+      if (cookieContents && cookieContents.closed === true) return
+
+      // Do not display the banner if the close button is not found
+      if (!this.$closeButton) return
+
+      this.$closeButton.addEventListener('click', (event) => this.handleClick(event))
+      this.showBanner()
+    }
+
+    /**
+     * Checks if the current device is an Android device
+     *
+     * @returns Boolean
+     */
+    isAndroidDevice () {
+      return (/Android/i.test(navigator.userAgent))
+    }
+
+    /**
+     * Checks if the user has accepted cookies and the cookie
+     * category the app promo banner is in
+     *
+     * @returns Boolean
+     */
+    isCookiesAndCategoryPermitted () {
+      const cookieConsent = window.GOVUK.getConsentCookie()
+      const cookieCategory = window.GOVUK.getCookieCategory(this.APP_PROMO_BANNER_COOKIE)
+      return (cookieConsent && cookieConsent[cookieCategory])
+    }
+
+    /**
+     * Checks if the cookie banner is visible
+     *
+     * @returns Boolean - Cookie banner visible
+     */
+    isCookieBannerVisible () {
+      /** @type {HTMLDivElement | null} */
+      const cookieBanner = document.querySelector('#global-cookie-message')
+      return cookieBanner && !cookieBanner.hidden
+    }
+
+    /**
+     * Sets the cookie for the app promo banner, including if the
+     * the banner should be in the closed state
+     *
+     * @param {Boolean} isAppBannerClosed
+     */
+    setAppBannerCookie (isAppBannerClosed) {
+      // Do not set the cookie if cookies and category are not permitted
+      if (!this.isCookiesAndCategoryPermitted) return
+
+      /** @type {AppBannerCookie} */
+      const appBannerCookie = { closed: isAppBannerClosed }
+
+      // This approach will simply set/overwrite the cookie with new values
+      const appBannerCookieValue = JSON.stringify(appBannerCookie)
+      window.GOVUK.setCookie(this.APP_PROMO_BANNER_COOKIE, appBannerCookieValue, { days: 84 })
+    }
+
+    /**
+     * Return the user's cookie settings for the app promo banner,
+     * or null if the cookie is not present
+     *
+     * @returns {AppBannerCookie | null} App promo banner settings
+     */
+    getAppPromoBannerCookieContent () {
+      const appBannerCookie = window.GOVUK.getCookie(this.APP_PROMO_BANNER_COOKIE)
+      return appBannerCookie ? JSON.parse(appBannerCookie) : null
+    }
+
+    /**
+     * Handle the click of the close banner button
+     *
+     * @param {MouseEvent} event - Click event
+     */
+    handleClick (event) {
+      event.preventDefault()
+      this.hideBanner()
+    }
+
+    /**
+     * Shows the app promo banner
+     *
+     */
+    showBanner () {
+      this.$module.hidden = false
+      this.$module.classList.add('gem-c-app-promo-banner--visible')
+    }
+
+    /**
+     * Hides the app promo banner and sets a cookie to store
+     * the closed state as true
+     *
+     */
+    hideBanner () {
+      this.setAppBannerCookie(true)
+      this.$module.hidden = true
+      this.$module.classList.remove('gem-c-app-promo-banner--visible')
+    }
+  }
+
+  Modules.AppPromoBanner = AppPromoBanner
+})(window.GOVUK.Modules)
+
+/**
+ * @typedef {object} AppBannerCookie
+ * @property {boolean} [closed] - Banner closed state
+ * @property {number} [version] - Banner version number
+ */

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -21,6 +21,7 @@
     licensing_session: 'essential',
     govuk_contact_referrer: 'essential',
     multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',
+    app_promo_banner: 'settings',
     dgu_beta_banner_dismissed: 'settings',
     global_banner_seen: 'settings',
     user_nation: 'settings',

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -11,6 +11,7 @@
 @import "components/accordion";
 @import "components/action-link";
 @import "components/add-another";
+@import "components/app-promo-banner";
 @import "components/attachment";
 @import "components/attachment-link";
 @import "components/back-link";

data/app/assets/stylesheets/govuk_publishing_components/components/_app-promo-banner.scss

@@ -0,0 +1,64 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-app-promo-banner {
+  display: none;
+  padding: govuk-spacing(5) 0;
+  border-top: 4px solid $govuk-brand-colour;
+  background-color: $govuk-rebrand-template-background-colour;
+  @include govuk-text-colour;
+}
+
+.gem-c-app-promo-banner--visible {
+  display: block;
+}
+
+.gem-c-app-promo-banner__container {
+  display: flex;
+  gap: govuk-spacing(3);
+  align-items: center;
+}
+
+.gem-c-app-promo-banner__icon {
+  flex: 0 1 64px;
+  min-width: 60px;
+  height: auto;
+}
+
+.gem-c-app-promo-banner__content {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  row-gap: govuk-spacing(1);
+  column-gap: govuk-spacing(3);
+
+  // Ensures the view link appears beneath the text content
+  // on larger screen sizes
+  @include govuk-media-query($from: tablet) {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
+.gem-c-app-promo-banner__text {
+  text-wrap-style: balance;
+}
+
+.gem-c-app-promo-banner__close-button {
+  border: 0;
+  padding: 0;
+  color: govuk-tint(govuk-colour("black"), 25%);
+  background: none;
+  flex: 0 0 24px;
+  height: 24px;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 4px govuk-colour("black");
+  }
+
+  &:focus {
+    @include govuk-focused-text;
+  }
+}

data/app/views/govuk_publishing_components/components/_app_promo_banner.html.erb

@@ -0,0 +1,72 @@
+<%
+  add_gem_component_stylesheet("app_promo_banner")
+
+  disable_ga4 ||= false
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-app-promo-banner")
+  component_helper.add_role("region")
+  component_helper.add_aria_attribute({ label: t("components.app_promo_banner.aria_label")})
+  component_helper.set_hidden("hidden")
+  component_helper.add_data_attribute({ module: "app-promo-banner", nosnippet: "" })
+  component_helper.add_data_attribute({ ga4_app_promo_banner: "" }) unless disable_ga4 # Added to the parent element for the GA4 pageview object to use
+
+  ga4_event_attributes = {
+    event_name: "select_content",
+    type: "app promo banner",
+    action: "closed",
+    section: t("components.app_promo_banner.title_text"),
+    text: t("components.app_promo_banner.close"),
+  }.to_json unless disable_ga4
+
+  ga4_link_attributes = {
+    event_name: "navigation",
+    type: "app promo banner",
+    index_link: 1,
+    index_total: 1,
+  }.to_json unless disable_ga4
+%>
+
+<%= tag.div(**component_helper.all_attributes) do %>
+  <%= tag.div(class: "govuk-width-container") do %>
+    <%= tag.div(class: "gem-c-app-promo-banner__container") do %>
+      <%= content_tag(:button, {
+        class: "gem-c-app-promo-banner__close-button js-close-app-promo-banner",
+        aria: {
+          label: t("components.app_promo_banner.close"),
+        },
+        data: {
+          module: disable_ga4 ? nil : "ga4-event-tracker",
+          ga4_event: ga4_event_attributes,
+        },
+      }) do %>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" focusable="false">
+          <circle cx="12" cy="12" r="11.5" stroke="currentColor" />
+          <path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m7 7 10 10m0-10L7 17" />
+        </svg>
+      <% end %>
+      <%= image_tag((asset_path "govuk_publishing_components/app-promo-banner/govuk-app-icon.png"),
+        alt: "",
+        class: "gem-c-app-promo-banner__icon",
+        width: "64",
+        height: "64",
+      ) %>
+      <%= tag.div(class: "gem-c-app-promo-banner__content") do %>
+        <%= tag.div(class: "gem-c-app-promo-banner__text") do %>
+          <%= tag.h2 t("components.app_promo_banner.title_text"), class: "govuk-heading-s govuk-!-margin-bottom-0" %>
+          <%= tag.p t("components.app_promo_banner.body_text"), class: "govuk-body-s govuk-!-margin-bottom-0" %>
+        <% end %>
+        <%= link_to("https://play.google.com/store/apps/details?id=uk.gov.govuk&hl=en_GB",
+          class: "govuk-link govuk-body govuk-!-margin-bottom-0",
+          data: {
+            module: disable_ga4 ? nil : "ga4-link-tracker",
+            ga4_link: ga4_link_attributes,
+          },
+          ) do %>
+          <%= t("components.app_promo_banner.view") %>
+          <%= tag.span("on Google Play", class: "govuk-visually-hidden") %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -1,9 +1,7 @@
 <%
   add_gem_component_stylesheet("layout-for-public")
 
-  for_static ||= false
   emergency_banner ||= nil
-  full_width ||= false
   global_banner ||= nil
   html_lang ||= "en"
   homepage ||= false
@@ -17,6 +15,7 @@
   omit_header ||= false
   product_name ||= nil
   service_name ||= nil
+  show_app_promo_banner ||= false
   show_cross_service_header ||= false
   draft_watermark ||= false
   title ||= "GOV.UK - The best place to find government services and information"
@@ -76,6 +75,9 @@
       <%= render "govuk_publishing_components/components/skip_link", {
         href: "#content",
       } %>
+      <% if show_app_promo_banner %>
+        <%= render "govuk_publishing_components/components/app_promo_banner" %>
+      <% end %>
     <% end %>
     <% unless omit_header %>
       <% if show_cross_service_header %>
@@ -105,18 +107,10 @@
         omit_account_phase_banner: omit_account_phase_banner,
         omit_account_navigation: omit_account_navigation,
         account_nav_location: account_nav_location,
-        for_static: for_static,
       } do %>
         <%= yield :before_content %>
         <%= yield %>
       <% end %>
-    <% elsif for_static %>
-      <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
-        <%= yield :before_content %>
-        <main class="govuk-main-wrapper" id="content">
-          <%= yield %>
-        </main>
-      </div>
     <% else %>
       <%= yield %>
     <% end %>

data/app/views/govuk_publishing_components/components/docs/app_promo_banner.yml

@@ -0,0 +1,30 @@
+name: App Promo Banner
+description: Displays a banner on Android devices to promote the GOVUK Android App
+body: |
+  By default the app promo banner is hidden. The banner is only displayed if JavaScript is enabled and if the device is Android.
+
+  If the user has provided permission to use the settings cookie in their cookie preferences, then `app_promo_banner` cookie is set which is used to stop the banner reappearing once it has been closed.
+
+accessibility_criteria: |
+  - Adequate colour contrast between text, icons, and background meeting WCAG 2.2 AA as a minimum
+  - Text does not overlap, truncate, or disappear when zoomed
+  - “Skip to main” link precedes banner in DOM order and tab sequence
+  - Close button can be activated with Enter/Space keys
+  - Close button has an accessible name 
+  - View link is descriptive indicating where it goes to
+  - Banner is reachable via keyboard navigation
+  - Banner placement does not obscure other critical content or controls
+  - Banner can be dismissed without requiring precise pointer actions
+  - Banner content is understandable out of context
+  - No keyboard trap: focus moves smoothly past the banner once dismissed
+shared_accessibility_criteria:
+  - link
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+  without_ga4_tracking:
+    description: |
+      Disables GA4 tracking on the app promo banner. Tracking is enabled by default. This adds a data module and data-attributes with JSONs to the accordion. See the [ga4-event-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-event-tracker.md) for more information.
+    data:
+      disable_ga4: true

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml

@@ -18,22 +18,6 @@ examples:
       title: 'Example layout'
       block: |
         <h1>Page content goes here</h1>
-  with_static_wrapper:
-    description: |
-      By default, the layout does not include the `div#wrapper` element, nor the `main` element within that.
-      This behaviour is peculiar to the one app that currently uses this layout - static. Static now sets the `for_static: true` flag,
-      which causes the wrapper to be included. Other apps in the future will not set that flag, but provide their own wrapper and main elements.
-    data:
-      for_static: true
-      block: |
-        <h1>Page content goes here</h1>
-  full_width:
-    description: By default, the layout applies the `govuk-width-container` class to the main element. We can remove this class by setting `full_width` to `true`. Note this also requires the for_static flag, since that is needed for the main element.
-    data:
-      for_static: true
-      full_width: true
-      block: |
-        <h1>Page content goes here</h1>
   omit_header:
     description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
     data:

data/app/views/govuk_publishing_components/components/docs/organisation_logo.yml

@@ -18,6 +18,10 @@ shared_accessibility_criteria:
   - link
 examples:
   default:
+    data:
+      organisation:
+        name: 'Organisation<br>Name'
+  with_a_link:
     data:
       organisation:
         name: 'Organisation<br>Name'
@@ -158,12 +162,6 @@ examples:
         image:
           url: 'https://assets.publishing.service.gov.uk/media/6850134301d3b0e7b62da740/hmps_25_gov_240x188.png'
           alt_text: 'HM Prison Service'
-  without_a_link:
-    data:
-      organisation:
-        name: Cabinet Office
-        brand: cabinet-office
-        crest: 'single-identity'
   as_a_heading:
     description: The `heading_level` option takes a number from 1 to 6.
     data:

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -12,13 +12,7 @@
     <div class="govuk-grid-column-two-thirds">
       <div id="wrapper">
         <%= yield :before_content %>
-        <% if for_static %>
-          <main id="content">
-            <%= yield %>
-          </main>
-        <% else %>
-          <%= yield %>
-        <% end %>
+        <%= yield %>
       </div>
     </div>
   </div>

data/config/locales/ar.yml

@@ -13,6 +13,12 @@ ar:
       hide_all: إخفاء كل الأقسام
       show_all: إظهار كل الأقسام
       this_section_visually_hidden: " هذا القسم"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: البحث في %{title}
     attachment:
@@ -157,6 +163,10 @@ ar:
       selected:
     organisation_schema:
       all_content_search_description: العثور عن كل المحتوى من %{organisation}
+    pagination:
+      next:
+      pagination: ترقيم الصفحات
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -166,10 +176,6 @@ ar:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: ترقيم الصفحات
-      previous:
     print_link:
       text: طباعة هذه الصفحة
     published_dates:

data/config/locales/az.yml

@@ -13,6 +13,12 @@ az:
       hide_all: Bütün bölmələri gizlət
       show_all: Bütün bölmələri göstər
       this_section_visually_hidden: " bu bölmə"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: "%{title} üzrə axtar"
     attachment:
@@ -154,6 +160,10 @@ az:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-dan bütün məzmunu tap"
+    pagination:
+      next:
+      pagination: Səhifələrə bölmə
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -163,10 +173,6 @@ az:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: Səhifələrə bölmə
-      previous:
     print_link:
       text: Bu səhifəni çap et
     published_dates:

data/config/locales/be.yml

@@ -13,6 +13,12 @@ be:
       hide_all: Схаваць усе секцыi
       show_all: Паказаць усе секцыi
       this_section_visually_hidden: " гэта секцыя"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: Шукаць сярод %{title}
     attachment:
@@ -160,6 +166,10 @@ be:
       selected:
     organisation_schema:
       all_content_search_description: Шукаць увесь змест з %{organisation}
+    pagination:
+      next:
+      pagination: Месцаванне старонак
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -169,10 +179,6 @@ be:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: Месцаванне старонак
-      previous:
     print_link:
       text: Надрукаваць гэтую странiцу
     published_dates:

data/config/locales/bg.yml

@@ -13,6 +13,12 @@ bg:
       hide_all: Скриване на всички раздели
       show_all: Показване на всички раздели
       this_section_visually_hidden: " този раздел"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: Търсене в %{title}
     attachment:
@@ -158,6 +164,10 @@ bg:
       selected:
     organisation_schema:
       all_content_search_description: Намиране на цялото съдържание от %{organisation}
+    pagination:
+      next:
+      pagination: Страниране
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -167,10 +177,6 @@ bg:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: Страниране
-      previous:
     print_link:
       text: Отпечатване на страницата
     published_dates:

data/config/locales/bn.yml

@@ -13,6 +13,12 @@ bn:
       hide_all: সকল অংশ লুকিয়ে রাখুন
       show_all: সকল অংশ দেখান
       this_section_visually_hidden: " এই অংশ"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: "%{title}-এর মধ্যে অনুসন্ধান করুন"
     attachment:
@@ -155,6 +161,10 @@ bn:
       selected:
     organisation_schema:
       all_content_search_description: "%{organisation}-এর সকল বিষয়বস্তু খুঁজে বের করুন"
+    pagination:
+      next:
+      pagination: পেজিনেশন
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -164,10 +174,6 @@ bn:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: পেজিনেশন
-      previous:
     print_link:
       text: এই পৃষ্ঠাটি প্রিন্ট করুন
     published_dates:

data/config/locales/cs.yml

@@ -13,6 +13,12 @@ cs:
       hide_all: Skrýt všechny sekce
       show_all: Zobrazit všechny sekce
       this_section_visually_hidden: " tento oddíl"
+    app_promo_banner:
+      aria_label:
+      body_text:
+      close:
+      title_text:
+      view:
     article_schema:
       scoped_search_description: Hledat v %{title}
     attachment:
@@ -159,6 +165,10 @@ cs:
       selected:
     organisation_schema:
       all_content_search_description: Najít veškerý obsah z %{organisation}
+    pagination:
+      next:
+      pagination: Stránkování
+      previous:
     password_input:
       button:
       button_aria_hide_label:
@@ -168,10 +178,6 @@ cs:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    pagination:
-      next:
-      pagination: Stránkování
-      previous:
     print_link:
       text: Vytisknout tuto stránku
     published_dates: