@salesforcedevs/docs-components 1.18.5-specification → 1.18.6-dynamic-pg1

package/package.json

@@ -1,16 +1,11 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.18.5-specification",
+    "version": "1.18.6-dynamic-pg1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
-        "node": "20.x",
-        "yarn": "1.22.19"
-    },
-    "volta": {
-        "node": "20.18.2",
-        "yarn": "1.22.19"
+        "node": "20.x"
     },
     "publishConfig": {
         "access": "public"

package/src/modules/doc/componentPlayground/componentPlayground.css

@@ -10,13 +10,27 @@
  * Total: 606px
 **/
 
+:host {
+    --playground-iframe-min-height: 500px;
+    --playground-iframe-max-height: 5000px;
+}
+
 iframe {
     width: 100%;
     height: 606px;
+    min-height: var(--playground-iframe-min-height);
+    max-height: var(--playground-iframe-max-height);
+    transition: height 0.3s ease, min-height 0.3s ease;
     border-radius: var(--dx-g-spacing-sm);
     border: 1px solid var(--dx-g-gray-90);
 }
 
+@media (prefers-reduced-motion: reduce) {
+    iframe {
+        transition: none;
+    }
+}
+
 .playground-container {
     position: relative;
 }

package/src/modules/doc/componentPlayground/componentPlayground.ts

@@ -1,5 +1,7 @@
 import { LightningElement, api } from "lwc";
 
+const PLAYGROUND_HEIGHT_MESSAGE = "PLAYGROUND_HEIGHT_CHANGE";
+
 export default class ComponentPlayground extends LightningElement {
     @api model!: string;
     @api namespace!: string;
@@ -36,7 +38,49 @@ export default class ComponentPlayground extends LightningElement {
         }/${this.component.toLowerCase()}.html`;
     }
 
+    connectedCallback() {
+        window.addEventListener("message", this.handleIframeMessage);
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("message", this.handleIframeMessage);
+    }
+
     handleIframeLoad() {
         this.isLoading = false;
     }
+
+    handleIframeMessage = (event: MessageEvent) => {
+        // Only handle height change messages from our iframe
+        if (event.data?.type !== PLAYGROUND_HEIGHT_MESSAGE) {
+            return;
+        }
+
+        const iframe = this.template.querySelector(
+            "iframe"
+        ) as HTMLIFrameElement;
+        if (!iframe || event.source !== iframe.contentWindow) {
+            return;
+        }
+
+        const height = event.data.height;
+        if (typeof height === "number" && height > 0) {
+            const minHeight = parseInt(
+                getComputedStyle(this.template.host).getPropertyValue(
+                    "--playground-iframe-min-height"
+                ),
+                10
+            );
+            const maxHeight = parseInt(
+                getComputedStyle(this.template.host).getPropertyValue(
+                    "--playground-iframe-max-height"
+                ),
+                10
+            );
+
+            const newHeight = Math.min(Math.max(height, minHeight), maxHeight);
+            iframe.style.height = `${newHeight}px`;
+            iframe.style.minHeight = `${newHeight}px`;
+        }
+    };
 }

package/src/modules/doc/specificationContent/specificationContent.html

@@ -7,11 +7,6 @@
             if:true={isLoading}
         ></dx-spinner>
         <dx-error-fallback lwc:if={showError}></dx-error-fallback>
-        <dx-error-fallback
-            lwc:if={showNoSpecifications}
-            title="No specifications to show"
-            description="No specifications are available for this component or API module. When specifications are defined, they'll appear here."
-        ></dx-error-fallback>
         <template lwc:if={hasAttributes}>
             <doc-heading
                 header="Attributes"

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -108,17 +108,6 @@ export default class SpecificationContent extends LightningElement {
         return this.events?.length > 0;
     }
 
-    get showNoSpecifications() {
-        return (
-            !this.showError &&
-            !this.isLoading &&
-            !this.hasAttributes &&
-            !this.hasMethods &&
-            !this.hasSlots &&
-            !this.hasEvents
-        );
-    }
-
     renderedCallback(): void {
         if (this.data) {
             this.debouncedNotifyDataRendered();