Merge pull request #20 from DFE-Digital/add-govuk-details-tag-to-prep…

…rocessor Add details text tag rendering in preprocessor
DFE-Digital · Jan 6, 2023 · c17d7e1 · c17d7e1
2 parents c1d2458 + 8433b67
commit c17d7e1
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 24 deletions.
diff --git a/lib/govuk_markdown/preprocessor.rb b/lib/govuk_markdown/preprocessor.rb
@@ -1,19 +1,40 @@
 module GovukMarkdown
   class Preprocessor
-    attr_reader :document
+    attr_reader :output
 
     def initialize(document)
-      @document = document
+      @output = document
     end
 
     def inject_inset_text
-      document.gsub(build_regexp("inset-text")) do
+      output.gsub!(build_regexp("inset-text")) do
         <<~HTML
           <div class="govuk-inset-text">
             #{Regexp.last_match(1)}
           </div>
         HTML
       end
+      self
+    end
+
+    def inject_details
+      output.gsub!(build_regexp("details")) do
+        summary, details = *construct_details_from(Regexp.last_match(1))
+
+        <<~HTML
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+              #{summary}
+              </span>
+            </summary>
+            <div class="govuk-details__text">
+              #{details}
+            </div>
+          </details>
+        HTML
+      end
+      self
     end
 
   private
@@ -25,5 +46,19 @@ def build_regexp(tag_name, pre_tag: "{", post_tag: "}", closing: "/")
 
       Regexp.compile(pattern, Regexp::EXTENDED | Regexp::MULTILINE)
     end
+
+    def construct_details_from(match_string, partition_characters: %w[? .])
+      summary_text, match, details = match_string.partition(Regexp.union(*partition_characters))
+
+      summary = [summary_text, format_punctuation(match)].compact.join
+
+      [summary, details].compact.map(&:strip)
+    end
+
+    def format_punctuation(match)
+      return if match.include?(".")
+
+      match
+    end
   end
 end
diff --git a/lib/govuk_markdown/renderer.rb b/lib/govuk_markdown/renderer.rb
@@ -81,7 +81,11 @@ def hrule
     end
 
     def preprocess(document)
-      Preprocessor.new(document).inject_inset_text
+      Preprocessor
+        .new(document)
+        .inject_inset_text
+        .inject_details
+        .output
     end
   end
 end
diff --git a/spec/preprocessor_spec.rb b/spec/preprocessor_spec.rb
@@ -1,18 +1,20 @@
 require "spec_helper"
 
 RSpec.describe "GovukMarkdown with textual component extensions" do
-  describe "inset text" do
-    let(:a_line_of_text) { "my custom text" }
-
-    let(:some_lines_of_text) do
-      <<~TEXT
-        The quick
-        brown fox
-        jumped over the
-        lazy dog
-      TEXT
-    end
+  let(:a_line_of_text) { "My custom text. Some extra details. And a few more." }
+  let(:output_summary) { "My custom text" }
+  let(:output_details_text) { "Some extra details. And a few more." }
+  let(:additional_details_text) { "Additional details. Don't you just love more details." }
+  let(:some_lines_of_text) do
+    <<~TEXT
+      The quick
+      brown fox
+      jumped over the
+      lazy dog
+    TEXT
+  end
 
+  describe "inset text" do
     context "when there is an inline piece of inset text" do
       let(:input) do
         <<~MD
@@ -42,15 +44,6 @@
     end
 
     context "when there is a block of inset text" do
-      let(:some_lines_of_text) do
-        <<~TEXT
-          The quick
-          brown fox
-          jumped over the
-          lazy dog
-        TEXT
-      end
-
       let(:input) do
         <<~MD
           an unrelated paragraph
@@ -120,4 +113,206 @@
       end
     end
   end
