@salesforcedevs/docs-components 1.3.345-spage → 1.3.345-spec-ux-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-spage",
+    "version": "1.3.345-spec-ux-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,136 @@
 <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>Type</th>
+                        <th>Required</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={attributes} for:item="attribute">
+                        <tr key={attribute.name}>
+                            <td>{attribute.nameInKebabCase}</td>
+                            <td>{attribute.type}</td>
+                            <td>{attribute.required}</td>
+                            <td>{attribute.default}</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>Arguments</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={methods} for:item="method">
+                        <tr key={method.name}>
+                            <td>{method.nameInKebabCase}</td>
+                            <td>
+                                <template if:true={method.arguments.length}>
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>Name</th>
+                                                <th>Type</th>
+                                                <th>Description</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <template
+                                                for:each={method.arguments}
+                                                for:item="argument"
+                                            >
+                                                <tr key={argument.name}>
+                                                    <td>{argument.name}</td>
+                                                    <td>{argument.type}</td>
+                                                    <td>
+                                                        {argument.description}
+                                                    </td>
+                                                </tr>
+                                            </template>
+                                        </tbody>
+                                    </table>
+                                </template>
+                            </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,66 @@
-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
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    // TODO: added these default values for testing, will drop this once the backend is ready.
+    @api component: string = "button";
+    @api model: string = "lwc";
+    @api namespace: string = "lightning";
+
+    /* TODO: The actual URL is as follows:
+     * http://api.salesforce.com/doc-platform/developer/v1/{type}/{sub-type}/{component-name}
+     * Until the API integration is ready, we will go ahead with mocked-router-url.
+     */
+    @api routerUrl: string =
+        "https://cx-mock-router-internal-07a18d7b3f61.herokuapp.com";
+
+    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 = `${this.routerUrl}/${this.model}/${this.namespace}/${this.component}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                // TODO: Will add loader and show error as follow-up
+                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;
     }
 }