@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

package/src/modules/dx/codeBlock/customLanguages.js

@@ -0,0 +1,48 @@
+export const ampscript = {
+    pattern: /%%=\s*([\s\S]*?)\s*=%%|%%\[([\s\S]*?)\]%%/,
+    greedy: true,
+    inside: {
+        delimiter: {
+            pattern: /%%=|=%%|%%\[|\]%%/,
+            alias: "operator"
+        },
+        comment: {
+            pattern: /(\/\/.*|\/\*[\s\S]*?\*\/)/,
+            greedy: true
+        },
+        string: {
+            pattern: /(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,
+            greedy: true,
+            inside: {
+                escape: /\\./
+            }
+        },
+        function: {
+            pattern: /\b\w+\b(?=\()/i,
+            greedy: true
+        },
+        boolean: /\b(true|false|null)\b/i,
+        number: /\b(0(x|X)[0-9a-fA-F]+|([0-9]+(\.[0-9]+)?))\b/,
+        keyword:
+            /\b(do|else|elseif|for|if(?:\s+not)?|endif|next|then|to|downto|var|set)\b/i,
+        operator: /==|!=|>|<|>=|<=|=/,
+        variable: {
+            pattern: /@\w+|\[\w+\]/,
+            greedy: true
+        },
+        constant:
+            /\b(xtmonth|xtmonthnumeric|xtday|xtdayofweek|xtyear|xtshortdate|xtlongdate)\b/i,
+        logical: /\b(and|or|not)\b/i
+    }
+};
+
+export const sqlDocsTemplate = {
+    comment: /--.*/,
+    variable: [
+        /<[^>\s]+>/,
+        { pattern: /(\s|\[|\[, ])\.\.\.(?=\]|\))/, lookbehind: true }
+    ],
+    keyword: /\b[A-Z_]+\b/,
+    string: /'[^']*'/,
+    punctuation: /[;[\]{}]/
+};

package/src/modules/dx/codeBlock/darkAndLightThemes.css

