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

package/src/modules/doc/commentPopup/commentPopup.css

@@ -1,440 +0,0 @@
-/* Comment Icon Container */
-.comment-icon-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    margin-right: var(--dx-g-spacing-xs, 4px);
-    margin-top: var(--dx-g-spacing-sm, 8px);
-    margin-bottom: calc(-1 * var(--dx-g-spacing-lg, 24px));
-    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 lightning-icon,
-.comment-icon-button c-primitive-icon {
-    --sds-c-icon-color-foreground: white;
-}
-
-.comment-icon-button:hover lightning-icon,
-.comment-icon-button:hover c-primitive-icon {
-    --sds-c-icon-color-foreground: 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;
-}
-
-/* Success Message */
-.success-message {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: #e8f5e8;
-    color: #2e7d32;
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-bottom: 16px;
-    border-left: 4px solid #4caf50;
-    font-size: 14px;
-}
-
-.success-message dx-icon {
-    --sds-c-icon-color-foreground: #4caf50;
-}
-
-/* API Error Message */
-.api-error {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: #ffebee;
-    color: #c62828;
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-bottom: 16px;
-    border-left: 4px solid #f44336;
-    font-size: 14px;
-}
-
-.api-error dx-icon {
-    --sds-c-icon-color-foreground: #f44336;
-}
-
-/* Loading Message */
-.loading-message {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    background: #e3f2fd;
-    color: #1565c0;
-    padding: 12px 16px;
-    border-radius: 8px;
-    margin-bottom: 16px;
-    border-left: 4px solid #2196f3;
-    font-size: 14px;
-}
-
-.loading-message dx-icon {
-    --sds-c-icon-color-foreground: #2196f3;
-
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* 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;
-}
-
-/* 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) {
-    .comment-icon-container {
-        margin-right: var(--dx-g-spacing-xs, 4px);
-        margin-top: var(--dx-g-spacing-xs, 4px);
-        margin-bottom: calc(-1 * var(--dx-g-spacing-md, 16px));
-    }
-
-    .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;
-    }
-
-    .success-message,
-    .api-error,
-    .loading-message {
-        padding: 10px 12px;
-        font-size: 13px;
-    }
-
-    .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;
-    }
-
-    .success-message {
-        background: #1b5e20;
-        color: #a5d6a7;
-        border-left-color: #4caf50;
-    }
-
-    .api-error {
-        background: #b71c1c;
-        color: #ef9a9a;
-        border-left-color: #f44336;
-    }
-
-    .loading-message {
-        background: #0d47a1;
-        color: #90caf9;
-        border-left-color: #2196f3;
-    }
-
-    .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;
-    }
-}

package/src/modules/doc/commentPopup/commentPopup.html

@@ -1,138 +0,0 @@
-<template>
-    <!-- Floating Comment Icon -->
-    <div class="comment-icon-container">
-        <dx-button
-            icon-symbol={iconSymbol}
-            icon-size={iconSize}
-            variant="base"
-            onclick={handleIconClick}
-            aria-label="Open comment popup"
-            class="comment-icon-button"
-        ></dx-button>
-        <div if:true={showCommentCount} class="comment-count-badge">
-            {commentCount}
-        </div>
-    </div>
-
-    <!-- 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>
-                <dx-button
-                    icon-symbol="close"
-                    icon-size="small"
-                    variant="base"
-                    onclick={handleClose}
-                    aria-label="Close popup"
-                    class="close-button"
-                ></dx-button>
-            </div>
-
-            <!-- Popup Content -->
-            <div class="popup-content">
-                <!-- Success Message -->
-                <div if:true={submitSuccess} class="success-message">
-                    <dx-icon icon-symbol="success" icon-size="small"></dx-icon>
-                    <span>Comment posted successfully!</span>
-                </div>
-
-                <!-- API Error Message -->
-                <div if:true={apiError} class="error-message api-error">
-                    <dx-icon icon-symbol="error" icon-size="small"></dx-icon>
-                    <span>{apiError}</span>
-                </div>
-
-                <!-- Loading State -->
-                <div if:true={isLoading} class="loading-message">
-                    <dx-icon icon-symbol="spinner" icon-size="small"></dx-icon>
-                    <span>Loading comments...</span>
-                </div>
-
-                <!-- Comment Form -->
-                <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">
-                        <dx-button
-                            type="submit"
-                            variant="brand"
-                            disabled={submitButtonDisabled}
-                            onclick={handleSubmit}
-                        >
-                            <span if:false={isSubmitting}>
-                                {submitButtonLabel}
-                            </span>
-                            <span if:true={isSubmitting}>Posting...</span>
-                        </dx-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>