@salesforcedevs/dx-components 0.0.0-alpha.0

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/cardSmall/cardSmall.css

@@ -0,0 +1,32 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+:host {
+    --heading-offset: var(--dx-g-spacing-sm);
+}
+
+.has-icon .dx-card-base_section-horizontal:last-of-type > *:first-child {
+    margin-top: var(--heading-offset);
+}
+
+.card-small {
+    display: flex;
+    flex-direction: row;
+}
+
+.dx-text-body-2 {
+    flex: 1;
+}
+
+/* mobile responsiveness */
+@media screen and (max-width: 1024px) {
+    :host {
+        --heading-offset: var(--dx-g-spacing-xs);
+    }
+
+    dx-icon-badge {
+        --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+        --dx-c-icon-badge-icon-size: var(--dx-g-icon-size-xs);
+    }
+}

package/src/modules/dx/cardSmall/cardSmall.html

@@ -0,0 +1,42 @@
+<template>
+    <div if:true={borderless} class={className}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title
+                href={href}
+                target={target}
+                title={title}
+            ></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </div>
+    <a if:false={borderless} class={className} href={href} target={target}>
+        <div if:true={badgeSymbol} class="dx-card-base_section-horizontal">
+            <dx-icon-badge
+                color={badgeColor}
+                background-color={badgeBackgroundColor}
+                symbol={badgeSymbol}
+                shape={badgeShape}
+                sprite={badgeSprite}
+            ></dx-icon-badge>
+        </div>
+        <div class="dx-card-base_section-horizontal dx-card-base_column">
+            <dx-card-title target={target} title={title}></dx-card-title>
+            <span class="dx-text-body-2">{body}</span>
+            <div if:false={isSlotEmpty} class="dx-card-base_ctas">
+                <slot onslotchange={onSlotChange}></slot>
+            </div>
+        </div>
+    </a>
+</template>

package/src/modules/dx/cardSmall/cardSmall.ts

@@ -0,0 +1,38 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import {
+    LightningSlotElement,
+    IconSprite,
+    IconSymbol,
+    IconBadgeShape
+} from "typings/custom";
+import { isSlotEmpty, stopPropagationOnSlotted } from "dxUtils/slot";
+
+export default class CardSmall extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-50";
+    @api badgeColor: string = "white";
+    @api badgeShape?: IconBadgeShape = "circle";
+    @api badgeSprite?: IconSprite = "utility";
+    @api badgeSymbol?: IconSymbol;
+    @api body?: string = "";
+    @api borderless?: boolean = false;
+    @api href!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private isSlotEmpty: boolean = false;
+
+    private get className(): string {
+        return cx(
+            "card-small",
+            "dx-card-base",
+            this.badgeSymbol && "has-icon",
+            this.borderless && "dx-card-base_borderless"
+        );
+    }
+
+    private onSlotChange(e: LightningSlotElement): void {
+        this.isSlotEmpty = isSlotEmpty(e);
+        stopPropagationOnSlotted(e);
+    }
+}

package/src/modules/dx/cardTitle/cardTitle.css

@@ -0,0 +1,43 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-card-title-color: var(--dx-g-text-heading-color);
+    --dx-c-card-title-font-size: var(--dx-g-text-xl);
+    --dx-c-card-title-line-height: 28px;
+    --dx-c-card-title-letter-spacing: -0.1px;
+    --dx-c-card-title-icon-size: 22px;
+}
+
+h3.dx-text-heading-4 {
+    color: var(--dx-c-card-title-color);
+    transition: var(--dx-g-transition-hue-1x);
+    font-size: var(--dx-c-card-title-font-size);
+    line-height: var(--dx-c-card-title-line-height);
+    letter-spacing: var(--dx-c-card-title-letter-spacing);
+    word-break: break-word;
+    hyphens: auto;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--dx-c-card-title-icon-size);
+
+    display: inline-flex;
+    vertical-align: middle;
+    transform: translateY(-2px);
+}
+
+@media screen and (max-width: 1024px) {
+    .dx-text-heading-4 {
+        font-size: 20px;
+        line-height: 24px;
+    }
+
+    dx-icon {
+        --dx-c-card-title-icon-size: 20px;
+    }
+}

package/src/modules/dx/cardTitle/cardTitle.html

@@ -0,0 +1,20 @@
+<template>
+    <h3 class="dx-text-heading-4">
+        <a if:true={href} href={href} target={target}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </a>
+        <template if:false={href}>
+            {titleToWrap}
+            <template if:true={needsSpace}>&#32;</template>
+            <span class="nowrap" if:true={isExternal}>
+                {titleNoWrap}&nbsp;
+                <dx-icon symbol="new_window" size="override"></dx-icon>
+            </span>
+        </template>
+    </h3>
+</template>