@@ -0,0 +1,177 @@
+/* 
+    A11y syntax highlighting comes from this npm package (release 1.2.0):
+    https://github.com/ericwbailey/a11y-syntax-highlighting/releases
+    The colors used are from the files prism/a11y-light.css and prism/a11y-dark.css with
+    some minor modifications to work with our existing classes.
+*/
+
+.dx-theme-dark {
+    --prism-a11y-border-radius: 0.3em;
+    --prism-a11y-font-family: "consolas", "monaco", "Andale Mono", "Ubuntu Mono",
+        monospace;
+    --prism-a11y-line-height: 1.5;
+    --prism-a11y-code-block-margin: 0.5em 0;
+    --prism-a11y-code-block-padding: 1em;
+    --prism-a11y-code-inline-padding: 0.1em;
+    --prism-a11y-width-border: 1px;
+    --prism-a11y-width-tab: 2;
+    --prism-a11y-color-background: hsl(0deg 0% 17% / 100%);
+    --prism-a11y-color-text-no-token: hsl(60deg 30% 96% / 100%);
+    --prism-a11y-color-text-comment: hsl(54deg 32% 75% / 100%);
+    --prism-a11y-color-text-blue: hsl(180deg 100% 44% / 100%);
+    --prism-a11y-color-text-green: hsl(80deg 75% 55% / 100%);
+    --prism-a11y-color-text-gray: hsl(60deg 30% 96% / 100%);
+    --prism-a11y-color-text-purple: hsl(291deg 30% 83% / 100%);
+    --prism-a11y-color-text-red: hsl(17deg 100% 74% / 100%);
+    --prism-a11y-color-text-yellow: hsl(51deg 100% 50% / 100%);
+    --prism-a11y-plugin-color-border: hsl(51deg 100% 50% / 55%);
+    --prism-a11y-plugin-color-background: hsl(51deg 100% 50% / 10%);
+}
+
+.dx-theme-light {
+    --prism-a11y-border-radius: 0.3em;
+    --prism-a11y-font-family: "consolas", "monaco", "Andale Mono", "Ubuntu Mono",
+        monospace;
+    --prism-a11y-line-height: 1.5;
+    --prism-a11y-code-block-margin: 0.5em 0;
+    --prism-a11y-code-block-padding: 1em;
+    --prism-a11y-code-inline-padding: 0.1em;
+    --prism-a11y-width-border: 1px;
+    --prism-a11y-width-tab: 2;
+    --prism-a11y-color-background: hsl(0deg 0% 100% / 100%);
+    --prism-a11y-color-text-no-token: hsl(0deg 0% 33% / 100%);
+    --prism-a11y-color-text-comment: hsl(16deg 100% 25% / 100%);
+    --prism-a11y-color-text-blue: hsl(195deg 100% 30% / 100%);
+    --prism-a11y-color-text-green: hsl(120deg 100% 25% / 100%);
+    --prism-a11y-color-text-gray: hsl(0deg 0% 41% / 100%);
+    --prism-a11y-color-text-purple: hsl(282deg 100% 41% / 100%);
+    --prism-a11y-color-text-red: hsl(2deg 80% 47% / 100%);
+    --prism-a11y-color-text-yellow: hsl(43deg 74% 30% / 100%);
+    --prism-a11y-plugin-color-border: hsl(43deg 74% 30% / 55%);
+    --prism-a11y-plugin-color-background: hsl(43deg 74% 30% / 10%);
+}
+
+.dx-theme-dark pre[class*="language-"] {
+    background: var(--prism-a11y-color-background);
+}
+
+.dx-theme-light pre[class*="language-"] {
+    background: var(--prism-a11y-color-background);
+}
+
+:where(code[class*="language-"], pre[class*="language-"]) {
+    color: var(--prism-a11y-color-text-no-token);
+    background: var(--prism-a11y-color-background);
+    font-family: var(--prism-a11y-font-family);
+    text-align: start;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: var(--prism-a11y-line-height);
+    tab-size: var(--prism-a11y-width-tab);
+    hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+    padding: var(--prism-a11y-code-block-padding);
+    margin: var(--prism-a11y-code-block-margin);
+    overflow: auto;
+    border-radius: var(--prism-a11y-border-radius);
+}
+
+:where(:not(pre) > code[class*="language-"], pre[class*="language-"]) {
+    background: var(--prism-a11y-color-background);
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: var(--prism-a11y-code-inline-padding);
+    border-radius: var(--prism-a11y-border-radius);
+    white-space: normal;
+}
+
+:where(.token.comment, .token.prolog, .token.doctype, .token.cdata) {
+    color: var(--prism-a11y-color-text-comment);
+}
+
+.token.punctuation {
+    color: var(--prism-a11y-color-text-gray);
+}
+
+:where(
+        .token.property,
+        .token.tag,
+        .token.constant,
+        .token.symbol,
+        .token.deleted
+    ) {
+    color: var(--prism-a11y-color-text-red);
+}
+
+:where(
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .language-css .token.string,
+        .style .token.string,
+        .token.variable,
+        .token.keyword
+    ) {
+    color: var(--prism-a11y-color-text-blue);
+}
+
+:where(
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.builtin,
+        .token.inserted
+    ) {
+    color: var(--prism-a11y-color-text-green);
+}
+
+:where(
+        .token.atrule,
+        .token.attr-value,
+        .token.function,
+        .token.regex,
+        .token.important
+    ) {
+    color: var(--prism-a11y-color-text-yellow);
+}
+
+:where(.token.boolean, .token.number, .token.keyword) {
+    color: var(--prism-a11y-color-text-purple);
+}
+
+:where(.token.important, .token.bold) {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+.line-highlight {
+    background: var(--prism-a11y-plugin-color-background);
+    border-top: var(--prism-a11y-width-border) solid
+        var(--prism-a11y-plugin-color-border);
+    border-bottom: var(--prism-a11y-width-border) solid
+        var(--prism-a11y-plugin-color-border);
+}
+
+.line-numbers .line-numbers-rows {
+    border-right: var(--prism-a11y-width-border) solid
+        var(--prism-a11y-color-text-no-token);
+}
+
+.line-numbers-rows > span::before {
+    color: var(--prism-a11y-color-text-comment);
+}

package/src/modules/dx/coveoRecommendations/coveoRecommendations.css

@@ -0,0 +1,8 @@
+.spinner-container {
+    position: relative;
+    margin-top: 85px;
+}
+
+dx-section.section-reduced-padding {
+    --dx-c-section-padding-vertical: unset;
+}

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -0,0 +1,27 @@
+<template>
+    <dx-hr lwc:if={showRecommendations} spacing="2xl" text={label}></dx-hr>
+
+    <dx-section lwc:if={showRecommendations} class="section-reduced-padding">
+        <dx-spinner lwc:if={recommendationsLoading}>
+            <div class="spinner-container">
+                <dx-spinner size="large" variant="brand"></dx-spinner>
+            </div>
+        </dx-spinner>
+        <dx-grid columns="three" class="recent-posts">
+            <template for:each={recommendations} for:item="recommendation">
+                <dx-card-blog-post
+                    authors={recommendation.authors}
+                    body={recommendation.yoast_head_json.description}
+                    datetime={recommendation.yoast_head_json.article_published_time}
+                    href={recommendation.yoast_head_json.canonical}
+                    img-alt={recommendation.yoast_head_json.title}
+                    img-src={recommendation.featured_image}
+                    key={recommendation.id}
+                    header={recommendation.yoast_head_json.title}
+                    origin="coveo"
+                    click-event={recommendation.clickEvent}
+                ></dx-card-blog-post>
+            </template>
+        </dx-grid>
+    </dx-section>
+</template>

package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts

@@ -0,0 +1,171 @@
+import { LightningElement, api, track } from "lwc";
+
+const SEARCH_HUB = "developerWebsiteBlogs";
+
+interface Recommendation {
+    originalCoveoData: {
+        uri: string;
+        title: string;
+        searchUid: string;
+        raw: {
+            permanentId: string;
+        };
+        "@source": string;
+    };
+    clickEvent: () => void;
+}
+
+const language_to_locale_map = {
+    english: "en",
+    japanese: "ja"
+};
+
+export default class CoveoRecommendations extends LightningElement {
+    @api coveoAuthToken!: string;
+    @api coveoOrganizationId!: string;
+    @api label? = "Readers Also Viewed";
+    @api postAcf: string = "{}";
+
+    _recommendations = [] as Recommendation[];
+
+    private get recommendations(): any[] {
+        return this._recommendations || [];
+    }
+
+    @track showRecommendations = true;
+    @track recommendationsLoading = true;
+
+    getLocale() {
+        const acf = JSON.parse(this.postAcf);
+        return language_to_locale_map[
+            (acf?.language as keyof typeof language_to_locale_map) || "english"
+        ];
+    }
+
+    connectedCallback() {
+        const actionsHistory = localStorage.getItem(
+            "__coveo.analytics.history"
+        );
+        const url = `https://${this.coveoOrganizationId}.org.coveo.com/rest/search`;
+        const searchStart = performance.now();
+        fetch(url, {
+            headers: {
+                Authorization: `Bearer ${this.coveoAuthToken}`,
+                "Content-Type": "application/json"
+            },
+            method: "POST",
+            body: JSON.stringify({
+                pipeline: "Recommendations_Developer_Blogs",
+                locale: this.getLocale(),
+                searchHub: SEARCH_HUB,
+                numberOfResults: 3,
+                actionsHistory: JSON.parse(actionsHistory!),
+                isGuestUser: true
+            })
+        }).then(
+            async (response) => {
+                try {
+                    const json = await response.json();
+                    const results = json.results;
+
+                    this.logSearchAnalytics(
+                        json.searchUid,
+                        performance.now() - searchStart
+                    );
+
+                    const blogDataLoadTasks = results
+                        .slice(0, 3)
+                        .map(async (rec: any, index: number) => {
+                            const slug = rec.uri.split("/").pop();
+                            const blogDataUrl = `https://developer.salesforce.com/blogs/wp-json/wp/v2/posts?slug=${slug}&state=publish&_embed=wp:featuredmedia`;
+                            const wordPressData = (
+                                await (await fetch(blogDataUrl)).json()
+                            )[0];
+                            wordPressData.originalCoveoData = rec;
+                            wordPressData.originalCoveoData.searchUid =
+                                json.searchUid;
+                            wordPressData.clickEvent =
+                                this.buildClickAnalyticsLogger(index);
+                            return wordPressData;
+                        });
+                    this._recommendations = await Promise.all(
+                        blogDataLoadTasks
+                    );
+                    if (this._recommendations.length !== 3) {
+                        this.showRecommendations = false;
+                    }
+                } catch (ex) {
+                    this.showRecommendations = false;
+                } finally {
+                    if (this.recommendations.length === 3) {
+                        this.recommendationsLoading = false;
+                    } else {
+                        this.recommendationsLoading = false;
+                        this.showRecommendations = false;
+                    }
+                }
+            },
+            () => {
+                this.showRecommendations = false;
+            }
+        );
+    }
+
+    logSearchAnalytics = (uid: string, time: number) => {
+        const payload = {
+            anonymous: true,
+            language: this.getLocale(),
+            originLevel1: SEARCH_HUB,
+            originLevel2: SEARCH_HUB,
+            actionCause: "recommendationInterfaceLoad",
+            queryText: "", // This has to be included, but is empty, because recommendations use the 'search' endpoint with an empty query string
+            responseTime: time,
+            searchQueryUid: uid
+        };
+        fetch(
+            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/search`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.coveoAuthToken}`,
+                    "Content-Type": "application/json"
+                },
+                method: "POST",
+                body: JSON.stringify(payload)
+            }
+        );
+    };
+
+    buildClickAnalyticsLogger = (index: number) => () => {
+        const payload = {
+            anonymous: true,
+            documentPosition: index,
+            documentTitle: this._recommendations[index].originalCoveoData.title,
+            documentUrl: this._recommendations[index].originalCoveoData.uri,
+            language: this.getLocale(),
+            originLevel1: SEARCH_HUB,
+            originLevel2: SEARCH_HUB,
+            actionCause: "recommendationOpen",
+            queryText: "", // This has to be included, but is empty, because recommendations use the 'search' endpoint with an empty query string
+            searchQueryUid: this._recommendations[index].originalCoveoData.uri,
+            sourceName:
+                this._recommendations[index].originalCoveoData["@source"],
+            customData: {
+                contentIDKey: "permanentId",
+                contentIDValue:
+                    this._recommendations[index].originalCoveoData.raw
+                        .permanentId
+            }
+        };
+        fetch(
+            `https://${this.coveoOrganizationId}.analytics.org.coveo.com/rest/ua/v15/analytics/click`,
+            {
+                headers: {
+                    Authorization: `Bearer ${this.coveoAuthToken}`,
+                    "Content-Type": "application/json"
+                },
+                method: "POST",
+                body: JSON.stringify(payload)
+            }
+        );
+    };
+}

