@salesforcedevs/dx-components 1.3.230-canary.0 → 1.3.231

package/lwc.config.json

@@ -11,7 +11,6 @@
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",
-        "dx/buttonThemeable",
         "dx/buttonToggle",
         "dx/cardBlogPost",
         "dx/cardCallout",
@@ -23,7 +22,6 @@
         "dx/cardGridDocs",
         "dx/cardMinimal",
         "dx/cardNews",
-        "dx/cardNewsThemeable",
         "dx/cardPodcastEpisode",
         "dx/cardSmall",
         "dx/cardStep",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.230-canary.0",
+    "version": "1.3.231",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/mainContentHeader/mainContentHeader.css

@@ -44,6 +44,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
+    align-items: flext-start;
     overflow: visible;
 }
 

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

@@ -63,6 +63,9 @@ const resultsTemplatesInnerHtml = `
             <a
                 href="<%= raw.uri %>"
                 class="dx-result-title"
+                <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                    target="_blank"
+                <% } %>
             >
                 <%= title %>
                 <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
@@ -93,6 +96,9 @@ const resultsTemplatesInnerHtml = `
                 <a
                     href="<%= raw.uri %>"
                     class="dx-result-title"
+                    <% if (!raw.uri.includes('developer.salesforce.com') && !raw.uri.includes('developer-website-s.herokuapp.com')) { %>
+                        target="_blank"
+                    <% } %>
                 >
                     <% if (title) { %>
                         <%= title %>

package/src/modules/dx/buttonThemeable/buttonThemeable.css

@@ -1,138 +0,0 @@
-@import "dxHelpers/reset";
-
-:host {
-    width: min-content;
-    font-size: inherit;
-
-    --dx-c-button-justify-content: center;
-    --dx-c-button-opacity: 1;
-    --dx-c-button-font-size: var(--dx-g-text-sm);
-    --dx-c-button-font-weight: var(--dx-g-font-normal);
-    --dx-c-button-display: flex;
-}
-
-.button {
-    background-color: var(--dx-button-themeable-background-color);
-    border: 1px solid var(--dx-button-themeable-border-color);
-    color: var(--dx-button-themeable-text-color);
-    opacity: var(--dx-c-button-opacity);
-    width: inherit;
-    display: var(--dx-c-button-display);
-    align-items: center;
-    justify-content: var(--dx-c-button-justify-content);
-    user-select: none;
-    white-space: nowrap;
-    font-size: var(--dx-c-button-font-size);
-    transition: var(--dx-g-transition-hue-1x);
-    padding: var(--dx-c-button-vertical-spacing, 0)
-        var(--dx-c-button-horizontal-spacing, var(--dx-g-spacing-md));
-    border-radius: var(--dx-g-spacing-xs);
-    font-weight: var(--dx-c-button-font-weight);
-}
-
-.button:focus {
-    opacity: 1;
-}
-
-.button:focus:not(:focus-visible) {
-    outline: none;
-}
-
-.button:hover,
-:host([aria-expanded="true"]) .button {
-    background-color: var(--dx-button-themeable-background-hover-color);
-    border-color: var(--dx-button-themeable-border-hover-color);
-    color: var(--dx-button-themeable-text-hover-color);
-}
-
-.button.variant_inline-inherit {
-    font-size: inherit;
-    text-transform: inherit;
-    user-select: inherit;
-    white-space: normal;
-}
-
-.button dx-icon {
-    display: inline;
-    vertical-align: var(--dx-c-button-icon-vertical-align, unset);
-}
-
-.button.variant_inline dx-icon,
-.button.variant_inline-inherit dx-icon {
-    display: inline-block;
-}
-
-.button > span {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    vertical-align: var(--dx-c-button-span-vertical-align, unset);
-}
-
-.button:not(.variant_inline-inherit).font-display {
-    font-family: var(--dx-g-font-display);
-}
-
-.button.font-sans {
-    font-family: var(--dx-g-font-sans);
-}
-
-.button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-g-spacing-sm);
-}
-
-.button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-g-spacing-sm);
-}
-
-.button.style-icon.slot-empty {
-    padding: 0;
-}
-
-.icon-right {
-    flex-direction: row;
-}
-
-.icon-left {
-    flex-direction: row-reverse;
-}
-
-/* sizes */
-
-.button.size-large {
-    height: var(--dx-g-spacing-3xl);
-}
-
-.button.size-large.style-icon.slot-empty {
-    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-3xl));
-}
-
-.button.size-small {
-    height: var(--dx-g-spacing-xl);
-}
-
-.button.size-small.style-icon.slot-empty {
-    width: var(--dx-c-slot-empty-width, var(--dx-g-spacing-xl));
-}
-
-.button.size-hero {
-    font-size: var(--dx-g-text-lg);
-    height: 52px;
-}
-
-.button.size-hero.style-icon.slot-empty {
-    width: var(--dx-c-slot-empty-width, 52px);
-}
-
-/* inline */
-.button.variant_inline,
-.button.variant_inline-inherit {
-    display: inline;
-    padding: 0;
-    height: unset; /* please leave this here, actually is having an effect */
-    width: unset; /* please leave this here, actually is having an effect */
-}
-
-.button.state-disabled {
-    pointer-events: none;
-}