+
+  describe "details" do
+    context "when there is a details section" do
+      let(:input) do
+        <<~MD
+          an unrelated paragraph
+
+          {details}#{a_line_of_text}{/details}
+
+          an unrelated paragraph
+        MD
+      end
+
+      let(:expected_output) do
+        <<~HTML
+          <p class="govuk-body-m">an unrelated paragraph</p>
+
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+                #{output_summary}
+              </span>
+            </summary>
+            <div class="govuk-details__text">
+              #{output_details_text}
+            </div>
+          </details>
+
+          <p class="govuk-body-m">an unrelated paragraph</p>
+        HTML
+      end
+
+      it "renders the details section" do
+        expect_equal_ignoring_ws(render(input), expected_output)
+      end
+
+      context "and the split is on a question mark" do
+        let(:details_with_question) { "What about this fox and dog? Good question. In the end they became cute friends." }
+
+        let(:input) do
+          <<~MD
+            an unrelated paragraph
+
+            {details}#{details_with_question}{/details}
+
+            an unrelated paragraph
+          MD
+        end
+
+        let(:expected_output) do
+          <<~HTML
+            <p class="govuk-body-m">an unrelated paragraph</p>
+
+            <details class="govuk-details" data-module="govuk-details">
+              <summary class="govuk-details__summary">
+                <span class="govuk-details__summary-text">
+                  What about this fox and dog?
+                </span>
+              </summary>
+              <div class="govuk-details__text">
+                Good question. In the end they became cute friends.
+              </div>
+            </details>
+
+            <p class="govuk-body-m">an unrelated paragraph</p>
+          HTML
+        end
+
+        it "renders the details section" do
+          expect_equal_ignoring_ws(render(input), expected_output)
+        end
+      end
+
+      context "and the text contains a question mark that comes after a fullstop" do
+        let(:details) { "Find out more. Will the fox and the dog remain friends? Or are they just too different?" }
+
+        let(:input) do
+          <<~MD
+            an unrelated paragraph
+
+            {details}#{details}{/details}
+
+            an unrelated paragraph
+          MD
+        end
+
+        let(:expected_output) do
+          <<~HTML
+            <p class="govuk-body-m">an unrelated paragraph</p>
+
+            <details class="govuk-details" data-module="govuk-details">
+              <summary class="govuk-details__summary">
+                <span class="govuk-details__summary-text">
+                  Find out more
+                </span>
+              </summary>
+              <div class="govuk-details__text">
+                Will the fox and the dog remain friends? Or are they just too different?
+              </div>
+            </details>
+
+            <p class="govuk-body-m">an unrelated paragraph</p>
+          HTML
+        end
+
+        it "renders the details section" do
+          expect_equal_ignoring_ws(render(input), expected_output)
+        end
+      end
+    end
+
+    context "multiple details sections" do
+      let(:input) do
+        <<~MD
+          an unrelated paragraph
+
+          {details}#{a_line_of_text}{/details}
+
+          {details}#{additional_details_text}{/details}
+
+          an unrelated paragraph
+        MD
+      end
+
+      let(:expected_output) do
+        <<~HTML
+          <p class="govuk-body-m">an unrelated paragraph</p>
+
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+                #{output_summary}
+              </span>
+            </summary>
+            <div class="govuk-details__text">
+              #{output_details_text}
+            </div>
+          </details>
+
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+                Additional details
+              </span>
+            </summary>
+            <div class="govuk-details__text">
+              Don't you just love more details.
+            </div>
+          </details>
+
+          <p class="govuk-body-m">an unrelated paragraph</p>
+        HTML
+      end
+
+      it "renders multiple details sections" do
+        expect_equal_ignoring_ws(render(input), expected_output)
+      end
+    end
+  end
+
+  describe "multiple preprocessing steps" do
+    context "inset text and details" do
+      let(:input) do
+        <<~MD
+          an unrelated paragraph
+
+          {details}#{a_line_of_text}{/details}
+
+          {inset-text}#{a_line_of_text}{/inset-text}
+
+          an unrelated paragraph
+        MD
+      end
+
+      let(:expected_output) do
+        <<~HTML
+          <p class="govuk-body-m">an unrelated paragraph</p>
+
+          <details class="govuk-details" data-module="govuk-details">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">
+                #{output_summary}
+              </span>
+            </summary>
+            <div class="govuk-details__text">
+              #{output_details_text}
+            </div>
+          </details>
+
+          <div class="govuk-inset-text">
+            #{a_line_of_text}
+          </div>
+
+          <p class="govuk-body-m">an unrelated paragraph</p>
+        HTML
+      end
+
+      it "renders correctly" do
+        expect_equal_ignoring_ws(render(input), expected_output)
+      end
+    end
+  end
 end