Merge pull request #1078 from alphagov/inset-text__take-block

Allow inset-text to take a block

CHANGELOG.md

@@ -19,6 +19,7 @@
 * Allow summary_list to render without borders (PR #1073)
 * Explicitly set focus states (PR #1071)
 * Override edit link text on summary-link component (#1076)
+* Allow inset-text to take a block (PR #1078)
 
 ## 18.3.1
 

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

@@ -1,7 +1,10 @@
 <%
   id ||= "inset-text-#{SecureRandom.hex(4)}"
 %>
-
 <%= tag.div id: id, class: "gem-c-inset-text govuk-inset-text" do %>
-  <%= text %>
+  <% if defined? text %>
+    <%= text %>
+  <% elsif block_given? %>
+    <%= yield %>
+  <% end %>
 <% end %>

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

@@ -8,3 +8,13 @@ examples:
   default:
     data:
       text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application."
+
+  with_block:
+    description: |
+      Note that the contents should be styled separately from the component, which takes no responsibility for what it is passed.
+    data:
+      block: |
+        <div>
+          <h2 id='heading'>To publish this step by step you need to</h2>
+          <a href='/foo'>Check for broken links</a>
+        </div>

spec/components/inset_text_spec.rb

@@ -10,4 +10,23 @@ def component_name
 
     assert_select(".govuk-inset-text", text: "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.")
   end
+
+  it "renders a block" do
+    block = "
+      <h2 id='heading'>To publish this step by step you need to</h2>
+      <a href='/foo'>Check for broken links</a>
+    ".html_safe
+    render_component({}) { block }
+
+    assert_select(".govuk-inset-text h2#heading", text: "To publish this step by step you need to")
+    assert_select(".govuk-inset-text a[href='/foo']", text: "Check for broken links")
+  end
+
+  it "renders only the text if both text and block are provided" do
+    block = "<p id='foo'>Foo</p>".html_safe
+    render_component(text: 'Bar') { block }
+
+    assert_select(".govuk-inset-text", text: "Bar")
+    assert_select(".govuk-inset-text p#foo", false, "Block should not have rendered")
+  end
 end