Fix tables in call to action

Tables must have a leading and trailing blank line in markdown. Stripping the body of a call to action means that these are missing and tables do not render as expected. Therefore reinstating the blank line either side of a table contained with a CTA.
alphagov · Jan 31, 2024 · 5a64ae3 · 5a64ae3
1 parent 47aef3d
commit 5a64ae3
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## Unreleased
+
+* Fix tables within call to action component ([#306](https://github.com/alphagov/govspeak/pull/306))
+
 ## 8.3.3
 
 * Fix single line formatting of call to action component ([#302](https://github.com/alphagov/govspeak/pull/302))

diff --git a/lib/govspeak.rb b/lib/govspeak.rb
@@ -278,7 +278,7 @@ def render_image(image)
     extension("call-to-action", surrounded_by("$CTA")) do |body|
       <<~BODY
         <div class="call-to-action" markdown="1">
-        #{body.strip}
+        #{body.strip.gsub(/\A^\|/, "\n|").gsub(/\|$\Z/, "|\n")}
         </div>
       BODY
     end

diff --git a/test/govspeak_test.rb b/test/govspeak_test.rb
@@ -467,6 +467,65 @@ class GovspeakTest < Minitest::Test
       <p>Here is some text</p>)
   end
 
+  test_given_govspeak "
+      $CTA
+      |Heading 1|Heading 2|
+      |-|-|
+      |information|more information|
+      $CTA" do
+    assert_html_output %(
+        <div class="call-to-action">
+
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Heading 1</th>
+              <th scope="col">Heading 2</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>information</td>
+              <td>more information</td>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>)
+  end
+
+  test_given_govspeak "
+      $CTA
+
+      ### A heading within the CTA
+
+      |Heading 1|Heading 2|
+      |-|-|
+      |information|more information|
+
+      $CTA" do
+    assert_html_output %(
+      <div class="call-to-action">
+      <h3 id="a-heading-within-the-cta">A heading within the CTA</h3>
+
+      <table>
+        <thead>
+          <tr>
+            <th scope="col">Heading 1</th>
+            <th scope="col">Heading 2</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>information</td>
+            <td>more information</td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>)
+  end
+
   test_given_govspeak "
     Here is some text\n