@salesforcedevs/docs-components 1.22.0-responsive-4 → 1.26.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.22.0-responsive-4",
+    "version": "1.26.0-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.css

@@ -1 +1,35 @@
 @import "docHelpers/contentLayoutStyle";
+
+/* New Theme Test Styles */
+@keyframes scroll-text {
+    0% {
+        transform: translateX(100%);
+    }
+
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+.new-theme-test {
+    background: linear-gradient(135deg, #d4cd00 0%, #83d400 50%, #19a700 100%);
+    color: white;
+    padding: 12px 24px;
+    margin: 0 var(--dx-g-global-header-padding-horizontal, 24px);
+    margin-top: var(--dx-g-spacing-md, 16px);
+    font-weight: 600;
+    font-size: 16px;
+    box-shadow: 0 4px 12px rgb(4 212 0 / 30%);
+    overflow: hidden;
+    white-space: nowrap;
+    border-radius: 8px;
+    text-align: center;
+    max-width: var(--dx-g-doc-content-max-width);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.new-theme-banner span {
+    display: inline-block;
+    animation: scroll-text 10s linear infinite;
+}

package/src/modules/doc/contentLayout/contentLayout.html

@@ -23,12 +23,32 @@
             <div class="version-wrapper">
                 <slot name="version-banner"></slot>
             </div>
+            <div class="new-theme-test">
+                <span>
+                    ✨ SFDocs is Awesome 🥰 New Theme Update inside Component!!
+                </span>
+            </div>
             <div class="content-body-container">
                 <div class="content-body">
                     <doc-breadcrumbs
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -45,6 +45,8 @@ export default class ContentLayout extends LightningElement {
     // This is needed for now to prevent failing snapshot tests due to links in the footer
     @api showFooter = false;
 
+    @api readingTime?: number;
+
     @api
     get breadcrumbs() {
         return this._breadcrumbs;
@@ -137,6 +139,10 @@ export default class ContentLayout extends LightningElement {
         );
     }
 
+    get showReadingTime(): boolean {
+        return this.readingTime != null && this.readingTime > 0;
+    }
+
     connectedCallback(): void {
         const hasParentHighlightListener = closest(
             "doc-xml-content",

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -28,6 +28,21 @@
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
                     ></doc-breadcrumbs>
+                    <div class="read" lwc:if={showReadingTime}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="18"
+                            height="18"
+                            viewBox="0 0 52 52"
+                        >
+                            <g fill="#3e3e3c">
+                                <path
+                                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
+                                ></path>
+                            </g>
+                        </svg>
+                        {readingTime} minute read
+                    </div>
                     <slot onslotchange={onSlotChange}></slot>
                     <doc-sprig-survey
                         lwc:if={shouldDisplayFeedback}

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

@@ -12,6 +12,7 @@
         bail-href={sidebarFooterContent.bailHref}
         bail-label={sidebarFooterContent.bailLabel}
         show-footer={enableFooter}
+        reading-time={computedReadingTime}
     >
         <doc-phase
             slot="version-banner"

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

@@ -41,6 +41,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 }> {
     @api apiDomain = "https://developer.salesforce.com";
     @api hideFooter = false;
+    @api displayReadingTime = false;
 
     @api
     get allLanguages(): Array<Language> {
@@ -76,6 +77,10 @@ export default class DocXmlContent extends LightningElementWithState<{
         return !this.hideFooter;
     }
 
+    private get computedReadingTime(): number | undefined {
+        return this.displayReadingTime ? this.readingTime : undefined;
+    }
+
     private searchSyncer = new SearchSyncer({
         callbacks: {
             onSearchChange: (nextSearchString: string): void => {
@@ -147,6 +152,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
     @track private pageReference: PageReference = {};
     @track breadcrumbs: Array<Breadcrumb> = [];
+    @track readingTime?: number;
 
     constructor() {
         super();
@@ -493,6 +499,7 @@ export default class DocXmlContent extends LightningElementWithState<{
         }
 
         this.docContent = data.content;
+        this.calculateReadingTime(data.content);
         this.addMetatags();
         this.setState({
             isFetchingDocument: false
@@ -515,6 +522,7 @@ export default class DocXmlContent extends LightningElementWithState<{
 
         if (data) {
             this.docContent = data.content;
+            this.calculateReadingTime(data.content);
             this.addMetatags();
 
             if (!this.pageReference.hash) {
@@ -760,4 +768,32 @@ export default class DocXmlContent extends LightningElementWithState<{
     private get showVersionPicker(): boolean {
         return !this.disableVersion;
     }
+
+    private calculateReadingTime(content: string): void {
+        if (!this.displayReadingTime) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        if (!content) {
+            this.readingTime = undefined;
+            return;
+        }
+
+        // Strip HTML tags and get text content
+        const div = document.createElement("div");
+        div.innerHTML = DOMPurify.sanitize(content);
+        const textContent = div.textContent || div.innerText || "";
+
+        // Count words (split by whitespace and filter out empty strings)
+        const wordCount = textContent
+            .trim()
+            .split(/\s+/)
+            .filter((word) => word.length > 0).length;
+
+        // Calculate reading time: (wordCount / 240) + 1, rounded
+        const readingTimeMinutes = Math.round(wordCount / 240 + 1);
+        this.readingTime =
+            readingTimeMinutes > 0 ? readingTimeMinutes : undefined;
+    }
 }

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

@@ -24,6 +24,19 @@ doc-breadcrumbs {
     margin-bottom: var(--dx-g-spacing-2xl);
 }
 
+.read {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-xs, 8px);
+    margin-bottom: var(--dx-g-spacing-lg, 16px);
+    color: var(--dx-g-gray-30, #3e3e3c);
+    font-size: var(--dx-g-font-size-sm, 14px);
+}
+
+.read svg {
+    flex-shrink: 0;
+}
+
 dx-sidebar,
 dx-sidebar-old {
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
@@ -92,7 +105,6 @@ dx-toc {
     max-width: 1000px;
     flex: 1;
     width: 0;
-    overflow-wrap: break-word;
 }
 
 .is-sticky {
@@ -131,9 +143,10 @@ dx-toc {
     }
 
     .content-body-container {
+        padding-right: 0;
+        padding-left: 0;
         overflow-x: auto;
         margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
-        padding: 0 var(--dx-g-spacing-lg);
     }
 
     .left-nav-bar {