@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

package/src/modules/doc/contentMedia/contentMedia.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+
+export default class ContentMedia extends LightningElement {
+    @api mediaTitle?: string = undefined;
+    @api contentSrc?: string = undefined;
+    @api contentType?: "image" | "iframe" = undefined;
+    @api iframeSrc?: string = undefined;
+    @api caption?: string = undefined;
+
+    get mediaWrapperClass(): string {
+        return this.contentType === "image"
+            ? "content-media-image"
+            : "content-media-iframe";
+    }
+
+    get frameTitle(): string {
+        if (!this.mediaTitle) {
+            console.error(
+                "media-title must be specified when using iframe-src attribute."
+            );
+            return "Embedded iframe";
+        }
+
+        return this.mediaTitle;
+    }
+
+    get isImage(): boolean {
+        return this.contentType === "image";
+    }
+
+    get isIframe(): boolean {
+        return this.contentType === "iframe";
+    }
+}

package/src/modules/doc/doDont/doDont.css

@@ -0,0 +1,47 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dx-g-spacing-md);
+    flex: 1;
+}
+
+.doc-do-dont-header {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.doc-do-dont-label {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-spacing-md);
+    font-weight: var(--dx-g-font-demi);
+    line-height: var(--dx-g-spacing-lg);
+}
+
+.doc-do-color {
+    color: var(--dx-g-green-vibrant-50);
+}
+
+.doc-dont-color {
+    color: var(--dx-g-red-vibrant-30);
+}
+
+.do-dont-image-container {
+    display: flex;
+    max-height: 480px;
+    min-height: 140px;
+    padding: var(--dx-g-spacing-3xl) var(--dx-g-spacing-2xl);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    border-radius: var(--dx-g-spacing-sm);
+    border: 1px solid var(--dx-g-brand-default-color-border-2);
+}
+
+.doc-do-dont-img {
+    object-fit: contain;
+}

package/src/modules/doc/doDont/doDont.html

@@ -0,0 +1,27 @@
+<template>
+    <div class="container">
+        <div class="doc-do-dont-header">
+            <template lwc:if={isDo}>
+                <dx-icon
+                    symbol="success"
+                    size="large"
+                    color="green-vibrant-50"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-do-color">Do</div>
+            </template>
+            <template lwc:else>
+                <dx-icon
+                    symbol="clear"
+                    size="large"
+                    color="red-vibrant-30"
+                    class="doc-do-dont-icon"
+                ></dx-icon>
+                <div class="doc-do-dont-label doc-dont-color">Don't</div>
+            </template>
+        </div>
+        <div class="do-dont-image-container">
+            <img class="doc-do-dont-img" src={imgSrc} alt={caption} />
+        </div>
+        <div class="dx-text-body-4">{caption}</div>
+    </div>
+</template>

package/src/modules/doc/doDont/doDont.ts

@@ -0,0 +1,17 @@
+import { LightningElement, api } from "lwc";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+export default class DoDont extends LightningElement {
+    @api caption: string = "";
+    @api imgSrc!: string;
+    _isDo: boolean = false;
+
+    @api
+    get isDo(): boolean {
+        return this._isDo;
+    }
+
+    set isDo(value) {
+        this._isDo = normalizeBoolean(value);
+    }
+}

package/src/modules/doc/editFile/editFile.css

