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

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

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",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
+    "gitHead": "456b8ad8b3162df223f9809e66a454cb66b4add0"
 }

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 {

package/src/modules/doc/commentPopup/README.md

@@ -1,322 +0,0 @@
-# Comment Popup Component
-
-A Lightning Web Component that allows users to leave comments on documentation sections. The component supports both local storage (for development) and a new API format for production use.
-
-## Features
-
--   ✅ **API Integration**: Now actively tries to fetch from `/get-comments` endpoint
--   ✅ **Fallback Support**: Falls back to localStorage if API is unavailable
--   ✅ **New API Format**: Supports branch-based comment fetching
--   ✅ **Pre-loaded Comments**: Comments are fetched when component is rendered, not when popup opens
--   ✅ **Local Storage**: Comments persist across page refreshes during development
--   ✅ **Form Validation**: Email format and required field validation
--   ✅ **Real-time Display**: Comments appear immediately after posting
--   ✅ **Timestamp Formatting**: Shows relative time (e.g., "2 hours ago")
--   ✅ **Email Masking**: Protects user privacy in comment display
--   ✅ **Comment Count Badge**: Shows total number of comments
--   ✅ **Responsive Design**: Works on mobile and desktop
--   ✅ **Keyboard Accessibility**: ESC key to close popup
--   ✅ **Dark Mode Support**: Adapts to system preferences
--   ✅ **Development Tools**: Helper utilities for testing
-
-## API Format
-
-The component now supports a new API format where comments are fetched by branch and then filtered by file path and heading title.
-
-### API Endpoints
-
--   **GET** `/get-comments?branch={branch}` - Fetch all comments for a branch
--   **POST** `/post-comment` - Add a new comment
-
-### API Response Format
-
-```json
-{
-    "request_branch": "feature/documentation-updates",
-    "paths": [
-        {
-            "path": "docs/installation.md",
-            "titles": [
-                {
-                    "title": "Installation Guide",
-                    "comments": [
-                        {
-                            "email": "john.doe@example.com",
-                            "comment_text": "This installation guide is very helpful for new users.",
-                            "timestamp": "2024-01-15T10:30:00Z"
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}
-```
-
-### API Request Format
-
-```json
-{
-    "branch": "feature/documentation-updates",
-    "file_path": "docs/installation.md",
-    "heading_title": "Installation Guide",
-    "start_line": "1",
-    "end_line": "50",
-    "comment": {
-        "comment_text": "This is a helpful comment.",
-        "email": "user@example.com",
-        "timestamp": "2024-01-15T10:30:00Z"
-    }
-}
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<sb-doc-comment-popup
-    heading-title="Installation Guide"
-    file-path="docs/installation.md"
-    current-branch="feature/documentation-updates"
-    start-line="1"
-    end-line="50"
-    open="false"
-    icon-symbol="chat"
-    icon-size="medium"
->
-</sb-doc-comment-popup>
-```
-
-### Comment Loading Behavior
-
-The component now fetches comments when it is rendered (connected to the DOM) rather than when the popup is opened. This ensures:
-
--   **Faster Popup Opening**: Comments are already loaded when the user clicks the icon
--   **Immediate Comment Count**: The comment count badge shows the correct number immediately
--   **Better User Experience**: No loading delay when opening the popup
-
-Comments are automatically refetched when any of these properties change:
-
--   `heading-title`
--   `file-path`
--   `current-branch`
-
-### Required Properties
-
--   `heading-title`: The title of the section being commented on
--   `file-path`: The file path where the comment is located
--   `current-branch`: The current git branch
-
-### Optional Properties
-
--   `start-line`: Starting line number (for future line-specific comments)
--   `end-line`: Ending line number (for future line-specific comments)
--   `open`: Controls the popup visibility (default: false)
--   `icon-symbol`: Icon symbol for the comment button (default: "chat")
--   `icon-size`: Size of the comment icon (default: "medium")
-
-### Available Icon Symbols
-
--   `chat` - Chat bubble icon
--   `comment` - Comment icon
--   `message` - Message icon
--   `feedback` - Feedback icon
-
-### Available Icon Sizes
-
--   `small` - Small icon
--   `medium` - Medium icon (default)
--   `large` - Large icon
-
-## Local Storage Implementation
-
-During development, the component uses localStorage to persist comments. Comments are stored with a unique key format:
-
-```
-{branch}_{file_path}_{heading_title}
-```
-
-### Local Storage Structure
-
-```json
-{
-    "main_docs/installation.md_Installation Guide": [
-        {
-            "email": "user@example.com",
-            "comment_text": "This is a comment",
-            "timestamp": "2024-01-15T10:30:00Z"
-        }
-    ]
-}
-```
-
-## Development Tools
-
-The component includes development tools for testing and managing comments during development.
-
-### Console Commands
-
-```javascript
-// Export all comments to a JSON file
-CommentDevHelper.exportCommentsToFile();
-
-// Add sample comments matching the new API format
-CommentDevHelper.addSampleCommentsForNewApi();
-
-// Get statistics about stored comments
-CommentDevHelper.getCommentsStats();
-
-// Clear all comments from localStorage
-CommentDevHelper.clearAllComments();
-
-// Test the API response format
-CommentDevHelper.testApiResponseFormat();
-
-// Simulate API call for a specific branch
-CommentDevHelper.simulateApiCall("main");
-
-// Show all comments in console
-CommentDevHelper.showAllComments();
-```
-
-### Development UI
-
-The component automatically creates a development UI when running on localhost. This UI provides buttons for:
-
--   Adding sample comments
--   Testing API response format
--   Exporting comments
--   Clearing all comments
--   Viewing statistics
-
-## API Integration Status
-
-The component now actively tries to use the backend API with localStorage as a fallback:
-
-### Current Behavior
-
-1. **Fetch Comments**: First tries `/get-comments?branch={branch}`, falls back to localStorage if API fails
-2. **Post Comments**: First tries `/post-comment`, falls back to localStorage if API fails
-3. **Error Handling**: Graceful degradation with console warnings for debugging
-4. **Backward Compatibility**: localStorage continues to work for development and offline scenarios
-
-### API Endpoints
-
--   **GET** `/get-comments?branch={branch}` - Fetch all comments for a branch
--   **POST** `/post-comment` - Add a new comment
-
-### Fallback Strategy
-
-```typescript
-// Fetch comments with fallback
-try {
-    const response = await fetch(`/get-comments?${params.toString()}`);
-    if (response.ok) {
-        // Use API response
-        const data = await response.json();
-        this.comments = this.extractCommentsFromApiResponse(data);
-    } else {
-        // Fallback to localStorage
-        this.comments = await this.getCommentsFromLocalStorage();
-    }
-} catch (error) {
-    // Fallback to localStorage on network error
-    this.comments = await this.getCommentsFromLocalStorage();
-}
-```
-
-### Testing API Integration
-
-Use the development tools to test API integration:
-
-```javascript
-// Test API response format
-CommentDevHelper.testApiResponseFormat();
-
-// Simulate API call for a specific branch
-CommentDevHelper.simulateApiCall("main");
-
-// Check if API is available
-CommentDevHelper.checkApiAvailability();
-```
-
-## Testing
-
-### Storybook Stories
-
-The component includes comprehensive Storybook stories for testing:
-
-1. **Base**: Basic component functionality
-2. **WithNewApiFormatComments**: Testing with new API format
-3. **MultipleBranchesAndFiles**: Testing multiple branches and files
-4. **FormValidation**: Testing form validation features
-
-### Jest Tests
-
-Run the test suite:
-
-```bash
-npm test commentPopup.test.ts
-```
-
-The test suite covers:
-
--   Component initialization
--   Form validation
--   Local storage operations
--   API response format handling
--   Comment operations
--   UI interactions
--   Error handling
--   Lifecycle methods
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Comments not appearing**: Check that `heading-title`, `file-path`, and `current-branch` are set correctly
-2. **Form validation errors**: Ensure email format is valid and all required fields are filled
-3. **localStorage errors**: Check browser console for localStorage quota exceeded errors
-4. **API integration issues**: Verify API endpoints and response format match expected structure
-
-### Debug Commands
-
-```javascript
-// Check current comments
-console.log(CommentDevHelper.getAllComments());
-
-// Check component state
-console.log(element.comments);
-console.log(element.email);
-console.log(element.comment);
-
-// Test API response parsing
-CommentDevHelper.testApiResponseFormat();
-```
-
-## Browser Support
-
--   Chrome 60+
--   Firefox 55+
--   Safari 12+
--   Edge 79+
-
-## Dependencies
-
--   Lightning Web Components (LWC)
--   TypeScript
--   Jest (for testing)
-
-## Contributing
-
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Add tests for new functionality
-5. Update documentation
-6. Submit a pull request
-
-## License
-
-This component is part of the Salesforce Developer Documentation Components package.