Adds warning component

README.md

@@ -21,7 +21,7 @@ The gem will include the following components and helpers, [track their progress
 * Start now button ✔️
 * Summary list
 * Tag ✔️
-* Warning text
+* Warning text ✔️
 
 ### Helpers
 

app/components/govuk_component/warning.html.erb

@@ -0,0 +1,7 @@
+<div class="govuk-warning-text <%= @classes.join(' ') %>">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive"><%= @icon_fallback_text %></span>
+    <%= @text %>
+  </strong>
+</div>

app/components/govuk_component/warning.rb

@@ -0,0 +1,7 @@
+class GovukComponent::Warning < ViewComponent::Base
+  def initialize(text:, icon_fallback_text: 'Warning', classes: [])
+    @text = text
+    @icon_fallback_text = icon_fallback_text
+    @classes = Array.wrap(classes)
+  end
+end

docs/index.html

@@ -10771,6 +10771,60 @@ <h2 class="govuk-heading-s">Details - with block</h2>
   </section>
 </article>
 
+
+    <article class="example govuk-!-margin-top-9" id="warning">
+  <h2 class="govuk-heading-s">Warning</h2>
+  <section>
+    <div class="govuk-warning-text ">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">Warning</span>
+    Talkin' out of turn, that's a paddlin'
+  </strong>
+</div>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Warning.new(text: "Talkin' out of turn, that's a paddlin'")</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="warning-with-custom-classes">
+  <h2 class="govuk-heading-s">Warning with custom classes</h2>
+  <section>
+    <div class="govuk-warning-text my-custom-class">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">Warning</span>
+    Lookin' out the window, that's a paddlin'
+  </strong>
+</div>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Warning.new(text: "Lookin' out the window, that's a paddlin'", classes: 'my-custom-class')</code></pre>
+  </section>
+</article>
+
+
+    <article class="example govuk-!-margin-top-9" id="warning-with-custom-icon-fallback-text">
+  <h2 class="govuk-heading-s">Warning with custom icon fallback text</h2>
+  <section>
+    <div class="govuk-warning-text ">
+  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+  <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">Paddlin' warning</span>
+    Starin' at my sandals, that's a paddlin'
+  </strong>
+</div>
+
+  </section>
+  <section>
+    <pre><code class="language-ruby">render GovukComponent::Warning.new(text: "Starin' at my sandals, that's a paddlin'", icon_fallback_text: "Paddlin' warning")</code></pre>
+  </section>
+</article>
+
   </div>
 </div>
 

spec/components/govuk_component/warning_spec.rb

@@ -0,0 +1,37 @@
+require 'spec_helper'
+
+RSpec.describe(GovukComponent::Warning, type: :component) do
+  let(:node) { Capybara::Node::Simple.new(render_inline(component).to_html) }
+  let(:text) { 'Some warning' }
+
+  context 'default behaviour' do
+    let(:component) { GovukComponent::Warning.new(text: text) }
+
+    context 'containing div' do
+      subject { node.find('.govuk-warning-text') }
+      it { is_expected.to have_css('span', class: 'govuk-warning-text__icon', text: '!') }
+    end
+
+    context 'strong tag' do
+      subject { node.find('.govuk-warning-text > strong.govuk-warning-text__text') }
+      it { is_expected.to have_css('span', class: 'govuk-warning-text__assistive', text: 'Warning') }
+      it { is_expected.to have_text text }
+    end
+  end
+
+  context 'with custom warning text' do
+    let(:icon_fallback_text) { 'Custom fallback text' }
+    let(:component) { GovukComponent::Warning.new(text: text, icon_fallback_text: icon_fallback_text) }
+
+    context 'strong tag' do
+      subject { node.find('.govuk-warning-text > strong.govuk-warning-text__text') }
+      it { is_expected.to have_css('span', class: 'govuk-warning-text__assistive', text: icon_fallback_text) }
+    end
+  end
+
+  context 'with custom classes' do
+    let(:component) { GovukComponent::Warning.new(text: text, classes: %w(custom-class)) }
+    subject { node }
+    it { is_expected.to have_css('.govuk-warning-text.custom-class') }
+  end
+end

spec/dummy/app/views/demos/show.html.erb

@@ -68,5 +68,11 @@ end} %>
 %{render GovukComponent::Details.new(summary: 'The new Ribwich') do
   tag.strong(%(You're way off. Think smaller, and more legs.))
 end} %>
+
+    <%= render "example", title: 'Warning', example: %{render GovukComponent::Warning.new(text: "Talkin' out of turn, that's a paddlin'")} %>
+
+    <%= render "example", title: 'Warning with custom classes', example: %{render GovukComponent::Warning.new(text: "Lookin' out the window, that's a paddlin'", classes: 'my-custom-class')} %>
+
+    <%= render "example", title: 'Warning with custom icon fallback text', example: %{render GovukComponent::Warning.new(text: "Starin' at my sandals, that's a paddlin'", icon_fallback_text: "Paddlin' warning")} %>
   </div>
 </div>