@salesforcedevs/docs-components 0.54.0-alpha04 → 0.54.1-a01

package/src/modules/doc/amfReference/constants.ts

@@ -0,0 +1,76 @@
+const NAVIGATION_ITEMS = [
+    {
+        label: "Summary",
+        name: "summary",
+        childrenPropertyName: undefined,
+        type: "summary"
+    },
+    {
+        label: "Endpoints",
+        name: "endpoints",
+        childrenPropertyName: "endpoints",
+        type: "endpoint"
+    },
+    {
+        label: "Documentation",
+        name: "documentation",
+        childrenPropertyName: "docs",
+        type: "documentation"
+    },
+    {
+        label: "Types",
+        name: "types",
+        childrenPropertyName: "types",
+        type: "type"
+    },
+    {
+        label: "Security",
+        name: "security",
+        childrenPropertyName: "security",
+        type: "security"
+    }
+];
+
+const URL_CONFIG = {
+    summary: {
+        urlIdentifer: "label"
+    },
+    endpoint: {
+        urlIdentifer: "path"
+    },
+    method: {
+        urlIdentifer: "label"
+    },
+    documentation: {
+        urlIdentifer: "label"
+    },
+    type: {
+        urlIdentifer: "label",
+        prefix: "type:"
+    },
+    security: {
+        urlIdentifer: "label",
+        prefix: "security:"
+    }
+};
+
+export const REFERENCE_TYPES = {
+    markdown: "markdown",
+    raml: "rest-raml",
+    oa2: "rest-oa2",
+    oa3: "rest-oa3"
+};
+
+const oldReferenceIdNewReferenceIdMap: Record<string, string> = {
+    "commerce-api-assignments": "assignments",
+    "commerce-api-campaigns": "campaigns",
+    "commerce-api-catalogs": "catalogs",
+    "cdn-zones": "cdn-api-process-apis",
+    "inventory-impex": "impex",
+    "inventory-reservations": "inventory-reservation-service",
+    "shopper-login-and-api-access-service": "shopper-login",
+    "shopper-login-and-api-access-service-admin": "slas-admin",
+    "einstein-recommendations": "einstein-api-quick-start-guide"
+};
+
+export { NAVIGATION_ITEMS, URL_CONFIG, oldReferenceIdNewReferenceIdMap };

package/src/modules/doc/amfReference/types.ts

