Merge pull request #1590 from alphagov/action_link_small_yellow_arrow

Extend action link component with a small icon variant
alphagov · Jun 25, 2020 · ab89d2c · ab89d2c
2 parents 862c48f + 6f6b205
commit ab89d2c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 * Hide services cookie banner when JavaScript is disabled ([PR #1586](https://github.com/alphagov/govuk_publishing_components/pull/1586))
 * Improve print styles for govspeak info, help and call to action callouts ([PR #1588](https://github.com/alphagov/govuk_publishing_components/pull/1588) )
+* Extend action link component with a small icon variant ([PR #1590](https://github.com/alphagov/govuk_publishing_components/pull/1590) )
 
 ## 21.56.2
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss b/app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
@@ -118,19 +118,25 @@
 }
 
 .gem-c-action-link--dark-icon {
+  &:before {
+    // sass-lint:disable no-duplicate-properties
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
+    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
+    // sass-lint:enable no-duplicate-properties
+  }
+}
+
+.gem-c-action-link--dark-icon,
+.gem-c-action-link--small-icon {
   max-width: none;
 
   @include govuk-media-query($until: tablet) {
     margin-bottom: govuk-spacing(2);
   }
 
   &:before {
-    width: 30px;
     height: 30px;
-    // sass-lint:disable no-duplicate-properties
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.png");
-    background: image-url("govuk_publishing_components/action-link-arrow--dark.svg"), linear-gradient(transparent, transparent);
-    // sass-lint:enable no-duplicate-properties
+    width: 30px;
     background-repeat: no-repeat;
     background-size: 25px auto;
     background-position: 0 2px;

diff --git a/app/views/govuk_publishing_components/components/_action_link.html.erb b/app/views/govuk_publishing_components/components/_action_link.html.erb
@@ -11,13 +11,15 @@
   light_text ||= false
   simple ||= false
   dark_icon ||= false
+  small_icon ||= false
   nhs_icon ||= false
   data ||= nil
   classes ||= nil
 
   css_classes = %w(gem-c-action-link)
   css_classes << "gem-c-action-link--light-text" if light_text
   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--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
   css_classes << "gem-c-action-link--with-subtext" if subtext

diff --git a/app/views/govuk_publishing_components/components/docs/action_link.yml b/app/views/govuk_publishing_components/components/docs/action_link.yml
@@ -75,6 +75,11 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  with_small_icon:
+    data:
+      text: Coronavirus (COVID-19)
+      href: "/my-test-page"
+      small_icon: true
   with_dark_icon:
     data:
       text: Coronavirus (COVID-19)

diff --git a/spec/components/action_link_spec.rb b/spec/components/action_link_spec.rb
@@ -91,6 +91,15 @@ def component_name
     assert_select ".gem-c-action-link--dark-icon"
   end
 
+  it "renders small icon version" do
+    render_component(
+      text: "Get more info",
+      href: "/coronavirus",
+      small_icon: true,
+    )
+    assert_select ".gem-c-action-link--small-icon"
+  end
+
   it "renders NHS icon version" do
     render_component(
       text: "Get more info",