package/src/modules/dx/buttonThemeable/buttonThemeable.html

@@ -1,43 +0,0 @@
-<template>
-    <button
-        if:false={href}
-        class={className}
-        disabled={disabled}
-        type={type}
-        aria-label={ariaLabel}
-        part="container"
-    >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
-        </span>
-        <dx-icon
-            if:true={showIcon}
-            sprite={iconSprite}
-            size={iconSize}
-            symbol={iconSymbol}
-        ></dx-icon>
-        <span class="temp-loading-message" if:true={loading}>Loading...</span>
-    </button>
-    <a
-        if:true={href}
-        href={href}
-        target={target}
-        rel={rel}
-        class={className}
-        disabled={disabled}
-        download={download}
-        aria-label={ariaLabel}
-        part="container"
-    >
-        <span if:false={loading}>
-            <slot onslotchange={onSlotChange}></slot>
-        </span>
-        <dx-icon
-            if:true={showIcon}
-            sprite={iconSprite}
-            size={iconSize}
-            symbol={iconSymbol}
-        ></dx-icon>
-        <span class="temp-loading-message" if:true={loading}>Loading...</span>
-    </a>
-</template>

package/src/modules/dx/buttonThemeable/buttonThemeable.ts

@@ -1,82 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import {
-    ButtonTarget,
-    ButtonVariant,
-    ButtonSize,
-    IconSprite,
-    IconSize,
-    IconSymbol,
-    LightningSlotElement
-} from "typings/custom";
-
-export default class ButtonThemeable extends LightningElement {
-    private _didSetFormAttribute = false;
-    @api ariaLabel: string = "";
-    @api disabled: boolean | null = null;
-    @api iconSize?: IconSize = "small";
-    @api iconSprite?: IconSprite = "utility";
-    @api iconSymbol?: IconSymbol;
-    @api iconPosition?: "right" | "left" = "right";
-    @api loading: boolean = false;
-    @api size: ButtonSize = "small";
-    @api variant: ButtonVariant = "primary";
-    @api font: "display" | "sans" = "display";
-    @api form: string | undefined;
-    @api name?: string;
-    @api value?: any;
-
-    // button props
-    @api type: "submit" | "reset" | "button" = "button";
-
-    // link props
-    @api href: string | null = null;
-    @api download: string | null = null;
-    @api target: ButtonTarget = null;
-    @api rel: string | null = null;
-
-    @api focus() {
-        const button = this.template.querySelector(".button");
-        if (button) {
-            button.focus();
-        }
-    }
-
-    private isSlotEmpty: boolean = true;
-
-    private get showIcon(): boolean {
-        return !!this.iconSymbol && !this.loading;
-    }
-
-    private get className(): string {
-        return cx(
-            "button",
-            this.disabled && "state-disabled",
-            `variant_${this.variant}`,
-            this.loading && "state-loading",
-            `size-${this.size}`,
-            !!this.iconSymbol && "style-icon",
-            this.isSlotEmpty && "slot-empty",
-            `font-${this.font}`,
-            this.iconPosition === "right" ? "icon-right" : "icon-left"
-        );
-    }
-
-    renderedCallback() {
-        if (
-            !this.href &&
-            typeof this.form !== "undefined" &&
-            !this._didSetFormAttribute
-        ) {
-            this._didSetFormAttribute = true;
-            this.template
-                .querySelector("button")
-                ?.setAttribute("form", this.form);
-        }
-    }
-
-    private onSlotChange(e: LightningSlotElement) {
-        const slot = e.target;
-        this.isSlotEmpty = slot.assignedElements().length !== 0;
-    }
-}

package/src/modules/dx/cardNewsThemeable/cardNewsThemeable.css