@@ -1,7 +1,8 @@
-import { Json } from "@lwrjs/types";
+import { Json } from "typings/custom";
 
 export interface AmfTopicType {
     referenceId: string;
+    parentReferencePath: string;
     amfId: string;
     elementId: string;
     type: string;
@@ -10,6 +11,7 @@ export interface AmfTopicType {
 export interface AmfMetadataTopic extends AmfTopicType {
     meta: string;
     identifier: string;
+    navTitle?: string;
 }
 
 export interface AmfMetaTopicType extends AmfTopicType {
@@ -20,7 +22,12 @@ export interface NavItem {
     name: string;
     label: string;
     // TODO: Better type here
-    children?: ({ id: string; label?: string; method: string; domId: string } & {
+    children?: ({
+        id: string;
+        label?: string;
+        method: string;
+        domId: string;
+    } & {
         name: string;
         label: string;
     })[];
@@ -48,11 +55,37 @@ export type DocPhaseEntry = {
     body: string;
 };
 
-export interface AmfConfig extends AmfModelRecord {
+export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
+
+/**
+ * Represents parsed topic for the sidebar.
+ */
+export interface ParsedMarkdownTopic {
+    label: string;
+    name: string;
+    children: ParsedMarkdownTopic[];
+    link?: {
+        href: string;
+        target?: string;
+    };
+}
+
+export interface AmfConfig {
     id: string;
-    amf: string;
     version?: string;
     docPhase?: DocPhaseEntry;
+    title: string;
+    href: string;
+    referenceType: ReferenceType;
+
+    // determines if a reference config is the current active and selected one.
+    isSelected: boolean;
+
+    // required for spec based references
+    amf?: string;
+
+    // required for markdown based references
+    topic?: ParsedMarkdownTopic;
 }
 
 export interface ParsedTopicModel {
@@ -79,10 +112,22 @@ export interface ReferenceVersion {
     label: string;
     deprecated?: boolean;
     selected?: boolean;
+    link: {
+        href: string;
+    };
 }
 
 export interface ReferenceSetConfig {
+    refId?: string;
     versionToRefMap?: Map<string, Array<AmfConfig>>;
     refList: Array<AmfConfig>;
-    versions?: Array<ReferenceVersion>;
+    versions: Array<ReferenceVersion>;
+}
+
+export interface RouteMeta {
+    meta: string;
+    referenceId: string;
+    topicId: string;
+    //type is only for spec based references
+    type?: string;
 }

package/src/modules/doc/amfTopic/types.ts

@@ -1,4 +1,4 @@
-import { Json } from "@lwrjs/types";
+import { Json } from "typings/custom";
 
 export type ApiSummaryElement = HTMLElement & {
     amf: Json;

package/src/modules/doc/amfTopic/utils.ts

@@ -6,8 +6,7 @@ import type {
     ApiSummaryElement,
     ApiTypeElement
 } from "./types";
-
-import { Json } from "@lwrjs/types";
+import { Json } from "typings/custom";
 
 export function createSummaryElement(amf: Json): HTMLElement {
     const summaryElement: ApiSummaryElement = document.createElement(
@@ -78,7 +77,10 @@ export function createMethodElement(
  * Creates a documentation element for Security AMF type
  *
  */
-export function createSecurityElement(amf: Json, securityModel: Json): HTMLElement {
+export function createSecurityElement(
+    amf: Json,
+    securityModel: Json
+): HTMLElement {
     const el: ApiSecurityElement = document.createElement(
         "api-security-documentation"
     ) as ApiSecurityElement;
@@ -94,8 +96,14 @@ export function createSecurityElement(amf: Json, securityModel: Json): HTMLEleme
  * @param {string} amfId Reference ID as passed in from amfConfig
  * @param {string} selected Currently selected `@id`.
  */
-export function createTypeElement(amf: Json, typeModel: Json, mediaTypes: Json): HTMLElement {
-    const el: ApiTypeElement = document.createElement("api-type-documentation") as ApiTypeElement;
+export function createTypeElement(
+    amf: Json,
+    typeModel: Json,
+    mediaTypes: Json
+): HTMLElement {
+    const el: ApiTypeElement = document.createElement(
+        "api-type-documentation"
+    ) as ApiTypeElement;
     el.setAttribute("exportparts", ["type-title"].join(","));
     el.amf = amf;
     el.type = typeModel;
@@ -109,8 +117,13 @@ export function createTypeElement(amf: Json, typeModel: Json, mediaTypes: Json):
  * @param {string} amfId Reference ID as passed in from amfConfig
  * @param {string} selected Currently selected `@id`.
  */
-export function createDocumentationElement(amf: Json, docsModel: Json): HTMLElement {
-    const el: ApiDocElement = document.createElement("api-documentation-document") as ApiDocElement;
+export function createDocumentationElement(
+    amf: Json,
+    docsModel: Json
+): HTMLElement {
+    const el: ApiDocElement = document.createElement(
+        "api-documentation-document"
+    ) as ApiDocElement;
     el.amf = amf;
     el.shape = docsModel;
     return el;

package/src/modules/doc/breadcrumbItem/breadcrumbItem.css

@@ -4,12 +4,13 @@
 :host {
     display: flex;
     align-items: center;
+    justify-content: center;
     width: fit-content;
 }
 
 :host(.breadcrumb_long) {
     /* ensure 30 character min-width */
-    min-width: 245px;
+    min-width: 200px;
 }
 
 :host(.breadcrumb_back-arrow) {

package/src/modules/doc/breadcrumbItem/breadcrumbItem.html

@@ -1,5 +1,5 @@
 <template>
     <dx-icon if:true={isBackArrowVariant} symbol="back"></dx-icon>
-    <a if:true={href} href={href}>{label}</a>
+    <a if:true={href} href={href} onclick={onLinkClick}>{label}</a>
     <span if:false={href}>{label}</span>
 </template>

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -1,5 +1,6 @@
+import { track } from "dxUtils/analytics";
 import { LightningElement, api } from "lwc";
-import { BreadcrumbItemVariant } from "typings/custom";
+import { AnalyticsPayload, BreadcrumbItemVariant } from "typings/custom";
 
 const BREADCRUMB_LONG = "breadcrumb_long";
 const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
@@ -7,6 +8,8 @@ const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
 const LONG_LABEL_NUMBER = 30;
 export default class BreadcrumbItem extends LightningElement {
     @api href?: string;
+    @api analyticsEvent!: string;
+    @api analyticsBasePayload!: AnalyticsPayload;
 
     @api
     get label() {
@@ -46,4 +49,17 @@ export default class BreadcrumbItem extends LightningElement {
     private get isBackArrowVariant(): boolean {
         return this._variant === "back-arrow";
     }
+
+    private onLinkClick(event: Event): void {
+        if (!this.analyticsEvent) {
+            return;
+        }
+
+        track(event.target!, this.analyticsEvent, {
+            ...this.analyticsBasePayload,
+            clickText: this.label,
+            itemTitle: this.label,
+            pageLocation: window.location.pathname
+        });
+    }
 }

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -4,12 +4,13 @@
 :host {
     --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
     --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
+
+    font-family: var(--dx-g-font-sans);
 }
 
 nav {
     display: flex;
     align-items: center;
-    height: 100%;
     position: relative;
     gap: var(--dx-g-spacing-sm);
 }
@@ -17,3 +18,10 @@ nav {
 .breadcrumb-item_slash {
     min-width: fit-content;
 }
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-label-color: var(
+        --dx-c-breadcrumbs-breadcrumb-color
+    );
+}

package/src/modules/doc/breadcrumbs/breadcrumbs.html

@@ -3,6 +3,8 @@
         <template if:false={renderSmallVariant}>
             <template if:true={renderFirstCrumb}>
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={firstCrumb.href}
                     label={firstCrumb.label}
                 ></doc-breadcrumb-item>
@@ -11,10 +13,14 @@
             <template if:true={renderDropdown}>
                 <dx-dropdown
                     if:true={renderDropdown}
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     options={dropdownOptions}
                     open-on-hover
                     placement="bottom"
-                    width="200px"
+                    suppress-gtm-nav-headings
+                    variant="indented"
+                    width="fit-content"
                 >
                     <dx-button
                         aria-label="Open Breadcrumbs Dropdown"
@@ -27,8 +33,10 @@
             </template>
             <template for:each={breadcrumbItems} for:item="breadcrumb">
                 <doc-breadcrumb-item
+                    analytics-event={analyticsEventName}
+                    analytics-base-payload={analyticsBasePayload}
                     href={breadcrumb.href}
-                    key={breadcrumb.label}
+                    key={breadcrumb.id}
                     label={breadcrumb.label}
                 ></doc-breadcrumb-item>
                 <span class="breadcrumb-item_slash" key={breadcrumb.label}>
@@ -39,6 +47,8 @@
         </template>
         <template if:true={renderSmallVariant}>
             <doc-breadcrumb-item
+                analytics-event={analyticsEventName}
+                analytics-base-payload={analyticsBasePayload}
                 href={lastLinkCrump.href}
                 label={lastLinkCrump.label}
                 variant="back-arrow"

package/src/modules/doc/breadcrumbs/breadcrumbs.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { Breadcrumb, Option } from "typings/custom";
+import { Breadcrumb, OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
 type BreadcrumbConfig = {
@@ -8,13 +8,23 @@ type BreadcrumbConfig = {
 };
 
 const GAP = 8;
+
+// Unit in pixels based on Salesforce Sans font-family.
 const CONSTANTS = {
-    pixelPerCharacter: 7.2,
-    pixelPerCrumbSpace: GAP * 2 + 4.6,
-    minWidthPerCrumb: 245,
+    pixelPerCharacter: 7.7,
+    pixelPerCrumbSpace: GAP * 2 + 8.6,
+    minWidthPerCrumb: 200,
     dropdownWidth: 32
 };
 
+export const ANALYTICS_EVENT_NAME = "custEv_breadcrumbClick";
+export const ANALYTICS_BASE_PAYLOAD = {
+    elementType: "breadcrumb",
+    locationOnPage: "breadcrumb",
+    ctaClick: true,
+    pageLocation: window.location.pathname
+};
+
 export default class Breadcrumbs extends LightningElement {
     @api ariaLabel: string = "Documentation Breadcrumbs";
 
@@ -22,15 +32,26 @@ export default class Breadcrumbs extends LightningElement {
     get breadcrumbs(): Breadcrumb[] {
         return this._breadcrumbs;
     }
+
     set breadcrumbs(value) {
-        this._breadcrumbs = toJson(value) || [];
+        this.normalizeAndAssignBreadcrumbs(value);
         this.calculateBreadcrumbsConfigs();
         if (this.observer) {
             this.updateDropdownOptionAmount();
         }
     }
 
+    @api
+    get pixelPerCharacter(): number {
+        return this._pixelPerCharacter;
+    }
+
+    set pixelPerCharacter(value: number | string) {
+        this._pixelPerCharacter = +value;
+    }
+
     private _breadcrumbs: Breadcrumb[] = [];
+    private _pixelPerCharacter = CONSTANTS.pixelPerCharacter;
     private navWidth = 0;
     private observer: ResizeObserver | null = null;
     private breadcrumbConfigs: BreadcrumbConfig[] = [];
@@ -62,10 +83,10 @@ export default class Breadcrumbs extends LightningElement {
     private get renderDropdown(): boolean {
         return this.hasInternalBreadcrumbs && !!this.dropdownOptionAmount;
     }
-    private get dropdownOptions(): Option[] {
+    private get dropdownOptions(): OptionWithLink[] {
         return this.breadcrumbs!.slice(1, this.dropdownOptionAmount! + 1).map(
             (link) => ({
-                id: link.href!,
+                id: link.id!,
                 label: link.label,
                 link: { href: link.href! }
             })
@@ -84,6 +105,14 @@ export default class Breadcrumbs extends LightningElement {
         return this.breadcrumbs[this.breadcrumbs.length - 1];
     }
 
+    private get analyticsEventName() {
+        return ANALYTICS_EVENT_NAME;
+    }
+
+    private get analyticsBasePayload() {
+        return ANALYTICS_BASE_PAYLOAD;
+    }
+
     renderedCallback(): void {
         if (!this.observer) {
             this.observer = new ResizeObserver((entries) => {
@@ -103,6 +132,17 @@ export default class Breadcrumbs extends LightningElement {
         this.observer?.disconnect();
     }
 
+    private normalizeAndAssignBreadcrumbs(breadcrumbs?: Breadcrumb[] | string) {
+        if (!breadcrumbs) {
+            return;
+        }
+
+        this._breadcrumbs = toJson(breadcrumbs).map((crumb: Breadcrumb) => ({
+            ...crumb,
+            id: crumb.id || crumb.href
+        }));
+    }
+
     private updateDropdownOptionAmount(): void {
         this.dropdownOptionAmount = this.breadcrumbConfigs.find(
             ({ minWidth }) => minWidth <= this.navWidth
@@ -135,7 +175,8 @@ export default class Breadcrumbs extends LightningElement {
             (previousValue, element) =>
                 previousValue +
                 Math.min(
-                    element.label.length * CONSTANTS.pixelPerCharacter,
+                    element.label.length *
+                        (this.pixelPerCharacter || CONSTANTS.pixelPerCharacter),
                     CONSTANTS.minWidthPerCrumb
                 ),
             (breadcrumbs.length - 1) * CONSTANTS.pixelPerCrumbSpace + offset

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

@@ -66,31 +66,47 @@ td > img.content-image:first-child:last-child[alt="No"] {
 
 h1 {
     font-family: var(--dx-g-font-display);
-    font-size: 40px;
+    font-size: var(--dx-g-text-4xl);
 
     /* not registered */
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.4px;
-    line-height: 40px;
+    line-height: 56px;
 }
 
 h2 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-xl);
+    font-size: var(--dx-g-text-3xl);
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+    line-height: var(--dx-g-spacing-3xl);
 }
 
 h3 {
     font-family: var(--dx-g-font-display);
-    font-size: var(--dx-g-text-lg);
+    font-size: 32px;
     color: var(--dx-g-blue-vibrant-20);
     letter-spacing: -0.1px;
-    line-height: var(--dx-g-spacing-lg);
+    line-height: var(--dx-g-spacing-2xl);
 }
 
 h4 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-xl);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: var(--dx-g-spacing-xl);
+}
+
+h5 {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 28px;
+}
+
+h6 {
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-base);
     color: var(--dx-g-blue-vibrant-20);
@@ -116,6 +132,12 @@ p,
     margin-bottom: var(--dx-g-spacing-md);
 }
 
+dd > p,
+dd > .p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
 .li {
     font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-base);
@@ -175,7 +197,8 @@ a,
     margin-right: var(--dx-g-spacing-lg);
 }
 
-.codeph {
+.codeph,
+.filepath {
     font-family: var(--dx-g-font-mono);
     font-size: var(--dx-g-text-sm);
     line-height: var(--dx-g-text-lg);
@@ -239,6 +262,7 @@ dd {
     letter-spacing: 0;
     line-height: var(--dx-g-spacing-lg);
     margin-left: var(--dx-g-spacing-smd);
+    margin-bottom: var(--dx-g-spacing-md);
 }
 
 li {

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

@@ -150,11 +150,26 @@ export default class Content extends LightningElement {
                     is: ContentCallout
                 });
                 const detailEls = calloutEl.querySelectorAll(
-                    "p, div.data, ol, ul, .codeSection, .mediaBd > span.ph"
+                    "p, div.data, ol, ul, p+.codeSection, .mediaBd > span.ph"
                 );
                 detailEls.forEach((detailEl) => {
-                    calloutCompEl.appendChild(detailEl);
+                    if (detailEl.innerHTML.trim() !== "") {
+                        calloutCompEl.appendChild(detailEl);
+                    }
                 });
+
+                let flag = 1;
+                for (let i = 0; i < detailEls.length; i++) {
+                    flag &= detailEls[i].innerHTML.trim() === "";
+                }
+
+                if (flag) {
+                    const codeEls = calloutEl.querySelectorAll(".codeSection");
+                    codeEls.forEach((codeEl) => {
+                        calloutCompEl.appendChild(codeEl);
+                    });
+                }
+
                 const type = calloutEl.querySelector("h4").textContent;
                 const typeLower = type.toLowerCase();
                 Object.assign(calloutCompEl, {

package/src/modules/doc/contentCallout/contentCallout.ts

@@ -26,6 +26,11 @@ export default class ContentCallout extends LightningElement {
                 this.iconColor = "red-vibrant-50";
                 this.iconName = "alert";
                 break;
+            case "important":
+                this.cardVariant = "doc-status-container dx-callout-important";
+                this.iconColor = "gray-10";
+                this.iconName = "announcement";
+                break;
             case "note":
             default:
                 this.cardVariant = "dx-callout-note";

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

@@ -4,12 +4,19 @@
     display: block;
 }
 
+doc-breadcrumbs {
+    --dx-c-popover-z-index: 5;
+
+    display: block;
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
 dx-sidebar,
 dx-sidebar-old {
     --dx-c-sidebar-height: 100%;
     --dx-c-sidebar-vertical-padding: var(--dx-c-content-vertical-spacing);
 
-    z-index: 5;
+    z-index: 6;
 }
 
 dx-toc {
@@ -56,11 +63,6 @@ dx-toc {
     max-width: 275px;
 }
 
-dx-breadcrumbs {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-2xl);
-}
-
 @media screen and (max-width: 1024px) {
     .right-nav-bar {
         display: none;
@@ -68,10 +70,6 @@ dx-breadcrumbs {
 }
 
 @media screen and (max-width: 800px) {
-    dx-breadcrumbs {
-        display: none;
-    }
-
     .content-body {
         margin-top: var(--dx-c-content-vertical-spacing);
     }

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

@@ -28,17 +28,10 @@
             <slot name="doc-phase"></slot>
             <div class="content-body-container">
                 <div class="content-body">
-                    <dx-breadcrumbs
+                    <doc-breadcrumbs
                         if:true={breadcrumbs}
                         breadcrumbs={breadcrumbs}
-                        truncate
-                        hide-current-location
-                    ></dx-breadcrumbs>
-                    <dx-breadcrumbs
-                        if:false={breadcrumbs}
-                        pathname={pathname}
-                        hide-current-location
-                    ></dx-breadcrumbs>
+                    ></doc-breadcrumbs>
                     <slot onslotchange={onSlotChange}></slot>
                 </div>
                 <div class="right-nav-bar is-sticky">