@salesforcedevs/docs-components 1.17.0-hack-alpha8 → 1.17.2-accessfix-alpha

package/lwc.config.json

@@ -7,7 +7,6 @@
     "expose": [
         "doc/amfReference",
         "doc/breadcrumbs",
-        "doc/commentPopup",
         "doc/componentPlayground",
         "doc/content",
         "doc/contentCallout",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.0-hack-alpha8",
+    "version": "1.17.2-accessfix-alpha",
     "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,10 @@ export default class ComponentPlayground extends LightningElement {
 
     isLoading = true;
 
+    get playgroundTitle() {
+        return `Preview of ${this.component} Component Playground`;
+    }
+
     get playgroundAvailable() {
         return (
             this.playgroundAppUrl &&

package/src/modules/doc/content/content.css

@@ -67,53 +67,42 @@ h1 {
     font-size: var(--dx-g-text-3xl);
     letter-spacing: -0.8px;
     line-height: var(--dx-g-spacing-3xl);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-2xl)) 0
-        var(--dx-g-spacing-md) 0;
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
 h2 {
     font-size: var(--dx-g-text-2xl);
     letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-2xl);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-2xl)) 0
-        var(--dx-g-spacing-md) 0;
+    margin: var(--dx-g-spacing-2xl) 0 var(--dx-g-spacing-md) 0;
 }
 
 h3 {
     font-size: var(--dx-g-text-xl);
     letter-spacing: -0.4px;
     line-height: var(--dx-g-spacing-xl);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-md)) 0
-        var(--dx-g-spacing-md) 0;
+    margin: var(--dx-g-spacing-xl) 0 var(--dx-g-spacing-md) 0;
 }
 
 h4 {
     font-size: var(--dx-g-text-base);
     letter-spacing: -0.5px;
     line-height: var(--dx-g-spacing-lg);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-lg)) 0
-        var(--dx-g-spacing-sm) 0;
+    margin: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-sm) 0;
 }
 
 h5 {
     font-size: var(--dx-g-text-sm);
     letter-spacing: -0.3px;
     line-height: var(--dx-g-spacing-mlg);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-md)) 0
