@salesforcedevs/docs-components 1.3.319-scroll-alpha → 1.3.320-dc1

package/lwc.config.json

@@ -7,6 +7,7 @@
     "expose": [
         "doc/amfReference",
         "doc/breadcrumbs",
+        "doc/component",
         "doc/content",
         "doc/contentCallout",
         "doc/contentLayout",
@@ -17,6 +18,7 @@
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
+        "doc/styledOrderedList",
         "doc/versionPicker",
         "doc/xmlContent",
         "docUtils/utils"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.319-scroll-alpha",
+    "version": "1.3.320-dc1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/component/component.css

@@ -0,0 +1,32 @@
+@import "dxHelpers/reset";
+
+h2 {
+    font-weight: bold;
+    font-size: 24px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.component-image {
+    padding: 48px 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--foundation-gray-neutral-95, #f3f3f3);
+    min-height: 140px;
+    max-height: 480px;
+    flex: 1;
+    margin-top: 16px;
+    margin-bottom: 16px;
+}
+
+.small {
+    font-size: 12px;
+}
+
+.item {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+}

package/src/modules/doc/component/component.html

@@ -0,0 +1,11 @@
+<template>
+    <div class="item">
+        <h2 if:true={title}>{title}</h2>
+        <p if:true={description}>{description}</p>
+        <p if:true={doDontLabel}>{doDontLabel}</p>
+        <div if:true={imageSrc} class="component-image">
+            <img src={imageSrc} />
+        </div>
+        <p if:true={note} class="small">{note}</p>
+    </div>
+</template>

package/src/modules/doc/component/component.ts

@@ -0,0 +1,22 @@
+import { LightningElement, api } from "lwc";
+
+class Component extends LightningElement {
+    @api title;
+    @api description;
+    @api imageSrc;
+    @api isDo;
+    @api note;
+
+    @api
+    get doDontLabel(): string {
+        //TODO: store a boolean value and refactor logic
+        if (this.isDo === "true") {
+            return "DO";
+        } else if (this.isDo === "false") {
+            return "DON'T";
+        }
+        return "";
+    }
+}
+
+export default Component;

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

@@ -385,7 +385,6 @@ mark {
 /* offset page jump link due to fixed header */
 [id] {
     scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-2xl)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
     );
 }

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

@@ -43,8 +43,7 @@ dx-toc {
 /* offset page jump link due to fixed header */
 ::slotted(doc-heading) {
     scroll-margin-top: calc(
-        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
-            var(--dx-g-spacing-2xl)
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height)
     );
 }
 

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

@@ -215,16 +215,10 @@ export default class ContentLayout extends LightningElement {
             ".sticky-doc-header"
         ) as HTMLElement;
 
-        let docPhaseEl = (
+        const docPhaseEl = (
             this.template.querySelector("[name=doc-phase]")! as any
         ).assignedElements()[0] as HTMLSlotElement;
 
-        if (!docPhaseEl) {
-            docPhaseEl = (
-                this.template.querySelector("[name=version-banner]")! as any
-            ).assignedElements()[0] as HTMLSlotElement;
-        }
-
         if (!sidebarEl || !globalNavEl || !contextNavEl || !docHeaderEl) {
             console.warn("One or more required elements are missing.");
             return;
@@ -237,14 +231,6 @@ export default class ContentLayout extends LightningElement {
                 (globalNavEl.getBoundingClientRect().height !== 72 ? 0 : 72) +
                 contextNavEl.getBoundingClientRect().height;
             const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
-            const totalHeaderHeight = globalNavHeight + docHeaderHeight;
-
-            // Selecting the doc section heading and RNB here.
-            const docHeadingEls = Array.from(
-                document.querySelectorAll("doc-heading")
-            );
-            const rightNavBarEl = this.template.querySelector(".right-nav-bar");
-
             sidebarEl.style.setProperty(
                 "--dx-c-content-sidebar-sticky-top",
                 `${globalNavHeight + docHeaderHeight}px`
@@ -255,27 +241,6 @@ export default class ContentLayout extends LightningElement {
                 `${globalNavHeight}px`
             );
 
-            // Adjusting the doc section heading on scroll.
-            docHeadingEls.forEach((docHeadingEl) => {
-                (docHeadingEl as any).style.scrollMarginTop = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height +
-                          40
-                      }px`
-                    : `${totalHeaderHeight + 40}px`;
-            });
-
-            // Adjusting the right nav bar on scroll.
-            if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}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(
@@ -288,6 +253,30 @@ export default class ContentLayout extends LightningElement {
                             : globalNavHeight + docHeaderHeight
                     }px`
                 );
+
+                // Adjust scroll margin for doc headings when doc phase is present
+                const docHeadingEls = Array.from(
+                    document.querySelectorAll("doc-heading")
+                );
+                docHeadingEls.forEach((docHeadingEl) => {
+                    (docHeadingEl as any).style.scrollMarginTop = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.getBoundingClientRect().height
+                    }px`;
+                });
+
+                // Adjust right nav bar position when doc phase is present
+                const rightNavBarEl =
+                    this.template.querySelector(".right-nav-bar");
+
+                if (rightNavBarEl) {
+                    rightNavBarEl.style.top = `${
+                        globalNavHeight +
+                        docHeaderHeight +
+                        docPhaseEl.getBoundingClientRect().height
+                    }px`;
+                }
             }
         });
     };

package/src/modules/doc/styledOrderedList/styledOrderedList.css

@@ -0,0 +1,33 @@
+@import "dxHelpers/reset";
+
+.list {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 2px;
+}
+
+.circle {
+    background: var(--foundation-blue-blue-40, #0b5cab);
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    color: white;
+    font-size: 10px;
+}
+
+.list-item-content {
+    color: var(--text-default, #181818);
+    font-size: 16px;
+    margin-left: 16px;
+}

package/src/modules/doc/styledOrderedList/styledOrderedList.html

@@ -0,0 +1,10 @@
+<template>
+    <div class="list">
+        <template for:each={list} for:item="item" for:index="index">
+            <div class="list-item" key={item}>
+                <div class="circle">{index}</div>
+                <p class="list-item-content">{item}</p>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/doc/styledOrderedList/styledOrderedList.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+
+class StyledOrderedList extends LightningElement {
+    private _list: Array<string> = [];
+
+    set list(value: string) {
+        if (value) {
+            this._list = JSON.parse(value);
+        }
+    }
+
+    @api
+    get list(): Array<string> {
+        return this._list;
+    }
+}
+
+export default StyledOrderedList;