@salesforcedevs/docs-components 1.3.344-spage → 1.3.345-spPage-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.344-spage",
+    "version": "1.3.345-spPage-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -124,8 +124,14 @@ export default class ContentLayout extends LightningElement {
         const headingElements = this.getHeadingElements();
         headingElements.forEach((headingElement: any) => {
             // Sometimes elements hash and header is not being set when slot content is wrapped with div
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            headingElement.header = headingElement.attributes.header?.nodeValue;
+            if (!headingElement.hash) {
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
         });
         this.updateTocItems(headingElements);
     };
@@ -138,8 +144,19 @@ export default class ContentLayout extends LightningElement {
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
-                    headingElements =
-                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    // This is needed for Specification tab content
+                    const specificationElement = tabPanelItem.querySelector(
+                        "doc-specification-content"
+                    );
+                    if (specificationElement) {
+                        headingElements =
+                            specificationElement.shadowRoot.querySelectorAll(
+                                TOC_HEADER_TAG
+                            );
+                    } else {
+                        headingElements =
+                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    }
                     break;
                 }
             }

package/src/modules/doc/specificationContent/specificationContent.css

@@ -0,0 +1,3 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/table";

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

@@ -1,46 +1,102 @@
 <template>
-    <lightning-card title="Fetched Data">
-        <!-- Display Attributes if they exist -->
+    <div class="specification-properties">
         <template if:true={hasAttributes}>
-            <h3>Attributes</h3>
-            <ul>
-                <template for:each={data.attribute} for:item="attr">
-                    <li key={attr.name}>
-                        <strong>{attr.name}:</strong>
-                        {attr.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Attributes"
+                hash="attributes"
+                aria-level="2"
+                id="attributes"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={attributes} for:item="attribute">
+                        <tr key={attribute.name}>
+                            <td>{attribute.nameInKebabCase}</td>
+                            <td>{attribute.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Methods if they exist -->
         <template if:true={hasMethods}>
-            <h3>Methods</h3>
-            <ul>
-                <template for:each={data.method} for:item="method">
-                    <li key={method.name}>
-                        <strong>{method.name}:</strong>
-                        {method.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Methods"
+                hash="methods"
+                aria-level="2"
+                id="methods"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={methods} for:item="method">
+                        <tr key={method.name}>
+                            <td>{method.nameInKebabCase}</td>
+                            <td>{method.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Slots if they exist -->
         <template if:true={hasSlots}>
-            <h3>Slots</h3>
-            <ul>
-                <template for:each={data.slots} for:item="slot">
-                    <li key={slot.name}>
-                        <strong>{slot.name}:</strong>
-                        {slot.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Slots"
+                hash="slots"
+                aria-level="2"
+                id="slots"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={slots} for:item="slot">
+                        <tr key={slot.name}>
+                            <td>{slot.nameInKebabCase}</td>
+                            <td>{slot.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <template if:true={error}>
-            <p>Error fetching data: {error}</p>
+        <template if:true={hasEvents}>
+            <doc-heading
+                header="Events"
+                hash="events"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={events} for:item="event">
+                        <tr key={event.name}>
+                            <td>{event.nameInKebabCase}</td>
+                            <td>{event.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
-    </lightning-card>
+    </div>
 </template>

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

@@ -1,41 +1,64 @@
-import { LightningElement, track } from "lwc";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, track, api } from "lwc";
 
-export default class specificationContent extends LightningElement {
-    @track data: any; // Reactive property to store fetched data
-    @track error: any; // To track any errors
+/* The actual URL is as follows:
+ * http://api.salesforce.com/doc-platform/developer/v1-alpha/components/{type}/{component-name}
+ * Until the API integration is ready, we will go ahead with localhost.
+ */
+const localURL: string = "https://cx-mock-router-f02597c1b3da.herokuapp.com";
+const ROUTER_URL: string =
+    localURL || "https://api.salesforce.com/doc-platform/developer/v1";
+
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    @api component: string = "button";
+    @api type: string = "lightning";
+
+    private attributes = [];
+    private methods = [];
+    private slots = [];
+    private events = [];
 
-    // Lifecycle method to fetch data when the component is inserted into the DOM
     connectedCallback() {
-        this.loadData();
+        this.fetchComponentMetadata();
     }
 
-    // Method to make the API call
-    loadData() {
-        fetch("http://localhost:3002/card") // Sample API URL
-            .then((response) => response.json()) // Convert response to JSON
-            .then((result) => {
-                this.data = toJson(result); // Store data to update UI
-                this.error = undefined; // Clear any previous errors
-            })
-            .catch((error) => {
-                this.error = error; // Capture any errors
-                this.data = {}; // Clear data on error
-            });
+    async fetchComponentMetadata() {
+        const url = `${ROUTER_URL}/components/${this.type}/${this.component}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            this.data = result;
+            ({
+                attributes: this.attributes,
+                methods: this.methods,
+                slots: this.slots,
+                events: this.events
+            } = this.data);
+        } catch (error) {
+            this.data = {};
+            console.error("fetchComponentMetadata() failed for:" + url);
+        }
     }
 
-    // Helper to check if attributes exist
     get hasAttributes() {
-        return this.data?.attribute;
+        return this.attributes?.length > 0;
     }
 
-    // Helper to check if methods exist
     get hasMethods() {
-        return this.data?.method;
+        return this.methods?.length > 0;
     }
 
-    // Helper to check if slots exist
     get hasSlots() {
-        return this.data?.slots;
+        return this.slots?.length > 0;
+    }
+
+    get hasEvents() {
+        return this.events?.length > 0;
     }
 }