@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/cardGrid/cardGrid.css

@@ -0,0 +1,89 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+.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;
+}
+
+.filter-checkbox-group,
+.filter-button::part(container) {
+    --dx-c-checkbox-text-transform: capitalize;
+
+    text-transform: var(--dx-c-checkbox-text-transform);
+}
+
+.docs-action-bar .filters-container > *:not(:first-child),
+.docs-search-input {
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.docs-search-input {
+    --dx-c-input-width: 285px;
+}
+
+.docs-card {
+    --dx-c-body-max-lines: 4;
+    --dx-c-heading-max-lines: 2;
+}
+
+.pagination-container {
+    max-width: fit-content;
+    max-width: -moz-fit-content;
+    margin: var(--dx-g-spacing-lg) auto;
+}
+
+@media screen and (max-width: 1024px) {
+    .docs-card {
+        --dx-c-body-max-lines: 3;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .docs-action-bar {
+        flex-direction: column-reverse;
+        width: 100%;
+        padding: 0;
+    }
+
+    .docs-search-input {
+        --dx-c-input-width: 100%;
+
+        width: 100%;
+        margin-bottom: var(--dx-g-spacing-md);
+    }
+
+    .docs-action-bar .records-container {
+        transform: translateY(-100%);
+    }
+}
+
+@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/cardGrid/cardGrid.html

@@ -0,0 +1,46 @@
+<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={handleSearchChange}
+                value={searchTerm}
+            ></dx-input>
+        </div>
+        <dx-grid
+            columns={tileColumns}
+            if:false={showEmptyState}
+            class="card-container"
+        ></dx-grid>
+        <div style="display: none">
+            <slot name="cards" onslotchange={onSlotChange}></slot>
+        </div>
+        <div class="pagination-container" if:false={showEmptyState}>
+            <dx-pagination
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show={pagesToShow}
+                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/cardGrid/cardGrid.ts

@@ -0,0 +1,140 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardGrid extends LightningElement {
+    @api pageSize = 24;
+    @api searchDebounce = 500;
+    page = 1;
+
+    private searchTerm = "";
+    private matchDesktop!: MediaQueryList;
+    private matchMobile!: MediaQueryList;
+    private matchMobileSmall!: MediaQueryList;
+    private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
+    private searchTimeout?: number;
+    private cards: any[] = [];
+
+    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.cards.length
+            ? this.cards.length
+            : defaultEndingRecord;
+    }
+
+    private get totalPages() {
+        return Math.ceil(this.cards.length / this.pageSize);
+    }
+
+    private get hidePagination() {
+        return this.totalPages < 2;
+    }
+
+    private get emptyStateSubtitle() {
+        return (
+            "No results" +
+            (this.searchTerm !== "" ? ` for "${this.searchTerm}"` : "")
+        );
+    }
+
+    private get showEmptyState() {
+        return !this.cards.length;
+    }
+
+    private get tileColumns() {
+        return this.deviceType === "desktop" ? "three" : "two";
+    }
+
+    private get pagesToShow() {
+        return this.deviceType === "mobile-small" ? 3 : 5;
+    }
+
+    connectedCallback(): void {
+        this.matchDesktop = window.matchMedia("(min-width: 1024px)");
+        this.matchDesktop.addEventListener("change", this.handleDesktopView);
+
+        this.matchMobile = window.matchMedia(
+            "(min-width: 401px) and (max-width: 1023px)"
+        );
+        this.matchMobile.addEventListener("change", this.handleMobileView);
+
+        this.matchMobileSmall = window.matchMedia("(max-width: 340px)");
+        this.matchMobileSmall.addEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+
+        if (this.matchMobile.matches) {
+            this.deviceType = "mobile";
+        }
+        if (this.matchMobileSmall.matches) {
+            this.deviceType = "mobile-small";
+        }
+    }
+
+    disconnectedCallback(): void {
+        this.matchDesktop.removeEventListener("change", this.handleDesktopView);
+        this.matchMobile.removeEventListener("change", this.handleMobileView);
+        this.matchMobileSmall.removeEventListener(
+            "change",
+            this.handleMobileSmallView
+        );
+    }
+
+    renderedCallback(): void {
+        this.displayCurrentPage();
+    }
+
+    onSlotChange() {
+        const slots = Array.from(
+            this.template.querySelectorAll("slot")
+        ) as HTMLSlotElement[];
+        this.cards = Array.from(slots[1].assignedElements()[0].children);
+    }
+
+    handleDesktopView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "desktop";
+        }
+    };
+
+    handleMobileView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile";
+        }
+    };
+
+    handleMobileSmallView = (e: MediaQueryListEvent | MediaQueryList) => {
+        if (e.matches) {
+            this.deviceType = "mobile-small";
+        }
+    };
+
+    handleSearchChange(event: InputEvent): void {
+        window.clearTimeout(this.searchTimeout);
+        this.searchTimeout = window.setTimeout(() => {
+            this.dispatchEvent(
+                new CustomEvent("searchchange", { detail: event.detail })
+            );
+        }, this.searchDebounce);
+    }
+
+    goToPage(e: CustomEvent) {
+        this.page = e.detail;
+        this.displayCurrentPage();
+    }
+
+    displayCurrentPage() {
+        const cardContainer = this.template.querySelector(".card-container");
+        if (cardContainer) {
+            cardContainer.innerHTML = "";
+            this.cards
+                .slice(this.startingRecord - 1, this.endingRecord)
+                .map((node) => cardContainer?.appendChild(node));
+        }
+    }
+}

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

