Merge pull request #5040 from alphagov/action-link-arrow

Adjust action link arrow

Author: andysellick

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Revert GA4 phone number PII changes ([PR #5039](https://github.com/alphagov/govuk_publishing_components/pull/5039))
+* Adjust action link arrow ([PR #5040](https://github.com/alphagov/govuk_publishing_components/pull/5040))
 
 ## 61.0.3
 

app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss

@@ -12,59 +12,54 @@
   display: table-cell;
   line-height: 1;
   width: 36px;
+  vertical-align: middle;
 
-  svg {
-    height: 28px;
-    vertical-align: middle;
-    width: 28px;
+  @include govuk-media-query($from: tablet) {
+    width: 45px;
+  }
+}
 
-    .gem-c-action-link__icon__circle {
-      fill: #eeefef;
+.gem-c-action-link__svg {
+  height: 28px;
+  vertical-align: middle;
+  width: 28px;
+
+  .gem-c-action-link__icon__circle {
+    fill: #eeefef;
 
-      // stylelint-disable max-nesting-depth
-      @media (forced-colors: active) {
-        fill: LinkText;
-      }
-      // stylelint-enable max-nesting-depth
+    @media (forced-colors: active) {
+      fill: LinkText;
     }
+  }
 
-    .gem-c-action-link__icon__arrow {
-      fill: #000000;
+  .gem-c-action-link__icon__arrow {
+    fill: #000000;
 
-      // stylelint-disable max-nesting-depth
-      @media (forced-colors: active) {
-        fill: Canvas;
-      }
-      // stylelint-enable max-nesting-depth
+    @media (forced-colors: active) {
+      fill: Canvas;
     }
   }
 
   @include govuk-media-query($from: tablet) {
-    width: 45px;
-
-    svg {
-      height: 35px;
-      width: 35px;
-    }
+    height: 35px;
+    width: 35px;
   }
 }
 
 .gem-c-action-link__icon--simple {
   padding-top: 2px;
   width: 30px;
 
-  svg {
+  .gem-c-action-link__svg {
     height: 25px;
     width: 25px;
+  }
 
-    .gem-c-action-link__icon__arrow {
-      fill: #272828;
+  .gem-c-action-link__icon__arrow {
+    fill: #272828;
 
-      // stylelint-disable max-nesting-depth
-      @media (forced-colors: active) {
-        fill: currentcolor;
-      }
-      // stylelint-enable max-nesting-depth
+    @media (forced-colors: active) {
+      fill: currentcolor;
     }
   }
 }
@@ -75,6 +70,18 @@
   @include govuk-font(19, $weight: bold, $line-height: 1.3);
 }
 
+.gem-c-action-link--large {
+  .gem-c-action-link__icon {
+    height: 40px;
+    width: 56px;
+  }
+
+  .gem-c-action-link__svg {
+    height: 40px;
+    width: 40px;
+  }
+}
+
 @include govuk-media-query($media-type: print) {
   .gem-c-action-link {
     * {

app/views/govuk_publishing_components/components/_action_link.html.erb

@@ -7,6 +7,7 @@
   inverse ||= false
   simple ||= false
   simple_light ||= false
+  large ||= false
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-print-force-link-styles)
   link_classes << "govuk-link--inverse" if inverse
@@ -15,12 +16,13 @@
   component_helper.add_class("gem-c-action-link")
   component_helper.add_class("gem-c-action-link--inverse") if inverse
   component_helper.add_class("gem-c-action-link--simple") if simple
+  component_helper.add_class("gem-c-action-link--large") if large
 %>
 <% if text.present? %>
   <%= tag.div(**component_helper.all_attributes) do %>
     <% if simple || simple_light %>
       <span class="gem-c-action-link__icon gem-c-action-link__icon--simple" hidden>
-        <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 23 23">
+        <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 23 23" class="gem-c-action-link__svg">
           <g class="gem-c-action-link__icon__arrow">
             <path d="M14.943 11.795 10.44 7.292 11.733 6l5.795 5.795-5.795 5.795-1.293-1.292 4.503-4.503Z" />
             <path d="M3.956 10.881h11.485v1.828H3.956v-1.828Z" />
@@ -29,7 +31,7 @@
       </span>
     <% elsif %>
       <span class="gem-c-action-link__icon" hidden>
-        <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 27 27">
+        <svg xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 27 27" class="gem-c-action-link__svg">
           <circle class="gem-c-action-link__icon__circle" cx="13.5" cy="13.5" r="13.5" />
           <g class="gem-c-action-link__icon__arrow">
             <path d="m17.701 13.526-3.827-3.828L14.973 8.6l4.926 4.926-4.926 4.926-1.099-1.099 3.827-3.827Z" />

app/views/govuk_publishing_components/components/docs/action_link.yml

@@ -25,3 +25,10 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  large:
+    description: For use on the GOV.UK homepage popular links.
+    data:
+      text: This way for cookies
+      href: "/cookies"
+      large: true
+

spec/components/action_link_spec.rb

@@ -43,4 +43,13 @@ def component_name
     )
     assert_select ".gem-c-action-link--inverse"
   end
+
+  it "renders large version" do
+    render_component(
+      text: "Get more info",
+      href: "/coronavirus",
+      large: true,
+    )
+    assert_select ".gem-c-action-link.gem-c-action-link--large"
+  end
 end