package/src/modules/dx/cardTitle/cardTitle.ts

@@ -0,0 +1,27 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardTitle extends LightningElement {
+    @api href!: string;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    private get isExternal() {
+        return this.target === "_blank";
+    }
+
+    private get titleToWrap() {
+        return this.isExternal
+            ? this.title.substring(0, this.title.lastIndexOf(" "))
+            : this.title;
+    }
+
+    private get needsSpace() {
+        return this.titleToWrap.length > 0 && this.isExternal;
+    }
+
+    private get titleNoWrap() {
+        return this.isExternal
+            ? this.title.substring(this.title.lastIndexOf(" ") + 1)
+            : null;
+    }
+}

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.css

@@ -0,0 +1,24 @@
+@import "dxHelpers/card";
+
+.badge {
+    --badge-size: var(--dx-g-spacing-5xl);
+    --badge-position: calc(50% - (var(--badge-size) / 2));
+
+    position: absolute;
+    top: var(--badge-position);
+    left: var(--badge-position);
+    height: var(--badge-size);
+    width: var(--badge-size);
+    z-index: 1;
+}
+
+@media screen and (max-width: 768px) {
+    .badge {
+        --badge-size: 56px;
+    }
+
+    dx-card-content::part(body) {
+        display: none;
+        margin: 0 !important;
+    }
+}

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.html

@@ -0,0 +1,20 @@
+<template>
+    <dx-card-content
+        background-color={backgroundColor}
+        body={body}
+        featured={featured}
+        href={href}
+        label="Trailhead"
+        subtitle={subtitle}
+        target={target}
+        title={title}
+    >
+        <img
+            class="badge"
+            src={badgeImgSrc}
+            alt={badgeImgAlt}
+            slot="image-badge"
+        />
+        <span slot="datetime">{length}</span>
+    </dx-card-content>
+</template>

package/src/modules/dx/cardTrailheadModule/cardTrailheadModule.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+
+export default class CardTrailheadModule extends LightningElement {
+    @api backgroundColor?: string = "indigo-vibrant-90";
+    @api badgeImgAlt!: string;
+    @api badgeImgSrc!: string;
+    @api body!: string;
+    @api featured?: boolean = false;
+    @api href!: string;
+    @api length!: string;
+    @api points!: string | number;
+    @api target?: string | null = null;
+    @api title!: string;
+
+    get subtitle() {
+        return `${this.points} Points`;
+    }
+}

package/src/modules/dx/cardTrial/cardTrial.css

