Add option to warning component for larger font

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

Hide file tree

Showing 4 changed files with 19 additions and 1 deletion.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss b/app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
@@ -5,3 +5,7 @@
   padding-left: 0;
   margin-left: 0;
 }
+
+.gem-c-warning-text__text--large {
+  @include govuk-font($size: 24, $weight: bold);
+}
diff --git a/app/views/govuk_publishing_components/components/_warning_text.html.erb b/app/views/govuk_publishing_components/components/_warning_text.html.erb
@@ -3,16 +3,21 @@
   classes ||= ''
   text_assistive ||= 'Warning'
   text_icon ||= '!'
+  large_font ||= 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
 %>
 
 <%= tag.div id: id, class: css_classes do %>
   <% unless text_icon.empty? %>
     <%= tag.span text_icon, class: "govuk-warning-text__icon", "aria-hidden": "true" %>
   <% end %>
-  <%= tag.strong class: "govuk-warning-text__text #{'gem-c-warning-text__text--no-indent' if text_icon.empty?}" do %>
+  <%= tag.strong class: text_classes do %>
     <%= tag.span text_assistive, class: "govuk-warning-text__assistive" %>
     <%= text %>
   <% end %>

diff --git a/app/views/govuk_publishing_components/components/docs/warning_text.yml b/app/views/govuk_publishing_components/components/docs/warning_text.yml
@@ -21,3 +21,7 @@ examples:
     data:
       text_icon: ""
       text: "You can be fined up to £320 if you don't register."
+  with_larger_font:
+    data:
+      text: "This content was updated on the 24th of November 2018"
+      large_font: true
diff --git a/spec/components/warning_text_spec.rb b/spec/components/warning_text_spec.rb
@@ -27,4 +27,9 @@ def component_name
     assert_select(".govuk-warning-text__icon", false)
     assert_select(".gem-c-warning-text__text--no-indent", text: /You can be fined up to £5,000 if you don’t register/i)
   end
+
+  it "renders large warning text" do
+    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
 end