@salesforcedevs/docs-components 0.56.2-seo-test16 → 0.56.2-snyk

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -78,8 +78,8 @@ api-security-documentation {
     --arc-font-h3-margin: var(--amf-h8-margin);
 
     /* p */
-    --arc-font-body1-font-size: var(--dx-g-text-base);
-    --arc-font-body1-line-height: var(--dx-g-spacing-lg);
+    --arc-font-body1-font-size: var(--dx-g-text-sm);
+    --arc-font-body1-line-height: var(--dx-g-spacing-mlg);
 
     /* code */
     --arc-font-code-family: var(--dx-g-font-mono);
@@ -133,33 +133,14 @@ api-security-documentation {
     /* api */
     --api-parameters-document-title-border: 0;
     --api-body-document-title-border: 0;
-    --api-type-document-property-parent-color: rgb(112, 110, 107);
-    --api-type-document-property-title-font-family: var(--dx-g-font-sans);
-    --api-type-document-property-title-font-size: var(--dx-g-text-base);
-    --api-type-document-property-title-font-weight: var(--dx-g-font-bold);
-    --api-type-document-property-title-color: var(--dx-g-blue-vibrant-20);
-    --api-type-document-type-font-family: var(--dx-g-font-mono);
-    --api-type-document-type-background-color: var(--dx-g-gray-95);
-    --api-type-document-type-color: rgb(24, 24, 24);
-    --api-type-document-type-attribute-color: rgb(24, 24, 24);
-    --api-type-document-trait-font-family: var(--dx-g-font-mono);
-    --api-type-document-trait-color: rgb(24, 24, 24);
-    --api-type-document-trait-padding: 0 var(--dx-g-spacing-xs);
-    --api-type-document-trait-data-type-padding: 0 var(--dx-g-spacing-xs);
-    --api-type-document-trait-font-size: var(--dx-g-text-sm);
-    --api-type-document-trait-border-radius: var(--dx-g-spacing-xs);
-    --api-type-document-trait-background-color: var(--dx-g-gray-95);
+    --api-type-document-trait-font-family: var(--dx-g-font-sans);
     --api-type-document-union-button-active-background-color: transparent;
     --api-type-document-union-button-active-color: var(--dx-g-blue-vibrant-20);
     --api-type-document-union-button-background-color: transparent;
     --api-type-document-union-button-color: var(--dx-g-blue-vibrant-50);
     --api-type-document-media-button-border-color: transparent;
     --property-shape-document-padding: 24px 0;
-    --property-shape-document-title-font-family: var(--dx-g-font-sans);
-    --property-shape-document-title-font-size: var(--dx-g-text-base);
-    --property-shape-document-title-font-weight: var(--dx-g-font-bold);
-    --property-shape-document-title-line-height: 20px;
-    --property-shape-document-title-margin: 8px 0 8px 0;
+    --property-shape-document-title-font-family: var(--dx-g-font-mono);
     --property-shape-document-object-color: var(--dx-g-blue-vibrant-90);
     --property-shape-document-array-color: var(--dx-g-blue-vibrant-90);
     --property-shape-document-union-color: var(--dx-g-blue-vibrant-90);
@@ -185,31 +166,15 @@ api-security-documentation {
     --anypoint-button-emphasis-high-active-background-color: transparent;
 
     /* api example */
-    --api-example-accent-color: rgb(250, 250, 250);
-    --api-example-background-color: rgb(250, 250, 250);
+    --api-example-accent-color: rgb(250 250 250);
+    --api-example-background-color: rgb(250 250 250);
     --api-example-title-background-color: transparent;
 
     /* code snippets */
-    --http-code-snippet-container-background-color: rgb(250, 250, 250);
-    --http-code-snippet-code-function-color: rgb(24, 24, 24);
-    --http-code-snippet-code-keyword-color: rgb(24, 24, 24);
-    --http-code-snippet-code-cdata-color: rgb(24, 24, 24);
-    --http-code-snippet-variable-color: rgb(24, 24, 24);
+    --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
     /* prism */
-    --code-background-color: rgb(250, 250, 250);
-    --code-color: rgb(24, 24, 24);
-    --code-token-comment-value-color: rgb(24, 24, 24);
-    --code-punctuation-value-color: rgb(24, 24, 24);
-    --code-property-value-color: rgb(24, 24, 24);
-    --code-type-number-value-color: rgb(24, 24, 24);
-    --code-type-boolean-value-color: rgb(24, 24, 24);
-    --code-type-text-value-color: rgb(24, 24, 24);
-    --code-operator-value-color: rgb(24, 24, 24);
-    --code-keyword-value-color: rgb(24, 24, 24);
-    --code-function-value-color: rgb(24, 24, 24);
-    --code-variable-value-color: rgb(24, 24, 24);
 
     /* --code-operator-value-background-color */
 }
@@ -243,7 +208,7 @@ api-endpoint-documentation {
     );
 
     /* description */
-    --api-endpoint-documentation-description-color: rgb(24, 24, 24);
+    --api-endpoint-documentation-description-color: rgb(24 24 24);
 }
 
 api-endpoint-documentation,
@@ -306,11 +271,11 @@ api-method-documentation {
     --api-method-documentation-http-method-label-font-weight: var(
         --dx-g-font-bold
     );
-    --api-method-documentation-description-color: rgb(24, 24, 24);
+    --api-method-documentation-description-color: rgb(24 24 24);
     --api-method-documentation-operation-id-color: var(--dx-g-gray-50);
 
     /* body */
-    --api-body-document-description-color: rgb(24, 24, 24);
+    --api-body-document-description-color: rgb(24 24 24);
     --api-body-document-media-type-selector-color: var(--dx-g-blue-vibrant-20);
     --api-body-document-media-type-selector-font-size: var(
         --amf-h8-mod-font-size

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -0,0 +1,131 @@
+: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)
+            )
+    );
+    --dx-c-content-scroll-margin-top: calc(
+        var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+            var(--dx-g-spacing-2xl)
+    );
+
+    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-vertical-padding: var(--dx-g-spacing-md);
+
+    z-index: calc(var(--dx-g-z-index-100) + 5);
+}
+
+dx-toc {
+    --dx-c-toc-width: unset;
+
+    height: calc(100% - var(--dx-c-content-vertical-spacing) * 2);
+    margin: var(--dx-c-content-vertical-spacing) 0;
+    overflow-y: auto;
+}
+
+dx-sidebar,
+dx-toc {
+    display: block;
+}
+
+/* offset page jump link due to fixed header */
+::slotted(doc-heading) {
+    scroll-margin-top: var(--dx-c-content-scroll-margin-top);
+}
+
+.content {
+    display: flex;
+    position: relative;
+}
+
+.content-body-doc-phase-container {
+    flex: 1;
+    border-left: 1px solid var(--dx-g-gray-90);
+}
+
+.content-body-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    max-width: var(--dx-g-doc-content-max-width);
+
+    /* Derived this manually by substracting (topHeader, doc header, banner and the content). */
+    min-height: 62vh;
+    margin: auto;
+    padding: 0 var(--dx-g-global-header-padding-horizontal);
+    margin-bottom: calc(2 * (var(--dx-g-spacing-5xl) + 4px));
+}
+
+.content-body {
+    margin: var(--dx-g-spacing-md) 0 0;
+    max-width: 900px;
+    flex: 1;
+    width: 0;
+}
+
+.is-sticky {
+    align-self: flex-start;
+    position: sticky;
+    top: var(--dx-c-content-sidebar-sticky-top);
+}
+
+.right-nav-bar {
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1024px) {
+    .right-nav-bar {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 800px) {
+    .content-body {
+        margin-top: var(--dx-c-content-vertical-spacing);
+    }
+
+    .content-body-doc-phase-container {
+        border-left: 0;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .is-sticky {
+        width: 100%;
+    }
+
+    .content {
+        flex-direction: column;
+    }
+
+    .content-body-container {
+        padding-right: 0;
+        overflow-x: auto;
+        margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
+    }
+
+    .left-nav-bar {
+        height: unset;
+    }
+
+    .content-body {
+        margin-left: var(--dx-g-spacing-mlg, 20px);
+        margin-right: var(--dx-g-spacing-mlg, 20px);
+    }
+}

package/src/modules/docHelpers/imgStyle/imgStyle.css

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

package/src/modules/docHelpers/status/status.css

@@ -9,7 +9,7 @@
 }
 
 .doc-status-container {
-    background-color: rgb(254, 243, 217);
+    background-color: rgb(253 252 247);
     border-color: var(--dx-g-yellow-vibrant-80);
 }
 

package/src/modules/docUtils/{SearchSyncer/SearchSyncer.ts → searchSyncer/searchSyncer.ts}

@@ -47,6 +47,7 @@ export class SearchSyncer {
             this.handleSearchChange
         );
         this.target.removeEventListener("popstate", this.handlePopState);
+        // @ts-ignore
         this.target = undefined;
         this.callbacks.onSearchChange = undefined;
         this.callbacks.onUrlChange = undefined;

package/src/modules/docUtils/utils/__mocks__/coveo.analytics.ts

@@ -0,0 +1,16 @@
+export class CoveoAnalyticsClient {
+    private config: { token: string; endpoint: string };
+
+    constructor(config: { token: string; endpoint: string }) {
+        this.config = config;
+    }
+
+    sendViewEvent(event: {
+        contentIdKey: string;
+        contentType?: string;
+        contentIdValue: string;
+    }): void {
+        // Mock implementation
+        console.log("Mock Coveo Analytics event:", event);
+    }
+}

package/src/modules/docUtils/utils/coveo.analytics.d.ts

@@ -0,0 +1,10 @@
+declare module "coveo.analytics/dist/browser.mjs" {
+    export class CoveoAnalyticsClient {
+        constructor(config: { token: string; endpoint: string });
+        sendViewEvent(event: {
+            contentIdKey: string;
+            contentType?: string;
+            contentIdValue: string;
+        }): void;
+    }
+}

package/src/modules/docUtils/utils/utils.ts

@@ -0,0 +1,32 @@
+import { CoveoAnalyticsClient } from "coveo.analytics/dist/browser.mjs"; // This fix is required for Node 20 upgrade, so that Coveo analytics is loaded properly by LWR.
+
+export const oldVersionDocInfo = (latestVersionLink: string) => {
+    return {
+        title: "Newer Version Available",
+        body: `This content describes an older version of this product. 
+        <a style="font-weight: bold;" href="${latestVersionLink}">View Latest</a>`
+    };
+};
+
+export function logCoveoPageView(
+    coveoOrganizationId: string | undefined,
+    coveoAnalyticsToken: string | undefined
+) {
+    if (coveoOrganizationId && coveoAnalyticsToken) {
+        const ua = new CoveoAnalyticsClient({
+            token: coveoAnalyticsToken,
+            endpoint: `https://${coveoOrganizationId}.analytics.org.coveo.com`
+        });
+        const pathParts = window.location.pathname.split("/");
+        let contentType;
+        if (pathParts.length >= 2) {
+            contentType = pathParts[1];
+        }
+
+        ua.sendViewEvent({
+            contentIdKey: "@clickableuri",
+            contentType: contentType,
+            contentIdValue: window.location.href
+        });
+    }
+}

package/src/modules/docBaseElements/lightningElementWithState/lightningElementWithState.ts

@@ -1,93 +0,0 @@
-import { LightningElement, track } from "lwc";
-
-/**
- * This is a helper class for when you want your LWC component to have state
- * that is automatically tracked _along with_ its previous state, in a React-
- * like fashion, so that you can compare current state with previous state
- * after a render (like React's `commponentDidUpdate`). One benefit of doing
- * things this way is that you can put all of your reactions to state changes
- * in one place, in `renderedCallback`, rather than having them in various
- * places throughout the component.
- *
- * The API consists in `this.prevState`, `this.state`, and `this.setState`.
- *
- * Usage:
- *
- * ```
- * type MyState = {
- *     isFetchingContent: boolean;
- * };
- *
- * class MyFetchingComponent extends LightningElementWithState<MyState> {
- *     constructor() {
- *         // `this.state` can only be initialized once
- *         this.state = {
- *             isFetchingContent: false
- *         };
- *     }
- *
- *     // Queued for execution whenever a `setState` call completes
- *     renderedCallback() {
- *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
- *             // Do something knowing that we just finished fetching.
- *             notifyFetchSuccessful();
- *         }
- *     }
- *
- *     fetchSomething() {
- *         this.setState({
- *             isFetchingContent: true
- *         });
- *
- *         fetch(whatever).then(() => {
- *             this.setState({
- *                 isFetching: false
- *             }
- *         });
- *     }
- * }
- * ```
- */
-export abstract class LightningElementWithState<
-    T extends { [key: string]: unknown }
-> extends LightningElement {
-    private _prevState = {} as T;
-    @track private _state = {} as T;
-
-    private _didInitializeState = false;
-
-    protected get prevState(): T {
-        return Object.freeze({
-            ...this._prevState
-        });
-    }
-
-    protected get state(): T {
-        return Object.freeze({
-            ...this._state
-        });
-    }
-
-    protected set state(initialState: T) {
-        if (!this._didInitializeState) {
-            this._state = {
-                ...initialState
-            };
-            this._didInitializeState = true;
-        } else {
-            throw new Error(
-                "To mutate state after initialization, use `this.setState`."
-            );
-        }
-    }
-
-    protected setState = (state: Partial<T>): void => {
-        this._prevState = {
-            ...this._state
-        };
-        this._state = {
-            ...this._state,
-            ...state
-        };
-    };
-}

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