Add red text option to warning component

alphagov · Nov 22, 2018 · 1fd3bf6 · 1fd3bf6
1 parent de411a3
commit 1fd3bf6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Modify warning text component (PR #655)
+
 ## 12.17.0
 
 * Add data attributes to select component (PR #650)

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
@@ -9,3 +9,7 @@
 .gem-c-warning-text__text--large {
   @include govuk-font($size: 24, $weight: bold);
 }
+
+.gem-c-warning-text__text--highlight {
+  color: $govuk-error-colour;
+}
diff --git a/app/views/govuk_publishing_components/components/_warning_text.html.erb b/app/views/govuk_publishing_components/components/_warning_text.html.erb
@@ -4,13 +4,15 @@
   text_assistive ||= 'Warning'
   text_icon ||= '!'
   large_font ||= false
+  highlight_text ||= false
 
   css_classes = %w(gem-c-warning-text govuk-warning-text)
   css_classes << classes if classes
 
   text_classes = %w(govuk-warning-text__text)
   text_classes << "gem-c-warning-text__text--no-indent" if text_icon.empty?
   text_classes << "gem-c-warning-text__text--large" if large_font
+  text_classes << "gem-c-warning-text__text--highlight" if highlight_text
 %>
 
 <%= tag.div id: id, class: css_classes do %>

diff --git a/app/views/govuk_publishing_components/components/docs/warning_text.yml b/app/views/govuk_publishing_components/components/docs/warning_text.yml
@@ -25,3 +25,7 @@ examples:
     data:
       text: "This content was updated on the 24th of November 2018"
       large_font: true
+  with_red_font:
+    data:
+      text: "This content has changed"
+      highlight_text: true
diff --git a/spec/components/warning_text_spec.rb b/spec/components/warning_text_spec.rb
@@ -32,4 +32,14 @@ def component_name
     render_component(large_font: true, text: "You can be fined up to £5,000 if you don’t register.")
     assert_select(".govuk-warning-text__text.gem-c-warning-text__text--large", text: /You can be fined up to £5,000 if you don’t register/i)
   end
+
+  it "renders highlighted text" do
+    render_component(highlight_text: true, text: "You can be fined up to £5,000 if you don’t register.")
+    assert_select(".govuk-warning-text__text.gem-c-warning-text__text--highlight", text: /You can be fined up to £5,000 if you don’t register/i)
+  end
+
+  it "renders highlighted and large text together" do
+    render_component(highlight_text: true, large_font: true, text: "Because")
+    assert_select(".govuk-warning-text__text.gem-c-warning-text__text--highlight.gem-c-warning-text__text--large", text: /Because/i)
+  end
 end