@salesforcedevs/dx-components 0.17.0 → 0.17.1-review-diff1

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

@@ -8,7 +8,7 @@ export default class CardPodcastEpisode extends LightningElement {
     @api href!: string;
     @api length!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isLinkHovered: boolean = false;
 

package/src/modules/dx/cardSmall/cardSmall.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/card";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
 
 :host {
     --heading-offset: var(--dx-g-spacing-sm);
@@ -15,10 +15,6 @@
     flex-direction: row;
 }
 
-.dx-text-body-2 {
-    flex: 1;
-}
-
 /* mobile responsiveness */
 @media screen and (max-width: 1024px) {
     :host {

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

@@ -13,7 +13,7 @@
             <dx-card-title
                 href={href}
                 target={target}
-                title={title}
+                header={header}
             ></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
@@ -32,7 +32,7 @@
             ></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>
+            <dx-card-title target={target} header={header}></dx-card-title>
             <span class="dx-text-body-2">{body}</span>
             <div if:false={isSlotEmpty} class="dx-card-base_ctas">
                 <slot onslotchange={onSlotChange}></slot>

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

@@ -6,7 +6,7 @@ import {
     IconSymbol,
     IconBadgeShape
 } from "typings/custom";
-import { isSlotEmpty, stopPropagationOnSlotted } from "utils/slot";
+import { isSlotEmpty, stopPropagationOnSlotted } from "dxUtils/slot";
 
 export default class CardSmall extends LightningElement {
     @api badgeBackgroundColor?: string = "indigo-vibrant-50";
@@ -18,7 +18,7 @@ export default class CardSmall extends LightningElement {
     @api borderless?: boolean = false;
     @api href!: string;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
 
     private isSlotEmpty: boolean = false;
 

package/src/modules/dx/cardStep/cardStep.css

@@ -0,0 +1,128 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.container {
+    margin: var(--dx-c-card-step-container-margin, 40px auto);
+    max-width: 90%;
+    width: var(--dx-c-card-step-container-width, 796px);
+}
+
+.header-container {
+    background-color: var(
+        --dx-c-card-step-header-background-color,
+        var(--dx-g-indigo-vibrant-20)
+    );
+    padding: var(--dw-card-sequence-header-padding, var(--dx-g-spacing-3xl));
+    text-align: center;
+}
+
+.header-container > * {
+    display: inline-block;
+}
+
+.card-title {
+    color: var(--dx-c-card-step-header-text-color, white);
+}
+
+.card-title-icon {
+    height: 40px;
+    padding-right: 16px;
+    vertical-align: top;
+}
+
+.body-container {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    font-weight: var(--dx-g-font-demi);
+    padding: var(--dw-card-sequence-body-padding, var(--dx-g-spacing-xl));
+}
+
+.footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--dw-card-sequence-body-padding, var(--dx-g-spacing-xl));
+}
+
+.footer-section {
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    order: 1; /* all have same order by default, i.e., source code order */
+}
+
+.footer-section:first-child {
+    justify-content: start;
+}
+
+.footer-section:last-child {
+    justify-content: end;
+}
+
+.footer-section:nth-child(2) {
+    flex: 0.7;
+    font-size: var(--dx-g-text-xs, 12px);
+    font-family: var(--dx-g-font-sans);
+    line-height: 18px;
+    text-align: center;
+}
+
+@media screen and (max-width: 768px) {
+    .footer-container {
+        flex-wrap: wrap;
+    }
+
+    .footer-section:first-child {
+        flex: 1 1 35%;
+    }
+
+    .footer-section:last-child {
+        flex: 1 1 65%;
+    }
+
+    .footer-section:nth-child(2) {
+        flex: 2 1 100%;
+        order: 2; /* force the "step x of y" component to be last, and take a full row */
+        padding-top: var(--dx-g-spacing-lg);
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .card-title {
+        font-size: var(--dx-g-text-xl);
+        line-height: 32px;
+    }
+
+    .card-title-icon {
+        height: unset;
+        padding-right: unset;
+        padding-bottom: 10px;
+    }
+
+    .header-container {
+        padding: var(--dw-card-sequence-header-padding, var(--dx-g-spacing-xl));
+    }
+
+    .body-container {
+        padding-bottom: 0;
+    }
+
+    .footer-container {
+        padding-top: 0;
+    }
+
+    .footer-section:first-child,
+    .footer-section:nth-child(2),
+    .footer-section:last-child {
+        flex: 1 1 100%;
+        justify-content: center;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .footer-container {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}

package/src/modules/dx/cardStep/cardStep.html

@@ -0,0 +1,31 @@
+<template>
+    <div class="dx-card-base container">
+        <div if:true={stepTitle} class="header-container">
+            <dx-icon
+                if:true={hasDefinedIcon}
+                class="card-title-icon"
+                size="xlarge"
+                color={headerIconColor}
+                sprite={headerIconSprite}
+                symbol={headerIconSymbol}
+            ></dx-icon>
+            <h3 class="card-title dx-text-display-5">{stepTitle}</h3>
+        </div>
+        <div class="body-container">
+            <slot name="card-body"></slot>
+        </div>
+        <div class="footer-container" part="footer-container">
+            <div class="footer-section">
+                <slot name="secondary-action-section"></slot>
+            </div>
+            <div class="footer-section">
+                <span if:true={showStepNumber} class="step-id">
+                    {stepDetails}
+                </span>
+            </div>
+            <div class="footer-section">
+                <slot name="primary-action-section"></slot>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/cardStep/cardStep.ts

@@ -0,0 +1,55 @@
+import { api, LightningElement } from "lwc";
+import { toDxColor } from "dxUtils/css";
+
+export type HeaderData = {
+    backgroundColor?: string;
+    iconColor?: string;
+    iconSymbol?: string;
+    iconSprite?: string;
+    textColor?: string;
+};
+
+export default class CardStep extends LightningElement {
+    @api headerIconColor = "";
+    @api headerIconSymbol = "";
+    @api headerIconSprite = "";
+    @api headerBackgroundColor = "indigo-vibrant-20";
+    @api headerTextColor = "white";
+    @api showStepNumber = false;
+    @api stepCount: number | undefined;
+    @api stepFormatString: string | undefined;
+    @api stepIndex: number | undefined;
+    @api stepTitle: string | undefined;
+
+    get stepDetails() {
+        if (
+            typeof this.stepIndex !== "number" ||
+            typeof this.stepCount !== "number"
+        ) {
+            return "";
+        }
+
+        const displayStepNumber = this.stepIndex + 1;
+
+        return this.stepFormatString
+            ? this.stepFormatString
+                  .replace("%d", displayStepNumber.toString())
+                  .replace("%d", this.stepCount.toString())
+            : `Step ${displayStepNumber} of ${this.stepCount}`;
+    }
+
+    get hasDefinedIcon() {
+        return Boolean(this.headerIconSymbol && this.headerIconSprite);
+    }
+
+    connectedCallback() {
+        this.template.host.style.setProperty(
+            "--dx-c-card-step-header-background-color",
+            toDxColor(this.headerBackgroundColor)
+        );
+        this.template.host.style.setProperty(
+            "--dx-c-card-step-header-text-color",
+            toDxColor(this.headerTextColor)
+        );
+    }
+}

package/src/modules/dx/cardStep/mockProps.ts

@@ -0,0 +1,59 @@
+export const stepsData = [
+    {
+        bodyHtml:
+            '<p class="dx-text-display-7">Register for Journey to Salesforce and you\'ll be on your way to becoming a Salesforce Developer.</p><ul class="dx-text-display-8"><li>Step 1: Log in or sign up for a free Trailblazer.me account</li><li>Step 2: Confirm your program registration</li><li>Step 3: Begin your journey!</li></ul>',
+        primaryAction: {
+            iconSprite: "general",
+            iconSymbol: "arrow-right",
+            text: "Get Started",
+            variant: "primary"
+        },
+        showStepNumber: "true",
+        stepTitle: "Get started now."
+    },
+    {
+        bodyHtml:
+            '<p class="dx-text-display-7">You\'re almost done! Please review your information and agree to the Journey to Salesforce program terms and conditions.</p>',
+        formData: {
+            countriesWithReferralInput: ["IN"],
+            formId: "j2s-form",
+            j2sTerms:
+                'I agree to the Journey to Salesforce Program Terms, subject to the <a href="http://www.google.com">Salesforce Program Agreement</a>.',
+            notAvailableAlertInfo: {
+                title: "Not Available",
+                body:
+                    'The Journey to Salesforce program is not currently available in your country. See the <a href="https://www.google.com/">program FAQs</a> for a list of participating countries.'
+            },
+            participatingCountryCodes: ["US", "CA", "IN"]
+        },
+        primaryAction: {
+            text: "Complete Registration"
+        },
+        secondaryActionHtml:
+            '<span class="required-notice">* Required to participate in Journey to Salesforce</span>',
+        showStepNumber: "true",
+        stepTitle: "Complete your registration."
+    },
+    {
+        bodyHtml:
+            '<div class="dx-text-display-8"><p>Welcome to Journey to Salesforce! Congratulations on taking this step in your journey towards becoming a Salesforce Developer. Through this program you\'ll gain the knowledge, experience, and skills to help you excel in the Salesforce ecosystem.</p><p>To get started, click the button below to join the Journey to Salesforce community, and make sure to check your email for links to bookmark!</p></div>',
+        headerData: {
+            backgroundColor: "green-vibrant-95",
+            iconSymbol: "check-circle",
+            iconSprite: "general",
+            iconColor: "green-vibrant-65",
+            textColor: "indigo-vibrant-20"
+        },
+        primaryAction: {
+            iconSprite: "utility",
+            iconSymbol: "new_window",
+            link: "https://salesforce-external.slack.com/archives/C05HJK4PGJV",
+            text: "Join Slack",
+            variant: "custom"
+        },
+        secondaryActionHtml:
+            '<span class="dx-text-display-7">Ready to jump in?</span>',
+        showStepNumber: "true",
+        stepTitle: "Your Registration is Confirmed"
+    }
+];

package/src/modules/dx/cardTestimonial/cardTestimonial.css

@@ -0,0 +1,24 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.attribution-img {
+    border-radius: 5px;
+    max-width: 100%;
+    margin-bottom: 1em;
+}
+
+.testimonial-card-cta {
+    text-decoration: underline;
+    text-wrap: auto;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+}
+
+.quote {
+    color: black;
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: bold;
+}

package/src/modules/dx/cardTestimonial/cardTestimonial.html

@@ -0,0 +1,15 @@
+<template>
+    <div class={className}>
+        <template if:true={quote}>
+            <img class="attribution-img" src={imgSrc} alt={attribution} />
+            <span class="dx-text-body-4 quote">{quote}</span>
+            <br />
+            <br />
+            <span class="dx-text-label-1-dark">{attribution}</span>
+            <br />
+            <span class="dx-text-body-4">{attributionTitle}</span>
+            <br />
+            <span class="dx-text-body-4">{attributionCompany}</span>
+        </template>
+    </div>
+</template>

package/src/modules/dx/cardTestimonial/cardTestimonial.ts

@@ -0,0 +1,18 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+
+export default class CardTestimonial extends LightningElement {
+    @api imgSrc?: string;
+    @api quote!: string;
+    @api attribution!: string;
+    @api attributionTitle!: string;
+    @api attributionCompany: string = "";
+
+    private get className() {
+        return cx(
+            "card-testimonial",
+            "dx-card-base",
+            "dx-card-base_section-vertical"
+        );
+    }
+}

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

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-card-title-color: var(--dx-g-text-heading-color);
@@ -9,12 +9,14 @@
     --dx-c-card-title-icon-size: 22px;
 }
 
-.dx-text-heading-4 {
+h3.dx-text-display-6 {
     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: var(--dx-c-card-title-word-break, break-word);
+    hyphens: auto;
 }
 
 .nowrap {
@@ -30,7 +32,7 @@ dx-icon {
 }
 
 @media screen and (max-width: 1024px) {
-    .dx-text-heading-4 {
+    .dx-text-display-6 {
         font-size: 20px;
         line-height: 24px;
     }

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

@@ -1,5 +1,5 @@
 <template>
-    <h3 class="dx-text-heading-4">
+    <h3 class="dx-text-display-6" part="title">
         <a if:true={href} href={href} target={target}>
             {titleToWrap}
             <template if:true={needsSpace}>&#32;</template>

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

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

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

@@ -1,4 +1,4 @@
-@import "helpers/card";
+@import "dxHelpers/card";
 
 .badge {
     --badge-size: var(--dx-g-spacing-5xl);
@@ -12,7 +12,7 @@
     z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 768px) {
     .badge {
         --badge-size: 56px;
     }

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

@@ -4,10 +4,10 @@
         body={body}
         featured={featured}
         href={href}
-        label="Trailhead"
+        label={label}
         subtitle={subtitle}
         target={target}
-        title={title}
+        header={header}
     >
         <img
             class="badge"

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

@@ -10,7 +10,8 @@ export default class CardTrailheadModule extends LightningElement {
     @api length!: string;
     @api points!: string | number;
     @api target?: string | null = null;
-    @api title!: string;
+    @api header!: string;
+    @api label?: string = "Trailhead";
 
     get subtitle() {
         return `${this.points} Points`;

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

@@ -0,0 +1,134 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
+.card-trial {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-trial.has-image {
+    padding-bottom: 90px;
+}
+
+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-top: 5px;
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+dx-card-title {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.body {
+    margin-bottom: var(--dx-g-spacing-md);
+}
+
+.terms {
+    margin-top: auto;
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-hr {
+    --dx-c-hr-padding-horizontal: 0;
+
+    width: 100%;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+}
+
+.details_top-margin {
+    margin-top: var(--dx-g-spacing-lg);
+}
+
+.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);
+}
+
+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);
+}
+
+div.card-trial.recommended-border {
+    border: 3px solid var(--dx-g-blue-vibrant-50);
+    border-radius: 0 0 var(--dx-g-card-border-radius)
+        var(--dx-g-card-border-radius);
+}
+
+.recommended-border .top-text:first-child {
+    margin-top: var(--dx-g-spacing-mlg);
+}
+
+.recommended-border .badge-container:first-child {
+    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%;
+}