@@ -0,0 +1,31 @@
+@import "helpers/reset";
+@import "helpers/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,13 @@
+<template>
+    <div class="card-container">
+        <a class="dx-text-truncate" href={href} target={target}>
+            <h4>{title}</h4>
+        </a>
+        <dx-type-badge
+            color={badgeColor}
+            size={badgeSize}
+            type="content-type"
+            value={contentType}
+        ></dx-type-badge>
+    </div>
+</template>

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

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

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

@@ -0,0 +1,159 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.dx-card-news {
+    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-heading-3 {
+    margin: 4px 0 4px 0;
+    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-heading-3 {
+    font-size: 30px;
+    letter-spacing: 0.3px;
+    line-height: 40px;
+    margin: 4px 0 10px 0;
+}
+
+.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;
+}
+
+.is-dark dx-button {
+    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-60);
+}
+
+@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-heading-3 {
+        letter-spacing: 0.1px;
+    }
+
+    img,
+    .text {
+        display: block;
+    }
+
+    .dx-card-news-img-placement-top {
+        flex-direction: column-reverse;
+    }
+
+    .dx-card-news-img-placement-bottom {
+        flex-direction: column;
+    }
+
+    .dx-card-news-img-placement-right .text {
+        max-width: 50%;
+    }
+
+    .dx-card-news-img-placement-right .text.large {
+        max-width: 75%;
+    }
+
+    /* Pushed to the right, centered vertically */
+    .dx-card-news-img-placement-right img {
+        position: absolute;
+        width: 100%;
+        right: 0;
+        max-width: 50%;
+    }
+
+    .dx-card-size-normal .dx-text-heading-3 {
+        font-size: var(--dx-g-text-xl);
+        line-height: 28px;
+    }
+
+    .dx-card-size-normal p {
+        letter-spacing: 0.2px;
+        margin: 12px 0 0 0;
+    }
+
+    .dx-card-size-normal .cta {
+        margin: 14px 0 -2px 0;
+    }
+
+    .dx-card-size-large .dx-text-heading-3 {
+        font-size: var(--dx-g-text-2xl);
+        line-height: 40px;
+        letter-spacing: 0.6px;
+        margin: 10px 0 0 0;
+    }
+
+    .dx-card-size-large p {
+        font-size: 20px;
+        line-height: 32px;
+        margin: 10px 0 0 0;
+        letter-spacing: 0.72px;
+    }
+
+    .dx-card-size-large .cta {
+        margin: 24px 0 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%;
+    }
+}

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

