@salesforcedevs/docs-components 1.3.194-langpicker3-alpha → 1.3.194-reference-scroll1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.194-langpicker3-alpha",
+    "version": "1.3.194-reference-scroll1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.html

@@ -16,8 +16,6 @@
         toc-title={tocTitle}
         toc-options={tocOptions}
         enable-slot-change="true"
-        languages={languages}
-        language={language}
     >
         <doc-phase
             slot="doc-phase"
@@ -53,7 +51,10 @@
         <template if:true={showSpecBasedReference}>
             <div class="container">
                 <div class="api-documentation">
-                    <doc-amf-topic model={topicModel}></doc-amf-topic>
+                    <doc-amf-topic
+                        if:true={topicModel}
+                        model={topicModel}
+                    ></doc-amf-topic>
                 </div>
             </div>
         </template>

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

@@ -4,7 +4,6 @@ import { sentenceCase } from "sentence-case";
 import qs from "query-string";
 import { AmfModelParser } from "doc/amfModelParser";
 import { normalizeBoolean } from "dxUtils/normalizers";
-import type { OptionWithLink } from "typings/custom";
 import type {
     AmfConfig,
     AmfMetadataTopic,
@@ -49,8 +48,6 @@ export default class AmfReference extends LightningElement {
     @api useOldSidebar: boolean = false;
     @api tocTitle?: string;
     @api tocOptions?: string;
-    @api languages!: OptionWithLink[];
-    @api language!: string;
     @track navigation = [] as NavigationItem[];
     @track versions: Array<ReferenceVersion> = [];
     @track showVersionBanner = false;
@@ -188,10 +185,12 @@ export default class AmfReference extends LightningElement {
     constructor() {
         super();
 
-        this._boundOnApiNavigationChanged =
-            this.onApiNavigationChanged.bind(this);
-        this._boundUpdateSelectedItemFromUrlQuery =
-            this.updateSelectedItemFromUrlQuery.bind(this);
+        this._boundOnApiNavigationChanged = this.onApiNavigationChanged.bind(
+            this
+        );
+        this._boundUpdateSelectedItemFromUrlQuery = this.updateSelectedItemFromUrlQuery.bind(
+            this
+        );
     }
 
     connectedCallback(): void {
@@ -247,8 +246,9 @@ export default class AmfReference extends LightningElement {
                 const updatedReferenceId =
                     oldReferenceIdNewReferenceIdMap[referenceId];
                 const newReferenceId = updatedReferenceId || referenceId;
-                const referenceItemConfig =
-                    this.getAmfConfigWithId(newReferenceId);
+                const referenceItemConfig = this.getAmfConfigWithId(
+                    newReferenceId
+                );
                 if (referenceItemConfig) {
                     hashBasedRedirectUrl = `${referenceItemConfig.href}?meta=${encodedMeta}`;
                 }
@@ -328,8 +328,9 @@ export default class AmfReference extends LightningElement {
                 for (let i = 0; i < allVersions.length; i++) {
                     const versionItem = allVersions[i];
                     const referenceLink = versionItem.link.href;
-                    const referenceId =
-                        this.getReferenceIdFromUrl(referenceLink);
+                    const referenceId = this.getReferenceIdFromUrl(
+                        referenceLink
+                    );
                     if (this._currentReferenceId === referenceId) {
                         // This is to navigate to respective topic in the changed version
                         versionItem.link.href = `${referenceLink}/${currentRefMeta}`;
@@ -843,8 +844,9 @@ export default class AmfReference extends LightningElement {
             this._currentReferenceId
         );
         if (specBasedReference) {
-            const currentMeta: RouteMeta | undefined =
-                this.getReferenceMetaInfo(window.location.href);
+            const currentMeta:
+                | RouteMeta
+                | undefined = this.getReferenceMetaInfo(window.location.href);
             const metadata =
                 currentMeta && this.getMetadataByUrlQuery(currentMeta);
             if (metadata) {
@@ -1270,10 +1272,12 @@ export default class AmfReference extends LightningElement {
         }
         if (!isRedirecting) {
             const currentReferenceUrl = window.location.href;
-            const referenceMeta =
-                this.getMarkdownReferenceMeta(currentReferenceUrl);
-            const selectedItemRefId =
-                this.getReferenceIdFromUrl(currentReferenceUrl);
+            const referenceMeta = this.getMarkdownReferenceMeta(
+                currentReferenceUrl
+            );
+            const selectedItemRefId = this.getReferenceIdFromUrl(
+                currentReferenceUrl
+            );
             const referenceDetails = this.getRefDetailsForGivenTopicMeta(
                 selectedItemRefId,
                 referenceMeta
@@ -1320,8 +1324,9 @@ export default class AmfReference extends LightningElement {
         const name = event.detail.name;
         if (name) {
             const urlReferenceId = this.getReferenceIdFromUrl(name);
-            const specBasedReference =
-                this.isSpecBasedReference(urlReferenceId);
+            const specBasedReference = this.isSpecBasedReference(
+                urlReferenceId
+            );
             if (specBasedReference) {
                 const metaVal = this.getMetaFromUrl(name);
                 const currentSelectedMeta = this.selectedTopic
@@ -1376,8 +1381,9 @@ export default class AmfReference extends LightningElement {
             const currentReferenceId = this.getReferenceIdFromUrl(currentUrl);
             //No need to do anything if user is expanding currently selected reference
             if (referenceId !== currentReferenceId) {
-                const isSpecBasedReference =
-                    this.isSpecBasedReference(referenceId);
+                const isSpecBasedReference = this.isSpecBasedReference(
+                    referenceId
+                );
                 if (isSpecBasedReference) {
                     // Perform functionality same as item selection
                     this.onNavSelect(event);

package/src/modules/doc/amfTopic/amfTopic.css

@@ -1 +1,22 @@
 @import "docHelpers/amfStyle";
+
+:host {
+    --reference-container-margin-top: var(--dx-g-spacing-sm);
+    --api-documentation-margin-top: var(--dx-g-spacing-3xl);
+}
+
+/**
+ * 1. We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+ * 2. Consider global nav height, doc header height and content margins to scroll to the right position
+ */
+
+@media screen and (min-width: 769px) {
+    .topic-container {
+        scroll-margin-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+                var(--dx-g-doc-header-height) +
+                var(--reference-container-margin-top) +
+                var(--api-documentation-margin-top)
+        );
+    }
+}

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -10,6 +10,8 @@ import {
 import type { TopicModel } from "./types";
 import { Json } from "typings/custom";
 
+const TABLE_SIZE_MATCH = "769px";
+
 export default class AmfTopic extends LightningElement {
     private _model: TopicModel | undefined;
     private amf: Json;
@@ -85,6 +87,22 @@ export default class AmfTopic extends LightningElement {
             container.firstChild.remove();
         }
         container?.appendChild(element as Node);
+
+        this.scrollToTop(container)
+    }
+
+    scrollToTop(container: HTMLElement) {
+        const isTabletOrDesktop = window.matchMedia(
+            `(min-width: ${TABLE_SIZE_MATCH})`
+        ).matches;
+
+        // We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+        if (isTabletOrDesktop) {
+            // Sync with the browser to account for any reflows that may have happened
+            requestAnimationFrame(() => {
+                container?.scrollIntoView(true)
+            })
+        }
     }
 
     renderedCallback(): void {

package/src/modules/doc/content/content.css

@@ -106,7 +106,7 @@ h6 {
 }
 
 img {
-    image-rendering: -webkit-optimize-contrast;
+    image-rendering: optimize-contrast;
 }
 
 p,

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

@@ -61,16 +61,12 @@ dx-toc {
     flex-direction: row;
     justify-content: center;
     max-width: var(--dx-g-doc-content-max-width);
-
-    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
-    min-height: 62vh;
     margin: auto;
     padding: 0 var(--dx-g-global-header-padding-horizontal);
-    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) 0 0;
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
     max-width: 900px;
     flex: 1;
     width: 0;
@@ -110,7 +106,6 @@ dx-toc {
     .content-body-container {
         padding-right: 0;
         overflow-x: auto;
-        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }
 
     .left-nav-bar {

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

@@ -7,8 +7,6 @@
                 value={sidebarValue}
                 header={sidebarHeader}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar-old>
@@ -24,8 +22,6 @@
                 coveo-search-hub={coveoSearchHub}
                 coveo-advanced-query-config={coveoAdvancedQueryConfig}
                 ontogglesidebar={onToggleSidebar}
-                languages={languages}
-                language={language}
             >
                 <slot name="sidebar-header" slot="header"></slot>
             </dx-sidebar>
@@ -52,9 +48,6 @@
                     ></dx-toc>
                 </div>
             </div>
-            <div class="footer-container">
-                <dx-footer variant="no-signup"></dx-footer>
-            </div>
         </div>
     </div>
 </template>

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

@@ -4,7 +4,6 @@ import { closest } from "kagekiri";
 import { toJson } from "dxUtils/normalizers";
 import { highlightTerms } from "dxUtils/highlight";
 import { SearchSyncer } from "docUtils/searchSyncer";
-import type { OptionWithLink } from "typings/custom";
 
 type AnchorMap = { [key: string]: { intersect: boolean; id: string } };
 
@@ -37,8 +36,6 @@ export default class ContentLayout extends LightningElement {
     @api coveoSearchHub!: string;
     @api coveoAdvancedQueryConfig!: string;
     @api useOldSidebar?: boolean = false;
-    @api languages!: OptionWithLink[];
-    @api language!: string;
 
     @api
     get breadcrumbs() {
@@ -210,9 +207,9 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        const docPhaseEl = (
-            this.template.querySelector("[name=doc-phase]")! as any
-        ).assignedElements()[0] as HTMLSlotElement;
+        const docPhaseEl = (this.template.querySelector(
+            "[name=doc-phase]"
+        )! as any).assignedElements()[0] as HTMLSlotElement;
 
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
@@ -262,8 +259,9 @@ export default class ContentLayout extends LightningElement {
                 });
 
                 // Adjust right nav bar position when doc phase is present
-                const rightNavBarEl =
-                    this.template.querySelector(".right-nav-bar");
+                const rightNavBarEl = this.template.querySelector(
+                    ".right-nav-bar"
+                );
 
                 if (rightNavBarEl) {
                     rightNavBarEl.style.top = `${
@@ -325,17 +323,14 @@ export default class ContentLayout extends LightningElement {
     };
 
     onSlotChange(event: Event): void {
-        const slotElements = (
-            event.target as HTMLSlotElement
-        ).assignedElements();
+        const slotElements = (event.target as HTMLSlotElement).assignedElements();
 
         if (slotElements.length) {
             this.contentLoaded = true;
             const slotContentElement = slotElements[0];
-            const headingElements =
-                slotContentElement.ownerDocument?.getElementsByTagName(
-                    TOC_HEADER_TAG
-                );
+            const headingElements = slotContentElement.ownerDocument?.getElementsByTagName(
+                TOC_HEADER_TAG
+            );
 
             for (const headingElement of headingElements as any) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
@@ -395,9 +390,9 @@ export default class ContentLayout extends LightningElement {
                 globalNavEl?.offsetHeight +
                 contextNavEl?.offsetHeight;
 
-            const docPhaseEl = (
-                this.template.querySelector("[name=doc-phase]")! as any
-            ).assignedElements()[0] as HTMLSlotElement;
+            const docPhaseEl = (this.template.querySelector(
+                "[name=doc-phase]"
+            )! as any).assignedElements()[0] as HTMLSlotElement;
 
             const offset = docPhaseEl
                 ? headerHeight + docPhaseEl.offsetHeight

package/src/modules/doc/header/header.css

@@ -2,14 +2,11 @@
 
 dx-logo {
     min-width: fit-content;
-    min-width: -moz-fit-content;
 }
 
 .header_l2 {
     justify-content: space-between;
     height: var(--dx-g-doc-header-main-nav-height);
-    padding-bottom: var(--dx-g-spacing-xs);
-    background: white;
 }
 
 .nav_menu-button {
@@ -19,24 +16,16 @@ dx-logo {
     );
 }
 
-.has-brand.has-scoped-nav-items {
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-top: 1px solid var(--dx-g-gray-90);
-}
-
 .nav_menu-ctas {
     margin-right: var(--dx-g-spacing-sm);
 }
 
 header:not(.has-brand) > .header_l1 {
-    background: white;
-    border-bottom: 1px solid var(--dx-g-gray-90);
+    background: var(--dx-g-brand-current-color-background);
 }
 
 header:not(.has-brand) > .header_l2 {
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    border-top: 1px solid var(--dx-g-gray-90);
-    padding-bottom: var(--dx-g-spacing-lg);
+    background: var(--dx-g-brand-current-color-background-2);
 }
 
 .header_l2_group.header_l2_group-right-ctas {
@@ -67,10 +56,6 @@ header:not(.has-brand) > .header_l2 {
     --border-color: var(--button-primary-color-hover);
 }
 
-.has-brand .header_l2_group-title {
-    padding-bottom: calc(var(--dx-g-spacing-md) + 2px);
-}
-
 @media (max-width: 768px) {
     .header_l2 {
         padding: 0;
@@ -97,10 +82,6 @@ header:not(.has-brand) > .header_l2 {
         margin-right: var(--dx-g-spacing-sm);
     }
 
-    .has-brand .header_l2_group-title {
-        padding-bottom: var(--dx-g-spacing-smd);
-    }
-
     .header_l2_group-title {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
@@ -121,10 +102,6 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .has-scoped-nav-items .header_l2_group-title {
-        border-bottom: 1px solid var(--dx-g-gray-90);
-    }
-
-    header:not(.has-brand) > .header_l2 {
-        padding-bottom: 0;
+        border-bottom: 1px solid var(--dx-g-brand-current-color-border-2);
     }
 }

package/src/modules/doc/header/header.html

@@ -14,9 +14,9 @@
                                 if:true={isValidBrand}
                                 sprite="salesforcebrand"
                                 symbol={brand}
-                                size="large"
+                                size="xlarge"
                             ></dx-icon>
-                            <span class="subtitle dx-text-display-7">
+                            <span class="subtitle dx-text-display-6">
                                 {subtitle}
                             </span>
                         </a>

package/src/modules/doc/headingAnchor/headingAnchor.css

@@ -2,7 +2,7 @@
 
 button {
     opacity: 0;
-    color: rgb(11, 92, 171);
+    color: rgb(11 92 171);
 }
 
 button:hover {
@@ -17,7 +17,7 @@ button:focus {
 
 button:focus-visible {
     border-radius: 4px;
-    border: 2px solid rgb(11, 92, 171);
+    border: 2px solid rgb(11 92 171);
 }
 
 .icon-wrapper {

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

@@ -23,7 +23,7 @@ button {
     bottom: var(--doc-c-heading-anchor-button-bottom);
     left: 0;
     opacity: 0;
-    color: rgb(11, 92, 171);
+    color: rgb(11 92 171);
     display: flex;
     justify-content: center;
     align-items: center;

package/src/modules/doc/sprigSurvey/sprigSurvey.scoped.css

@@ -4,7 +4,7 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    margin: 20px 0 20px 0;
+    margin: 20px 0;
 }
 
 dx-hr:first-of-type::part(hr) {

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

@@ -252,11 +252,14 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private get coveoAdvancedQueryConfig(): CoveoAdvancedQueryXMLConfig {
-        const config: { locale?: string; topicid?: string; version?: string } =
-            {
-                locale: this.languageId,
-                topicid: this.deliverable
-            };
+        const config: {
+            locale?: string;
+            topicid?: string;
+            version?: string;
+        } = {
+            locale: this.languageId,
+            topicid: this.deliverable
+        };
 
         if (this.releaseVersionId && this.releaseVersionId !== "noversion") {
             config.version = this.releaseVersionId;
@@ -411,8 +414,12 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     getReferenceFromUrl(): PageReference {
-        const [page, docId, deliverable, contentDocumentId] =
-            window.location.pathname.substr(1).split("/");
+        const [
+            page,
+            docId,
+            deliverable,
+            contentDocumentId
+        ] = window.location.pathname.substr(1).split("/");
 
         const { origin: domain, hash, search } = window.location;
 
@@ -574,14 +581,20 @@ export default class DocXmlContent extends LightningElementWithState<{
     }
 
     private updateSearchInput(searchParam: string): void {
-        (
-            this.template.querySelector("doc-content-layout") as any
-        )?.setSidebarInputValue(searchParam);
+        (this.template.querySelector(
+            "doc-content-layout"
+        ) as any)?.setSidebarInputValue(searchParam);
     }
 
     private pageReferenceToString(reference: PageReference): string {
-        const { page, docId, deliverable, contentDocumentId, hash, search } =
-            reference;
+        const {
+            page,
+            docId,
+            deliverable,
+            contentDocumentId,
+            hash,
+            search
+        } = reference;
         return `/${page}/${docId}/${deliverable}/${contentDocumentId}${this.normalizeSearch(
             search!
         )}${this.normalizeHash(hash)}`;

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -166,12 +166,12 @@ api-security-documentation {
     --anypoint-button-emphasis-high-active-background-color: transparent;
 
     /* api example */
-    --api-example-accent-color: rgb(250, 250, 250);
-    --api-example-background-color: rgb(250, 250, 250);
+    --api-example-accent-color: rgb(250 250 250);
+    --api-example-background-color: rgb(250 250 250);
     --api-example-title-background-color: transparent;
 
     /* code snippets */
-    --http-code-snippet-container-background-color: rgb(250, 250, 250);
+    --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
     /* prism */
@@ -208,7 +208,7 @@ api-endpoint-documentation {
     );
 
     /* description */
-    --api-endpoint-documentation-description-color: rgb(24, 24, 24);
+    --api-endpoint-documentation-description-color: rgb(24 24 24);
 }
 
 api-endpoint-documentation,
@@ -271,11 +271,11 @@ api-method-documentation {
     --api-method-documentation-http-method-label-font-weight: var(
         --dx-g-font-bold
     );
-    --api-method-documentation-description-color: rgb(24, 24, 24);
+    --api-method-documentation-description-color: rgb(24 24 24);
     --api-method-documentation-operation-id-color: var(--dx-g-gray-50);
 
     /* body */
-    --api-body-document-description-color: rgb(24, 24, 24);
+    --api-body-document-description-color: rgb(24 24 24);
     --api-body-document-media-type-selector-color: var(--dx-g-blue-vibrant-20);
     --api-body-document-media-type-selector-font-size: var(
         --amf-h8-mod-font-size

package/src/modules/docHelpers/status/status.css

@@ -9,7 +9,7 @@
 }
 
 .doc-status-container {
-    background-color: rgb(254, 243, 217);
+    background-color: rgb(254 243 217);
     border-color: var(--dx-g-yellow-vibrant-80);
 }