@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/featuresList/featuresList.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .dx-text-heading-5 {
     display: inline-flex;
@@ -20,5 +20,5 @@
 .icon {
     color: #3ba755;
     padding-right: var(--dx-g-spacing-md);
-    padding-top: var(--dx-g-spacing-2xs);
+    padding-top: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/featuresList/featuresList.html

@@ -1,15 +1,20 @@
 <template>
     <div class="container">
         <h2 if:true={title} class="dx-text-heading-3">{title}</h2>
-
-        <template for:each={options} for:item="option">
-            <div key={option.id} class="option">
-                <div class="dx-text-heading-5">
-                    <dx-icon class="icon" size="small" symbol="check"></dx-icon>
-                    {option.title}
-                </div>
-                <div class="dx-text-body-2">{option.description}</div>
-            </div>
-        </template>
+        <ul>
+            <template for:each={options} for:item="option">
+                <li key={option.id} class="option">
+                    <div class="dx-text-heading-5">
+                        <dx-icon
+                            class="icon"
+                            size="small"
+                            symbol="check"
+                        ></dx-icon>
+                        {option.title}
+                    </div>
+                    <div class="dx-text-body-2">{option.description}</div>
+                </li>
+            </template>
+        </ul>
     </div>
 </template>

package/src/modules/dx/featuresList/featuresList.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { FeatureItem } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 /**
  * @element dx-features-list

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

@@ -0,0 +1,138 @@
+@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 {
+    -webkit-transform: rotate(180deg); /* Safari */
+    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;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    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,116 @@
+<template>
+    <form class="container">
+        <span class="title-group-main title-group" onclick={dropdownToggle}>
+            <p class="filter-menu-title">{title}</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 title: 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");
+    }
+}

package/src/modules/dx/footer/footer.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 .content-container {
     padding: 0 var(--dx-g-page-padding-horizontal);
@@ -16,11 +16,12 @@ footer {
     padding-top: var(--dx-g-spacing-5xl);
 }
 
-footer.signup-variant-large {
+footer.signup-variant-large-signup {
     padding-top: 160px;
 }
 
-footer.signup-variant-none {
+footer.signup-variant-terms-only,
+footer.signup-variant-no-signup {
     padding-top: 0;
 }
 
@@ -172,11 +173,6 @@ footer.signup-variant-none {
     grid-gap: var(--dx-g-spacing-4xl);
 }
 
-.general dx-button {
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
-    --dx-c-button-inline-color-hover: var(--dx-g-blue-vibrant-20);
-}
-
 .locales {
     grid-area: locales;
 }
@@ -277,7 +273,7 @@ footer.signup-variant-none {
 @media screen and (min-width: 1400px) {
     .content-container_top_large {
         /* takes into account the background assets' h:w ratio */
-        height: 32vw;
+        height: 38vw;
     }
 }
 

package/src/modules/dx/footer/footer.html

@@ -4,9 +4,9 @@
             if:true={showSmallSignup}
             class="content-container content-container_top"
         >
-            <div class="graphic graphic-trees" alt="Group of trees"></div>
-            <div class="graphic graphic-mountains" alt="Mountains"></div>
-            <div class="graphic graphic-mountains-mobile" alt="Mountains"></div>
+            <div class="graphic graphic-trees" alt=""></div>
+            <div class="graphic graphic-mountains" alt=""></div>
+            <div class="graphic graphic-mountains-mobile" alt=""></div>
             <span class="subheading">Get Developer Updates</span>
             <dx-input
                 aria-label={inputAriaLabel}
@@ -16,30 +16,22 @@
                 onsubmit={onSubmitEmail}
                 type="email"
             ></dx-input>
-            <div
-                class="graphic graphic-trees-small"
-                alt="Small group of trees"
-            ></div>
+            <div class="graphic graphic-trees-small" alt=""></div>
         </div>
         <div
             if:true={showLargeSignup}
             class="content-container content-container_top_large"
         >
-            <div
-                class="graphic graphic-large"
-                alt="Outdoors lineart with trees, moon, and mountains."
-            ></div>
+            <div class="graphic graphic-large" alt=""></div>
             <div class="subscription">
-                <h3 class="dx-text-heading-3">
+                <h2 class="dx-text-heading-3">
                     Get the latest
                     <br />
-                    developer updates
-                </h3>
+                    developer updates.
+                </h2>
                 <p class="dx-text-body-3">
-                    Yes, I would like to receive Salesforce Developers updates
-                    as well as marketing communications regarding Salesforce
-                    products, services, and events. I can unsubscribe at any
-                    time.
+                    Click "Subscribe" below to be directed to the Salesforce
+                    developer communication sign up page.
                 </p>
                 <p class="dx-text-body-3">
                     Salesforce values your privacy. To learn more, visit
@@ -63,7 +55,10 @@
                 ></dx-input>
             </div>
         </div>
-        <div class="content-container content-container_middle">
+        <div
+            if:true={showContainerMiddle}
+            class="content-container content-container_middle"
+        >
             <a class="logo" href="/">
                 <img
                     src="/assets/svg/salesforce-logo-corporate.svg"
@@ -106,17 +101,17 @@
                 </dx-button>
             </dx-dropdown>
             <div class="general">
-                <template for:each={generalLinks} for:item="general">
-                    <div class="footer-group" key={general.label}>
-                        <span class="subheading">{general.label}</span>
-                        <template for:each={general.options} for:item="option">
+                <template for:each={generalLinks} for:item="item">
+                    <div class="footer-group" key={item.id}>
+                        <h2 class="subheading">{item.label}</h2>
+                        <template for:each={item.options} for:item="option">
                             <dx-footer-option
-                                key={option.label}
-                                general-label={general.label}
+                                key={option.id}
+                                general-label={item.label}
                                 label={option.label}
-                                href={option.href}
+                                href={option.link.href}
                                 icon-symbol={option.iconSymbol}
-                                target={option.target}
+                                target={option.link.target}
                             ></dx-footer-option>
                         </template>
                     </div>
@@ -126,13 +121,27 @@
         <div class="content-container content-container_bottom">
             <div class="terms">
                 <span>
-                    &copy; Copyright {currentYear} Salesforce.com, inc.&nbsp;
+                    &copy; Copyright {currentYear} Salesforce, Inc.&nbsp;
                     <a href={intellectualHref}>All rights reserved.</a>
                     &nbsp;Various trademarks held by their respective owners.
                 </span>
                 <div class="terms_links">
                     <template for:each={termsLinks} for:item="term">
-                        <a href={term.href} key={term.label}>{term.label}</a>
+                        <template if:true={term.onclick}>
+                            <a
+                                href={term.href}
+                                key={term.label}
+                                rel={term.rel}
+                                onclick={term.onclick}
+                            >
+                                {term.label}
+                            </a>
+                        </template>
+                        <template if:false={term.onclick}>
+                            <a href={term.href} key={term.label} rel={term.rel}>
+                                {term.label}
+                            </a>
+                        </template>
                     </template>
                 </div>
             </div>