@salesforcedevs/docs-components 1.3.96-alpha.2 → 1.3.97-topic

package/lwc.config.json

@@ -15,6 +15,7 @@
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
+        "doc/overview",
         "doc/phase",
         "doc/xmlContent"
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.96-alpha.2",
+    "version": "1.3.97-topic",
     "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/amfReference/amfReference.ts

@@ -120,7 +120,6 @@ export default class AmfReference extends LightningElement {
 
     set docPhaseInfo(value: string) {
         if (value) {
-            this.isParentLevelDocPhaseEnabled = true;
             this.selectedReferenceDocPhase = value;
         }
     }
@@ -151,7 +150,6 @@ export default class AmfReference extends LightningElement {
 
     private hasRendered = false;
 
-    private isParentLevelDocPhaseEnabled = false;
     private selectedReferenceDocPhase?: string | null = null;
     private _expandChildren?: boolean = false;
 
@@ -889,28 +887,6 @@ export default class AmfReference extends LightningElement {
         );
 
         this.handleSelectedItem();
-
-        this.updateDocPhase();
-    }
-
-    /**
-     * Updates doc phase of selected reference
-     */
-    updateDocPhase(): void {
-        /* If parent level doc phase is enabled, Individual reference level doc phase should not be considered */
-
-        if (!this.isParentLevelDocPhaseEnabled) {
-            const selectedReference = this._amfConfigList.find(
-                (referenceItem: AmfConfig) => {
-                    return referenceItem.id === this._currentReferenceId;
-                }
-            );
-            if (selectedReference) {
-                this.selectedReferenceDocPhase = JSON.stringify(
-                    selectedReference.docPhase
-                );
-            }
-        }
     }
 
     /**
@@ -1241,7 +1217,6 @@ export default class AmfReference extends LightningElement {
             }
 
             this.versions = this.getVersions();
-            this.updateDocPhase();
             this.selectedSidebarValue = window.location.pathname;
         }
     }

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

@@ -7,6 +7,7 @@
 @import "dxHelpers/text";
 @import "dxHelpers/reset";
 @import "dxHelpers/table";
+@import "docHelpers/imgStyle";
 
 .doc-content {
     width: 100%;
@@ -40,17 +41,10 @@
     padding-bottom: var(--dx-g-spacing-sm);
 }
 
-img.content-image {
-    height: auto;
-    display: unset;
-}
-
 .image-block .content-image {
     margin-top: var(--dx-g-spacing-lg);
     margin-bottom: var(--dx-g-spacing-sm);
     display: block;
-    margin-left: auto;
-    margin-right: auto;
 }
 
 td > img.content-image:first-child:last-child[alt="Yes"],
@@ -111,6 +105,10 @@ h6 {
     margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-sm) 0;
 }
 
+img {
+    image-rendering: -webkit-optimize-contrast;
+}
+
 p,
 .p {
     font-family: var(--dx-g-font-sans);
@@ -366,13 +364,30 @@ ul ul ul ul ul ul {
     margin: var(--dx-g-spacing-lg) 0;
 }
 
-figure {
+figure,
+.fig {
     margin: var(--dx-g-spacing-lg) 0;
+    text-align: left;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    justify-content: left;
 }
 
-figcaption {
+figcaption,
+.figcap {
+    display: block;
     font-size: var(--dx-g-text-xs);
-    margin-top: var(--dx-g-spacing-sm);
+    margin: var(--dx-g-spacing-sm) 0;
+    order: 2;
+}
+
+.figcap .image {
+    order: 1;
+}
+
+.fig.fig-centered {
+    text-align: center;
 }
 
 code,

package/src/modules/doc/content/content.ts

@@ -253,6 +253,7 @@ export default class Content extends LightningElement {
                 const label = mediaEl.getAttribute("label");
                 const width = mediaEl.getAttribute("width");
                 const height = mediaEl.getAttribute("height");
+                const className = mediaEl.getAttribute("class");
 
                 if (isImage) {
                     src = src.startsWith("/")
@@ -277,8 +278,11 @@ export default class Content extends LightningElement {
                     if (width) {
                         img.width = parseFloat(width);
                     }
+                    if (className) {
+                        img.className = className;
+                    }
 
-                    img.className = "content-image";
+                    img.className = `content-image ${img.className}`;
                     mediaEl.parentNode!.insertBefore(img, mediaEl);
                 } else {
                     const contentMediaEl = createElement("doc-content-media", {
@@ -324,9 +328,8 @@ export default class Content extends LightningElement {
         event.preventDefault();
         // eslint-disable-next-line no-use-before-define
         const target = event.currentTarget.dataset.id;
-        const [page, docId, deliverable, tempContentDocumentId] = target.split(
-            "/"
-        );
+        const [page, docId, deliverable, tempContentDocumentId] =
+            target.split("/");
         const [contentDocumentId, hash] = tempContentDocumentId.split("#");
         const newPageReference = {
             page: page,

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: 135px;
+    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

@@ -77,6 +77,7 @@ export default class ContentLayout extends LightningElement {
     @track
     private _tocOptions: Array<unknown>;
 
+    private tocOptionIdsSet = new Set();
     private anchoredElements: AnchorMap = {};
     private lastScrollPosition: number;
     private observer?: IntersectionObserver;
@@ -220,14 +221,17 @@ 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) {
                 // Sometimes elements hash is not being set when slot content is wrapped with div
@@ -239,13 +243,20 @@ export default class ContentLayout extends LightningElement {
             for (const headingElement of headingElements) {
                 headingElement.id = headingElement.hash;
 
-                // Update tocOptions from anchorTags
-                const tocItem = {
-                    anchor: `#${headingElement.hash}`,
-                    id: headingElement.id,
-                    label: headingElement.title
-                };
-                tocOptions.push(tocItem);
+                // Update tocOptions from anchorTags only for H2, consider default as 2 as per component
+                const headingAriaLevel =
+                    headingElement.attributes["aria-level"]?.nodeValue || "2";
+                const isH2 = headingAriaLevel === "2";
+
+                if (isH2) {
+                    const tocItem = {
+                        anchor: `#${headingElement.hash}`,
+                        id: headingElement.id,
+                        label: headingElement.title
+                    };
+                    tocOptions.push(tocItem);
+                    this.tocOptionIdsSet.add(headingElement.id);
+                }
             }
 
             this._tocOptions = tocOptions;
@@ -296,7 +307,10 @@ export default class ContentLayout extends LightningElement {
     }
 
     private assignElementId(id: string): void {
-        this.tocValue = id;
+        // Change toc(RNB) highlight only for H2
+        if (this.tocOptionIdsSet.has(id)) {
+            this.tocValue = id;
+        }
     }
 
     private dispatchHighlightChange(term: string): void {

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,15 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .header_l2_group-nav_overflow {
+        height: 48px;
         margin-right: var(--dx-g-spacing-sm);
     }
 
     .header_l2_group-title {
+        height: var(--dx-g-doc-header-main-nav-height);
         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,93 +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_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 = false;
 
     protected mobileBreakpoint(): string {
         return MOBILE_MATCH;
@@ -93,6 +94,14 @@ export default class Header extends HeaderBase {
             "change",
             this.onSmallMobileChange
         );
+        if (
+            (window.location.pathname.includes("/docs/") &&
+                window.location.pathname !== "/docs/apis") ||
+            window.location.pathname ===
+                "/tableau/embedding-playground/overview"
+        ) {
+            this.shouldRender = true;
+        }
     }
 
     disconnectedCallback(): void {

package/src/modules/doc/overview/overview.css

@@ -0,0 +1,40 @@
+doc-phase {
+    --doc-c-phase-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
+    );
+}
+
+dx-section {
+    --dx-c-section-padding-top: 0;
+    --dx-c-section-padding-bottom: var(--dx-g-spacing-2xl);
+}
+
+dx-section::part(content) {
+    max-width: 1280px;
+    margin: auto;
+}
+
+dx-group-text:first-of-type {
+    margin-top: var(--dx-g-spacing-2xl);
+}
+
+dx-group-text.features {
+    margin-top: var(--dx-g-spacing-xl);
+    margin-bottom: var(--dx-g-spacing-xl);
+}
+
+.content {
+    padding-right: var(--dx-g-spacing-xl);
+}
+
+@media (max-width: 1024px) {
+    .content {
+        padding-right: 0;
+    }
+}
+
+@media (max-width: 800px) {
+    dx-group-text.description {
+        margin-top: var(--dx-g-spacing-lg);
+    }
+}

package/src/modules/doc/overview/overview.html

@@ -0,0 +1,34 @@
+<template>
+    <div class="container">
+        <doc-phase
+            if:true={docPhaseInfo}
+            doc-phase-info={docPhaseInfo}
+        ></doc-phase>
+
+        <dx-section>
+            <dx-grid columns="two-slim-right">
+                <div class="content">
+                    <dx-group-text
+                        class="description"
+                        title={title}
+                        body={description}
+                        size="large"
+                        title-aria-level="1"
+                        primary-link={primaryLink}
+                        secondary-link={secondaryLink}
+                    ></dx-group-text>
+                </div>
+                <div>
+                    <dx-group-text
+                        title={featuresListTitle}
+                        size="medium"
+                        class="features"
+                    ></dx-group-text>
+                    <dx-features-list
+                        options={featuresListOptions}
+                    ></dx-features-list>
+                </div>
+            </dx-grid>
+        </dx-section>
+    </div>
+</template>

package/src/modules/doc/overview/overview.ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { DocPhaseInfo, FeatureItem, Link } from "typings/custom";
+
+export default class Overview extends LightningElement {
+    @api docPhaseInfo!: DocPhaseInfo;
+    @api title!: string;
+    @api description!: string;
+    @api primaryLink!: Link;
+    @api secondaryLink!: Link;
+    @api featuresListTitle!: string;
+    @api featuresListOptions!: FeatureItem[];
+}

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/imgStyle/imgStyle.css

@@ -0,0 +1,63 @@
+img.content-image {
+    height: auto;
+    display: unset;
+}
+
+.content-image.image-framed {
+    border: 1px solid black;
+}
+
+.content-image.image-framed-light {
+    border: 1px solid var(--dx-g-gray-90);
+}
+
+.content-image.image-xxl,
+.content-image.image-full {
+    max-width: 1000px;
+    width: 100%;
+}
+
+.content-image.image-xl {
+    max-width: 750px;
+    width: 100%;
+}
+
+.content-image.image-lg {
+    max-width: 660px;
+    width: 100%;
+}
+
+.content-image.image-md {
+    max-width: 500px;
+    width: 100%;
+}
+
+.content-image.image-sm {
+    max-width: 330px;
+    width: 100%;
+}
+
+.content-image.image-xs {
+    max-width: 250px;
+    width: 100%;
+}
+
+.content-image.image-xxs {
+    max-width: 125px;
+    width: 100%;
+}
+
+.content-image.image-icon-lg {
+    max-width: 32px;
+    width: 100%;
+}
+
+.content-image.image-icon-md {
+    max-width: 20px;
+    width: 100%;
+}
+
+.content-image.image-icon-sm {
+    max-width: 16px;
+    width: 100%;
+}

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;
-    }
-}