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

package/src/modules/dx/featuresListHeader/featuresListHeader.css

@@ -0,0 +1,144 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 var(--dx-g-page-padding-horizontal);
+}
+
+.text-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: var(--dx-g-spacing-4xl);
+    padding-bottom: var(--dx-g-spacing-3xl);
+    min-height: 460px;
+    text-align: left;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.countries-list {
+    margin-top: var(--dx-g-spacing-lg);
+    width: 100%;
+}
+
+.countries-list > *:not(:first-child) {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.country {
+    display: flex;
+    align-items: center;
+}
+
+.country > span {
+    color: white;
+}
+
+.country > img {
+    height: 42px;
+    width: 42px;
+    margin-left: var(--dx-g-spacing-smd);
+}
+
+.button-container {
+    display: flex;
+    gap: var(--dx-g-spacing-md);
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+.secondary-button {
+    --dx-c-button-background-color: white;
+}
+
+.light-text > *:not(:last-child) {
+    color: white;
+}
+
+.features-list {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    margin-top: var(--dx-g-spacing-lg);
+    gap: var(--dx-g-spacing-md);
+    width: 100%;
+}
+
+.feature-item {
+    display: flex;
+    align-items: center;
+    gap: var(--dx-g-spacing-smd);
+    text-align: left;
+}
+
+.feature-item span {
+    color: white;
+}
+
+.text-container > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-smd);
+}
+
+dx-button {
+    margin-top: var(--dx-g-spacing-smd);
+}
+
+img.desktop {
+    padding-left: 20px;
+    max-width: 50%; /* assumes desktop images are high-res */
+}
+
+img.mobile {
+    display: none;
+}
+
+@media screen and (max-width: 1024px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .text-container {
+        align-items: center;
+        text-align: center;
+        padding-top: var(--dx-g-spacing-4xl);
+        padding-bottom: 0;
+        min-height: unset;
+    }
+
+    .text-container > * {
+        max-width: 700px;
+    }
+
+    img.desktop {
+        display: none;
+    }
+
+    img.mobile {
+        display: block;
+        margin-top: var(--dx-g-spacing-3xl);
+        margin-bottom: var(--dx-g-spacing-4xl);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .subtitle {
+        font-size: var(--dx-g-text-base);
+        line-height: var(--dx-g-text-xl);
+    }
+
+    .heading {
+        font-size: var(--dx-g-text-3xl);
+        line-height: var(--dx-g-text-4xl);
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .features-list {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/dx/featuresListHeader/featuresListHeader.html

@@ -0,0 +1,58 @@
+<template>
+    <div class="container" style={style}>
+        <div class={textStyle}>
+            <h1 class="heading dx-text-display-2">
+                <dx-formatted-rich-text
+                    value={displayTitle}
+                ></dx-formatted-rich-text>
+            </h1>
+            <span if:true={subtitle} class="dx-text-display-5">{subtitle}</span>
+            <div class="features-list">
+                <template for:each={featuresList} for:item="feature">
+                    <div key={feature.title} class="feature-item">
+                        <dx-icon-badge
+                            symbol={feature.symbol}
+                            sprite={feature.sprite}
+                            background-color="cloud-blue-vibrant-95"
+                            color="blue-vibrant-60"
+                        ></dx-icon-badge>
+                        <span class="dx-text-display-7">{feature.title}</span>
+                    </div>
+                </template>
+            </div>
+            <div class="countries-list" if:true={renderCountriesList}>
+                <template for:each={countriesList} for:item="country">
+                    <div key={country.name} class="country">
+                        <span class="dx-text-display-7">
+                            {country.label}&nbsp;{country.name}
+                        </span>
+                        <img src={country.flagSrc} alt={country.flagAltText} />
+                    </div>
+                </template>
+            </div>
+            <div class="button-container">
+                <dx-button
+                    onclick={onCtaClick}
+                    href={ctaHref}
+                    target={ctaTarget}
+                    size="large"
+                >
+                    {ctaLabel}
+                </dx-button>
+                <dx-button
+                    class="secondary-button"
+                    if:true={ctaLabelSecondary}
+                    onclick={onCtaClickSecondary}
+                    href={ctaHrefSecondary}
+                    target={ctaTargetSecondary}
+                    size="large"
+                    variant="secondary"
+                >
+                    {ctaLabelSecondary}
+                </dx-button>
+            </div>
+        </div>
+        <img class="desktop" src={imgSrc} alt="" />
+        <img class="mobile" src={imgSrcMobile} alt="" />
+    </div>
+</template>

package/src/modules/dx/featuresListHeader/featuresListHeader.ts

@@ -0,0 +1,103 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { track } from "dxUtils/analytics";
+import { toJson } from "dxUtils/normalizers";
+import { toDxColor } from "dxUtils/css";
+
+export default class FeaturesListHeader extends LightningElement {
+    private _displayTitle: string | null = null;
+    @api header!: string;
+    @api subtitle?: string;
+    @api ctaLabel!: string;
+    @api ctaLabelSecondary?: string;
+    @api ctaHref!: string;
+    @api ctaHrefSecondary?: string;
+    @api ctaTarget?: string | null = null;
+    @api ctaTargetSecondary?: string | null = null;
+    @api imgSrc!: string;
+    @api imgSrcMobile!: string;
+    @api backgroundDark: boolean = false;
+    @api backgroundColor?: string;
+    private _featuresList!: any;
+    private _countriesList?: any;
+
+    @api
+    get featuresList() {
+        return this._featuresList;
+    }
+    set featuresList(value: string) {
+        this._featuresList = toJson(value);
+    }
+
+    @api
+    get countriesList() {
+        return this._countriesList;
+    }
+    set countriesList(value: string) {
+        this._countriesList = toJson(value);
+    }
+
+    get renderCountriesList(): boolean {
+        return Boolean(this.countriesList?.length);
+    }
+
+    // For use when displayed title will have embed HTML, i.e., is "rich text"
+    @api
+    get displayTitle() {
+        return typeof this._displayTitle === "string"
+            ? this._displayTitle
+            : this.header;
+    }
+    set displayTitle(value: string | null) {
+        this._displayTitle = value;
+    }
+
+    private get style() {
+        return cx(
+            this.backgroundColor &&
+                `background-color: ${toDxColor(this.backgroundColor)};`
+        );
+    }
+
+    private get textStyle() {
+        return cx("text-container", this.backgroundDark && "light-text");
+    }
+
+    private onCtaClick(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                click_text: this.ctaLabel,
+                click_url: `${window.location.origin}${this.ctaHref}`,
+                element_type: "button",
+                element_title: this.header,
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabel,
+                element_title: this.header,
+                click_url: `${window.location.origin}${this.ctaHref}`,
+                element_type: "link",
+                content_category: "cta"
+            });
+        }
+    }
+
+    private onCtaClickSecondary(e: Event) {
+        if (e.currentTarget) {
+            track(e.currentTarget, "custEv_ctaButtonClick", {
+                click_text: this.ctaLabelSecondary,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
+                element_type: "button",
+                element_title: this.header,
+                content_category: "cta"
+            });
+            track(e.currentTarget!, "custEv_linkClick", {
+                click_text: this.ctaLabelSecondary,
+                element_title: this.header,
+                click_url: `${window.location.origin}${this.ctaHrefSecondary}`,
+                element_type: "link",
+                content_category: "cta"
+            });
+        }
+    }
+}

package/src/modules/dx/filterMenu/filterMenu.css

@@ -0,0 +1,134 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/scrollbar";
+
+:host {
+    --dx-c-filter-menu-margin: 0;
+    --dx-c-checkbox-font-size: 13px;
+    --dx-g-text-body-color: var(--sds-g-gray-11);
+    --horizontal-padding: 20px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1px solid rgb(201 201 201);
+    border-radius: 4px;
+    padding: 15px 0;
+    position: relative;
+    margin: var(--dx-c-filter-menu-margin);
+    max-height: 650px;
+}
+
+.caret-down {
+    transform: rotate(180deg);
+}
+
+.nested {
+    display: none;
+}
+
+.active {
+    display: block;
+}
+
+.checkbox-month {
+    margin-left: 6px;
+}
+
+.title-group {
+    display: flex;
+    justify-content: space-between;
+}
+
+.title-group-main {
+    position: relative;
+    justify-content: space-between;
+    margin: 0 var(--horizontal-padding);
+    width: calc(100% - 2 * var(--horizontal-padding));
+}
+
+.filter-menu-title {
+    font-size: 14px;
+    font-family: var(--dx-g-font-sans);
+    font-weight: bold;
+    color: rgb(24 24 24);
+}
+
+.first-layer {
+    height: 100%;
+    overflow-y: auto;
+    margin-top: 12px;
+    padding: 0 9px 0 var(--horizontal-padding);
+    scrollbar-gutter: stable;
+}
+
+dx-checkbox:not(:first-of-type) {
+    margin-top: 6px;
+}
+
+li,
+label {
+    position: relative;
+}
+
+.first-layer li:not(:first-of-type) {
+    margin-top: 9px;
+}
+
+.second-layer li:first-of-type {
+    margin-top: 7px;
+}
+
+.second-layer li:not(:first-of-type) {
+    margin-top: 5px;
+}
+
+svg,
+.filter-menu-title {
+    background: transparent;
+    cursor: pointer;
+    user-select: none;
+}
+
+.header-caret {
+    stroke: var(--dx-g-blue-vibrant-50);
+}
+
+.year-caret {
+    stroke: var(--dx-g-gray-50);
+}
+
+.checkbox-month,
+.checkbox-year {
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.checkbox-year {
+    --dx-c-filter-menu-font-weight: bold;
+
+    width: 130px;
+}
+
+.view-more-btn {
+    color: var(--dx-g-blue-vibrant-50);
+    font-size: 14px;
+    font-family: var(--dx-g-font-sans);
+}
+
+@keyframes loading-dots {
+    50% {
+        content: "(..\00a0)";
+    }
+
+    100% {
+        content: "(...)";
+    }
+}
+
+.filters-dates-loading::after {
+    animation: loading-dots 1s linear infinite;
+    display: inline-block;
+    content: "(.\00a0\00a0)";
+}

package/src/modules/dx/filterMenu/filterMenu.html

@@ -0,0 +1,111 @@
+<template>
+    <form class="container">
+        <span class="title-group-main title-group" onclick={dropdownToggle}>
+            <p class="filter-menu-title">{header}</p>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="28"
+                height="28"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="feather feather-chevron-down header-caret"
+            >
+                <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+        </span>
+        <ul class="nested first-layer always-visible-scrollbar">
+            <li>
+                <template if:true={isBaseVariant}>
+                    <template for:each={filterMenuOptions} for:item="option">
+                        <dx-checkbox
+                            key={option.id}
+                            label={option.name}
+                            name={option.name}
+                            value={option}
+                            checked={option.checked}
+                            onchange={onChange}
+                        ></dx-checkbox>
+                    </template>
+                </template>
+                <template if:true={isNestedVariant}>
+                    <ul>
+                        <template
+                            for:each={filterMenuOptions}
+                            for:item="option"
+                        >
+                            <li key={option.id}>
+                                <div class="title-group">
+                                    <dx-checkbox-native
+                                        class="checkbox-year"
+                                        value={option}
+                                        onchange={onChange}
+                                    >
+                                        {option.name}&nbsp;
+                                        <span
+                                            if:true={filtersDatesLoading}
+                                            class="filters-dates-loading"
+                                        ></span>
+                                        <span if:false={filtersDatesLoading}>
+                                            ({option.totalNumberOfPosts})
+                                        </span>
+                                    </dx-checkbox-native>
+                                    <span onclick={dropdownToggle}>
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            width="24"
+                                            height="24"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke-width="2"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            class="feather feather-chevron-down year-caret"
+                                        >
+                                            <polyline
+                                                points="6 9 12 15 18 9"
+                                            ></polyline>
+                                        </svg>
+                                    </span>
+                                </div>
+                                <ul class="nested second-layer">
+                                    <template
+                                        for:each={option.months}
+                                        for:item="month"
+                                    >
+                                        <li key={month.id}>
+                                            <dx-checkbox-native
+                                                id={month.id}
+                                                class="checkbox-month"
+                                                value={month}
+                                                onchange={onChange}
+                                            >
+                                                {month.id}&nbsp;
+                                                <span
+                                                    if:true={filtersDatesLoading}
+                                                    class="filters-dates-loading"
+                                                ></span>
+                                                <span
+                                                    if:false={filtersDatesLoading}
+                                                >
+                                                    ({month.numberOfPosts})
+                                                </span>
+                                            </dx-checkbox-native>
+                                        </li>
+                                    </template>
+                                </ul>
+                            </li>
+                        </template>
+                    </ul>
+                </template>
+                <template if:true={showViewMoreBtn}>
+                    <button class="view-more-btn" onclick={viewMoreToggle}>
+                        {viewMoreBtnText}
+                    </button>
+                </template>
+            </li>
+        </ul>
+    </form>
+</template>

package/src/modules/dx/filterMenu/filterMenu.ts

@@ -0,0 +1,119 @@
+import { LightningElement, api } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+interface Option {
+    id: number;
+    name: string;
+    checked: boolean;
+}
+export default class FilterMenu extends LightningElement {
+    @api name: string = "";
+    @api header: string = "Filter Menu";
+    @api variant: string = "base";
+    @api filtersDatesLoading?: boolean;
+
+    @api
+    get options(): Option[] {
+        return this._options;
+    }
+    set options(value: any) {
+        this._options = toJson(value);
+    }
+
+    private _options: Option[] = [];
+    private showMore: boolean = false;
+
+    get isBaseVariant() {
+        return this.variant === "base";
+    }
+
+    get isNestedVariant() {
+        return this.variant === "nested";
+    }
+
+    get showViewMoreBtn() {
+        return this.options.length > 20;
+    }
+
+    get filterMenuOptions() {
+        return this.showMore ? this.options : this.options.slice(0, 20);
+    }
+
+    get viewMoreBtnText() {
+        return this.showMore ? "- View Less" : "+ View More";
+    }
+
+    @api
+    updateCheckedStatus(filterMenuData: any) {
+        if (!(this.name in filterMenuData)) {
+            return;
+        }
+
+        const data = filterMenuData[this.name].map(
+            (selectedData: any) => selectedData.name
+        );
+        const query: any =
+            this.variant === "base" ? "dx-checkbox" : "dx-checkbox-native";
+        const checkboxes = Array.from(this.template.querySelectorAll(query));
+
+        if (data.length === 0) {
+            checkboxes.forEach((checkbox: any) => {
+                checkbox.checked = false;
+                this.setIntedeterminateStatus(checkbox, false);
+            });
+        } else {
+            data.forEach(() => {
+                checkboxes.forEach((checkbox: any) => {
+                    const checkboxValue = checkbox.value.name;
+                    const hasCheck = data.includes(checkboxValue)
+                        ? true
+                        : false;
+                    checkbox.checked = hasCheck;
+
+                    if (hasCheck) {
+                        this.setIntedeterminateStatus(checkbox, true);
+                    }
+                });
+            });
+        }
+    }
+
+    private setIntedeterminateStatus(checkbox: any, value: boolean) {
+        if ("isYear" in checkbox.value && !checkbox.value.isYear) {
+            const yearCheckBox: any =
+                checkbox.parentElement.parentElement.parentElement.querySelector(
+                    ".checkbox-year"
+                );
+            yearCheckBox.indeterminate = value;
+        }
+    }
+
+    private viewMoreToggle(e: CustomEvent) {
+        e.preventDefault();
+        this.showMore = !this.showMore;
+    }
+
+    private onChange(e: any) {
+        const { checked, value } = e.detail;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: {
+                    name: this.name,
+                    value,
+                    checked,
+                    composed: true,
+                    bubbles: true
+                }
+            })
+        );
+    }
+
+    private dropdownToggle(e: any) {
+        (
+            e.currentTarget.parentElement.querySelector(".nested") ||
+            e.currentTarget.parentElement.parentElement.querySelector(".nested")
+        ).classList.toggle("active");
+
+        e.currentTarget.querySelector("svg").classList.toggle("caret-down");
+    }
+}