@salesforcedevs/dx-components 0.0.0-alpha.0

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

@@ -0,0 +1,36 @@
+<template>
+    <div class={containerClass}>
+        <dx-type-badge
+            color={badgeColor}
+            type="content-type"
+            value={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() {
+        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,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 "dxBaseElements/archiveCard";
+
+export default class MinimalCard extends ArchiveCard {}

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

@@ -0,0 +1,159 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/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,39 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        onclick={trackClick}
+        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"
+                    inline-text-color={buttonColor}
+                    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,77 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "dxUtils/css";
+import {
+    ButtonTextColor,
+    CardNewsButtonType,
+    CardNewsImagePlacement,
+    CardNewsImageVerticalAlignment,
+    CardNewsSize,
+    CardNewsTextContainerSize
+} from "typings/custom";
+import { track } from "dxUtils/analytics";
+
+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 buttonColor?: ButtonTextColor = "dark";
+    @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`
+        );
+    }
+
+    private trackClick(e: Event) {
+        const payload = {
+            clickText: this.buttonText,
+            itemTitle: this.title,
+            elementType: "link",
+            destinationType: "internal",
+            ctaClick: true,
+            clickUrl: this.href
+        };
+        track(e.currentTarget!, "custEv_ctaLinkClick", payload);
+    }
+}

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

@@ -0,0 +1,19 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/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>