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

package/src/modules/dx/section/section.ts

@@ -1,18 +1,26 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
+import { track } from "dxUtils/analytics";
 
 export default class Section extends LightningElement {
-    @api backgroundColor?: string | null = "transparent";
-    @api dark?: boolean = false;
-    @api headingLevel: "1" | "2" | "3" | "4" | "5" = "3";
-    @api label?: string | null = null;
-    @api subtitle?: string | null = null;
-    @api textAlign?: "center" | "left" = "left";
-    @api title?: string | null = null;
-    @api topGraphic?: boolean = false;
-    @api graphicOverlap?: boolean = false;
-    @api bottomGraphic?: boolean = false;
+    @api backgroundColor: string = "transparent";
+    @api dark: boolean = false;
+    @api headingLevel: "1" | "2" | "3" | "4" | "5" | "custom" = "3";
+    @api label?: string;
+    @api subtitle?: string;
+    @api subtitleLevel?: "1" | "2" | "3" | "4" = "1";
+    @api textAlign: "center" | "left" = "left";
+    @api header!: string;
+    @api ctaLabel?: string;
+    @api ctaHref?: string;
+    @api ctaBtnVariant?: string;
+    @api ctaBtnSymbol?: string;
+    @api ctaBtnTarget?: string = "_self";
+    @api ctaBtnInline?: boolean = false;
+    @api topGraphic: boolean = false;
+    @api graphicOverlap: boolean = false;
+    @api bottomGraphic: boolean = false;
 
     private get style(): string {
         return `--dx-c-section-background-color: ${toDxColor(
@@ -31,11 +39,35 @@ export default class Section extends LightningElement {
         );
     }
 
+    private get subtitleClassName() {
+        return cx("subtitle", `dx-text-body-${this.subtitleLevel}`);
+    }
+
     private get headingClassName() {
-        return cx("heading", `dx-text-heading-${this.headingLevel}`);
+        return cx(
+            "heading",
+            `dx-text-display-${this.headingLevel}`,
+            this.ctaBtnInline && "cta-inline"
+        );
     }
 
     private get hasText(): boolean {
-        return !!(this.title || this.label || this.subtitle);
+        return !!(this.header || this.label || this.subtitle);
+    }
+
+    private get ctaNotInline(): boolean {
+        return !this.ctaBtnInline;
+    }
+
+    private handleLabelClick(e: Event) {
+        track(e.target!, "custEv_ctaLinkClick", {
+            click_text: this.ctaLabel,
+            element_title: this.header,
+            click_url: this.ctaHref!.includes("http")
+                ? this.ctaHref
+                : `${window.location.origin}${this.ctaHref}`,
+            element_type: "link",
+            content_category: "cta"
+        });
     }
 }

package/src/modules/dx/sectionBanner/sectionBanner.css

@@ -0,0 +1,145 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-g-text-heading-color: white;
+    --padding-top: var(--dx-g-spacing-4xl);
+    --margin-top: 80px;
+    --dx-c-section-banner-content-align: flex-end;
+    --dx-c-section-banner-image-transform: none;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    overflow-x: hidden;
+    padding-top: var(--padding-top);
+    padding-left: var(--dx-g-page-padding-horizontal);
+}
+
+.top-margin {
+    margin-top: var(--margin-top);
+}
+
+.content {
+    align-self: var(--dx-c-section-banner-content-align);
+    margin: 0 var(--dx-g-spacing-3xl) var(--dx-g-spacing-5xl) 0;
+}
+
+.content-title {
+    white-space: pre-line;
+}
+
+.content-body {
+    color: white;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-base);
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+.content-body-container {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-md);
+}
+
+.quote-content {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.quote-attribution {
+    margin-top: var(--dx-g-spacing-md);
+    position: relative;
+}
+
+.quote-attribution-character {
+    display: inline-block;
+}
+
+.quote-attribution-text {
+    left: 24px;
+    position: absolute;
+}
+
+.quote-attribution-subtext {
+    left: 24px;
+    position: relative;
+}
+
+.image {
+    width: 600px;
+    flex-shrink: 0;
+    height: fit-content;
+    align-self: flex-end;
+}
+
+.graphic {
+    width: 238px;
+    position: absolute;
+    left: var(--dx-g-page-padding-horizontal);
+    top: calc(-1 * var(--margin-top));
+}
+
+@media (min-width: 1600px) {
+    .container {
+        padding: var(--padding-top) var(--dx-g-page-padding-horizontal) 0;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+        margin-top: calc(var(--margin-top) + var(--dx-g-spacing-lg));
+    }
+
+    .content {
+        margin: 0
+            calc(var(--dx-g-spacing-6xl) - var(--dx-g-page-padding-horizontal))
+            var(--dx-g-spacing-3xl) 0;
+    }
+
+    .image {
+        width: 100%;
+        max-width: 790px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .content-title {
+        font-size: var(--dx-g-text-2xl);
+    }
+
+    .content {
+        margin: 0 var(--dx-g-page-padding-horizontal) var(--dx-g-spacing-3xl) 0;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .content-body-container {
+        display: block;
+    }
+
+    .quote-content p {
+        font-size: var(--dx-g-text-lg);
+        line-height: 28px;
+    }
+
+    .quote-content p.quote-attribution {
+        font-size: var(--dx-g-text-md);
+        letter-spacing: unset;
+        line-height: 24px;
+    }
+
+    .quote-attribution-text {
+        left: 20px;
+        position: absolute;
+    }
+
+    .quote-attribution-subtext {
+        font-size: 12px;
+        left: 20px;
+        line-height: 20px;
+        position: relative;
+    }
+}

package/src/modules/dx/sectionBanner/sectionBanner.html

@@ -0,0 +1,41 @@
+<template>
+    <div class={containerStyle} style={style}>
+        <img
+            if:false={hideTopGraphic}
+            class="graphic"
+            src="https://a.sfdcstatic.com/developer-website/images/dx-section-banner-graphic-1.svg"
+            alt=""
+        />
+        <div class="content">
+            <h3 if:true={header} class="content-title dx-text-display-4">
+                {header}
+            </h3>
+            <div class="content-body-container">
+                <img if:true={hasQuote} src={quoteGraphicSrc} alt="" />
+                <div class={quoteContentStyle}>
+                    <p class={contentBodyStyle}>{body}</p>
+                    <p
+                        if:true={quoteAttributionText}
+                        class={quoteAttributionStyle}
+                    >
+                        <span class="quote-attribution-character">&#8212;</span>
+                        <span class="quote-attribution-text">
+                            <dx-formatted-rich-text
+                                value={quoteAttributionText}
+                            ></dx-formatted-rich-text>
+                        </span>
+                        <span
+                            if:true={quoteAttributionSubtext}
+                            class={quoteAttributionSubtextStyle}
+                        >
+                            <dx-formatted-rich-text
+                                value={quoteAttributionSubtext}
+                            ></dx-formatted-rich-text>
+                        </span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <img class="image" src={imgSrc} alt={imgAlt} part="banner-image" />
+    </div>
+</template>

package/src/modules/dx/sectionBanner/sectionBanner.ts

@@ -0,0 +1,128 @@
+import { api, LightningElement } from "lwc";
+import cx from "classnames";
+import debounce from "debounce";
+import { toJson } from "dxUtils/normalizers";
+import { toDxColor } from "dxUtils/css";
+
+export default class SectionBanner extends LightningElement {
+    private _images?: {
+        desktop: {
+            alt: string;
+            src: string;
+        };
+        mobile: {
+            alt: string;
+            src: string;
+        };
+    };
+    private _quoteAttribution?: {
+        desktop: {
+            text: string;
+            subtext?: string;
+        };
+        mobile: {
+            text: string;
+            subtext?: string;
+        };
+    };
+    @api header!: string;
+    @api body!: string;
+    @api hideTopGraphic = false;
+    @api backgroundColor = "indigo-vibrant-20";
+    @api hasQuote = false;
+    @api quoteGraphicSrc?: string;
+
+    private isMobile = false;
+    private mediaQueryList?: MediaQueryList;
+
+    @api
+    get images() {
+        return this._images;
+    }
+    set images(value) {
+        this._images = value && toJson(value);
+    }
+
+    @api
+    get quoteAttribution() {
+        return this._quoteAttribution;
+    }
+    set quoteAttribution(value) {
+        this._quoteAttribution = value && toJson(value);
+    }
+
+    get environment() {
+        return this.isMobile ? "mobile" : "desktop";
+    }
+
+    get imgSrc() {
+        return this.images?.[this.environment]?.src || "";
+    }
+
+    get imgAlt() {
+        return this.images?.[this.environment]?.alt || "";
+    }
+
+    get quoteAttributionText() {
+        return this.quoteAttribution?.[this.environment]?.text || "";
+    }
+
+    get quoteAttributionSubtext() {
+        return this.quoteAttribution?.[this.environment]?.subtext || "";
+    }
+
+    get containerStyle() {
+        return cx("container", !this.hideTopGraphic && "top-margin");
+    }
+
+    get quoteContentStyle() {
+        return cx(this.hasQuote && "quote-content");
+    }
+
+    get quoteAttributionStyle() {
+        return cx("quote-attribution", {
+            "dx-text-display-7": !this.isMobile,
+            "dx-text-display-8": this.isMobile
+        });
+    }
+
+    get quoteAttributionSubtextStyle() {
+        return cx("quote-attribution-subtext", {
+            "is-mobile": this.isMobile
+        });
+    }
+
+    get contentBodyStyle() {
+        return cx(this.header ? "content-body" : "dx-text-display-6");
+    }
+
+    get style() {
+        const backgroundColor = `background-color: ${toDxColor(
+            this.backgroundColor
+        )};`;
+
+        return `${backgroundColor}`;
+    }
+
+    private handleMediaQueryChange = debounce((evt: MediaQueryListEvent) => {
+        this.isMobile = evt.matches;
+    }, 64);
+
+    connectedCallback() {
+        this.mediaQueryList = window.matchMedia(
+            "screen and (max-width: 480px)"
+        );
+        this.isMobile = this.mediaQueryList.matches;
+        this.mediaQueryList.addEventListener(
+            "change",
+            this.handleMediaQueryChange
+        );
+    }
+
+    disconnectedCallback() {
+        this.mediaQueryList?.removeEventListener(
+            "change",
+            this.handleMediaQueryChange
+        );
+    }
+}

package/src/modules/dx/sectionSignup/sectionSignup.ts

@@ -1,6 +1,7 @@
 import { LightningElement, api } from "lwc";
 import { LightningSlotElement } from "typings/custom";
 import debounce from "debounce";
+import { isSlotEmpty } from "dxUtils/slot";
 const MOBILE_SIZE = 640;
 const getInputSize = () =>
     (window.innerWidth ||
@@ -30,8 +31,7 @@ export default class SectionSignup extends LightningElement {
     }
 
     private onSlotChange(e: LightningSlotElement) {
-        // @ts-ignore
-        this.isSlotEmpty = e.target.assignedElements().length === 0;
+        this.isSlotEmpty = isSlotEmpty(e);
     }
 
     private _updateSize = () => {

package/src/modules/dx/select/select.css

@@ -1,5 +1,3 @@
-@import "helpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::after {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,186 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
-    -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
-    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+}
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: transparent;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    z-index: 1;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color: transparent;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    user-select: none;
+    opacity: 1;
+    z-index: 0;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    display: grid;
+    position: relative;
+    background-color: white;
+}
+
+.select_container .select-element {
+    appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
 }