@salesforcedevs/dx-components 1.3.66-alpha-032 → 1.3.70

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -98,7 +98,6 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
-        "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",
         "dxUtils/highlight",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.66-alpha-032",
+    "version": "1.3.70",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -39,5 +39,6 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0",
         "luxon": "^3.1.0"
-    }
+    },
+    "gitHead": "2a96eac5a76bea4ca124d6a3b0119e8312365f60"
 }

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -108,23 +108,35 @@ export default class CodeBlock extends LightningElement {
     formatCodeBlock() {
         const divEl = this.template.querySelector("div.code-block-content");
         const templateEl = document.createElement("template");
+
+        // Replace any <var> markup with a temporary nonsense sentinel (but one that is very
+        // unlikely to affect Prism's tokenization) so that Prism will not strip them but does
+        // still tokenize correctly. We want to italicize the "variables" ourselves after Prism
+        // does its own thing (W-11975205).
+        let cleanCodeBlock = this.codeBlock.replace(
+            /<var.*?>(.+?)<\/var>/g,
+            "vvvvv$1vvvvv"
+        );
+
         if (
             !this.isEncoded &&
             this.markupLangs.includes(this.selectedLanguage.id || "")
         ) {
-            // eslint-disable-next-line
-            templateEl.innerHTML = `<pre class='codeblock'><!--${this.codeBlock.replace(
+            // Temporarily replace HTML comment characters, which Prism would also strip
+            cleanCodeBlock = `<!--${cleanCodeBlock.replace(
                 /<!--(.*?)-->/gs,
                 "@@$1##"
-            )}--></pre>`;
+            )}-->`;
         } else {
-            // eslint-disable-next-line
-            const innerHtml = this.isEncoded
-                ? this.codeBlock
-                : this.codeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
-
-            templateEl.innerHTML = `<pre class='codeblock'>${innerHtml}</pre>`;
+            // If this is a non-encoded markup language, encode angle brackets that Prism would strip
+            cleanCodeBlock = this.isEncoded
+                ? cleanCodeBlock
+                : cleanCodeBlock.replace(/</g, "&lt").replace(/>/g, "&gt");
         }
+
+        // eslint-disable-next-line
+        templateEl.innerHTML = `<pre class='codeblock'>${cleanCodeBlock}</pre>`;
+
         const codeBlockEls = templateEl.content.querySelectorAll("pre");
         codeBlockEls.forEach((codeBlockEl) => {
             // eslint-disable-next-line
@@ -141,12 +153,19 @@ export default class CodeBlock extends LightningElement {
             // for custom markup content, it is a workaround to be refactored later.
             // eslint-disable-next-line
             this.language !== "text"
-                ? (codeEl.innerHTML = codeHTML)
+                ? // eslint-disable-next-line
+                  (codeEl.innerHTML = codeHTML)
                 : (codeEl.textContent = this._codeBlock.trim());
             // eslint-disable-next-line
             codeBlockEl.innerHTML = "";
             codeBlockEl.appendChild(codeEl);
             Prism.highlightAllUnder(codeBlockEl);
+            // Italicize anything marked as a "variable" by the docs team
+            // eslint-disable-next-line
+            codeBlockEl.innerHTML = codeBlockEl.innerHTML.replace(
+                /vvvvv(.+?)vvvvv/g,
+                "<span class='token italic'>$1</span>"
+            );
         });
 
         if (divEl) {
@@ -156,6 +175,7 @@ export default class CodeBlock extends LightningElement {
             if (this.markupLangs.includes(this.selectedLanguage.id || "")) {
                 const res = this.template.querySelector(`code.language-markup`);
                 if (res) {
+                    // Restore any temporarily replaced HTML comment characters
                     // eslint-disable-next-line
                     res.innerHTML = res.innerHTML.replace(
                         /@@(.*?)##/gs,

package/src/modules/dx/searchResults/coveo.css

@@ -8057,7 +8057,7 @@ select.coveo-dropdown::-ms-expand {
 
 @font-face {
   font-family: 'Lato';
-  src: url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('../fonts/lato.woff');
+  src: url('https://static.cloud.coveo.com/searchui/v2.10105/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10105/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10105/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10105/0/fonts/lato.woff'), url('../fonts/lato.woff');
   font-weight: normal;
   font-style: normal;
 }

package/src/modules/dx/searchResults/searchResults.css

@@ -1,5 +1,4 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
 @import "./coveo.css";
 
 /* stylelint-disable selector-class-pattern */
@@ -386,8 +385,3 @@ a.CoveoResultLink,
     margin: 0 auto;
     width: fit-content;
 }
-
-.dx-badge {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-smd);
-}

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
 import { track as trackGTM } from "dxUtils/analytics";
-import { CONTENT_TYPE_LABELS } from "dxConstants/contentTypes";
-import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -40,7 +38,6 @@ const resultsTemplatesInnerHtml = `
         data-field-publicurl=""
     >
         <div class="dx-result">
-            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
             <p class="dx-result-title">
                 <a
                     class="CoveoResultLink"
@@ -56,7 +53,6 @@ const resultsTemplatesInnerHtml = `
         type="text/html"
     >
             <div class="dx-result">
-                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
                 <p class="dx-result-title">
                     <a class="CoveoResultLink"></a>
                 </p>
@@ -175,15 +171,6 @@ export default class SearchResults extends LightningElement {
 
         this.attachListeners(this.root);
 
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "badge",
-            (value: string) => {
-                const style = getContentTypeColorVariables(value);
-                const label = CONTENT_TYPE_LABELS[value];
-                return `<div style="${style}" class="dx-badge"><span>${label}</span></div>`;
-            }
-        );
-
         Coveo.init(this.root);
     }
 

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,2 +1,33 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
+
+.badge {
+    --background: var(--sds-g-gray-3);
+    --border-radius: var(--dx-g-spacing-smd);
+    --color: var(--sds-g-gray-10);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-smd);
+    --vertical-spacing: var(--dx-g-spacing-xs);
+
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: 10px;
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-mlg);
+}
+
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -5,20 +5,65 @@ import {
     Color,
     ContentType,
     IconSprite,
-    IconData,
     IconSymbol,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
-import {
-    isContentType,
-    getContentTypeColorScope,
-    getContentTypeColorVariables
-} from "dxUtils/contentTypes";
-import {
-    CONTENT_TYPE_LABELS,
-    CONTENT_TYPE_ICONS
-} from "dxConstants/contentTypes";
+import { BRANDS } from "dxConstants/brands";
+import { CONTENT_TYPES } from "dxConstants/contentTypes";
+
+const contentTypeLabels = {
+    documentation: "Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast"
+};
+
+type IconData = {
+    iconSymbol: IconSymbol;
+    iconSprite: IconSprite;
+};
+
+const contentTypeIcons: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    }
+};
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
@@ -66,29 +111,39 @@ export default class TypeBadge extends LightningElement {
     private _iconSymbol?: IconSymbol;
 
     private get variantIconData(): IconData | null {
-        if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
-            return CONTENT_TYPE_ICONS[this.variant as ContentType];
+        if (this.variant && this.variant in contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantLabel(): string | null {
         if (this.isContentType) {
-            return CONTENT_TYPE_LABELS[this.variant as ContentType];
+            return contentTypeLabels[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantColorScope(): string | null {
-        return getContentTypeColorScope(this.variant);
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
     }
 
     private get isContentType(): boolean {
-        return isContentType(this.variant);
+        return CONTENT_TYPES.includes(this.variant as ContentType);
+    }
+
+    private get isBrand(): boolean {
+        return BRANDS.includes(this.variant as ContentType);
     }
 
     private get className(): string {
-        return cx("dx-badge", `size-${this.size}`);
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
@@ -99,7 +154,10 @@ export default class TypeBadge extends LightningElement {
             });
         }
         if (this.variantColorScope) {
-            return getContentTypeColorVariables(this.variant);
+            return buildStyleColorVariables({
+                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
+                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
+            });
         }
         if (this.color) {
             const variables = colorToDxColors(this.color as Color);

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -1,54 +1,3 @@
-import { ContentType, IconData } from "typings/custom";
-
-export const CONTENT_TYPE_LABELS = {
-  documentation: "Documentation",
-  trailhead: "Trailhead",
-  blog: "Blog",
-  forum: "Forum",
-  api: "API",
-  event: "Event",
-  website: "Website",
-  podcast: "Podcast"
-};
-
-export const CONTENT_TYPE_ICONS: {
-    [K in ContentType]: IconData;
-} = {
-    documentation: {
-        iconSprite: "utility",
-        iconSymbol: "knowledge_base"
-    },
-    trailhead: {
-        iconSprite: "salesforcebrand",
-        iconSymbol: "learning"
-    },
-    blog: {
-        iconSprite: "utility",
-        iconSymbol: "comments"
-    },
-    forum: {
-        iconSprite: "general",
-        iconSymbol: "question-circle"
-    },
-    api: {
-        iconSprite: "utility",
-        iconSymbol: "settings"
-    },
-    event: {
-        iconSprite: "utility",
-        iconSymbol: "event"
-    },
-    website: {
-        iconSprite: "utility",
-        iconSymbol: "home"
-    },
-    podcast: {
-        iconSprite: "utility",
-        iconSymbol: "unmuted"
-    }
-};
-
-
 export const CONTENT_TYPES = [
     "documentation",
     "trailhead",

package/src/modules/dxHelpers/typeBadge/typeBadge.css

@@ -1,31 +0,0 @@
-.dx-badge {
-  --background: var(--sds-g-gray-3);
-  --border-radius: var(--dx-g-spacing-smd);
-  --color: var(--sds-g-gray-10);
-  --height: var(--dx-g-spacing-lg);
-  --horizontal-spacing: var(--dx-g-spacing-smd);
-  --vertical-spacing: var(--dx-g-spacing-xs);
-
-  color: var(--dx-c-type-badge-color, var(--color));
-  background: var(--dx-c-type-badge-background, var(--background));
-  border-radius: var(--border-radius);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--height);
-  width: min-content;
-  text-align: center;
-  white-space: nowrap;
-  font-family: var(--dx-g-font-sans);
-  font-size: 10px;
-  font-weight: var(--dx-g-font-bold);
-  padding: var(--vertical-spacing) var(--horizontal-spacing);
-}
-
-.dx-badge.size-small {
-  --height: var(--dx-g-spacing-mlg);
-}
-
-dx-icon {
-  margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dxUtils/contentTypes/contentTypes.ts

@@ -1,30 +0,0 @@
-import { CONTENT_TYPES } from "dxConstants/contentTypes";
-import { BRANDS } from "dxConstants/brands";
-import { ContentType } from "typings/custom";
-import { buildStyleColorVariables } from "dxUtils/css";
-
-export const isBrand = (id: string): boolean => {
-    return BRANDS.includes(id as ContentType);
-};
-
-export const isContentType = (id: string): boolean => {
-    return CONTENT_TYPES.includes(id as ContentType);
-};
-
-export const getContentTypeColorScope = (id: string): string | null => {
-    if (isContentType(id)) {
-        return "content-type";
-    }
-    if (isBrand(id)) {
-        return "brand";
-    }
-    return null;
-};
-
-export const getContentTypeColorVariables = (id: string): string => {
-  const scope = getContentTypeColorScope(id);
-  return buildStyleColorVariables({
-    background: `--dx-g-${scope}-${id}-color-background`,
-    color: `--dx-g-${scope}-${id}-color`
-});
-}