@salesforcedevs/docs-components 1.3.105-image-resizing-2 → 1.3.106-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.105-image-resizing-2",
+    "version": "1.3.106-alpha.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/amfReference/amfReference.css

@@ -1,5 +1,3 @@
-@import "docHelpers/phaseContentLayout";
-
 .api-documentation {
     margin-top: 48px;
 }

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

@@ -16,9 +16,11 @@
         toc-options={tocOptions}
         enable-slot-change="true"
     >
-        <div slot="doc-phase" if:true={docPhaseInfo} class="doc-phase-wrapper">
-            <doc-phase doc-phase-info={docPhaseInfo}></doc-phase>
-        </div>
+        <doc-phase
+            slot="doc-phase"
+            if:true={docPhaseInfo}
+            doc-phase-info={docPhaseInfo}
+        ></doc-phase>
         <div slot="sidebar-header" class="version-picker">
             <template if:true={isVersionEnabled}>
                 <dx-dropdown
@@ -28,7 +30,9 @@
                     value={selectedVersion.id}
                     width="290px"
                 >
-                    <dx-button variant="inline" class="version-picker-text">{selectedVersion.id}</dx-button>
+                    <dx-button variant="inline" class="version-picker-text">
+                        {selectedVersion.id}
+                    </dx-button>
                 </dx-dropdown>
             </template>
         </div>

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

@@ -1,5 +1,14 @@
 :host {
     --dx-c-content-vertical-spacing: var(--dx-g-spacing-lg);
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+            )
+    );
 
     display: block;
 }
