Merge pull request #5035 from alphagov/add-app-promo-to-sign-in-page

Add govuk app promo to sign-in page

Author: MartinJJones

app/assets/images/app-promo/govuk-app-icon.png

@@ -0,0 +1,24 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.app-promo {
+  padding-top: govuk-spacing(6);
+  border-top: 4px solid $govuk-brand-colour;
+  margin-top: govuk-spacing(8);
+
+  @include govuk-media-query($from: "tablet") {
+    margin-top: govuk-spacing(9);
+  }
+
+  .gem-c-image-card {
+    display: flex;
+    margin-bottom: 0;
+  }
+
+  .gem-c-image-card__description {
+    text-wrap: balance;
+  }
+
+  .gem-c-image-card__image-wrapper.gem-c-image-card__image-wrapper--one-third {
+    flex-basis: 100px;
+  }
+}

app/assets/stylesheets/views/_sign-in.scss

@@ -1,4 +1,5 @@
 <%
+  add_view_stylesheet("sign-in")
   # These components aren't found in the templates, but the styles are still
   # needed as they're used within the sign in page's `content_item`.
   add_gem_component_stylesheet("document-list")
@@ -71,5 +72,23 @@
         text: t("help.sign_in.search_for_a_service_button"),
         secondary_solid: true %>
     </form>
+
+    <div class="govuk-!-width-full app-promo">
+      <%= render "govuk_publishing_components/components/image_card", {
+        two_thirds: true,
+        href: "/guidance/download-the-govuk-app",
+        image_src: asset_path("app-promo/govuk-app-icon.png"),
+        heading_text: "Get the GOV.UK app",
+        description: "Your government services and information, on the go.",
+        data_attributes: {
+          module: "ga4-link-tracker",
+          ga4_link: {
+            event_name: "navigation",
+            type: "image card",
+          },
+        },
+      } %>
+    </div>
+
   </div>
 </div>

app/views/help/sign_in.html.erb

@@ -22,6 +22,7 @@
   "views/_service-manual-topic.scss" => "views/_service-manual-topic.css",
   "views/_service-toolkit.scss" => "views/_service-toolkit.css",
   "views/_sidebar-navigation.scss" => "views/_sidebar-navigation.css",
+  "views/_sign-in.scss" => "views/_sign-in.css",
   "views/_specialist-document.scss" => "views/_specialist-document.css",
   "views/_travel-advice.scss" => "views/_travel-advice.css",
   "views/_landing_page.scss" => "views/_landing_page.css",