Added support for taller component previews

Author: pangolingo

11tyconfig/previewMarkdownDirective.js

@@ -17,7 +17,7 @@ export default function previewMarkdownDirective(md) {
       return;
     }
 
-    const { file, title, id } = attrs;
+    const { file, title, id, tall } = attrs;
 
     let htmlContent;
     try {
@@ -43,6 +43,7 @@ export default function previewMarkdownDirective(md) {
       const previewTitle = escape(title || "Preview");
       const previewId = id || `preview_${directiveStartLine}`;
       const pathPrefix = process.env.SITE_ENV === "production" ? "/roux" : "";
+      const isTall = tall === "true";
 
       // create a markdown HTML block
       const token = state.push("html_block", "", 0);
@@ -52,6 +53,7 @@ export default function previewMarkdownDirective(md) {
         previewTitle,
         htmlContent,
         pathPrefix,
+        isTall,
       );
     } catch (error) {
       console.error("Error rendering preview", error);
@@ -83,9 +85,9 @@ function generatePreviewIframeContent(title, htmlContent, pathPrefix) {
 `;
 }
 
-function generatePreviewHtml(id, title, htmlContent, pathPrefix) {
+function generatePreviewHtml(id, title, htmlContent, pathPrefix, isTall) {
   return `
- <div class="component-example">
+ <div class="component-example${isTall ? " component-example--tall" : ""}">
     <div role="tablist" aria-labelledby="${id}" class="automatic">
       <button
         id="tab-preview-${id}"

site/assets/css/_component-example.css

@@ -1,8 +1,17 @@
+.component-example {
+  /* expand beyond parent width for readability */
+  width: calc(100vw - var(--space--x-large) * 2);
+  max-width: 70rem;
+}
+
 .component-example [role="tabpanel"] {
   resize: both;
   overflow: auto;
   height: 340px;
 }
+.component-example--tall [role="tabpanel"] {
+  height: 540px;
+}
 
 .component-example__preview-frame {
   border: var(--border--dark);

site/component-library/dialog.md

@@ -20,8 +20,8 @@ Remember to set autofocus to a close button or the first interaction. [According
 
 ### Basic Modal
 
-::preview{file="dialogs/basic.html" title="Basic Modal" id="example_basic_modal"}::
+::preview{file="dialogs/basic.html" title="Basic Modal" id="example_basic_modal" tall="true"}::
 
 ### Slide-in Drawer Modal
 
-::preview{file="dialogs/slide-in.html" title="Slide-in Drawer Modal" id="example_slide_in_modal"}::
+::preview{file="dialogs/slide-in.html" title="Slide-in Drawer Modal" id="example_slide_in_modal" tall="true"}::

site/component-library/form.md

@@ -21,4 +21,4 @@ This approach keeps the form **accessible, extensible, and user-friendly** while
 
 ### Basic Form
 
-::preview{file="forms/basic.html" title="Basic Form" id="example_form"}::
+::preview{file="forms/basic.html" title="Basic Form" id="example_form" tall="true"}::

site/component-library/table.md

@@ -32,4 +32,4 @@ Using these variations keeps tables readable, accessible, and responsive across
 
 ### Overflow Scroll
 
-::preview{file="tables/overflow.html" title="Overflow Scroll" id="example_overflow"}::
+::preview{file="tables/overflow.html" title="Overflow Scroll" id="example_overflow" tall="true"}::

site/component-library/typography.md

@@ -12,4 +12,4 @@ Be sure to use headline levels in order (H1 followed by H2, etc) so that assisti
 
 ### Basic Typography
 
-::preview{file="typography/basic.html" title="Basic Typography" id="example_basic"}::
+::preview{file="typography/basic.html" title="Basic Typography" id="example_basic" tall="true"}::