Add new homepage action link variant

alphagov · Sep 11, 2023 · 445c41a · 445c41a
1 parent 3d8981c
commit 445c41a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/app/assets/images/govuk_publishing_components/action-link-arrow--homepage.svg b/app/assets/images/govuk_publishing_components/action-link-arrow--homepage.svg
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
@@ -150,6 +150,24 @@
   }
 }
 
+.gem-c-action-link--homepage {
+  &:before {
+    width: 36px;
+    height: 28px;
+    background: image-url("govuk_publishing_components/action-link-arrow--blue.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--homepage.svg"), linear-gradient(transparent, transparent);
+    background-repeat: no-repeat;
+    background-size: 28px auto;
+    background-position: 0 0;
+
+    @include govuk-media-query($from: tablet) {
+      width: 45px;
+      height: 35px;
+      background-size: 35px auto;
+    }
+  }
+}
+
 .gem-c-action-link--dark-icon,
 .gem-c-action-link--small-icon {
   max-width: none;

diff --git a/app/views/govuk_publishing_components/components/_action_link.html.erb b/app/views/govuk_publishing_components/components/_action_link.html.erb
@@ -16,6 +16,7 @@
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
+  homepage_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
   brexit_icon ||= false
@@ -29,6 +30,7 @@
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--small-icon" if small_icon
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
+  css_classes << "gem-c-action-link--homepage" if homepage_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--brexit" if brexit_icon
   css_classes << "gem-c-action-link--blue-arrow" if blue_arrow

diff --git a/app/views/govuk_publishing_components/components/docs/action_link.yml b/app/views/govuk_publishing_components/components/docs/action_link.yml
@@ -115,6 +115,11 @@ examples:
       text: Coronavirus (COVID-19)
       href: "/my-test-page"
       dark_icon: true
+  with_homepage_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      homepage_icon: true      
   with_brexit_icon_and_custom_font_size:
     data:
       text: Guidance for businesses