package/src/modules/dx/darkModeManager/darkModeManager.ts

@@ -0,0 +1,86 @@
+/* eslint-disable @lwc/lwc/no-document-query */
+import { LightningElement } from "lwc";
+
+export const LOCAL_STORAGE_KEY = "dx-dark-mode-theme";
+
+function setTheme(theme: string) {
+    const DWONavSelector = document.querySelector("hgf-c360contextnav");
+
+    document.body.setAttribute("class", theme);
+    DWONavSelector?.setAttribute("dark-mode", String(theme === "dark"));
+    localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+}
+
+function isDarkMode() {
+    return document.body.getAttribute("class") === "dark";
+}
+
+function onDarkModeToggle() {
+    if (isDarkMode()) {
+        setTheme("light");
+    } else {
+        setTheme("dark");
+    }
+}
+
+declare module globalThis {
+    let singletonDarkModeManagerRendered: boolean;
+}
+
+export const DARK_MODE_THEMES = ["dark", "light"];
+export const DARKMODE_TOGGLE_EVENT_NAME = "UPDATE_DARK_MODE";
+
+export const isDarkModeEnabled = () => {
+    return process.env.DARK_MODE;
+};
+
+export const dispatchDarkModeToggleEvent = () => {
+    window.dispatchEvent(new Event(DARKMODE_TOGGLE_EVENT_NAME));
+};
+
+export const getLocalStorageDarkModeSetting = () => {
+    return localStorage.getItem(LOCAL_STORAGE_KEY);
+};
+
+const isBrowserDarkModeEnabled = () => {
+    return (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+    );
+};
+
+export const setLocalStorageDarkModeSetting = (theme: string) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, theme);
+};
+
+export default class DarkModeManager extends LightningElement {
+    renderedCallback(): void {
+        if (
+            isDarkModeEnabled() &&
+            !globalThis.singletonDarkModeManagerRendered
+        ) {
+            const theme = getLocalStorageDarkModeSetting();
+            if (theme) {
+                if (DARK_MODE_THEMES.includes(theme)) {
+                    setTheme(theme);
+                }
+            } else if (isBrowserDarkModeEnabled()) {
+                setTheme("dark");
+            }
+            window.addEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+            globalThis.singletonDarkModeManagerRendered = true;
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (isDarkModeEnabled()) {
+            window.removeEventListener(
+                DARKMODE_TOGGLE_EVENT_NAME,
+                onDarkModeToggle
+            );
+        }
+    }
+}

package/src/modules/dx/dropdown/dropdown.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .menu-nested::part(content) {
     padding-top: var(--dx-g-spacing-sm);
@@ -7,8 +7,7 @@
 
 .menu_list {
     display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
+    flex-flow: column nowrap;
 }
 
 .menu-hidden::part(content) {
@@ -29,8 +28,7 @@
     }
 
     .menu-nested-2-col .menu_list {
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-flow: row wrap;
     }
 
     .menu-nested-2-col .menu_option {

package/src/modules/dx/dropdown/dropdown.html

@@ -19,16 +19,20 @@
             role={role}
             slot="content"
         >
-            <template for:each={options} for:item="option">
+            <template for:each={options} for:item="option" for:index="index">
                 <dx-dropdown-option
+                    analytics-event={analyticsEvent}
+                    analytics-payload={analyticsPayload}
                     active={option.active}
                     key-value={option.keyValue}
                     if:false={option.options}
                     key={option.id}
+                    index-position={index}
                     onfocus={onOptionFocus}
                     onselect={onOptionClick}
                     option={option}
                     nav-item-label={navItemLabel}
+                    variant={variant}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -39,6 +43,8 @@
                     <span class="menu_heading">{option.label}</span>
                     <template for:each={option.options} for:item="suboption">
                         <dx-dropdown-option
+                            analytics-event={analyticsEvent}
+                            analytics-payload={analyticsPayload}
                             active={suboption.active}
                             key={suboption.id}
                             key-value={suboption.keyValue}

package/src/modules/dx/dropdown/dropdown.ts

@@ -1,11 +1,16 @@
-import { Option, PopperPlacement } from "typings/custom";
+import {
+    AnalyticsPayload,
+    OptionWithNested,
+    PopperPlacement,
+    DropdownVariant
+} from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
-import { deepmapOptions } from "utils/options";
 import get from "lodash.get";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
+import { deepmapOptions } from "dxUtils/options";
 
-interface DropdownOption extends Option {
+interface DropdownOption extends OptionWithNested {
     // link that gets shown as a highlighted link at end of option group
     calloutLink?: {
         href: string;
@@ -14,11 +19,11 @@ interface DropdownOption extends Option {
     };
 }
 
+// @ts-ignore Dark Magic (TM) we are adding a custom getter to the 'role' property and tsc doesn't like that
 export default class Dropdown extends LightningElement {
     @api value: string | null = null; // "active option" id
     @api valuePath: string = "id"; // path to match for the active value (useful for url matching)
     @api stayOpenAfterChange?: boolean = false;
-
     // props forwarded to popover:
     @api ariaLabel: string | null = null;
     @api tempId: string | null = null;
@@ -31,6 +36,11 @@ export default class Dropdown extends LightningElement {
     @api width?: string | null = null;
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
+    @api variant: DropdownVariant = "base";
+
+    // props forwarded to dropdown option
+    @api analyticsEvent?: string;
+    @api analyticsPayload?: AnalyticsPayload;
 
     @api
     get options() {
@@ -112,7 +122,7 @@ export default class Dropdown extends LightningElement {
             this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
         }
         if (!this.stayOpenAfterChange && this.popoverEl) {
-            this.popoverEl.closePopover();
+            (this.popoverEl as any).closePopover();
         }
     }
 
@@ -163,9 +173,8 @@ export default class Dropdown extends LightningElement {
             ? this.findOptionElementIndex(this.value)
             : 0;
 
-        const optionToFocus: any = this.optionsElements[
-            defaultIndex < 0 ? 0 : defaultIndex
-        ];
+        const optionToFocus: any =
+            this.optionsElements[defaultIndex < 0 ? 0 : defaultIndex];
         if (optionToFocus) {
             optionToFocus.focus();
             this._focusedValue = optionToFocus.option.id;