@salesforcedevs/docs-components 1.17.0-hack-alpha3 → 1.17.0-hack-alpha5

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

@@ -33,10 +33,10 @@ h4 doc-heading-content {
 }
 
 /* Heading alignment when comment popup is present */
-h1:has(.comment-icon-container),
-h2:has(.comment-icon-container),
-h3:has(.comment-icon-container),
-h4:has(.comment-icon-container) {
+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);
@@ -49,10 +49,10 @@ doc-heading-content {
 }
 
 /* When no comment popup is present, reset flex to normal display */
-h1:not(:has(.comment-icon-container)),
-h2:not(:has(.comment-icon-container)),
-h3:not(:has(.comment-icon-container)),
-h4:not(:has(.comment-icon-container)) {
+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;
 }
 
@@ -69,263 +69,12 @@ h4:not(:has(.comment-icon-container)) {
     }
 }
 
-/* Comment Icon Container */
-.comment-icon-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    z-index: 1000;
-}
-
-.comment-icon-button {
-    background: var(--dx-g-blue-vibrant-20);
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    padding: 6px;
-    width: 28px;
-    height: 28px;
-    box-sizing: border-box;
-}
-
-.comment-icon-button dx-icon {
-    color: white;
-}
-
-.comment-icon-button:hover {
-    background: var(--dx-g-blue-vibrant-50);
-    color: white;
-}
-
-.comment-icon-button:active {
-    transform: scale(0.95);
-}
-
-/* Comment Count Badge */
-.comment-count-badge {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    background: #f44336;
-    color: white;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    font-size: 12px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 20px;
-    padding: 0 2px;
-    box-sizing: border-box;
-    border: 2px solid white;
-    box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-    z-index: 1001;
-}
-
-/* Popup Overlay */
-.popup-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgb(0 0 0 / 50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2000;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-/* Popup Container */
-.popup-container {
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 20px 40px rgb(0 0 0 / 10%);
-    max-width: 500px;
-    width: 100%;
-    max-height: 80vh;
-    overflow-y: auto;
-    position: relative;
-}
-
-/* Popup Header */
-.popup-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24px 24px 0;
-    border-bottom: 1px solid #e0e0e0;
-    margin-bottom: 24px;
-}
-
-.popup-title {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: #212121;
-}
-
-.close-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s ease;
-}
-
-.close-button:hover {
-    background: #f5f5f5;
-}
-
-/* Popup Content */
-.popup-content {
-    padding: 0 24px 24px;
-}
-
-/* Comment Form */
-.comment-form {
-    margin-bottom: 24px;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-    color: #424242;
-    font-size: 14px;
-}
-
-.form-input,
-.form-textarea {
-    width: 100%;
-    padding: 12px 16px;
-    border: 2px solid #e0e0e0;
-    border-radius: 8px;
-    font-size: 14px;
-    font-family: inherit;
-    transition: border-color 0.2s ease;
-    box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus {
-    outline: none;
-    border-color: #1976d2;
-}
-
-.form-textarea {
-    resize: vertical;
-    min-height: 100px;
-}
-
-.error-message {
-    color: #d32f2f;
-    font-size: 12px;
-    margin-top: 4px;
-}
-
-.form-actions {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.submit-button {
-    background: #1976d2;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 12px 24px;
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    font-family: inherit;
-}
-
-.submit-button:hover:not(:disabled) {
-    background: #1565c0;
-}
-
-.submit-button:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-}
-
-/* Comments Section */
-.comments-section {
-    border-top: 1px solid #e0e0e0;
-    padding-top: 24px;
-}
-
-.comments-title {
-    margin: 0 0 16px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #212121;
-}
-
-.comments-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.comment-item {
-    background: #f8f9fa;
-    border-radius: 8px;
-    padding: 16px;
-    border-left: 4px solid #1976d2;
-}
-
-.comment-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.comment-email {
-    font-weight: 500;
-    color: #1976d2;
-    font-size: 14px;
-}
-
-.comment-time {
-    font-size: 12px;
-    color: #757575;
-}
-
-.comment-text {
-    color: #424242;
-    line-height: 1.5;
-    font-size: 14px;
-}
-
 /* Responsive Design */
 @media (max-width: 768px) {
-    h1:has(.comment-icon-container),
-    h2:has(.comment-icon-container),
-    h3:has(.comment-icon-container),
-    h4:has(.comment-icon-container) {
+    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);
     }
 
@@ -337,123 +86,4 @@ h4:not(:has(.comment-icon-container)) {
             gap: var(--dx-g-spacing-2xs, 2px);
         }
     }
