@salesforcedevs/dx-components 0.56.1 → 0.56.2-example

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

@@ -1,33 +1,6 @@
 @import "dxHelpers/reset";
 
-.typebadge {
-    align-items: center;
-    background: var(--dx-c-type-badge-background, var(--background));
-    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
-    color: var(--dx-c-type-badge-color, var(--color));
-    display: flex;
-    justify-content: center;
-    height: var(--dx-c-type-badge-height, var(--height));
-    text-align: center;
-    white-space: nowrap;
-    width: min-content;
-}
-
-.typebadge.typebadge_metadata {
-    --background: var(--dx-g-cloud-blue-natural-90);
-    --border-radius: var(--dx-g-spacing-xs);
-    --color: var(--dx-g-blue-vibrant-20);
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-family: var(--dx-g-font-display);
-    font-size: 10px;
-    letter-spacing: 0.6px;
-    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
-    padding: 0 var(--horizontal-spacing);
-}
-
-.typebadge.typebadge_content-type {
+.badge {
     --background: var(--sds-g-gray-3);
     --border-radius: var(--dx-g-spacing-smd);
     --color: var(--sds-g-gray-10);
@@ -35,40 +8,26 @@
     --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: var(--dx-g-text-xs);
+    font-size: 10px;
     font-weight: var(--dx-g-font-bold);
     padding: var(--vertical-spacing) var(--horizontal-spacing);
 }
 
-.typebadge.typebadge_content-type.size-small {
+.badge.size-small {
     --height: var(--dx-g-spacing-mlg);
-    --horizontal-spacing: var(--dx-g-spacing-sm);
-
-    font-size: 10px;
-}
-
-.typebadge.typebadge_metadata.size-small {
-    --height: var(--dx-g-spacing-md);
-    --horizontal-spacing: var(--dx-g-spacing-xs);
-
-    font-size: 8px;
-    letter-spacing: 0.5px;
-}
-
-.typebadge.typebadge_metadata span {
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width, unset);
-}
-
-.typebadge.typebadge_metadata.size-small span {
-    transform: translateY(1px);
 }
 
-@media screen and (max-width: 768px) {
-    .typebadge.typebadge_metadata:not(.size-small) {
-        height: var(--dx-g-spacing-lg);
-        padding: 0 var(--dx-g-spacing-sm);
-        font-size: var(--dx-g-text-2xs);
-    }
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/typeBadge/typeBadge.html

@@ -1,5 +1,11 @@
 <template>
     <div class={className} style={style}>
+        <dx-icon
+            if:true={iconSymbol}
+            symbol={iconSymbol}
+            sprite={iconSprite}
+            size="xsmall"
+        ></dx-icon>
         <span>{value}</span>
     </div>
 </template>

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

@@ -1,65 +1,168 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import {
-    TypeBadgeColor,
+    Brand,
     Color,
-    TypeBadgeSize,
-    BadgeType,
-    Brand
+    ContentType,
+    IconSprite,
+    IconSymbol,
+    TypeBadgeSize
 } from "typings/custom";
-import { colorToDxColors } from "dxUtils/css";
-
-const DEFAULT_TYPE = "typebadge_metadata";
-const VALID_BRANDS: Array<Brand> = [
-    "employees",
-    "marketing",
-    "partners",
-    "commerce",
-    "sales",
-    "success",
-    "integration",
-    "platform",
-    "industries",
-    "learning",
-    "service",
-    "analytics"
-];
+import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
+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";
-    @api value: string = "";
-    @api color?: TypeBadgeColor = "default";
-    @api type?: BadgeType = "metadata";
+    @api variant?: Brand | ContentType = "default";
+    @api color?: Color;
+    @api dark?: false;
+
+    @api
+    get iconSymbol(): IconSymbol | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSymbol
+            : this._iconSymbol;
+    }
+    set iconSymbol(value: IconSymbol | undefined) {
+        if (value) {
+            this._iconSymbol = value;
+        }
+    }
+
+    @api
+    get iconSprite(): IconSprite | undefined {
+        return this.variantIconData
+            ? this.variantIconData.iconSprite
+            : this._iconSprite;
+    }
+    set iconSprite(value: IconSprite | undefined) {
+        if (value) {
+            this._iconSprite = value;
+        }
+    }
+
+    @api
+    get value(): string {
+        return this._value || this.variantLabel || "";
+    }
+
+    set value(value) {
+        if (value) {
+            this._value = value;
+        }
+    }
+
+    private _value?: string;
+    private _iconSprite?: IconSprite;
+    private _iconSymbol?: IconSymbol;
+
+    private get variantIconData(): IconData | null {
+        if (this.variant && this.variant in contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantLabel(): string | null {
+        if (this.isContentType) {
+            return contentTypeLabels[this.variant as ContentType];
+        }
+        return null;
+    }
+
+    private get variantColorScope(): string | null {
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
+    }
+
+    private get isContentType(): boolean {
+        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(
-            "typebadge",
-            `size-${this.size}`,
-            (this.type && `typebadge_${this.type}`) || DEFAULT_TYPE
-        );
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
-        if (VALID_BRANDS.includes(this.color as Brand)) {
-            return this.buildStyleString({
-                background: `--dx-g-brand-${this.color}-color-background`,
-                color: `--dx-g-brand-${this.color}-color`
+        if (this.dark) {
+            return buildStyleColorVariables({
+                background: "--dx-g-purple-vibrant-40",
+                color: "--dx-g-brand-default-color-background"
             });
         }
-        const variables = colorToDxColors(this.color as Color);
-        if (variables) {
-            return this.buildStyleString(variables);
+        if (this.variantColorScope) {
+            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);
+            return buildStyleColorVariables(variables);
         }
         return "";
     }
-
-    private buildStyleString({
-        background,
-        color
-    }: {
-        background: string;
-        color: string;
-    }): string {
-        return `--color: var(${color}); --background: var(${background})`;
-    }
 }

package/src/modules/dxBaseElements/archiveCard/archiveCard.ts

@@ -1,10 +1,10 @@
 import { LightningElement, api } from "lwc";
-import { LinkTarget, Color } from "typings/custom";
+import { LinkTarget, ContentType } from "typings/custom";
 
 const MOBILE_QUERY = "(max-width: 640px)";
 
 export abstract class ArchiveCard extends LightningElement {
-    @api contentType: "Blog" | "Podcast" = "Blog";
+    @api contentType!: ContentType;
     @api href!: string;
     @api title!: string;
     @api target: LinkTarget = "_self";
@@ -12,10 +12,6 @@ export abstract class ArchiveCard extends LightningElement {
     private matchMedia!: MediaQueryList;
     protected mobile = false;
 
-    protected get badgeColor(): Color {
-        return this.contentType === "Blog" ? "teal" : "blue";
-    }
-
     connectedCallback(): void {
         this.matchMedia = window.matchMedia(MOBILE_QUERY);
         this.onMediaChange(this.matchMedia);

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
@@ -61,6 +61,15 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
+    @api
+    get showBanner() {
+        return this._showBanner && this.bannerMarkup;
+    }
+
+    set showBanner(value) {
+        this._showBanner = normalizeBoolean(value);
+    }
+
     private _navItems!: OptionWithNested[];
     private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
@@ -69,6 +78,7 @@ export abstract class HeaderBase extends LightningElement {
     private showMobileNavMenu: boolean = false;
     private showNavScrollShadow: boolean = false;
     protected isSearchOpen: boolean = false;
+    private _showBanner?: boolean = false;
 
     get url() {
         return this.href ? new URL(this.href!) : window.location;

package/src/modules/dxConstants/brands/brands.ts

@@ -0,0 +1,14 @@
+export const BRANDS = [
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics"
+];

package/src/modules/dxConstants/colors/colors.ts

@@ -0,0 +1,14 @@
+export const COLORS = [
+    "hot-orange",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "cloud-blue",
+    "blue",
+    "indigo",
+    "purple",
+    "violet",
+    "pink",
+    "red"
+];

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

@@ -0,0 +1,10 @@
+export const CONTENT_TYPES = [
+    "documentation",
+    "trailhead",
+    "blog",
+    "forum",
+    "api",
+    "event",
+    "website",
+    "podcast"
+];

package/src/modules/dxHelpers/card/card.css

@@ -170,7 +170,7 @@ a.dx-card-base:hover a.dx-card-base_borderless-image_link {
 dx-card-title:hover,
 .dx-card-base_link-hovered dx-card-title,
 a.dx-card-base:hover dx-card-title {
-    --dx-c-card-title-color: var(--dx-g-button-heading-color-hover);
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-50);
 }
 
 /* Line Limits */

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -83,7 +83,6 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 }
 
 .header_l2_group-title .subtitle {
-    transform: translateY(4px); /* ghost padding */
     margin-right: var(--dx-g-spacing-md);
 }
 
@@ -109,12 +108,14 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-.header-login-signup {
+.header-login-signup,
+.header-tbid-login {
     display: flex;
     align-items: center;
 }
 
-.header-login-signup dx-button {
+.header-login-signup dx-button,
+.header-tbid-login dw-tbid-login-menu {
     margin-left: var(--dx-g-spacing-smd);
 }
 

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -0,0 +1,145 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-sidebar-width: 275px;
+    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-background: white;
+    --dx-c-sidebar-button-border: white;
+    --dx-c-sidebar-button-color-hover: white;
+    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
+    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
+}
+
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.header {
+    box-sizing: content-box;
+    display: flex;
+    line-height: var(--dx-g-spacing-xl);
+    margin-bottom: 12px;
+}
+
+.padding-horizontal {
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.header-title {
+    line-height: inherit;
+}
+
+.header-toggle-button {
+    position: absolute;
+    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
+
+    --dx-c-button-opacity: 0;
+    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
+    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
+    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
+    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
+    --dx-c-button-custom-background-hover: var(
+        --dx-c-sidebar-button-background-hover
+    );
+    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
+}
+
+.header-toggle-icon {
+    margin: auto 0 auto auto;
+    color: var(--dx-g-blue-vibrant-30);
+}
+
+.header-toggle-icon dx-icon {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.container {
+    background-color: var(--dx-g-gray-95);
+    display: flex;
+    flex-direction: column;
+    height: var(--dx-c-sidebar-height);
+    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
+}
+
+.container:not(.container-mobile) {
+    --border-color: transparent;
+    --left-spacing: calc(
+        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
+    );
+
+    box-shadow: 2px 0 0 0 var(--border-color);
+    min-height: var(--dx-c-sidebar-min-height);
+    padding: var(--dx-c-sidebar-vertical-padding) 0
+        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
+    position: relative;
+}
+
+.collapsed.container:not(.container-mobile) {
+    background-color: transparent;
+}
+
+.collapsed.container:not(.container-border-active) {
+    --border-color: transparent;
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}
+
+.container.container-mobile {
+    width: 100%;
+}
+
+.container.container-mobile .header {
+    cursor: pointer;
+    line-height: var(--dx-g-spacing-2xl);
+}
+
+.container.container-mobile:not(.collapsed) .header {
+    background-color: #dddbda;
+}
+
+.container.container-mobile .header-title {
+    color: var(--dx-g-gray-10);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+}
+
+.container.container-mobile.collapsed {
+    height: unset;
+    padding-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header {
+    margin-bottom: 0;
+}
+
+.container.container-mobile.collapsed .header-toggle-icon dx-icon {
+    transform: rotateZ(-90deg);
+}
+
+.container.container-border-active {
+    --border-color: var(--dx-c-sidebar-button-color);
+}
+
+.search {
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search-box {
+    --dx-c-input-width: 100%;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/src/modules/dxUtils/async/async.ts

@@ -0,0 +1,45 @@
+/**
+ * Checks whether a condition is satisfied at a specified interval, stopping after a maximum amount
+ * of time (if specified). Returns a Promise that resolves with `true` if the condition was
+ * satisfied during polling (if a maximum time is specified, it can resolve with false if the
+ * condition was not satisfied within the maximum time).
+ *
+ * Usage:
+ *  await pollUntil(() => something.is.true, 200, 1000);
+ *
+ * @param {Function} condition the "check" callback that will be called to determine whether the
+ *  condition has been satisfied (satisfied === callback returns truthy value)
+ * @param {number} atIntervalMs value in milliseconds specifying how often to poll
+ * @param {number} [forMaximumMs] value in milliseconds specifying the maximum time to poll
+ * @returns {Promise}
+ */
+export function pollUntil(
+    condition: () => boolean,
+    atIntervalMs: number,
+    forMaximumMs?: number
+) {
+    return new Promise<boolean>((resolve) => {
+        let timeoutId: ReturnType<typeof setTimeout>;
+        const intervalId = setInterval(() => {
+            if (condition()) {
+                resolveWithCleanup(true);
+            }
+        }, atIntervalMs);
+        if (typeof forMaximumMs === "number") {
+            timeoutId = setTimeout(() => {
+                // One last check in case the condition was satisfied right before the end:
+                resolveWithCleanup(condition() || false);
+            }, forMaximumMs);
+        }
+        if (condition()) {
+            // Condition already fulfilled before intervals, no need to keep waiting!
+            resolveWithCleanup(true);
+        }
+
+        function resolveWithCleanup(success: boolean) {
+            clearInterval(intervalId);
+            clearTimeout(timeoutId);
+            resolve(success);
+        }
+    });
+}

package/src/modules/dxUtils/constants/constants.ts

@@ -1,14 +1 @@
 export * from "./breakpoints";
-
-export const DEFAULT_LANGUAGES = [
-    {
-        id: "en-us",
-        label: "language_english",
-        displayText: "English"
-    },
-    {
-        id: "ja-jp",
-        label: "language_japanese",
-        displayText: "日本語"
-    }
-];

package/src/modules/dxUtils/css/css.ts

@@ -41,3 +41,13 @@ export const colorToDxColors = (
 
 export const toDxColor = (color: string) =>
     ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;
+
+export const buildStyleColorVariables = ({
+    background,
+    color
+}: {
+    background: string;
+    color: string;
+}): string => {
+    return `--color: var(${color}); --background: var(${background})`;
+};

package/src/modules/dxUtils/lwc/lwc.ts

@@ -0,0 +1,9 @@
+export const setContainerInnerHtml = (
+    container: HTMLElement,
+    markup: string
+) => {
+    if (container && markup && markup !== "") {
+        // eslint-disable-next-line @lwc/lwc/no-inner-html
+        container.innerHTML = markup;
+    }
+};