@@ -0,0 +1,505 @@
+/* Host container */
+:host {
+    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+        sans-serif;
+}
+
+/* Edit File Trigger Button */
+.edit-file-trigger {
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 4px 16px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+}
+
+.edit-file-trigger:hover:not(:disabled) {
+    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
+}
+
+.edit-file-trigger:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgb(1 118 211 / 30%);
+}
+
+.edit-file-trigger:disabled {
+    background: #d8dde6;
+    color: #706e6b;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+}
+
+.edit-file-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.edit-file-trigger-text {
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+/* Overlay */
+.edit-file-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(4px);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.edit-file-overlay_open {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Popover */
+.edit-file-popover {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 15%);
+    width: 100%;
+    max-width: 900px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.9) translateY(20px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+}
+
+.edit-file-popover_open {
+    transform: scale(1) translateY(0);
+}
+
+/* Popover Header */
+.edit-file-header {
+    padding: 24px 24px 20px;
+    border-bottom: 1px solid #e5e7ea;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
+    position: relative;
+}
+
+.edit-file-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 700;
+    color: #181818;
+    letter-spacing: -0.02em;
+}
+
+.edit-file-filename {
+    margin: 8px 0 0;
+    font-size: 14px;
+    color: #706e6b;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+}
+
+.edit-file-file-icon {
+    width: 16px;
+    height: 16px;
+    color: #0176d3;
+}
+
+.edit-file-close {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    color: #706e6b;
+    flex-shrink: 0;
+}
+
+.edit-file-close:hover {
+    background: #f3f3f3;
+    color: #181818;
+    transform: scale(1.05);
+}
+
+.edit-file-close-icon {
+    width: 20px;
+    height: 20px;
+}
+
+/* Popover Content */
+.edit-file-content {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+/* Loading State */
+.edit-file-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 16px;
+}
+
+.edit-file-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid #e5e7ea;
+    border-top: 3px solid #0176d3;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+.edit-file-loading-text {
+    margin: 0;
+    color: #706e6b;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+/* Error State */
+.edit-file-error {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    background: #fef7f7;
+    border: 1px solid #fecaca;
+    border-radius: 12px;
+    color: #dc2626;
+    margin-bottom: 20px;
+}
+
+.edit-file-error-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.edit-file-error-text {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Editor */
+.edit-file-editor {
+    width: 100%;
+}
+
+.edit-file-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #181818;
+}
+
+.edit-file-textarea {
+    width: 100%;
+    min-height: 400px;
+    padding: 16px;
+    border: 2px solid #e5e7ea;
+    border-radius: 12px;
+    font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+    background: #fafbfc;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-sizing: border-box;
+}
+
+.edit-file-textarea:focus {
+    border-color: #0176d3;
+    background: white;
+    box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
+}
+
+.edit-file-textarea::placeholder {
+    color: #9ca3af;
+}
+
+/* Popover Footer */
+.edit-file-footer {
+    padding: 20px 24px 24px;
+    border-top: 1px solid #e5e7ea;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
+}
+
+/* Status Indicators */
+.edit-file-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.edit-file-saving {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #0176d3;
+}
+
+.edit-file-mini-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e5e7ea;
+    border-top: 2px solid #0176d3;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+.edit-file-unchanged {
+    color: #706e6b;
+}
+
+.edit-file-modified {
+    color: #059669;
+    position: relative;
+}
+
+.edit-file-modified::before {
+    content: "●";
+    margin-right: 6px;
+    color: #059669;
+}
+
+/* Action Buttons */
+.edit-file-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.edit-file-button {
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    white-space: nowrap;
+}
+
+.edit-file-button_secondary {
+    background: #f3f3f3;
+    color: #181818;
+    border: 1px solid #e5e7ea;
+}
+
+.edit-file-button_secondary:hover:not(:disabled) {
+    background: #e5e7ea;
+    transform: translateY(-1px);
+}
+
+.edit-file-button_primary {
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+}
+
+.edit-file-button_primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
+}
+
+.edit-file-button_disabled {
+    background: #d8dde6 !important;
+    color: #706e6b !important;
+    cursor: not-allowed !important;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.edit-file-button:disabled {
+    background: #d8dde6;
+    color: #706e6b;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.edit-file-button-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+/* Animations */
+@keyframes edit-file-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .edit-file-trigger {
+        padding: 10px 14px;
+        font-size: 13px;
+    }
+
+    .edit-file-trigger-text {
+        display: none;
+    }
+
+    .edit-file-overlay {
+        padding: 16px;
+    }
+
+    .edit-file-popover {
+        max-width: 100%;
+        max-height: 95vh;
+    }
+
+    .edit-file-header {
+        padding: 20px 20px 16px;
+    }
+
+    .edit-file-title {
+        font-size: 20px;
+    }
+
+    .edit-file-content {
+        padding: 20px;
+    }
+
+    .edit-file-textarea {
+        min-height: 300px;
+        font-size: 13px;
+    }
+
+    .edit-file-footer {
+        padding: 16px 20px 20px;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+
+    .edit-file-actions {
+        width: 100%;
+        justify-content: stretch;
+    }
+
+    .edit-file-button {
+        flex: 1;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .edit-file-trigger {
+        padding: 8px 12px;
+    }
+
+    .edit-file-overlay {
+        padding: 12px;
+    }
+
+    .edit-file-header {
+        padding: 16px;
+    }
+
+    .edit-file-title {
+        font-size: 18px;
+    }
+
+    .edit-file-content {
+        padding: 16px;
+    }
+
+    .edit-file-footer {
+        padding: 12px 16px 16px;
+    }
+
+    .edit-file-textarea {
+        min-height: 250px;
+        padding: 12px;
+    }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+    .edit-file-trigger,
+    .edit-file-overlay,
+    .edit-file-popover,
+    .edit-file-close,
+    .edit-file-button,
+    .edit-file-textarea {
+        transition: none;
+    }
+
+    .edit-file-spinner,
+    .edit-file-mini-spinner,
+    .edit-file-button-spinner {
+        animation: none;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .edit-file-trigger {
+        border: 2px solid;
+    }
+
+    .edit-file-popover {
+        border: 2px solid #000;
+    }
+
+    .edit-file-textarea {
+        border: 2px solid #000;
+    }
+
+    .edit-file-button {
+        border: 2px solid;
+    }
+}