@salesforcedevs/docs-components 0.64.2-test2 → 0.66.1-miles

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.64.2-test2",
+    "version": "0.66.1-miles",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.ts

@@ -165,6 +165,7 @@ export default class AmfReference extends LightningElement {
 
     constructor() {
         super();
+
         this._boundOnApiNavigationChanged =
             this.onApiNavigationChanged.bind(this);
         this._boundUpdateSelectedItemFromUrlQuery =
@@ -193,6 +194,16 @@ export default class AmfReference extends LightningElement {
         );
     }
 
+    saveScroll() {
+        console.log('saving scroll ' + document.body.scrollTop + ' to url ' + window.location.href);
+        window.history.replaceState({ scrollValue: document.body.scrollTop }, "", window.location.href);
+    }
+
+    restoreScroll() {
+        console.log('restoring scroll ' + window.history.state.scrollValue + ' from url ' + window.location.href);
+        document.body.scrollTop = document.documentElement.scrollTop = window.history.state.scrollValue;
+    }
+
     renderedCallback(): void {
         if (!this.hasRendered) {
             this.hasRendered = true;
@@ -760,8 +771,9 @@ export default class AmfReference extends LightningElement {
         if (meta) {
             // update the encoded url meta param
             const encodedMeta = this.getUrlEncoded(meta);
+
             window.history.pushState(
-                {},
+                { },
                 "",
                 `${parentReferencePath}?meta=${encodedMeta}`
             );
@@ -779,7 +791,7 @@ export default class AmfReference extends LightningElement {
             // update the encoded url meta param
             const encodedMeta = this.getUrlEncoded(meta);
             window.history.replaceState(
-                {},
+                window.history.state,
                 "",
                 `${parentReferencePath}?meta=${encodedMeta}`
             );
@@ -827,6 +839,8 @@ export default class AmfReference extends LightningElement {
      * @param event
      */
     protected onApiNavigationChanged(): void {
+        this.saveScroll();
+
         const specBasedReference = this.isSpecBasedReference(
             this._currentReferenceId
         );
@@ -853,6 +867,8 @@ export default class AmfReference extends LightningElement {
         } else {
             this.loadMarkdownBasedReference();
         }
+
+        this.restoreScroll();
     }
 
     /**
@@ -1207,7 +1223,7 @@ export default class AmfReference extends LightningElement {
                     window.location.href = redirectReferenceUrl;
                 } else {
                     // This is for CASE 1,3 and 4 mentioned above, Where we need to update the browser history
-                    window.history.replaceState({}, "", redirectReferenceUrl);
+                    window.history.replaceState(window.history.state, "", redirectReferenceUrl);
                 }
             }
         }
@@ -1317,6 +1333,7 @@ export default class AmfReference extends LightningElement {
     }
 
     handleSelectedItem(): void {
+
         // update topic view
         const { referenceId, amfId, type } = this.selectedTopic;
 
@@ -1328,6 +1345,6 @@ export default class AmfReference extends LightningElement {
             id: amfId
         };
 
-        window.scrollTo({ top: 0, behavior: "smooth" });
+        document.body.scrollTop = document.documentElement.scrollTop = 0;
     }
 }

package/src/modules/doc/contentCallout/contentCallout.css

@@ -26,6 +26,11 @@
     border-color: var(--dx-g-red-vibrant-50);
 }
 
+.dx-callout-warning {
+    background-color: var(--dx-g-red-natural-95);
+    border-color: var(--dx-g-red-vibrant-50);
+}
+
 .dx-callout-base_section {
     width: 100%;
 }

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -18,7 +18,7 @@ export default class ContentCallout extends LightningElement {
                 break;
             case "warning":
                 this.cardVariant = "doc-status-container dx-callout-warning";
-                this.iconColor = "gray-10";
+                this.iconColor = "red-vibrant-50";
                 this.iconName = "warning";
                 break;
             case "caution":

package/src/modules/doc/headingContent/headingContent.css

@@ -8,12 +8,14 @@
 
 dx-tooltip {
     line-height: var(--button-size);
+    padding-right: var(--dx-g-spacing-xs);
 }
 
 .button-container {
     height: 100%;
     margin-right: calc(var(--dx-g-spacing-xl) - 4px);
     position: relative;
+    padding-right: var(--dx-g-spacing-xs);
 }
 
 button {
@@ -34,12 +36,8 @@ dx-icon {
     --dx-c-icon-size: var(--doc-c-heading-anchor-icon-size);
 }
 
-span:last-of-type {
-    padding-right: var(--dx-g-spacing-xs);
-}
-
-.nowrap {
-    white-space: nowrap;
+.title {
+    word-break: break-word;
 }
 
 button:focus {
@@ -49,7 +47,7 @@ button:focus {
 button:focus,
 button:hover,
 span:hover dx-tooltip button,
-span:hover ~ span dx-tooltip button {
+span:hover ~ dx-tooltip button {
     opacity: 1;
     outline: none;
 }

package/src/modules/doc/headingContent/headingContent.html

@@ -1,19 +1,13 @@
 <template>
     <template if:false={hash}>{title}</template>
     <template if:true={hash}>
-        <template if:true={needsSpace}>
-            <span>{titleToWrap}</span>
-            <span>&#32;</span>
-        </template>
-        <span class="nowrap">
-            {titleNoWrap}&nbsp;
-            <dx-tooltip placement="top" label={label}>
-                <span class="button-container">
-                    <button onclick={copy} aria-label="copy">
-                        <dx-icon size="override" symbol="link"></dx-icon>
-                    </button>
-                </span>
-            </dx-tooltip>
-        </span>
+        <span class="title">{title}&nbsp;</span>
+        <dx-tooltip placement="top" label={label}>
+            <span class="button-container">
+                <button onclick={copy} aria-label="copy">
+                    <dx-icon size="override" symbol="link"></dx-icon>
+                </button>
+            </span>
+        </dx-tooltip>
     </template>
 </template>

package/src/modules/doc/headingContent/headingContent.ts

@@ -7,18 +7,6 @@ export default class HeadingContent extends LightningElement {
     label: string = "Copy link to clipboard";
     timeout: number | null = null;
 
-    private get titleToWrap(): string {
-        return this.title.substring(0, this.title.lastIndexOf(" "));
-    }
-
-    private get needsSpace(): boolean {
-        return this.titleToWrap.length > 0;
-    }
-
-    private get titleNoWrap(): string {
-        return this.title.substring(this.title.lastIndexOf(" ") + 1);
-    }
-
     private async copy() {
         if (this.timeout) {
             window.clearTimeout(this.timeout);