@salesforcedevs/dx-components 1.19.3-layoutfix-alpha1 → 1.19.4-test

package/package.json

@@ -1,13 +1,11 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.19.3-layoutfix-alpha1",
+    "version": "1.19.4-test",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
-        "node": "20.x"
-    },
-    "publishConfig": {
-        "access": "public"
+        "node": "20.x",
+        "yarn": "1.22.19"
     },
     "dependencies": {
         "@coveo/headless": "3.22.2",
@@ -44,6 +42,7 @@
         "luxon": "3.4.4"
     },
     "volta": {
-        "node": "20.19.0"
+        "node": "20.19.0",
+        "yarn": "1.22.19"
     }
 }

package/src/modules/dx/toc/toc.css

@@ -25,12 +25,28 @@
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+.toc-content-header[show-shadow="true"] {
+    width: 132px;
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
+}
+
+.toc-content-header[show-shadow="true"] .toc_title {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.toc-items {
+    max-height: 760px;
+    overflow-y: auto;
+    padding-bottom: 80px;
+}
+
 .dx-text-display-8 {
     padding-top: var(--dx-g-spacing-sm);
     transition: var(--dx-g-transition-hue-1x);
 }
 
 .content-button {
+    display: block;
     line-height: var(--dx-g-text-lg);
     color: var(--dx-g-blue-vibrant-20);
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/toc/toc.html

@@ -1,19 +1,23 @@
 <template>
     <div class="toc" role="navigation">
         <div class="toc toc_content">
-            <h2 class="dx-text-display-8 toc_title">{header}</h2>
-            <template for:each={options} for:item="option">
-                <a
-                    href={option.anchor}
-                    class={option.className}
-                    onclick={onClick}
-                    contentid={option.id}
-                    data-text={option.label}
-                    key={option.id}
-                >
-                    {option.label}
-                </a>
-            </template>
+            <div class="toc-content-header" show-shadow={showBoxShadow}>
+                <h2 class="dx-text-display-8 toc_title">{header}</h2>
+            </div>
+            <div class="toc-items" onscroll={handleScroll}>
+                <template for:each={options} for:item="option">
+                    <a
+                        href={option.anchor}
+                        class={option.className}
+                        onclick={onClick}
+                        contentid={option.id}
+                        data-text={option.label}
+                        key={option.id}
+                    >
+                        {option.label}
+                    </a>
+                </template>
+            </div>
         </div>
     </div>
     <div>

package/src/modules/dx/toc/toc.ts

@@ -3,8 +3,13 @@ import cx from "classnames";
 import { ContentElement } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track as sendGtm } from "dxUtils/analytics";
+import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 export default class Toc extends LightningElement {
+    showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
+    handleScroll: (e: any) => void = () => {};
+
     @api header!: string;
 
     @api
@@ -38,6 +43,10 @@ export default class Toc extends LightningElement {
 
     @track _options!: Array<ContentElement>;
 
+    connectedCallback() {
+        this.handleScroll = SidebarBase.prototype.handleScroll.bind(this);
+    }
+
     private onClick(e: Event) {
         const target = e.currentTarget as HTMLElement;
         const id = target.getAttribute("contentid");