@salesforcedevs/dx-components 0.0.0-alpha.0

package/src/modules/dx/cardCallout/cardCallout.html

@@ -0,0 +1,15 @@
+<template>
+    <a
+        class={className}
+        href={href}
+        target={target}
+        style={style}
+        onclick={sendGtm}
+    >
+        <h3 class="dx-text-heading-3">{title}</h3>
+        <span class="dx-text-button-light">
+            {label}
+            <dx-icon symbol="forward"></dx-icon>
+        </span>
+    </a>
+</template>

package/src/modules/dx/cardCallout/cardCallout.ts

@@ -0,0 +1,41 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
+
+export const ANALYTICS_EVENT_NAME = "custEv_ctaLinkClick";
+
+export default class CardCallout extends LightningElement {
+    @api backgroundColor: string = "indigo-vibrant-40";
+    @api color: string = "white";
+    @api href!: string;
+    @api label: string = "";
+    @api target?: string;
+    @api title!: string;
+
+    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(
+            "card-callout",
+            "dx-card-base",
+            "dx-card-base_section-vertical"
+        );
+    }
+
+    private sendGtm(e: PointerEvent) {
+        track(e.currentTarget, ANALYTICS_EVENT_NAME, {
+            clickURL: this.href,
+            itemTitle: this.title,
+            clickText: this.label,
+            elementType: "card callout",
+            destinationType: "internal"
+        });
+    }
+}

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

