@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     /* because this is used within other cards */
@@ -9,10 +9,13 @@
 
 .card-content {
     display: flex;
-    flex-direction: column;
     justify-content: flex-start;
 }
 
+.card-content:not(.dx-card-base_layout-horizontal) {
+    flex-direction: column;
+}
+
 .hide-datetime .datetime {
     display: none;
 }
@@ -23,7 +26,7 @@
 
 /* mobile responsiveness */
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .card-content:not(.dx-card-base_featured) {
         flex-direction: row;
     }

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

@@ -20,7 +20,10 @@
             />
         </a>
         <div
-            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            class="
+                dx-card-base_section-vertical dx-card-base_column
+                card_section-text
+            "
         >
             <span if:true={label} part="label" class="label dx-text-label-3">
                 {label}

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toDxColor } from "utils/css";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toDxColor } from "dxUtils/css";
 
 export default class CardContent extends LightningElement {
     @api authorHref?: string | null = null;
@@ -15,6 +15,7 @@ export default class CardContent extends LightningElement {
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
     @api label: string = "";
+    @api layout: "vertical" | "horizontal" = "vertical";
     @api subtitle?: string | null = null;
     @api target?: string | null = null;
     @api title!: string;
@@ -41,6 +42,7 @@ export default class CardContent extends LightningElement {
             "card-content",
             "dx-card-base",
             "dx-card-base_borderless",
+            `dx-card-base_layout-${this.layout}`,
             this.featured && "dx-card-base_featured",
             this.isDatetimeEmpty && "hide-datetime",
             this.isLinkHovered && "dx-card-base_link-hovered",

package/src/modules/dx/cardDemo/cardDemo.css

@@ -1 +1 @@
-@import "helpers/card";
+@import "dxHelpers/card";

package/src/modules/dx/cardDocs/cardDocs.css

@@ -1,9 +1,10 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --dx-c-heading-max-lines: 4;
+    --dx-c-card-grid-max-width: 60px;
 }
 
 .card {

package/src/modules/dx/cardDocs/cardDocs.html

@@ -7,7 +7,10 @@
             class="image dx-card-base_image"
         />
         <div
-            class="dx-card-base_section-vertical dx-card-base_column card_section-text"
+            class="
+                dx-card-base_section-vertical dx-card-base_column
+                card_section-text
+            "
         >
             <span class="dx-text-label-3">{label}</span>
             <dx-card-title title={title} target={target}></dx-card-title>

package/src/modules/dx/cardDocs/cardDocs.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement } from "typings/custom";
-import { stopPropagationOnSlotted } from "utils/slot";
+import { stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardDocs extends LightningElement {
     @api body!: string;

package/src/modules/dx/cardEvent/cardEvent.css

@@ -1,13 +1,17 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .card-event {
     display: flex;
+}
+
+.card-event:not(.dx-card-base_layout-horizontal) {
     flex-direction: column;
 }
 
 .details {
+    align-self: flex-start;
     display: flex;
     flex-direction: row;
     padding-top: var(--dx-g-spacing-small);
@@ -59,6 +63,15 @@
     padding-left: var(--dx-g-spacing-xs);
 }
 
+.subtitle-container {
+    display: flex;
+    align-items: center;
+}
+
+.subtitle-container > .subtitle {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
 .card-event:not(.dx-card-base_featured) .subtitle {
     display: none;
 }
@@ -67,6 +80,11 @@ dx-button {
     margin-top: var(--dx-g-spacing-sm);
 }
 
+dx-type-badge {
+    margin-top: var(--dx-g-spacing-sm);
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
 @media (max-width: 1024px) {
     .card-event:not(.dx-card-base_featured) .image-link {
         display: none;

package/src/modules/dx/cardEvent/cardEvent.html

@@ -35,12 +35,26 @@
                     target={target}
                     title={title}
                 ></dx-card-title>
+                <div class="subtitle-container">
+                    <span
+                        class="subtitle dx-text-label-1-dark"
+                        if:true={location}
+                        part="subtitle"
+                    >
+                        {location}
+                    </span>
+                    <dx-type-badge
+                        color={typeBadgeColor}
+                        value={type}
+                        if:true={type}
+                    ></dx-type-badge>
+                </div>
                 <span
-                    class="subtitle dx-text-label-1-dark"
-                    if:true={location}
-                    part="subtitle"
+                    class="dx-text-body-2"
+                    if:true={shortDescription}
+                    part="description"
                 >
-                    {location}
+                    {shortDescription}
                 </span>
                 <span class="card-event_detail-datetime-row">
                     <dx-formatted-date-time

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -7,10 +7,13 @@ export default class CardEvent extends LightningElement {
     @api href!: string;
     @api imgAlt?: string = "";
     @api imgSrc?: string | null = null;
+    @api layout: "vertical" | "horizontal" = "vertical";
     @api location?: string | null = null;
     @api startDatetime!: string;
     @api target: string = "_blank";
     @api title!: string;
+    @api shortDescription?: string;
+    @api type?: string;
 
     private isLinkHovered: boolean = false;
 
@@ -19,6 +22,7 @@ export default class CardEvent extends LightningElement {
             "card-event",
             "dx-card-base",
             "dx-card-base_borderless",
+            `dx-card-base_layout-${this.layout}`,
             this.featured && "dx-card-base_featured",
             this.isLinkHovered && "dx-card-base_link-hovered"
         );
@@ -31,4 +35,8 @@ export default class CardEvent extends LightningElement {
     private setLinkInactive() {
         this.isLinkHovered = false;
     }
+
+    private get typeBadgeColor() {
+        return this.type === "Webinar" ? "green" : "red";
+    }
 }

package/src/modules/dx/cardExpanded/cardExpanded.css

@@ -0,0 +1,50 @@
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+dx-card-title:hover {
+    --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
+}
+
+dx-formatted-date-time,
+.podcast-length {
+    /* Push down a little to align with dx-image-and-label */
+    margin-top: 3px;
+}
+
+.card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 3);
+}
+
+.card-extra-info {
+    gap: var(--dx-g-spacing-sm);
+    align-items: center;
+}
+
+.card-container {
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    padding-bottom: var(--dx-g-spacing-xl);
+    flex-direction: column;
+    gap: var(--dx-g-spacing-smd);
+}
+
+.card-container,
+.card-extra-info {
+    display: flex;
+}
+
+.card-dot-separator {
+    --size: 5px;
+
+    height: var(--size);
+    width: var(--size);
+    background-color: var(--dx-g-text-label-color);
+    border-radius: 100%;
+    margin-bottom: 3px;
+}
+
+.card-mobile .card-body {
+    --dx-c-max-lines: var(--dx-c-body-max-lines, 2);
+}

package/src/modules/dx/cardExpanded/cardExpanded.html

@@ -0,0 +1,31 @@
+<template>
+    <div class={containerClass}>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
+        <dx-card-title
+            if:true={title}
+            href={href}
+            target={target}
+            title={title}
+        ></dx-card-title>
+        <div class="card-extra-info dx-text-label-1-dark">
+            <dx-image-and-label
+                if:true={renderAuthor}
+                img-src={authorImage}
+                label={authorLabel}
+            ></dx-image-and-label>
+            <span class="podcast-length" if:true={renderLength}>{length}</span>
+            <span if:true={renderDot} class="card-dot-separator"></span>
+            <dx-formatted-date-time
+                if:true={date}
+                day="2-digit"
+                month="long"
+                year="numeric"
+                value={date}
+            ></dx-formatted-date-time>
+        </div>
+        <span if:true={body} class="card-body dx-text-body-2 dx-text-truncate">
+            {body}
+        </span>
+        <dx-topics if:true={hasTopics} topics={topics}></dx-topics>
+    </div>
+</template>

package/src/modules/dx/cardExpanded/cardExpanded.ts

@@ -0,0 +1,44 @@
+import { api } from "lwc";
+import { ArchiveCard } from "dxBaseElements/archiveCard";
+import cx from "classnames";
+
+export default class ExpandedCard extends ArchiveCard {
+    @api body!: string;
+    @api date: string | null = null;
+    @api topics: Array<string> = [];
+    @api authorLabel?: string | null = null;
+    @api authorImgSrc?: string | null = null;
+    @api length?: string;
+
+    private get isBlog(): boolean {
+        return this.contentType === "blog";
+    }
+
+    private get hasAuthor(): boolean {
+        return !!(this.authorImgSrc && this.authorLabel);
+    }
+
+    private get renderAuthor(): boolean {
+        return this.isBlog && this.hasAuthor;
+    }
+
+    private get renderLength(): boolean {
+        return !this.isBlog && !!this.length;
+    }
+
+    private get renderDot(): boolean {
+        return !!((this.renderAuthor || this.renderLength) && this.date);
+    }
+
+    private get hasTopics(): boolean {
+        return !!this.topics?.length;
+    }
+
+    private get authorImage(): string {
+        return !this.mobile && this.authorImgSrc ? this.authorImgSrc : "";
+    }
+
+    private get containerClass(): string {
+        return cx("card-container", this.mobile && "card-mobile");
+    }
+}

package/src/modules/dx/cardGridDocs/cardGridDocs.css

@@ -0,0 +1,74 @@
+.docs-action-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+}
+
+.docs-action-bar > .records-container {
+    margin-right: auto;
+}
+
+.docs-action-bar .filters-container {
+    display: flex;
+}
+
+.docs-action-bar .filters-container > *:not(:first-child),
+dx-input {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+dx-input {
+    --dx-c-input-width: 285px;
+}
+
+.pagination-container {
+    max-width: fit-content;
+    max-width: -moz-fit-content;
+    margin: var(--dx-g-spacing-lg) auto;
+}
+
+@media screen and (max-width: 1024px) {
+    dx-card-docs {
+        --dx-c-body-max-lines: 3;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-action-bar {
+        flex-direction: column-reverse;
+        width: 100%;
+        padding: 0;
+    }
+
+    .records-container {
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+
+    dx-input {
+        --dx-c-input-width: 100%;
+
+        width: 100%;
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .pagination-container {
+        width: 100%;
+        overflow: hidden;
+    }
+
+    .pagination-container > * {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+
+@media screen and (max-width: 460px) {
+    .docs-action-bar .records-container {
+        transform: initial;
+        padding: var(--dx-g-spacing-md) 0;
+    }
+}

package/src/modules/dx/cardGridDocs/cardGridDocs.html

@@ -0,0 +1,67 @@
+<template>
+    <div class="card-grid">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    cards.length }
+                </span>
+            </div>
+            <div class="filters-container">
+                <slot name="filters"></slot>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={onSearchChange}
+                value={value}
+            ></dx-input>
+        </div>
+        <dx-grid columns="four">
+            <template for:each={currentPageCards} for:item="card">
+                <dx-card-docs
+                    key={card.title}
+                    body={card.body}
+                    href={card.href}
+                    img-alt={card.imgAlt}
+                    img-src={card.imgSrc}
+                    label={card.label}
+                    title={card.title}
+                    target={card.target}
+                    show-mobile-img={card.showMobileImg}
+                >
+                    <template
+                        if:true={card.links}
+                        for:each={card.links}
+                        for:item="link"
+                    >
+                        <dx-button
+                            key={link.title}
+                            href={link.href}
+                            variant="inline"
+                        >
+                            { link.title }
+                        </dx-button>
+                    </template>
+                </dx-card-docs>
+            </template>
+        </dx-grid>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show="5"
+                onpagechange={goToPage}
+                if:false={hidePagination}
+            ></dx-pagination>
+        </div>
+    </div>
+    <dx-empty-state
+        title="Beep boop. That did not compute."
+        subtitle={emptyStateSubtitle}
+        if:true={showEmptyState}
+    ></dx-empty-state>
+</template>

package/src/modules/dx/cardGridDocs/cardGridDocs.ts

@@ -0,0 +1,86 @@
+import { LightningElement, api, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+import { DocsCard } from "typings/custom";
+
+const stringsMatch = (val1?: string, val2?: string): boolean => {
+    return (
+        typeof val1 === "string" &&
+        typeof val2 === "string" &&
+        val1.toLowerCase().includes(val2.toLowerCase())
+    );
+};
+
+export default class CardGridDocs extends LightningElement {
+    @api pageSize = 24;
+    @api
+    get cards(): DocsCard[] {
+        return this._cards;
+    }
+    set cards(value) {
+        this._cards = toJson(value);
+    }
+
+    private page: number = 1;
+    private _cards: DocsCard[] = [];
+    @track
+    private value?: string;
+
+    private get filteredCards(): DocsCard[] {
+        return this.value
+            ? this.cards.filter(({ title, body, label }) =>
+                  [title, body, label].some((val) =>
+                      stringsMatch(val, this.value)
+                  )
+              )
+            : this.cards;
+    }
+
+    private get currentPageCards() {
+        return this.filteredCards.slice(
+            this.startingRecord - 1,
+            this.endingRecord
+        );
+    }
+
+    private get startingRecord() {
+        return this.page === 1
+            ? this.page
+            : (this.page - 1) * this.pageSize + 1;
+    }
+
+    private get endingRecord() {
+        const defaultEndingRecord = this.pageSize * this.page;
+        return defaultEndingRecord > this.filteredCards.length
+            ? this.filteredCards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.filteredCards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
+    }
+
+    private get showEmptyState() {
+        return !this.filteredCards.length;
+    }
+
+    private onSearchChange(e: InputEvent): void {
+        const detail = `${e.detail}`;
+        this.value = detail === "" ? undefined : detail;
+
+        if (this.startingRecord > this.cards.length) {
+            this.page = 1;
+        }
+    }
+
+    private goToPage(e: CustomEvent) {
+        this.page = e.detail;
+    }
+}

package/src/modules/dx/cardMinimal/cardMinimal.css

@@ -0,0 +1,31 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: block;
+}
+
+a {
+    --dx-c-max-lines: var(--dx-c-title-max-lines, 3);
+
+    color: var(--dx-g-blue-vibrant-50);
+    flex-grow: 1;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-demi);
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}
+
+a + * {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.card-container {
+    align-items: center;
+    border-bottom: 1px solid var(--sds-g-gray-4);
+    display: flex;
+    padding: var(--dx-g-spacing-smd) 0;
+}

package/src/modules/dx/cardMinimal/cardMinimal.html

@@ -0,0 +1,8 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" href={href} target={target}>
+            <h4>{title}</h4>
+        </a>
+        <dx-type-badge variant={contentType} size={badgeSize}></dx-type-badge>
+    </div>
+</template>

package/src/modules/dx/cardMinimal/cardMinimal.ts

@@ -0,0 +1,3 @@
+import { ArchiveCard } from "dxBaseElements/archiveCard";
+
+export default class MinimalCard extends ArchiveCard {}

package/src/modules/dx/cardNews/cardNews.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 .dx-card-news {
     position: relative;
@@ -49,7 +49,7 @@ img {
 }
 
 .dx-card-size-large .cta {
-    margin: 24px 0;
+    margin: var(--dx-g-spacing-lg) 0;
 }
 
 .dx-card-size-large img {
@@ -62,7 +62,7 @@ img {
 
 @media screen and (min-width: 1024px) {
     .text {
-        padding: 34px;
+        padding: var(--dx-g-spacing-lg);
     }
 
     .dx-card-news {

package/src/modules/dx/cardNews/cardNews.html

@@ -4,6 +4,7 @@
         href={href}
         target={target}
         style={style}
+        onclick={trackClick}
         part="container"
     >
         <div class={textContainerClassName}>
@@ -17,6 +18,7 @@
                 <dx-button
                     if:false={hasLargeButton}
                     variant="inline"
+                    inline-text-color={buttonColor}
                     icon-symbol="forward"
                 >
                     {buttonText}