@@ -13,7 +22,6 @@ doc-breadcrumbs {
 
 dx-sidebar,
 dx-sidebar-old {
-    --dx-c-sidebar-height: 100%;
     --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
 
     z-index: 6;
@@ -34,6 +42,7 @@ dx-toc {
 
 .content {
     display: flex;
+    position: relative;
 }
 
 .content-body-doc-phase-container {
@@ -43,24 +52,27 @@ dx-toc {
 .content-body-container {
     display: flex;
     flex-direction: row;
-    padding-right: var(--dx-g-page-padding-horizontal);
+    justify-content: center;
+    max-width: var(--dx-g-doc-content-max-width);
+    margin: auto;
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
 }
 
 .content-body {
-    margin: var(--dx-g-spacing-sm) var(--dx-c-content-vertical-spacing)
-        var(--dx-g-spacing-xl);
+    margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
+    max-width: 900px;
     flex: 1;
     width: 0;
 }
 
 .is-sticky {
-    height: 100vh;
+    align-self: flex-start;
     position: sticky;
-    top: 0;
+    top: var(--dx-c-content-sidebar-sticky-top);
 }
 
 .right-nav-bar {
-    max-width: 275px;
+    margin-left: var(--dx-c-content-vertical-spacing);
 }
 
 @media screen and (max-width: 1024px) {
@@ -76,6 +88,10 @@ dx-toc {
 }
 
 @media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
     .content {
         flex-direction: column;
     }
@@ -85,8 +101,6 @@ dx-toc {
     }
 
     .left-nav-bar {
-        --dx-c-sidebar-height: 80vh;
-
         height: unset;
         z-index: 10;
     }

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

@@ -37,9 +37,8 @@
                         if:true={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div class="right-nav-bar is-sticky">
+                <div if:true={showToc} class="right-nav-bar is-sticky">
                     <dx-toc
-                        if:true={showToc}
                         title={tocTitle}
                         options={tocOptions}
                         value={tocValue}

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

@@ -149,6 +149,11 @@ export default class ContentLayout extends LightningElement {
             this.attachInteractionObserver,
             OBSERVER_ATTACH_WAIT_TIME
         );
+
+        this.adjustNavPosition();
+        window.addEventListener("scroll", this.adjustNavPosition);
+        window.addEventListener("resize", this.adjustNavPosition);
+
         if (!this.hasRendered) {
             this.hasRendered = true;
             this.restoreScroll();
@@ -161,6 +166,8 @@ export default class ContentLayout extends LightningElement {
             "highlightedtermchange",
             this.updateHighlighted
         );
+        window.removeEventListener("scroll", this.adjustNavPosition);
+        window.removeEventListener("resize", this.adjustNavPosition);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -178,6 +185,32 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
+    adjustNavPosition = () => {
+        const sidebarType = this.useOldSidebar
+            ? "dx-sidebar-old"
+            : "dx-sidebar";
+        const sidebarEl = this.template.querySelector(sidebarType);
+        const globalNavEl = document.querySelector(
+            "hgf-c360nav"
+        ) as HTMLElement;
+        const contextNavEl = document.querySelector(
+            "hgf-c360contextnav"
+        ) as HTMLElement;
+        const docHeaderEl = document.querySelector("doc-header") as HTMLElement;
+
+        if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
+            console.warn("One or more required elements are missing.");
+            return;
+        }
+
+        const totalOffsetHeight =
+            globalNavEl.offsetHeight +
+            contextNavEl.offsetHeight +
+            docHeaderEl.offsetHeight;
+
+        sidebarEl.style.top = `${totalOffsetHeight}px`;
+    };
+
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),

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

@@ -7,6 +7,7 @@ dx-logo {
 
 .header_l2 {
     justify-content: space-between;
+    height: var(--dx-g-doc-header-main-nav-height);
 }
 
 .nav_menu-button {
@@ -56,10 +57,11 @@ header:not(.has-brand) > .header_l2 {
     --border-color: var(--button-primary-color-hover);
 }
 
-@media (max-width: 740px) {
+@media (max-width: 768px) {
     .header_l2 {
         padding: 0;
         flex-wrap: wrap;
+        height: 100%;
     }
 
     .has-nav-items .header_l2 {
@@ -77,12 +79,14 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .header_l2_group-nav_overflow {
+        height: 48px;
         margin-right: var(--dx-g-spacing-sm);
     }
 
     .header_l2_group-title {
         margin-right: 0;
-        padding: var(--dx-g-spacing-smd) var(--dx-g-page-padding-horizontal);
+        padding: var(--dx-g-spacing-smd)
+            var(--dx-g-global-header-padding-horizontal);
     }
 
     .header_l2_group-title .header_lang-dropdown {

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

@@ -1,164 +1,94 @@
 <template>
-    <dx-brand-theme-provider brand={brand}>
-        <header class={className}>
-            <dx-skip-nav-link></dx-skip-nav-link>
-            <dx-banner
-                if:true={showBanner}
-                banner-markup={bannerMarkup}
-            ></dx-banner>
-            <div class="header_l1">
-                <div if:true={showMenuButton} class="nav_menu-ctas">
-                    <dx-button
-                        aria-label="Menu Button"
-                        class="nav_menu-button"
-                        icon-size="large"
-                        icon-symbol={mobileMenuIconSymbol}
-                        variant="tertiary"
-                        onclick={toggleMobileNavMenu}
-                    ></dx-button>
-                </div>
-                <dx-logo label={title}></dx-logo>
-                <dx-header-nav
-                    if:true={showDesktopNavItems}
-                    aria-label="Global Navigation Bar"
-                    nav-items={navItems}
-                    onrequestopennavmenu={onRequestOpenNavMenu}
-                    pathname={pathname}
-                    variant="small"
-                ></dx-header-nav>
-                <div class="header-cta-container">
-                    <dx-header-search
-                        if:true={hasSearch}
-                        coveo-organization-id={coveoOrganizationId}
-                        coveo-public-access-token={coveoPublicAccessToken}
-                        coveo-search-pipeline={coveoSearchPipeline}
-                        coveo-search-hub={coveoSearchHub}
-                        mobile={tablet}
-                        onstatechange={handleStateChange}
-                    ></dx-header-search>
-                </div>
-                <div
-                    if:true={showTbidLogin}
-                    class="header-tbid-login"
-                    onclick={closeMobileNavMenu}
-                >
-                    <dw-tbid-login-menu
-                        tbid-api-base-url={tbidApiBaseUrl}
-                        tbid-base-url={tbidBaseUrl}
-                    ></dw-tbid-login-menu>
-                </div>
-                <div if:true={showSignup} class="header-login-signup">
-                    <dx-button
-                        aria-label="Browse Trials"
-                        size="small"
-                        href={signupLink}
-                        onclick={handleSignUpClick}
-                    >
-                        Browse Trials
-                    </dx-button>
-                </div>
-                <dx-header-mobile-nav-menu
-                    if:true={hasNavItems}
-                    nav-items={navItems}
-                    open={showMobileNavMenu}
-                    pathname={pathname}
-                    value={mobileNavMenuValue}
-                    onchange={onMobileNavMenuChange}
-                    onrequestclose={closeMobileNavMenu}
-                >
-                    <dx-button
-                        aria-label={bailLabel}
-                        if:true={hasBailLink}
-                        href={bailHref}
-                        variant="tertiary"
-                        icon-symbol="new_window"
-                    >
-                        {bailLabel}
-                    </dx-button>
-                </dx-header-mobile-nav-menu>
-            </div>
-            <div class="header_l2">
-                <div class="header_l2_group header_l2_group-title">
-                    <a href={headerHref} class="home-link">
-                        <dx-icon
-                            class="brand-icon"
-                            if:true={isValidBrand}
-                            sprite="salesforcebrand"
-                            symbol={brand}
-                            size="xlarge"
-                        ></dx-icon>
-                        <span class="subtitle dx-text-display-6">
-                            {subtitle}
-                        </span>
-                    </a>
-                    <dx-dropdown
-                        if:true={showMobileLanguages}
-                        class="header_lang-dropdown"
-                        options={languages}
-                        small
-                        value={language}
-                        value-path={langValuePath}
-                        onchange={onLangChange}
-                    >
-                        <dx-button
-                            aria-label="Select Language"
-                            variant="inline"
-                            icon-size="large"
-                            icon-symbol="world"
-                        ></dx-button>
-                    </dx-dropdown>
-                </div>
-                <div
-                    if:true={hasScopedNavItems}
-                    class="header_l2_group header_l2_group-nav"
-                >
+    <template if:true={shouldRender}>
+        <dx-brand-theme-provider brand={brand}>
+            <header class={className}>
+                <dx-banner
+                    if:true={showBanner}
+                    banner-markup={bannerMarkup}
+                ></dx-banner>
+                <div class="header_l2">
+                    <div class="header_l2_group header_l2_group-title">
+                        <a href={headerHref} class="home-link">
+                            <dx-icon
+                                class="brand-icon"
+                                if:true={isValidBrand}
+                                sprite="salesforcebrand"
+                                symbol={brand}
+                                size="xlarge"
+                            ></dx-icon>
+                            <span class="subtitle dx-text-display-6">
+                                {subtitle}
+                            </span>
+                        </a>
+                        <dx-dropdown
+                            if:true={showMobileLanguages}
+                            class="header_lang-dropdown"
+                            options={languages}
+                            small
+                            value={language}
+                            value-path={langValuePath}
+                            onchange={onLangChange}
+                        >
+                            <dx-button
+                                aria-label="Select Language"
+                                variant="inline"
+                                icon-size="large"
+                                icon-symbol="world"
+                            ></dx-button>
+                        </dx-dropdown>
+                    </div>
                     <div
-                        class="header_l2_group-nav_overflow"
-                        onscroll={onNavScroll}
+                        if:true={hasScopedNavItems}
+                        class="header_l2_group header_l2_group-nav"
                     >
-                        <dx-header-nav
-                            aria-label="Scoped Navigation Bar"
-                            nav-items={scopedNavItems}
-                            pathname={pathname}
-                        ></dx-header-nav>
+                        <div
+                            class="header_l2_group-nav_overflow"
+                            onscroll={onNavScroll}
+                        >
+                            <dx-header-nav
+                                aria-label="Scoped Navigation Bar"
+                                nav-items={scopedNavItems}
+                                pathname={pathname}
+                            ></dx-header-nav>
+                        </div>
                     </div>
-                </div>
-                <div
-                    if:false={smallMobile}
-                    class="header_l2_group header_l2_group-right-ctas"
-                >
-                    <dx-dropdown
-                        if:true={hasLanguages}
-                        class="header_lang-dropdown"
-                        options={languages}
-                        small
-                        value-path={langValuePath}
-                        value={language}
-                        onchange={onLangChange}
+                    <div
+                        if:false={smallMobile}
+                        class="header_l2_group header_l2_group-right-ctas"
                     >
+                        <dx-dropdown
+                            if:true={hasLanguages}
+                            class="header_lang-dropdown"
+                            options={languages}
+                            small
+                            value-path={langValuePath}
+                            value={language}
+                            onchange={onLangChange}
+                        >
+                            <dx-button
+                                aria-label="Select Language"
+                                variant="inline"
+                                icon-size="small"
+                                icon-symbol="world"
+                            >
+                                {languageLabel}
+                            </dx-button>
+                        </dx-dropdown>
                         <dx-button
-                            aria-label="Select Language"
-                            variant="inline"
-                            icon-size="small"
-                            icon-symbol="world"
+                            if:true={hasBailLink}
+                            aria-label={bailLabel}
+                            class="header_bail-link"
+                            href={bailHref}
+                            onclick={handleBailClick}
+                            variant="tertiary"
+                            icon-symbol="new_window"
+                            target="_blank"
                         >
-                            {languageLabel}
+                            {bailLabel}
                         </dx-button>
-                    </dx-dropdown>
-                    <dx-button
-                        if:true={hasBailLink}
-                        aria-label={bailLabel}
-                        class="header_bail-link"
-                        href={bailHref}
-                        onclick={handleBailClick}
-                        variant="tertiary"
-                        icon-symbol="new_window"
-                        target="_blank"
-                    >
-                        {bailLabel}
-                    </dx-button>
+                    </div>
                 </div>
-            </div>
-        </header>
-    </dx-brand-theme-provider>
+            </header>
+        </dx-brand-theme-provider>
+    </template>
 </template>

package/src/modules/doc/header/header.ts

@@ -50,6 +50,7 @@ export default class Header extends HeaderBase {
     private smallMobileMatchMedia!: MediaQueryList;
     private tablet = false;
     private tabletMatchMedia!: MediaQueryList;
+    private shouldRender = true;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -59,20 +60,6 @@ export default class Header extends HeaderBase {
         return this.scopedNavItems && this.scopedNavItems.length > 0;
     }
 
-    private get showDesktopNavItems(): boolean {
-        return !this.mobile && this.hasNavItems;
-    }
-
-    private get showTbidLogin(): boolean {
-        return this.showSignup;
-    }
-
-    private get showSignup(): boolean {
-        return this.signupLink
-            ? (this.tablet && !this.isSearchOpen) || !this.tablet
-            : false;
-    }
-
     private get hasLanguages(): boolean {
         return !!(this.languages && this.languages.length);
     }
@@ -91,10 +78,6 @@ export default class Header extends HeaderBase {
         );
     }
 
-    private get showMenuButton(): boolean {
-        return this.mobile && this.hasNavItems;
-    }
-
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -111,6 +94,12 @@ export default class Header extends HeaderBase {
             "change",
             this.onSmallMobileChange
         );
+        if (
+            !window.location.pathname.includes("/docs/") ||
+            window.location.pathname === "/docs/apis"
+        ) {
+            this.shouldRender = false;
+        }
     }
 
     disconnectedCallback(): void {

package/src/modules/doc/phase/phase.css

@@ -2,12 +2,26 @@
 @import "dxHelpers/text";
 @import "docHelpers/status";
 
+:host {
+    --doc-c-phase-top: 0;
+
+    position: sticky;
+    top: var(--doc-c-phase-top);
+    z-index: 100;
+}
+
 .doc-phase-container {
     display: flex;
     flex-direction: column;
-    padding-left: var(--dx-g-spacing-3xl);
-    padding-right: var(--dx-g-spacing-3xl);
+    align-items: center;
+    padding-left: var(--dx-g-global-header-padding-horizontal);
+    padding-right: var(--dx-g-global-header-padding-horizontal);
     width: 100%;
+    border: none;
+}
+
+.max-width-container {
+    max-width: var(--dx-g-doc-content-max-width);
 }
 
 .doc-phase-title-container {
@@ -31,6 +45,7 @@ dx-button {
 */
 
 .doc-phase-body {
+    display: block;
     max-height: 1000px;
     overflow: hidden;
     padding-top: var(--dx-g-spacing-smd);

package/src/modules/doc/phase/phase.html

@@ -1,28 +1,30 @@
 <template>
     <div class={className} part="container">
-        <div class="doc-phase-title-container">
-            <dx-icon
-                class="doc-status-icon doc-phase-icon"
-                symbol="recipe"
-                size="large"
-                color="status-icon-color"
-            ></dx-icon>
-            <p class="doc-status-title doc-phase-title dx-text-body-3">
-                {docPhaseTitle}
-            </p>
-            <dx-button
-                variant="inline"
-                onclick={onButtonClick}
-                aria-label={hideBodyText}
-            >
-                {hideBodyText}
-            </dx-button>
-        </div>
-        <!--
+        <div class="max-width-container">
+            <div class="doc-phase-title-container">
+                <dx-icon
+                    class="doc-status-icon doc-phase-icon"
+                    symbol="recipe"
+                    size="large"
+                    color="status-icon-color"
+                ></dx-icon>
+                <p class="doc-status-title doc-phase-title dx-text-body-3">
+                    {docPhaseTitle}
+                </p>
+                <dx-button
+                    variant="inline"
+                    onclick={onButtonClick}
+                    aria-label={hideBodyText}
+                >
+                    {hideBodyText}
+                </dx-button>
+            </div>
+            <!--
             NOTE: Here we are rendering mark up using lwc:dom & innerHTML
             option instead of slots because the html markup will come as a
             property to the component from a configuration
         -->
-        <span lwc:dom="manual" class={bodyClassName}></span>
+            <span lwc:dom="manual" class={bodyClassName}></span>
+        </div>
     </div>
 </template>

package/src/modules/doc/xmlContent/xmlContent.css

@@ -3,6 +3,20 @@
     --button-primary-color-hover: var(--dx-g-blue-vibrant-40);
 }
 
+doc-content-layout {
+    --dx-c-content-sidebar-sticky-top: calc(
+        var(--dx-g-global-header-height) +
+            var(--dx-g-doc-header-main-nav-height)
+    );
+    --dx-c-sidebar-height: calc(
+        100vh -
+            calc(
+                var(--dx-g-global-header-height) +
+                    var(--dx-g-doc-header-main-nav-height)
+            )
+    );
+}
+
 doc-breadcrumbs {
     --dx-c-popover-z-index: 5;
 

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

@@ -464,11 +464,7 @@ export default class DocXmlContent extends LightningElementWithState<{
             this.addMetatags();
 
             if (!this.pageReference.hash) {
-                document.querySelector("main")?.scrollIntoView({
-                    behavior: "smooth",
-                    block: "start",
-                    inline: "nearest"
-                });
+                document.body.scrollIntoView();
             }
         }
         this.setState({

package/src/modules/docHelpers/phaseContentLayout/phaseContentLayout.css

@@ -1,39 +0,0 @@
-doc-phase::part(container) {
-    margin-bottom: var(--dx-g-spacing-sm);
-    padding-left: var(--dx-g-spacing-mlg);
-    padding-right: var(--dx-g-spacing-lg);
-    width: auto;
-}
-
-.doc-phase-wrapper {
-    position: sticky;
-    top: 0;
-    z-index: 4;
-}
-
-@media screen and (max-width: 800px) {
-    doc-phase::part(container) {
-        margin-bottom: 0;
-    }
-}
-
-@media screen and (min-width: 1024px) and (max-width: 1496px) {
-    doc-phase::part(container) {
-        padding-right: var(--dx-g-spacing-3xl);
-    }
-}
-
-@media screen and (min-width: 1496px) {
-    doc-phase::part(container) {
-        margin-right: calc(
-            var(--dx-g-page-padding-horizontal) - var(--dx-g-spacing-lg)
-        );
-    }
-}
-
-@media screen and (max-width: 768px) {
-    /* We are giving top value because there is one more sticky item(lnb) with height 40px */
-    .doc-phase-wrapper {
-        top: 40px;
-    }
-}