@@ -1,203 +0,0 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
-
-:host {
-    --dx-c-feature-img-padding-top: 0;
-    --dx-c-feature-img-padding-right: 0;
-    --dx-c-feature-img-padding-left: 0;
-    --dx-c-feature-img-padding-bottom: 0;
-    --dx-card-news-themeable-background-color: var(
-        --dx-g-background-color-tertiary,
-        var(--dx-g-indigo-vibrant-40)
-    );
-    --dx-card-news-themeable-text-color: var(
-        --dx-g-body-text-color-tertiary,
-        white
-    );
-    --dx-button-themeable-background-color: var(
-        --dx-g-button-background-color-tertiary,
-        transparent
-    );
-    --dx-button-themeable-text-color: var(
-        --dx-g-button-text-color-tertiary,
-        white
-    );
-    --dx-button-themeable-background-hover-color: var(
-        --dx-g-button-background-color-hover-tertiary,
-        var(--dx-button-themeable-background-color)
-    );
-    --dx-button-themeable-text-hover-color: var(
-        --dx-g-button-text-color-hover-tertiary,
-        var(--dx-button-themeable-text-color)
-    );
-    --dx-button-themeable-border-color: var(
-        --dx-g-button-border-color-tertiary,
-        var(--dx-button-themeable-background-color)
-    );
-    --dx-button-themeable-border-hover-color: var(
-        --dx-g-button-border-color-hover-tertiary,
-        var(--dx-button-themeable-background-hover-color)
-    );
-}
-
-.dx-card-base.dx-card-news {
-    background-color: var(--dx-card-news-themeable-background-color);
-    color: var(--dx-card-news-themeable-text-color);
-    position: relative;
-    display: flex;
-    align-items: stretch;
-    flex-direction: column;
-    justify-content: flex-start;
-    box-shadow: var(--dx-g-box-shadow-sm);
-}
-
-.text {
-    flex-grow: 1;
-    padding: var(--dx-g-card-padding) 24px 0 20px;
-    z-index: 1;
-}
-
-.dx-text-display-4 {
-    margin: 4px 0;
-    color: var(--dx-card-news-themeable-text-color, inherit);
-}
-
-p {
-    font-size: 16px;
-    letter-spacing: 0.15px;
-    line-height: 24px;
-}
-
-.cta {
-    margin: 16px 0;
-}
-
-img {
-    display: none;
-    margin: 0;
-}
-
-.dx-card-size-large .dx-text-display-4 {
-    font-size: 30px;
-    letter-spacing: 0.3px;
-    line-height: 40px;
-    margin: 4px 0 10px;
-}
-
-.dx-card-size-large p {
-    letter-spacing: 0.2px;
-}
-
-.dx-card-size-large .cta {
-    margin: var(--dx-g-spacing-lg) 0;
-}
-
-.dx-card-size-large img {
-    display: block;
-}
-
-@media screen and (min-width: 1024px) {
-    .text {
-        padding: var(--dx-g-spacing-lg);
-    }
-
-    .dx-card-news {
-        position: relative;
-        min-height: 380px;
-        display: flex;
-        align-items: stretch;
-        justify-content: flex-start;
-        box-shadow: var(--dx-g-box-shadow-sm);
-    }
-
-    .dx-text-display-4 {
-        letter-spacing: 0.1px;
-    }
-
-    img,
-    .text {
-        display: block;
-    }
-
-    .dx-card-news.dx-card-news-img-placement-top {
-        flex-direction: column-reverse;
-    }
-
-    .dx-card-news.dx-card-news-img-placement-bottom {
-        flex-direction: column;
-    }
-
-    .dx-card-news.dx-card-news-img-placement-right .text {
-        max-width: 50%;
-    }
-
-    .dx-card-news.dx-card-news-img-placement-right .text.large {
-        max-width: 75%;
-    }
-
-    /* Pushed to the right, centered vertically */
-    .dx-card-news.dx-card-news-img-placement-right img {
-        position: absolute;
-        width: 100%;
-        right: 0;
-        max-width: 50%;
-    }
-
-    .dx-card-size-normal .dx-text-display-4 {
-        font-size: var(--dx-g-text-xl);
-        line-height: 28px;
-    }
-
-    .dx-card-size-normal p {
-        letter-spacing: 0.2px;
-        margin: 12px 0 0;
-    }
-
-    .dx-card-size-normal .cta {
-        margin: 14px 0 -2px;
-    }
-
-    .dx-card-size-large .dx-text-display-4 {
-        font-size: var(--dx-g-text-2xl);
-        line-height: 40px;
-        letter-spacing: 0.6px;
-        margin: 10px 0 0;
-    }
-
-    .dx-card-size-large p {
-        font-size: 20px;
-        line-height: 32px;
-        margin: 10px 0 0;
-        letter-spacing: 0.72px;
-    }
-
-    .dx-card-size-large .cta {
-        margin: 24px 0 0;
-    }
-
-    .dx-card-news-img-vertical-align-middle {
-        top: 50%;
-        transform: translate(0, -50%);
-    }
-
-    .dx-card-news-img-vertical-align-bottom {
-        bottom: 0;
-    }
-
-    .dx-card-news-img-vertical-align-top {
-        top: 0;
-    }
-
-    .dx-card-news-img-placement-right img.dx-card-news-img-small,
-    .dx-card-news-img-small {
-        max-width: 25%;
-    }
-}
-
-.dx-card-news-img-padding {
-    padding: var(--dx-c-feature-img-padding-top)
-        var(--dx-c-feature-img-padding-right)
-        var(--dx-c-feature-img-padding-bottom)
-        var(--dx-c-feature-img-padding-left);
-}