@@ -0,0 +1,178 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.card-trial {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-trial.has-image {
+    padding-bottom: 80px;
+}
+
+dx-icon-badge.badge-main {
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-mlg);
+    --dx-c-icon-badge-size: var(--dx-g-spacing-2xl);
+
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.label {
+    color: var(--dx-g-gray-30);
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-card-title {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.body {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.terms {
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-hr {
+    --dx-c-hr-padding-horizontal: 0;
+
+    width: 100%;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+}
+
+.detail {
+    display: flex;
+    flex-direction: row;
+}
+
+.detail:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+.detail dx-icon-badge {
+    --dx-c-icon-badge-icon-size: 10px;
+    --dx-c-icon-badge-size: 18px;
+    --dx-c-icon-badge-color: var(--dx-g-blue-vibrant-40);
+
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+img {
+    position: absolute;
+    bottom: 0;
+    right: var(--dx-g-spacing-mlg);
+    width: var(--dx-g-spacing-6xl);
+}
+
+dx-button {
+    --dx-c-button-font-size: var(--dx-g-text-base);
+    --dx-c-button-font-weight: var(--dx-g-font-bold);
+}
+
+.recommended-container {
+    background-color: var(--dx-g-blue-vibrant-50);
+    border-radius: var(--dx-g-card-border-radius) var(--dx-g-card-border-radius)
+        0 0;
+    height: var(--dx-g-spacing-3xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.recommended-label {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-weight: var(--dx-g-font-bold);
+    font-size: var(--dx-g-text-base);
+}
+
+.recommended-border {
+    border: 3px solid var(--dx-g-blue-vibrant-50);
+    /* overwrite inherited border-radius */
+    border-radius: 0 0 var(--dx-g-card-border-radius)
+        var(--dx-g-card-border-radius) !important;
+}
+
+.recommended-border .top-text {
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.top-text {
+    color: var(--dx-g-gray-30);
+}
+
+.badge-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.button-one,
+.button-two {
+    margin-top: 15px;
+    width: 100%;
+}
+
+.button-details {
+    margin-top: 25px;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.two-col-container {
+    display: flex;
+    max-width: 976px;
+}
+
+.col-one {
+    padding: var(--dx-g-spacing-mlg);
+    flex: 0 0 388px;
+}
+
+.col-two {
+    background-color: var(--dx-g-indigo-vibrant-15);
+    padding: var(--dx-g-spacing-2xl);
+    flex: 1;
+}
+
+.col-two dx-card-title {
+    --dx-c-card-title-color: white;
+}
+
+.col-two-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.col-two-subtitle {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    font-weight: var(--dx-g-font-normal);
+}
+
+.col-two-title,
+.col-two-subtitle {
+    color: white;
+}
+
+@media screen and (max-width: 768px) {
+    .two-col-container {
+        flex-direction: column;
+    }
+}

package/src/modules/dx/cardTrial/cardTrial.html

@@ -0,0 +1,124 @@
+<template>
+    <div class={twoColClassName}>
+        <div class="recommended-container" if:true={recommended}>
+            <span class="recommended-label">Recommended</span>
+        </div>
+        <div
+            class={className}
+            role={ariaRole}
+            href={href}
+            target={target}
+            onclick={handleClick}
+        >
+            <template if:true={topText}>
+                <span class="top-text dx-text-body-4">{topText}</span>
+                <dx-hr spacing="md"></dx-hr>
+            </template>
+            <div class="badge-container">
+                <dx-icon-badge
+                    class="badge-main"
+                    background-color={badgeBackgroundColor}
+                    symbol={badgeSymbol}
+                    sprite={badgeSprite}
+                ></dx-icon-badge>
+                <dx-type-badge
+                    if:true={typeBadgeValue}
+                    value={typeBadgeValue}
+                    color={typeBadgeColor}
+                    size={typeBadgeSize}
+                    type={typeBadgeType}
+                ></dx-type-badge>
+            </div>
+            <dx-card-title
+                href={href}
+                target={target}
+                title={title}
+            ></dx-card-title>
+            <span class="label dx-text-body-3">{label}</span>
+            <p class="body dx-text-body-3 static-font">{body}</p>
+            <span class="terms dx-text-body-3 static-font">{terms}</span>
+            <template if:false={hasButtons}>
+                <dx-hr spacing="md"></dx-hr>
+                <ul class="details">
+                    <template for:each={details} for:item="detail">
+                        <li class="detail" key={detail}>
+                            <dx-icon-badge
+                                background-color={badgeBackgroundColor}
+                                symbol="check"
+                            ></dx-icon-badge>
+                            <span class="detail-text dx-text-body-4">
+                                {detail}
+                            </span>
+                        </li>
+                    </template>
+                </ul>
+            </template>
+            <template if:true={hasOneButton}>
+                <dx-button
+                    class="button-one"
+                    size="large"
+                    href={buttonOneHref}
+                    variant="primary"
+                    font="sans"
+                    icon-symbol={buttonOneIcon}
+                    icon-size={buttonOneIconSize}
+                >
+                    {buttonOneCta}
+                </dx-button>
+                <ul class="details button-details" if:true={hasDetails}>
+                    <template for:each={details} for:item="detail">
+                        <li class="detail" key={detail}>
+                            <dx-icon-badge
+                                background-color={badgeBackgroundColor}
+                                symbol="check"
+                            ></dx-icon-badge>
+                            <span class="detail-text dx-text-body-4">
+                                {detail}
+                            </span>
+                        </li>
+                    </template>
+                </ul>
+            </template>
+            <template if:true={hasTwoButtons}>
+                <div class="button-container">
+                    <dx-button
+                        class="button-one"
+                        size="large"
+                        href={buttonOneHref}
+                        variant="primary"
+                        font="sans"
+                        icon-symbol={buttonOneIcon}
+                        icon-size={buttonOneIconSize}
+                    >
+                        {buttonOneCta}
+                    </dx-button>
+                    <dx-button
+                        class="button-two"
+                        size="large"
+                        href={buttonTwoHref}
+                        variant="secondary"
+                        font="sans"
+                        icon-symbol={buttonTwoIcon}
+                        icon-size={buttonTwoIconSize}
+                    >
+                        {buttonTwoCta}
+                    </dx-button>
+                </div>
+            </template>
+            <img if:true={imgSrc} src={imgSrc} alt="" />
+        </div>
+        <div if:true={twoColTitle} class="col-two">
+            <dx-card-title
+                href={twoColTitleHref}
+                target={twoColTarget}
+                title={twoColTitle}
+            ></dx-card-title>
+            <template for:each={twoColDetails} for:item="twoColDetail">
+                <div key={twoColDetail.title}>
+                    <p class="col-two-title">{twoColDetail.title}</p>
+                    <p class="col-two-subtitle">{twoColDetail.subtitle}</p>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>