Merge pull request #4288 from alphagov/standardise-inverse

Standardise inverse option for action link component

CHANGELOG.md

@@ -9,6 +9,7 @@
 
 ## Unreleased
 
+* Standardise inverse option for action link component ([PR #4288](https://github.com/alphagov/govuk_publishing_components/pull/4288))
 * **BREAKING:** Remove Modernizr ([PR #4273](https://github.com/alphagov/govuk_publishing_components/pull/4273))
 * Update accessibility criteria in component docs ([PR #4242](https://github.com/alphagov/govuk_publishing_components/pull/4242))
 * Show all big_number symbol types in our docs ([PR #4271](https://github.com/alphagov/govuk_publishing_components/pull/4271))

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

@@ -169,7 +169,7 @@
   }
 }
 
-.gem-c-action-link--light-text {
+.gem-c-action-link--inverse {
   color: govuk-colour("white");
 
   .gem-c-action-link__subtext {

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

@@ -10,15 +10,15 @@
   subtext ||= false
   subtext_href ||= false
   mobile_subtext ||= false
-  light_text ||= false
+  inverse ||= false
   simple ||= false
   simple_light ||= false
   dark_icon ||= false
   dark_large_icon ||= false
   light_icon ||= false
 
   css_classes = %w(gem-c-action-link)
-  css_classes << "gem-c-action-link--light-text" if light_text
+  css_classes << "gem-c-action-link--inverse" if inverse
   css_classes << "gem-c-action-link--dark-icon" if dark_icon
   css_classes << "gem-c-action-link--dark-large-icon" if dark_large_icon
   css_classes << "gem-c-action-link--light-icon" if light_icon
@@ -29,7 +29,7 @@
   css_classes << shared_helper.get_margin_bottom
 
   link_classes = %w(govuk-link gem-c-action-link__link gem-print-link)
-  link_classes << "govuk-link--inverse" if light_text
+  link_classes << "govuk-link--inverse" if inverse
 
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class(css_classes.join(" "))

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

@@ -18,11 +18,11 @@ examples:
       text: "Coronavirus (COVID-19):"
       nowrap_text: what you need to do
       href: "/page"
-  with_light_text:
+  inverse:
     data:
       text: "Coronavirus (COVID-19)"
       href: "/page"
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   with_subtext:
@@ -35,7 +35,7 @@ examples:
       text: Emergency something
       href: "/page"
       subtext: This is about the emergency that is happening right now unfortunately so pay attention
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   mobile_subtext:
@@ -56,7 +56,7 @@ examples:
       text: Remain calm
       subtext: Better things are ahead
       subtext_href: "/page"
-      light_text: true
+      inverse: true
     context:
       dark_background: true
   simple_arrow:
@@ -68,7 +68,7 @@ examples:
     data:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
-      light_text: true
+      inverse: true
       simple_light: true
     context:
       dark_background: true

spec/components/action_link_spec.rb

@@ -100,12 +100,12 @@ def component_name
     assert_select ".gem-c-action-link--dark-large-icon"
   end
 
-  it "renders light text version" do
+  it "renders inverse version" do
     render_component(
       text: "Get more info",
       href: "/coronavirus",
-      light_text: true,
+      inverse: true,
     )
-    assert_select ".gem-c-action-link--light-text"
+    assert_select ".gem-c-action-link--inverse"
   end
 end