-
-    .comment-icon-button {
-        width: 24px;
-        height: 24px;
-        padding: 4px;
-    }
-
-    .comment-count-badge {
-        width: 18px;
-        height: 18px;
-        font-size: 11px;
-        top: -6px;
-        right: -6px;
-    }
-
-    .popup-overlay {
-        padding: 16px;
-    }
-
-    .popup-container {
-        max-height: 90vh;
-    }
-
-    .popup-header {
-        padding: 16px 16px 0;
-        margin-bottom: 16px;
-    }
-
-    .popup-title {
-        font-size: 18px;
-    }
-
-    .popup-content {
-        padding: 0 16px 16px;
-    }
-
-    .comments-section {
-        padding-top: 16px;
-    }
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-    .popup-container {
-        background: #303030;
-        color: #fff;
-    }
-
-    .popup-title {
-        color: #fff;
-    }
-
-    .popup-header {
-        border-bottom-color: #424242;
-    }
-
-    .form-label {
-        color: #e0e0e0;
-    }
-
-    .form-input,
-    .form-textarea {
-        background: #424242;
-        border-color: #616161;
-        color: #fff;
-    }
-
-    .form-input:focus,
-    .form-textarea:focus {
-        border-color: #42a5f5;
-    }
-
-    .form-input::placeholder,
-    .form-textarea::placeholder {
-        color: #bdbdbd;
-    }
-
-    .close-button:hover {
-        background: #424242;
-    }
-
-    .comments-section {
-        border-top-color: #424242;
-    }
-
-    .comments-title {
-        color: #fff;
-    }
-
-    .comment-item {
-        background: #424242;
-        border-left-color: #42a5f5;
-    }
-
-    .comment-email {
-        color: #42a5f5;
-    }
-
-    .comment-text {
-        color: #e0e0e0;
-    }
-
-    .comment-count-badge {
-        border-color: #303030;
-    }
-
-    .submit-button {
-        background: #1976d2;
-        color: white;
-    }
-
-    .submit-button:hover:not(:disabled) {
-        background: #1565c0;
-    }
-
-    .submit-button:disabled {
-        background: #555;
-        color: #999;
-    }
 }

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

@@ -2,175 +2,53 @@
     <h1 class={className} if:true={isAriaLevelOne}>
         <!-- Comment Popup -->
         <template if:true={hasCommentPopup}>
-            <div class="comment-icon-container">
-                <button
-                    class="comment-icon-button"
-                    onclick={handleIconClick}
-                    aria-label="Open comment popup"
-                >
-                    <dx-icon symbol={iconSymbol} size={iconSize}></dx-icon>
-                </button>
-                <div if:true={showCommentCount} class="comment-count-badge">
-                    {commentCount}
-                </div>
-            </div>
+            <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}>
-            <div class="comment-icon-container">
-                <button
-                    class="comment-icon-button"
-                    onclick={handleIconClick}
-                    aria-label="Open comment popup"
-                >
-                    <dx-icon symbol={iconSymbol} size={iconSize}></dx-icon>
-                </button>
-                <div if:true={showCommentCount} class="comment-count-badge">
-                    {commentCount}
-                </div>
-            </div>
+            <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}>
-            <div class="comment-icon-container">
-                <button
-                    class="comment-icon-button"
-                    onclick={handleIconClick}
-                    aria-label="Open comment popup"
-                >
-                    <dx-icon symbol={iconSymbol} size={iconSize}></dx-icon>
-                </button>
-                <div if:true={showCommentCount} class="comment-count-badge">
-                    {commentCount}
-                </div>
-            </div>
+            <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}>
-            <div class="comment-icon-container">
-                <button
-                    class="comment-icon-button"
-                    onclick={handleIconClick}
-                    aria-label="Open comment popup"
-                >
-                    <dx-icon symbol={iconSymbol} size={iconSize}></dx-icon>
-                </button>
-                <div if:true={showCommentCount} class="comment-count-badge">
-                    {commentCount}
-                </div>
-            </div>
+            <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>
-
-    <!-- Popup Overlay -->
-    <div if:true={open} class="popup-overlay" onclick={handleOverlayClick}>
-        <div
-            class="popup-container"
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="popup-title"
-        >
-            <!-- Popup Header -->
-            <div class="popup-header">
-                <h3 id="popup-title" class="popup-title">{popupTitle}</h3>
-                <button
-                    class="close-button"
-                    onclick={handleClose}
-                    aria-label="Close popup"
-                >
-                    <dx-icon symbol="close" size="small"></dx-icon>
-                </button>
-            </div>
-
-            <!-- Comment Form -->
-            <div class="popup-content">
-                <form class="comment-form" onsubmit={handleSubmit}>
-                    <div class="form-group">
-                        <label for="email-input" class="form-label">
-                            Email
-                        </label>
-                        <input
-                            id="email-input"
-                            type="email"
-                            class="form-input"
-                            placeholder={emailPlaceholder}
-                            value={email}
-                            oninput={handleEmailChange}
-                            required
-                        />
-                        <div if:true={emailError} class="error-message">
-                            {emailError}
-                        </div>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="comment-input" class="form-label">
-                            Comment
-                        </label>
-                        <textarea
-                            id="comment-input"
-                            class="form-textarea"
-                            placeholder={commentPlaceholder}
-                            value={comment}
-                            oninput={handleCommentChange}
-                            rows="4"
-                            required
-                        ></textarea>
-                        <div if:true={commentError} class="error-message">
-                            {commentError}
-                        </div>
-                    </div>
-
-                    <div class="form-actions">
-                        <button
-                            type="submit"
-                            class="submit-button"
-                            disabled={submitButtonDisabled}
-                            onclick={handleSubmit}
-                        >
-                            <span if:false={isSubmitting}>
-                                {submitButtonLabel}
-                            </span>
-                            <span if:true={isSubmitting}>Posting...</span>
-                        </button>
-                    </div>
-                </form>
-
-                <!-- Comments List -->
-                <div if:true={showComments} class="comments-section">
-                    <h4 class="comments-title">Comments</h4>
-                    <div class="comments-list">
-                        <template
-                            for:each={formattedComments}
-                            for:item="comment"
-                        >
-                            <div key={comment.email} class="comment-item">
-                                <div class="comment-header">
-                                    <span class="comment-email">
-                                        {comment.maskedEmail}
-                                    </span>
-                                    <span class="comment-time">
-                                        {comment.formattedTimestamp}
-                                    </span>
-                                </div>
-                                <div class="comment-text">
-                                    {comment.comment}
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
 </template>