Use the testcase widget for the $reveal widget examples (#8406)

* Use the testcase widget for the $reveal widget examples

* Convert $reveal testcase widget examples into testcase tiddlers

* Add expected results to $reveal test case tiddlers

These examples are intended to be interactive and the expect results
only test the initial rendering. Still that seems like useful verification

editions/tw5.com/tiddlers/testcases/RevealWidget/AccordionSlider.tid

@@ -0,0 +1,30 @@
+created: 20240721163229297
+description: Reveal widget for accordion or slider functionality
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/AccordionSlider
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Two distinct buttons toggle the state of the tiddler value. Two reveal widgets. The first displays the button to show the content. The second displays both the content and the button to hide the content.
++
+title: Output
+
+<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
+
+<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
+
+</$reveal>
+<$reveal type="match" state="$:/state/SampleReveal2" text="show">
+
+<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>
+
+! This is the revealed content
+And this is some text
+
+</$reveal>
++
+title: ExpectedResult
+
+<div class=" tc-reveal"><p><button class="">Show me</button></p></div><div class=" tc-reveal" hidden="true"></div>

editions/tw5.com/tiddlers/testcases/RevealWidget/Popup.tid

@@ -0,0 +1,27 @@
+created: 20240721163229297
+description: Reveal widget for popup content
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/Popup
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+When the button is clicked, the tiddler specified by the popup attribute is filled with the click coordinates. The reveal widget uses these coordinates to position the popup content.
++
+title: Output
+
+<$button popup="$:/SamplePopupState">Pop me up!</$button>
+
+<$reveal type="popup" state="$:/SamplePopupState">
+<div class="tc-drop-down">
+
+! This is the popup
+And this is some text
+
+</div>
+</$reveal>
++
+title: ExpectedResult
+
+<p><button aria-expanded="false" class="">Pop me up!</button></p><p><span class=" tc-reveal" hidden="true"></span></p>

editions/tw5.com/tiddlers/testcases/RevealWidget/SimpleReveal.tid

@@ -0,0 +1,27 @@
+created: 20240721163229297
+description: Simple content reveal
+modified: 20240721172211283
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/SimpleReveal
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+Two distinct buttons toggle the state of the tiddler value. The reveal widget displays its content for one of the two states.
++
+title: Output
+
+<$button set="$:/state/SampleReveal1" setTo="show">Show me</$button>
+<$button set="$:/state/SampleReveal1" setTo="hide">Hide me</$button>
+
+<$reveal type="match" state="$:/state/SampleReveal1" text="show">
+
+! This is the revealed content
+And this is some text
+
+</$reveal>
++
+title: ExpectedResult
+
+<p><button class="">Show me</button>
+<button class="">Hide me</button></p><div class=" tc-reveal" hidden="true"></div>

editions/tw5.com/tiddlers/testcases/RevealWidget/TextReference.tid

@@ -0,0 +1,23 @@
+created: 20240721163229297
+description: Reveal widget text references
+modified: 20240721174826529
+tags: $:/tags/wiki-test-spec
+title: TestCases/RevealWidget/TextReference
+type: text/vnd.tiddlywiki-multiple
+
+title: Narrative
+
+The state attribute of the reveal widget can use the text reference syntax to refer to a specific field. In this example if the field ``jeremy`` contains the text ``tiddlywiki``, then the reveal widget's content will be displayed.
++
+title: Output
+jeremy: tiddlywiki
+
+<$reveal type="match" state="!!jeremy" text="tiddlywiki">
+~TiddlyWiki!
+</$reveal>
++
+title: ExpectedResult
+
+<p><span class=" tc-reveal">
+TiddlyWiki!
+</span></p>

editions/tw5.com/tiddlers/widgets/RevealWidget.tid

@@ -1,7 +1,7 @@
 caption: reveal
 created: 20131024141900000
 jeremy: tiddlywiki
-modified: 20230803052644851
+modified: 20240721175716320
 tags: Widgets
 title: RevealWidget
 type: text/vnd.tiddlywiki
@@ -47,57 +47,10 @@ This is useful for edge-cases where titles may contain characters that are used
 
 ! Examples
 
-!! Simple content reveal
+<<testcase TestCases/RevealWidget/SimpleReveal>>
 
-Here's a simple example of showing and hiding content with buttons:
+<<testcase TestCases/RevealWidget/AccordionSlider>>
 
-<<wikitext-example-without-html '<$button set="$:/state/SampleReveal1" setTo="show">Show me</$button>
+<<testcase TestCases/RevealWidget/Popup>>
-<$button set="$:/state/SampleReveal1" setTo="hide">Hide me</$button>
 
-<$reveal type="match" state="$:/state/SampleReveal1" text="show">
+<<testcase TestCases/RevealWidget/TextReference>>
-
-! This is the revealed content
-And this is some text
-
-</$reveal>'>>
-
-!! Accordion or Slider
-
-An "accordion" or "slider" is a button that can be used to toggle the display of associated content.
-
-<<wikitext-example-without-html '<$reveal type="nomatch" state="$:/state/SampleReveal2" text="show">
-
-<$button set="$:/state/SampleReveal2" setTo="show">Show me</$button>
-
-</$reveal>
-<$reveal type="match" state="$:/state/SampleReveal2" text="show">
-
-<$button set="$:/state/SampleReveal2" setTo="hide">Hide me</$button>
-
-! This is the revealed content
-And this is some text
-
-</$reveal>'>>
-
-!! Popup
-
-Here is a simple example of a popup built with the RevealWidget:
-
-<<wikitext-example-without-html '<$button popup="$:/SamplePopupState">Pop me up!</$button>
-
-<$reveal type="popup" state="$:/SamplePopupState">
-<div class="tc-drop-down">
-
-! This is the popup
-And this is some text
-
-</div>
-</$reveal>'>>
-
-!! How to use text references with field content
-
-Here is a simple example how to use text references with field content to control the  RevealWidget. If the field ``jeremy`` is populated with text ``tiddlywiki``, a message will be displayed.
-
-<<wikitext-example-without-html '<$reveal type="match" state="!!jeremy" text="tiddlywiki">
-~TiddlyWiki!
-</$reveal>'>>