@salesforcedevs/docs-components 1.3.106-alpha.3 → 1.3.106-alpha02

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.106-alpha.3",
+    "version": "1.3.106-alpha02",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -149,11 +149,6 @@ 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();
@@ -166,8 +161,6 @@ export default class ContentLayout extends LightningElement {
             "highlightedtermchange",
             this.updateHighlighted
         );
-        window.removeEventListener("scroll", this.adjustNavPosition);
-        window.removeEventListener("resize", this.adjustNavPosition);
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 
@@ -185,59 +178,6 @@ export default class ContentLayout extends LightningElement {
         }
     };
 
-    /* 
-        This is a workaround for the global nav sticky header being decoupled from the doc header & doc phase.
-        We have to account for the global nav changing height due to animations.
-    */
-    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(
-            ".sticky-doc-header"
-        ) as HTMLElement;
-        const docPhaseEl = document.querySelector("doc-phase") as HTMLElement;
-
-        if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
-            console.warn("One or more required elements are missing.");
-            return;
-        }
-
-        const globalNavHeight =
-            globalNavEl.offsetHeight + contextNavEl.offsetHeight;
-        const docHeaderHeight = docHeaderEl.offsetHeight;
-
-        sidebarEl.style.setProperty(
-            "--dx-c-content-sidebar-sticky-top",
-            `${globalNavHeight + docHeaderHeight}px`
-        );
-        docHeaderEl.style.setProperty(
-            "--dx-g-global-header-height",
-            `${globalNavHeight}px`
-        );
-
-        // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
-        if (docPhaseEl) {
-            docPhaseEl.style.setProperty(
-                "--doc-c-phase-top",
-                `${
-                    window.innerWidth <= 769
-                        ? globalNavHeight +
-                          docHeaderHeight +
-                          sidebarEl.offsetHeight
-                        : globalNavHeight + docHeaderHeight
-                }px`
-            );
-        }
-    };
-
     updateHighlighted = (event: Event): void =>
         highlightTerms(
             this.querySelectorAll(HIGHLIGHTABLE_SELECTOR),

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

@@ -84,6 +84,7 @@ header:not(.has-brand) > .header_l2 {
     }
 
     .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-global-header-padding-horizontal);

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[];
+}