@@ -0,0 +1,52 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    /* because this is used within other cards */
+    height: 100%;
+}
+
+.card-content {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.card-content:not(.dx-card-base_layout-horizontal) {
+    flex-direction: column;
+}
+
+.hide-datetime .datetime {
+    display: none;
+}
+
+.hide-datetime .body {
+    margin-bottom: 0 !important;
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 768px) {
+    .card-content:not(.dx-card-base_featured) {
+        flex-direction: row;
+    }
+
+    .card-content:not(.dx-card-base_featured) .image-link {
+        margin-right: var(--dx-g-card-img-spacing);
+        margin-bottom: unset;
+        flex-shrink: 0;
+        height: 80px;
+        width: 80px;
+        padding-top: unset;
+    }
+
+    .card-content.has-image:not(.dx-card-base_featured)
+        dx-image-and-label::part(image) {
+        display: none;
+    }
+
+    .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

@@ -0,0 +1,62 @@
+<template>
+    <div class={className}>
+        <a
+            if:true={hasImage}
+            href={href}
+            onmouseenter={setLinkHovered}
+            onmouseleave={setLinkInactive}
+            target={target}
+            part="image"
+            class="image-link dx-card-base_borderless-image_link"
+            aria-label={imgLinkAriaLabel}
+            style={backgroundStyle}
+        >
+            <slot name="image-badge"></slot>
+            <img
+                if:true={imgSrc}
+                alt={imgAlt}
+                class="image dx-card-base_image dx-card-base_borderless-image"
+                src={imgSrc}
+            />
+        </a>
+        <div
+            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}
+            </span>
+            <dx-card-title
+                href={href}
+                target={target}
+                onmouseenter={setLinkHovered}
+                onmouseleave={setLinkInactive}
+                title={title}
+            ></dx-card-title>
+            <span
+                class="subtitle dx-text-label-1-dark"
+                if:true={subtitle}
+                part="subtitle"
+            >
+                {subtitle}
+            </span>
+            <dx-image-and-label
+                if:true={hasAuthor}
+                href={authorHref}
+                img-src={authorImgSrc}
+                label={authorLabel}
+            ></dx-image-and-label>
+            <span if:true={body} class="body dx-text-body-2" part="body">
+                {body}
+            </span>
+            <span class="datetime dx-text-body-3" part="datetime">
+                <slot
+                    name="datetime"
+                    onslotchange={onDatetimeSlotChange}
+                ></slot>
+            </span>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,68 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toDxColor } from "dxUtils/css";
+
+export default class CardContent extends LightningElement {
+    @api authorHref?: string | null = null;
+    @api authorImgSrc?: string | null = null;
+    @api authorLabel?: string | null = null;
+    @api backgroundColor?: string | null = null;
+    @api body?: string | null = null;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @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;
+
+    private isDatetimeEmpty: boolean = true;
+    private isLinkHovered: boolean = false;
+
+    private get hasAuthor() {
+        return this.authorImgSrc && this.authorLabel;
+    }
+
+    private get backgroundStyle(): string {
+        return this.backgroundColor
+            ? `background: ${toDxColor(this.backgroundColor)}`
+            : "";
+    }
+
+    private get imgLinkAriaLabel() {
+        return `Read More About ${this.title}`;
+    }
+
+    private get className(): string {
+        return cx(
+            "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",
+            this.hasImage && "has-image"
+        );
+    }
+
+    private get hasImage() {
+        return this.imgSrc || this.backgroundColor;
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+
+    private onDatetimeSlotChange(e: LightningSlotElement): void {
+        this.isDatetimeEmpty = isSlotEmpty(e);
+    }
+}

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

@@ -0,0 +1 @@
+@import "dxHelpers/card";

package/src/modules/dx/cardDemo/cardDemo.html

@@ -0,0 +1,12 @@
+<template>
+    <dx-card-content
+        body={body}
+        featured={featured}
+        href={href}
+        img-alt={imgAlt}
+        img-src={imgSrc}
+        label="Demo"
+        target={target}
+        title={title}
+    ></dx-card-content>
+</template>

package/src/modules/dx/cardDemo/cardDemo.ts

@@ -0,0 +1,11 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardDemo extends LightningElement {
+    @api body!: string;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api imgAlt?: string;
+    @api imgSrc?: string | null;
+    @api target?: string | null = null;
+    @api title!: string;
+}

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

@@ -0,0 +1,50 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --dx-c-heading-max-lines: 4;
+    --dx-c-card-grid-max-width: 60px;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.image {
+    width: 100%;
+    height: 160px;
+}
+
+/* text section */
+
+.card_section-text {
+    grid-area: text;
+    flex-grow: 1;
+}
+
+.dx-text-heading-6 dx-button {
+    margin-left: var(--dx-g-spacing-xs);
+}
+
+.dx-text-heading-4 {
+    position: relative;
+    -webkit-line-clamp: var(--dx-c-heading-max-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+}
+
+.dx-text-heading-4 dx-icon {
+    display: inline-block;
+    transform: translateY(-3px);
+}
+
+/* mobile responsiveness */
+
+@media screen and (max-width: 1024px) {
+    .has-image:not(.show-mobile-image) .image {
+        display: none;
+    }
+}

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

@@ -0,0 +1,23 @@
+<template>
+    <a href={href} class={className} target={target}>
+        <img
+            if:true={imgSrc}
+            alt={imgAlt}
+            src={imgSrc}
+            class="image dx-card-base_image"
+        />
+        <div
+            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>
+            <span class="dx-text-body-2">{body}</span>
+        </div>
+        <div class="dx-card-base_section-vertical dx-card-base_ctas">
+            <slot onslotchange={onSlotChange}></slot>
+        </div>
+    </a>
+</template>

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

@@ -0,0 +1,30 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { LightningSlotElement } from "typings/custom";
+import { stopPropagationOnSlotted } from "dxUtils/slot";
+
+export default class CardDocs extends LightningElement {
+    @api body!: string;
+    @api href!: string;
+    @api imgAlt?: string = "";
+    @api imgSrc?: string | null = null;
+    @api label!: string;
+    @api title!: string;
+    @api target?: string | null = null;
+    @api showMobileImg?: boolean = false;
+
+    private isLinkHovered: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card",
+            "dx-card-base",
+            this.imgSrc && "has-image",
+            this.showMobileImg && "show-mobile-image"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement) {
+        stopPropagationOnSlotted(e);
+    }
+}

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

@@ -0,0 +1,107 @@
+@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);
+    padding-bottom: var(--dx-g-spacing-small);
+}
+
+/* sections */
+.card-event_date-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-right: var(--dx-g-card-border);
+    padding-right: var(--dx-g-card-img-spacing);
+    margin-right: var(--dx-g-card-img-spacing);
+}
+
+.card-event_detail-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: start;
+}
+
+.card-event_date-section,
+.card-event_detail-section {
+    padding-top: var(--dx-g-spacing-xs);
+}
+
+.month {
+    text-transform: uppercase;
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.dx-card-base_featured .card-event_detail-section > *:not(:last-child) {
+    margin-bottom: var(--dx-g-card-item-spacing);
+}
+
+.card-event_detail-datetime-row {
+    display: flex;
+    align-items: center;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-gray-10);
+    flex-wrap: wrap;
+}
+
+.card-event_detail-datetime-spacing {
+    padding-right: var(--dx-g-spacing-xs);
+    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;
+}
+
+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;
+    }
+
+    .dx-text-heading-5 {
+        font-size: 18px;
+        line-height: 24px;
+    }
+
+    .dx-text-heading-4 {
+        font-size: 24px;
+        line-height: 28px;
+    }
+
+    .dx-text-body-3 {
+        font-size: 14px;
+        line-height: 20px;
+    }
+}

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