package/src/modules/dx/cardNewsThemeable/cardNewsThemeable.html

@@ -1,42 +0,0 @@
-<template>
-    <a
-        class={className}
-        href={href}
-        target={target}
-        onclick={trackClick}
-        part="container"
-    >
-        <div class={textContainerClassName}>
-            <h3 class="dx-text-display-4">
-                <dx-formatted-rich-text value={title}></dx-formatted-rich-text>
-            </h3>
-            <p>{body}</p>
-            <div class="cta" onclick={toggleTheme}>
-                <dx-button-themeable if:true={hasLargeButton} size="large">
-                    {buttonText}
-                </dx-button-themeable>
-
-                <dx-button-themeable
-                    class="inline-button"
-                    if:false={hasLargeButton}
-                    variant="inline"
-                    icon-symbol="forward"
-                >
-                    {buttonText}
-                </dx-button-themeable>
-            </div>
-        </div>
-
-        <img
-            if:true={imgSrc}
-            alt={imgAlt}
-            aria-label={imgAlt}
-            role="img"
-            src={imgSrc}
-            class={imgClassName}
-            style={imgStyle}
-            part="image"
-            loading="lazy"
-        />
-    </a>
-</template>

package/src/modules/dx/cardNewsThemeable/cardNewsThemeable.ts

@@ -1,76 +0,0 @@
-import { LightningElement, api } from "lwc";
-import cx from "classnames";
-import {
-    CardNewsButtonType,
-    CardNewsImagePlacement,
-    CardNewsImageVerticalAlignment,
-    CardNewsSize,
-    CardNewsTextContainerSize
-} from "typings/custom";
-import { track } from "dxUtils/analytics";
-
-export default class CardNewsThemeable extends LightningElement {
-    @api title!: string;
-    @api body!: string;
-    @api buttonText?: string = "";
-    @api buttonType!: CardNewsButtonType;
-    @api size?: CardNewsSize = "normal";
-    @api href!: string;
-    @api imgAlt?: string = "";
-    @api imgSrc?: string | null = null;
-    @api imgPlacement?: CardNewsImagePlacement = "top";
-    @api imgVerticalAlign?: CardNewsImageVerticalAlignment | null = null;
-    @api target?: string | null = null;
-    @api textContainerWidth?: CardNewsTextContainerSize = "small";
-
-    private get className(): string {
-        return cx(
-            "dx-card-news",
-            "dx-card-base",
-            `dx-card-size-${this.size}`,
-            this.imgSrc && `dx-card-news-img-placement-${this.imgPlacement}`
-        );
-    }
-
-    private get hasLargeButton(): boolean {
-        return this.buttonType === "large";
-    }
-
-    private get textContainerClassName(): string {
-        return cx("text", this.textContainerWidth);
-    }
-
-    private get imgClassName(): string {
-        return cx(
-            this.imgVerticalAlign &&
-                `dx-card-news-img-vertical-align-${this.imgVerticalAlign}`,
-            this.textContainerWidth === "large" && `dx-card-news-img-small`,
-            `dx-card-news-img-padding`
-        );
-    }
-
-    private trackClick(e: Event) {
-        const payload = {
-            click_text: this.buttonText,
-            click_url: this.href.includes("http")
-                ? this.href
-                : `${window.location.origin}${this.href}`,
-            element_title: this.title,
-            element_type: "link",
-            content_category: "cta"
-        };
-        track(e.currentTarget!, "custEv_ctaLinkClick", payload);
-        track(e.currentTarget!, "custEv_linkClick", payload);
-    }
-
-    private toggleTheme(event: Event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const root = document.querySelector(":root");
-        if (root?.classList.contains("dark")) {
-            root.classList.remove("dark");
-        } else {
-            root?.classList.add("dark");
-        }
-    }
-}