-        var(--dx-g-spacing-sm) 0;
+    margin: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-sm) 0;
 }
 
 h6 {
     font-size: var(--dx-g-text-xs);
     letter-spacing: -0.3px;
     line-height: var(--dx-g-spacing-md);
-    margin: var(--heading-top-margin, var(--dx-g-spacing-sm)) 0
-        var(--dx-g-spacing-sm) 0;
-}
-
-/* Override top margin for doc-heading preceded by doc-comment-popup */
-doc-comment-popup + doc-heading {
-    --heading-top-margin: 10px;
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
 }
 
 img {

package/src/modules/doc/heading/heading.css

@@ -31,59 +31,3 @@ h4 {
 h4 doc-heading-content {
     --doc-c-heading-anchor-button-bottom: -6px;
 }
-
-/* Heading alignment when comment popup is present */
-h1:has(doc-comment-popup),
-h2:has(doc-comment-popup),
-h3:has(doc-comment-popup),
-h4:has(doc-comment-popup) {
-    display: flex;
-    align-items: center;
-    gap: var(--dx-g-spacing-xs, 4px);
-}
-
-/* Ensure heading content takes up remaining space */
-doc-heading-content {
-    flex: 1;
-    display: inline-block;
-}
-
-/* When no comment popup is present, reset flex to normal display */
-h1:not(:has(doc-comment-popup)),
-h2:not(:has(doc-comment-popup)),
-h3:not(:has(doc-comment-popup)),
-h4:not(:has(doc-comment-popup)) {
-    display: block;
-}
-
-/* Fallback for browsers that don't support :has() - 
-   rely on JavaScript or assume all headings might have popups */
-@supports not (selector(:has(*))) {
-    h1,
-    h2,
-    h3,
-    h4 {
-        display: flex;
-        align-items: center;
-        gap: var(--dx-g-spacing-xs, 4px);
-    }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    h1:has(doc-comment-popup),
-    h2:has(doc-comment-popup),
-    h3:has(doc-comment-popup),
-    h4:has(doc-comment-popup) {
-        gap: var(--dx-g-spacing-2xs, 2px);
-    }
-
-    @supports not (selector(:has(*))) {
-        h1,
-        h2,
-        h3,
-        h4 {
-            gap: var(--dx-g-spacing-2xs, 2px);
-        }
-    }
-}

package/src/modules/doc/heading/heading.html

@@ -1,54 +1,14 @@
 <template>
     <h1 class={className} if:true={isAriaLevelOne}>
-        <!-- Comment Popup -->
-        <template if:true={hasCommentPopup}>
-            <doc-comment-popup
-                heading-title={headingTitle}
-                file-path={filePath}
-                start-line={startLine}
-                end-line={endLine}
-                current-branch={currentBranch}
-            ></doc-comment-popup>
-        </template>
         <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h1>
     <h2 class={className} if:true={isAriaLevelTwo}>
-        <!-- Comment Popup -->
-        <template if:true={hasCommentPopup}>
-            <doc-comment-popup
-                heading-title={headingTitle}
-                file-path={filePath}
-                start-line={startLine}
-                end-line={endLine}
-                current-branch={currentBranch}
-            ></doc-comment-popup>
-        </template>
         <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h2>
     <h3 class={className} if:true={isAriaLevelThree}>
-        <!-- Comment Popup -->
-        <template if:true={hasCommentPopup}>
-            <doc-comment-popup
-                heading-title={headingTitle}
-                file-path={filePath}
-                start-line={startLine}
-                end-line={endLine}
-                current-branch={currentBranch}
-            ></doc-comment-popup>
-        </template>
         <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h3>
     <h4 class={className} if:true={isAriaLevelFour}>
-        <!-- Comment Popup -->
-        <template if:true={hasCommentPopup}>
-            <doc-comment-popup
-                heading-title={headingTitle}
-                file-path={filePath}
-                start-line={startLine}
-                end-line={endLine}
-                current-branch={currentBranch}
-            ></doc-comment-popup>
-        </template>
         <doc-heading-content header={header} hash={hash}></doc-heading-content>
     </h4>
 </template>

package/src/modules/doc/heading/heading.ts

@@ -16,21 +16,6 @@ export default class Heading extends LightningElement {
     @api header: string = "";
     @api hash: string | null = null;
 
-    // Comment popup attributes
-    @api index?: string;
-    @api filePath?: string;
-    @api startLine?: string;
-    @api endLine?: string;
-    @api currentBranch?: string;
-
-    // Comment popup properties
-    @api iconSymbol = "chat";
-    @api iconSize = "medium";
-    @api popupTitle = "Leave a Comment";
-    @api submitButtonLabel = "Post Comment";
-    @api emailPlaceholder = "Enter your email";
-    @api commentPlaceholder = "Enter your comment";
-
     @api
     private get ariaLevel(): string {
         // Really Dark Magic (TM)
@@ -79,13 +64,4 @@ export default class Heading extends LightningElement {
     private get className(): string {
         return `dx-text-display-${this.displayLevel}`;
     }
-
-    // Comment popup computed properties
-    get hasCommentPopup() {
-        return this.currentBranch !== undefined;
-    }
-
-    get headingTitle() {
-        return this.header;
-    }
 }

package/src/modules/doc/xmlContent/xmlContent.html

@@ -1,6 +1,6 @@
 <template>
     <doc-content-layout
-        lwc:if={loaded}
+        lwc:if={displayContent}
         lwc:ref="docContentLayout"
         coveo-organization-id={coveoOrganizationId}
         coveo-public-access-token={coveoPublicAccessToken}
@@ -49,4 +49,12 @@
             onnavclick={handleNavClick}
         ></doc-content>
     </doc-content-layout>
+    <div lwc:if={display404}>
+        <dx-error
+            image="https://a.sfdcstatic.com/developer-website/images/404.svg"
+            code="404"
+            header="Beep boop. That did not compute."
+            subtitle="The document you're looking for doesn't seem to exist."
+        ></dx-error>
+    </div>
 </template>

package/src/modules/doc/xmlContent/xmlContent.ts

@@ -11,7 +11,8 @@ import {
     SiderbarFooter,
     HistoryState,
     PageReference,
-    TocMap
+    TocMap,
+    ContentData
 } from "./types";
 import { SearchSyncer } from "docUtils/searchSyncer";
 import { LightningElementWithState } from "dxBaseElements/lightningElementWithState";
@@ -72,7 +73,8 @@ export default class DocXmlContent extends LightningElementWithState<{
     private contentProvider?: FetchContent;
     private docContent = "";
     private language?: DocLanguage | null = null;
-    private loaded = false;
+    private displayContent = false;
+    private display404 = false;
     private _pageHeader?: Header;
     private pdfUrl = "";
     private tocMap: TocMap = {};
@@ -185,7 +187,13 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.apiDomain,
             this.allLanguages
         );
-        this.fetchDocument().then(() => (this.loaded = true));
+        this.fetchDocument().then((content: any) => {
+            if (content) {
+                this.displayContent = true;
+            } else {
+                this.display404 = true;
+            }
+        });
         window.addEventListener("popstate", this.handlePopState);
 
         this.searchSyncer.init();
@@ -463,7 +471,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         );
     }
 
-    async fetchDocument(): Promise<void> {
+    async fetchDocument(): Promise<string> {
         this.setState({
             isFetchingDocument: true
         });
@@ -477,7 +485,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.setState({
                 isFetchingDocument: false
             });
-            return;
+            return "";
         }
 
         this.docTitle = data.docTitle;
@@ -509,11 +517,11 @@ export default class DocXmlContent extends LightningElementWithState<{
             data.id
         ) {
             try {
-                await this.fetchContent();
+                const moreData = await this.fetchContent();
                 this.setState({
                     isFetchingDocument: false
                 });
-                return;
+                return moreData.content;
             } catch (error) {
                 this.pageReference.contentDocumentId = `${data.id}.htm`;
                 this.pageReference.hash = "";
@@ -527,9 +535,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingDocument: false
         });
+        return data.content;
     }
 
-    async fetchContent(): Promise<void> {
+    async fetchContent(): Promise<ContentData> {
         this.setState({
             isFetchingContent: true
         });
@@ -553,6 +562,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         this.setState({
             isFetchingContent: false
         });
+        return data;
     }
 
     updateHeaderAndSidebarFooter(): void {

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -70,7 +70,6 @@ dx-toc {
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
     margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
-    position: relative;
 }
 
 .content-body {