@@ -0,0 +1,94 @@
+<template>
+    <div class={className}>
+        <a
+            if:true={imgSrc}
+            href={href}
+            onmouseenter={setLinkHovered}
+            onmouseleave={setLinkInactive}
+            target={target}
+            class="image-link dx-card-base_borderless-image_link"
+        >
+            <img
+                alt={imgAlt}
+                class="image dx-card-base_image dx-card-base_borderless-image"
+                src={imgSrc}
+            />
+        </a>
+        <div class="details">
+            <div class="card-event_date card-event_date-section">
+                <dx-formatted-date-time
+                    class="dx-text-heading-5 month"
+                    value={startDatetime}
+                    month="short"
+                ></dx-formatted-date-time>
+                <dx-formatted-date-time
+                    class="dx-text-heading-1 day"
+                    value={startDatetime}
+                    day="2-digit"
+                ></dx-formatted-date-time>
+            </div>
+            <div class="card-event_detail-section">
+                <dx-card-title
+                    href={href}
+                    onmouseenter={setLinkHovered}
+                    onmouseleave={setLinkInactive}
+                    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={brandType}
+                        type="content-type"
+                        value={type}
+                        if:true={type}
+                    ></dx-type-badge>
+                </div>
+                <span
+                    class="dx-text-body-2"
+                    if:true={shortDescription}
+                    part="description"
+                >
+                    {shortDescription}
+                </span>
+                <span class="card-event_detail-datetime-row">
+                    <dx-formatted-date-time
+                        class="dx-text-body-3"
+                        value={startDatetime}
+                        weekday="long"
+                        month="long"
+                        day="2-digit"
+                        year="numeric"
+                        time-zone-name="short"
+                    ></dx-formatted-date-time>
+                    <div class="card-event_detail-datetime-spacing">•</div>
+                    <dx-formatted-date-time
+                        class="dx-text-body-3"
+                        value={startDatetime}
+                        hour="numeric"
+                        minute="numeric"
+                    ></dx-formatted-date-time>
+                    <div
+                        if:true={endDatetime}
+                        class="card-event_detail-datetime-spacing end-date-time"
+                    >
+                        -
+                    </div>
+                    <dx-formatted-date-time
+                        if:true={endDatetime}
+                        class="dx-text-body-3 end-date-time"
+                        value={endDatetime}
+                        hour="numeric"
+                        minute="numeric"
+                    ></dx-formatted-date-time>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,42 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class CardEvent extends LightningElement {
+    @api endDatetime?: string | null = null;
+    @api featured?: boolean = false;
+    @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;
+
+    private get className() {
+        return cx(
+            "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"
+        );
+    }
+
+    private setLinkHovered() {
+        this.isLinkHovered = true;
+    }
+
+    private setLinkInactive() {
+        this.isLinkHovered = false;
+    }
+
+    private get brandType() {
+        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);
+}