@salesforcedevs/docs-components 1.17.6-hover-edit → 1.17.6-redoc1

package/lwc.config.json

@@ -18,10 +18,9 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
-        "doc/markdownEditor",
-        "doc/textSelectionSearch",
         "doc/overview",
         "doc/phase",
+        "doc/docReference",
         "doc/specificationContent",
         "doc/versionPicker",
         "doc/xmlContent",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.6-hover-edit",
+    "version": "1.17.6-redoc1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -17,6 +17,6 @@ iframe {
     border: 1px solid var(--dx-g-gray-90);
 }
 
-.container {
+.playground-container {
     position: relative;
 }

package/src/modules/doc/componentPlayground/componentPlayground.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="container" lwc:if={playgroundAvailable}>
+    <div class="playground-container" lwc:if={playgroundAvailable}>
         <dx-spinner
             size="large"
             variant="brand"
@@ -8,7 +8,7 @@
         <iframe
             src={playgroundSrc}
             onload={handleIframeLoad}
-            title="Component Playground"
+            title={playgroundTitle}
             allow="clipboard-write"
         ></iframe>
     </div>

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

@@ -8,6 +8,19 @@ export default class ComponentPlayground extends LightningElement {
 
     isLoading = true;
 
+    /**
+     * Returns a formatted title for the component playground
+     * Maps 'aura' model to 'Aura' and 'lwc' model to 'Lightning'
+     * Capitalizes the first letter of the component name
+     * @returns {string} Formatted playground title
+     */
+    get playgroundTitle() {
+        const modelName = this.model === "aura" ? "Aura" : "Lightning";
+        const componentName =
+            this.component.charAt(0).toUpperCase() + this.component.slice(1);
+        return `Example previews and code for ${modelName} ${componentName} component`;
+    }
+
     get playgroundAvailable() {
         return (
             this.playgroundAppUrl &&

package/src/modules/doc/docReference/docReference.css

@@ -0,0 +1,52 @@
+@import "docHelpers/amfStyle";
+
+:host {
+    --reference-container-margin-top: var(--dx-g-spacing-sm);
+    --api-documentation-margin-top: var(--dx-g-spacing-3xl);
+}
+
+/**
+ * 1. We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+ * 2. Consider global nav height, doc header height and content margins to scroll to the right position
+ */
+
+@media screen and (min-width: 769px) {
+    .redoc-container {
+        scroll-margin-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+                var(--reference-container-margin-top) +
+                var(--api-documentation-margin-top)
+        );
+    }
+}
+
+.redoc-container {
+    width: 100%;
+    height: 100%;
+    /* Ensure Redoc content is scrollable within the content layout */
+    overflow-y: auto;
+}
+
+/* Loading state styles */
+.loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    font-size: 16px;
+    color: var(--dx-g-color-text-secondary);
+}
+
+/* Error state styles */
+.error-container {
+    padding: 20px;
+    background-color: var(--dx-g-color-background-error);
+    border: 1px solid var(--dx-g-color-border-error);
+    border-radius: 4px;
+    margin: 20px 0;
+}
+
+.error-message {
+    color: var(--dx-g-color-text-error);
+    font-weight: 600;
+}

package/src/modules/doc/docReference/docReference.html

@@ -0,0 +1,62 @@
+<template>
+    <doc-content-layout
+        lwc:if={isVersionFetched}
+        use-old-sidebar={useOldSidebar}
+        class="content-type content-type-reference"
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-analytics-token={coveoAnalyticsToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
+        breadcrumbs={breadcrumbs}
+        sidebar-header={sidebarHeader}
+        sidebar-value={selectedSidebarValue}
+        sidebar-content={navigation}
+        onselect={onNavSelect}
+        onexpandcollapse={onExpandCollapse}
+        toc-title={tocTitle}
+        toc-options={tocOptions}
+        enable-slot-change="true"
+        languages={languages}
+        language={language}
+        show-footer={enableFooter}
+    >
+        <doc-phase
+            slot="doc-phase"
+            lwc:if={docPhaseInfo}
+            doc-phase-info={docPhaseInfo}
+        ></doc-phase>
+        <doc-phase
+            slot="version-banner"
+            lwc:if={showVersionBanner}
+            doc-phase-info={oldVersionInfo}
+            icon-name="warning"
+            dismissible="true"
+            ondismissphase={handleDismissVersionBanner}
+        ></doc-phase>
+        <div lwc:if={isVersionEnabled} slot="sidebar-header">
+            <doc-version-picker
+                onchange={handleVersionChange}
+                data-type="version"
+                versions={versions}
+                selected-version={selectedVersion}
+                latest-version={latestVersion}
+            ></doc-version-picker>
+        </div>
+        <template lwc:if={showSpecBasedReference}>
+            <div class="container">
+                <div class="api-documentation">
+                    <!-- Replace doc-amf-topic with Redoc container -->
+                    <div 
+                        class="redoc-container" 
+                        lwc:dom="manual"
+                        data-redoc-container
+                    ></div>
+                </div>
+            </div>
+        </template>
+        <template lwc:else>
+            <slot></slot>
+        </template>
+    </doc-content-layout>
+</template>