Sample Modal Usage

src/features/encoders/mozJPEG/client/index.tsx

@@ -15,7 +15,8 @@ import Select from 'client/lazy-app/Compress/Options/Select';
 import Revealer from 'client/lazy-app/Compress/Options/Revealer';
 import { ModalMessage } from 'client/lazy-app/Compress/Modal';
 import ModalContext from 'client/lazy-app/Compress/Modal/modal-context';
-import { render as renderToString } from 'preact-render-to-string';
+import { shallowRender as renderToString } from 'preact-render-to-string';
+import * as SampleImage from 'img-url:static-build/assets/link.jpg';
 
 export function encode(
   signal: AbortSignal,
@@ -36,7 +37,43 @@ interface State {
 }
 
 function sampleDescription(): string {
-  return renderToString(<p>This is a para</p>);
+  return renderToString(
+    <Fragment>
+      <h1>Test Suite (h1)</h1>
+      <p>This is a paragraph.</p>
+      <p>
+        This is <i>another</i> paragraph. Notice how <b>another</b> uses
+        italics. Oh wait, I just used the &lt;b&gt; tag. Oh, and escaped HTML
+        unicode thingies. Now I'm just rambling so that this is long enough to
+        be multi-line, and you can see the line-height.
+      </p>
+      <hr />
+      <pre>
+        # Which is the best programming language?
+        <br />
+        print("Python is!")
+        <br />
+        Oh and this is all in &lt;pre&gt;
+      </pre>
+      <p>
+        <strong>This text is strong</strong>. And <code>this</code> is in
+        &lt;code&gt;.
+      </p>
+      <figure>
+        <img src={SampleImage.default} alt="Alt Text" />
+        <figcaption>
+          Source: Nintendo EDP / Nintendo (and this is a figcaption)
+        </figcaption>
+      </figure>
+      <p>
+        That's a link.{' '}
+        <a href="https://www.zelda.com/tears-of-the-kingdom/">
+          This is also a link
+        </a>
+        .
+      </p>
+    </Fragment>,
+  );
 }
 
 export class Options extends Component<Props, State> {
@@ -118,17 +155,7 @@ export class Options extends Component<Props, State> {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
     // gathering the data.
     return (
-      <form
-        class={style.optionsSection}
-        onSubmit={preventDefault}
-        onClick={() =>
-          this._showModal({
-            type: 'info',
-            title: 'MozJPEG - quality',
-            content: sampleDescription(),
-          })
-        }
-      >
+      <form class={style.optionsSection} onSubmit={preventDefault}>
         <div class={style.optionOneCell}>
           <Range
             name="quality"
@@ -140,6 +167,45 @@ export class Options extends Component<Props, State> {
             Quality:
           </Range>
         </div>
+        <label class={style.optionToggle}>
+          Info Modal
+          <Checkbox
+            name="NULL"
+            onClick={() =>
+              this._showModal({
+                type: 'info',
+                title: 'Informative Title',
+                content: sampleDescription(),
+              })
+            }
+          />
+        </label>
+        <label class={style.optionToggle}>
+          Error Modal
+          <Checkbox
+            name="NULL"
+            onClick={() =>
+              this._showModal({
+                type: 'error',
+                title: 'Error Title',
+                content: sampleDescription(),
+              })
+            }
+          />
+        </label>
+        <label class={style.optionToggle}>
+          Update Modal
+          <Checkbox
+            name="NULL"
+            onClick={() =>
+              this._showModal({
+                type: 'update',
+                title: 'Feature Title',
+                content: sampleDescription(),
+              })
+            }
+          />
+        </label>
         <label class={style.optionReveal}>
           <Revealer
             checked={showAdvanced}