@salesforcedevs/dx-components 1.8.1-canary.2 → 1.10.3-fix-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.8.1-canary.2",
+    "version": "1.10.3-fix-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/audio/audio.css

@@ -1,9 +1,16 @@
 :host {
-    --dx-c-track-before-color: var(--dx-g-indigo-vibrant-30);
+    --dx-c-track-before-color: var(
+        --dx-g-audio-track-before-color,
+        var(--dx-g-indigo-vibrant-30)
+    );
     --dx-c-track-custom-dark-gray: rgba(62 62 62 / 100%);
     --dx-c-track-custom-medium-gray: rgba(195 195 195 / 100%);
     --dx-c-track-custom-light-gray: rgba(235 235 236 / 100%);
     --dx-c-track-thumb-size: 10px;
+    --dx-c-track-thumb-color: var(
+        --dx-g-audio-track-thumb-color,
+        var(--dx-g-indigo-vibrant-30)
+    );
     --dx-c-threedot-menu-item-padding: 14px;
     --dx-c-audio-player-padding: 6px 13px 13px;
     --dx-c-audio-background-color: var(--dx-g-audio-background-color, #e0e5f8);
@@ -97,7 +104,7 @@ dx-icon {
 .player-volume-slider::-webkit-slider-thumb,
 .player-seek-slider::-webkit-slider-thumb {
     appearance: none;
-    background-color: var(--dx-g-indigo-vibrant-30);
+    background-color: var(--dx-c-track-thumb-color);
     border: none;
     border-radius: 50%;
     height: var(--dx-c-track-thumb-size);
@@ -108,7 +115,7 @@ dx-icon {
 
 .player-volume-slider::-moz-range-thumb,
 .player-seek-slider::-moz-range-thumb {
-    background-color: var(--dx-g-indigo-vibrant-30);
+    background-color: var(--dx-c-track-thumb-color);
     border: none;
     border-radius: 50%;
     height: var(--dx-c-track-thumb-size);

package/src/modules/dx/audio/audio.ts

@@ -20,7 +20,7 @@ type PlaybackSpeed = (typeof formattedPlaybackSpeeds)[number];
 const uiConfig = {
     seekSlider: {
         trackColors: {
-            before: "var(--dx-g-indigo-vibrant-30)",
+            before: "var(--dx-c-track-before-color)",
             buffer: "var(--dx-c-track-custom-medium-gray)",
             after: "var(--dx-c-track-custom-light-gray)"
         } as TrackColors

package/src/modules/dx/cardContent/cardContent.css

@@ -15,7 +15,6 @@
 .card-content {
     display: flex;
     justify-content: flex-start;
-    position: relative;
 }
 
 .card-content:not(.dx-card-base_layout-horizontal) {
@@ -33,12 +32,11 @@
 /* mobile responsiveness */
 
 @media screen and (max-width: 768px) {
-    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation) {
+    .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }
 
-    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
-        .image-link {
+    .card-content:not(.dx-card-base_featured) .image-link {
         margin-right: var(--dx-g-card-img-spacing);
         margin-bottom: unset;
         flex-shrink: 0;
@@ -47,18 +45,13 @@
         padding-top: unset;
     }
 
-    .card-content.has-image:not(
-            .dx-card-base_featured,
-            .dx-card-base_fix-orientation
-        )
+    .card-content.has-image:not(.dx-card-base_featured)
         dx-image-and-label::part(image) {
         display: none;
     }
 
-    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
-        .label,
-    .card-content:not(.dx-card-base_featured, .dx-card-base_fix-orientation)
-        .datetime {
+    .card-content:not(.dx-card-base_featured) .label,
+    .card-content:not(.dx-card-base_featured) .datetime {
         display: none;
     }
 }

package/src/modules/dx/cardContent/cardContent.html

@@ -1,22 +1,23 @@
 <template>
     <div class={className}>
         <a
-            lwc:if={hasImage}
+            if:true={hasImage}
             href={href}
             onclick={handleClick}
             onmouseenter={setLinkHovered}
             onmouseleave={setLinkInactive}
             target={target}
             part="image"
-            class={imgAnchorClassName}
+            class="image-link dx-card-base_borderless-image_link"
             aria-label={imgLinkAriaLabel}
             style={backgroundStyle}
         >
             <slot name="image-badge"></slot>
+
             <img
-                lwc:if={imgSrc}
+                if:true={imgSrc}
                 alt={imgAlt}
-                class={imgClassName}
+                class="image dx-card-base_image dx-card-base_borderless-image"
                 src={imgSrc}
                 loading="lazy"
             />
@@ -24,12 +25,10 @@
         <div
             class="dx-card-base_section-vertical dx-card-base_column card_section-text"
         >
-            <span lwc:if={label} part="label" class="label dx-text-label-3">
+            <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}
             </span>
-
             <dx-card-title
-                lwc:if={header}
                 href={href}
                 target={target}
                 onclick={handleClick}
@@ -37,19 +36,14 @@
                 onmouseleave={setLinkInactive}
                 header={header}
             ></dx-card-title>
-            <div lwc:else>
-                <slot name="title"></slot>
-            </div>
-
             <span
                 class="subtitle dx-text-label-1-dark"
-                lwc:if={subtitle}
+                if:true={subtitle}
                 part="subtitle"
             >
                 {subtitle}
             </span>
-
-            <div class="authors" lwc:if={authors}>
+            <div class="authors" if:true={authors}>
                 <template for:each={authors} for:item="author">
                     <dx-image-and-label
                         key={author.key}
@@ -59,14 +53,9 @@
                     ></dx-image-and-label>
                 </template>
             </div>
-
-            <span lwc:if={body} class="body dx-text-body-2" part="body">
+            <span if:true={body} class="body dx-text-body-2" part="body">
                 {body}
             </span>
-            <span lwc:else class="body dx-text-body-2" part="body">
-                <slot name="body"></slot>
-            </span>
-
             <span class="datetime dx-text-body-3" part="datetime">
                 <slot
                     name="datetime"

package/src/modules/dx/cardContent/cardContent.ts

@@ -3,14 +3,13 @@ import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
 import { isSlotEmpty } from "dxUtils/slot";
 import { toDxColor } from "dxUtils/css";
-import { normalizeBoolean, toJson } from "dxUtils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import ImageAndLabel from "dx/imageAndLabel";
 
 export default class CardContent extends LightningElement {
     @api backgroundColor?: string | null = null;
     @api body?: string | null = null;
     @api featured?: boolean = false;
-    @api fixOrientation: boolean = false;
     @api href!: string;
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
@@ -21,7 +20,6 @@ export default class CardContent extends LightningElement {
     @api header!: string;
     @api hrefClick: any = null;
     @api contentType: string | null = null;
-
     @api
     get authors() {
         if (this._authors && this._authors.length) {
@@ -38,6 +36,7 @@ export default class CardContent extends LightningElement {
         }
         return undefined;
     }
+
     set authors(value: any) {
         if (value !== "undefined") {
             this._authors = (toJson(value) as Array<any>)?.filter(
@@ -47,24 +46,6 @@ export default class CardContent extends LightningElement {
     }
     private _authors?: Array<ImageAndLabel>;
 
-    @api
-    get borderless() {
-        return this._borderless;
-    }
-    set borderless(value: string | boolean) {
-        this._borderless = normalizeBoolean(value);
-    }
-    private _borderless = true;
-
-    @api
-    get imgLinkAriaLabel() {
-        return this._imgLinkAriaLabel;
-    }
-    set imgLinkAriaLabel(value: string) {
-        this._imgLinkAriaLabel = value;
-    }
-    private _imgLinkAriaLabel = `Read More About ${this.header}`;
-
     private isDatetimeEmpty: boolean = true;
     private isLinkHovered: boolean = false;
 
@@ -74,35 +55,23 @@ export default class CardContent extends LightningElement {
             : "";
     }
 
+    private get imgLinkAriaLabel() {
+        return `Read More About ${this.header}`;
+    }
+
     private get className(): string {
         return cx(
             "card-content",
             "dx-card-base",
+            "dx-card-base_borderless",
             `dx-card-base_layout-${this.layout}`,
-            this.borderless && "dx-card-base_borderless",
             this.featured && "dx-card-base_featured",
-            this.fixOrientation && "dx-card-base_fix-orientation",
             this.isDatetimeEmpty && "hide-datetime",
             this.isLinkHovered && "dx-card-base_link-hovered",
             this.hasImage && "has-image"
         );
     }
 
-    private get imgAnchorClassName(): string {
-        return cx(
-            "image-link",
-            this.borderless && "dx-card-base_borderless-image_link"
-        );
-    }
-
-    private get imgClassName(): string {
-        return cx(
-            "image",
-            "dx-card-base_image",
-            this.borderless && "dx-card-base_borderless-image"
-        );
-    }
-
     private get hasImage() {
         return this.imgSrc || this.backgroundColor;
     }

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.html

@@ -1,5 +1,5 @@
 <template>
-    <dx-tab-panel-list tabs={tabs}>
+    <dx-tab-panel-list tabs={tabs} initial-index={defaultActiveTabIndex}>
         <template for:each={_codeBlocks} for:item="codeBlockItem">
             <dx-tab-panel key={codeBlockItem.header}>
                 <!-- The header attribute is not passed intentionally because the tab title uses the header value. -->

package/src/modules/dx/tabbedCodeBlock/tabbedCodeBlock.ts

@@ -41,4 +41,16 @@ export default class TabbedCodeBlock extends LightningElement {
     get codeBlocks(): CodeBlockItem[] {
         return this._codeBlocks;
     }
+
+    // Logic to select html tab by default
+    get defaultActiveTabIndex() {
+        return JSON.stringify(
+            Math.max(
+                this.codeBlocks.findIndex((codeBlock) =>
+                    codeBlock.header?.endsWith("html")
+                ),
+                0
+            )
+        );
+    }
 }