@@ -0,0 +1,37 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        part="container"
+    >
+        <div class={textContainerClassName}>
+            <h3 class="dx-text-heading-3">{title}</h3>
+            <p>{body}</p>
+            <div class="cta">
+                <dx-button if:true={hasLargeButton} size="large">
+                    {buttonText}
+                </dx-button>
+
+                <dx-button
+                    if:false={hasLargeButton}
+                    variant="inline"
+                    icon-symbol="forward"
+                >
+                    {buttonText}
+                </dx-button>
+            </div>
+        </div>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            aria-label={imgAlt}
+            role="img"
+            src={imgSrc}
+            class={imgClassName}
+            style={imgStyle}
+            part="image"
+        />
+    </a>
+</template>

package/src/modules/dx/cardNews/cardNews.ts

@@ -0,0 +1,62 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "utils/css";
+import {
+    CardNewsButtonType,
+    CardNewsImagePlacement,
+    CardNewsImageVerticalAlignment,
+    CardNewsSize,
+    CardNewsTextContainerSize
+} from "typings/custom";
+
+export default class CardNews extends LightningElement {
+    @api backgroundColor?: string = "indigo-vibrant-40";
+    @api body!: string;
+    @api buttonText?: string = "";
+    @api buttonType!: CardNewsButtonType;
+    @api color?: string = "white";
+    @api dark?: boolean = false;
+    @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 title!: string;
+    @api textContainerWidth?: CardNewsTextContainerSize = "small";
+
+    private get style(): string {
+        const background = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+        const color = `color: ${toDxColor(this.color)};`;
+        return [background, color].join(" ");
+    }
+
+    private get className(): string {
+        return cx(
+            "dx-card-news",
+            "dx-card-base",
+            `dx-card-size-${this.size}`,
+            this.dark && `is-dark`,
+            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`
+        );
+    }
+}

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.css

@@ -0,0 +1,19 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/card";
+
+.card-podcast-episode {
+    display: flex;
+    flex-direction: row;
+}
+
+@media (max-width: 1024px) {
+    .datetime {
+        margin-bottom: 0 !important;
+    }
+
+    .body,
+    .length {
+        display: none;
+    }
+}

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.html

@@ -0,0 +1,36 @@
+<template>
+    <div class={className}>
+        <div class="dx-card-base_section-horizontal">
+            <a
+                aria-label="Go To Article"
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+            >
+                <dx-icon-badge
+                    class="dx-play-button"
+                    symbol="play"
+                    background-color="white"
+                    slot="image-badge"
+                ></dx-icon-badge>
+            </a>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+                title={title}
+            ></dx-card-title>
+            <span class="datetime dx-text-label-1-dark">
+                <dx-relative-date-time
+                    value={_datetime}
+                ></dx-relative-date-time>
+            </span>
+            <span class="body dx-text-body-2">{body}</span>
+            <span class="length dx-text-body-3">{length}</span>
+        </div>
+    </div>
+</template>

package/src/modules/dx/cardPodcastEpisode/cardPodcastEpisode.ts

@@ -0,0 +1,36 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class CardPodcastEpisode extends LightningElement {
+    @api body!: string;
+    @api datetime!: string;
+    @api dateTime?: string | null = null;
+    @api href!: string;
+    @api length!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private isLinkHovered: boolean = false;
+
+    // LWC is being compiled so that datetime is being interpreted as date-time
+    // ONLY from from the implementation in dx-card-podcast-episode-provider
+    private get _datetime() {
+        return this.datetime || this.dateTime;
+    }
+
+    private get className() {
+        return cx(
+            "card-podcast-episode",
+            "dx-card-base_borderless",
+            this.isLinkHovered && "dx-card-base_link-hovered"
+        );
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+}

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.css

@@ -0,0 +1,3 @@
+:host {
+    display: contents;
+}

package/src/modules/dx/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.html

@@ -0,0 +1,12 @@
+<template>
+    <template for:each={episodes} for:item="episode">
+        <dx-card-podcast-episode
+            body={episode.body}
+            datetime={episode.datetime}
+            href={episode.href}
+            key={episode.id}
+            length={episode.length}
+            title={episode.title}
+        ></dx-card-podcast-episode>
+    </template>
+</template>