@salesforcedevs/dx-components 0.34.0 → 0.37.0

package/lwc.config.json

@@ -18,6 +18,7 @@
         "dx/cardPodcastEpisodeProvider",
         "dx/cardSmall",
         "dx/cardTrailheadModule",
+        "dx/cardTrial",
         "dx/cardVideoPreview",
         "dx/checkbox",
         "dx/checkboxNative",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.34.0",
+    "version": "0.37.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "3fb8d8f361564473da583dae0a1e90cdeb943601"
+    "gitHead": "afae7d1e2e986271f9f496635b39ab5f3c193b5e"
 }

package/src/modules/dx/button/button.ts

@@ -21,6 +21,8 @@ export default class Button extends LightningElement {
     @api variant: ButtonVariant = "primary";
     @api inlineTextColor: ButtonTextColor = "dark";
     @api font: "display" | "sans" = "display";
+    @api name?: string;
+    @api value?: any;
 
     // button props
     @api type: "submit" | "reset" | "button" = "button";

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

@@ -0,0 +1,71 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/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 {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+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);
+}

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

@@ -0,0 +1,31 @@
+<template>
+    <a class={className} href={href} target={target}>
+        <dx-icon-badge
+            class="badge-main"
+            background-color={badgeBackgroundColor}
+            symbol={badgeSymbol}
+            sprite={badgeSprite}
+        ></dx-icon-badge>
+        <span class="label dx-text-label-3">{label}</span>
+        <dx-card-title
+            href={href}
+            target={target}
+            title={title}
+        ></dx-card-title>
+        <p class="body dx-text-body-3 static-font">{body}</p>
+        <span class="terms dx-text-body-3 static-font">{terms}</span>
+        <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>
+        <img if:true={imgSrc} src={imgSrc} alt="" />
+    </a>
+</template>

package/src/modules/dx/cardTrial/cardTrial.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { toJson } from "utils/normalizers";
+
+export default class CardTrial extends LightningElement {
+    @api badgeBackgroundColor?: string = "indigo-vibrant-90";
+    @api badgeSprite?: string = "salesforcebrand";
+    @api badgeSymbol!: string;
+    @api body!: string;
+    @api href!: string;
+    @api label!: string;
+    @api imgSrc?: string;
+    @api target?: string;
+    @api terms!: string;
+    @api title!: string;
+    @api
+    get details() {
+        return this._details;
+    }
+    set details(value) {
+        this._details = toJson(value);
+    }
+
+    private _details!: string[];
+
+    private get className() {
+        return cx(
+            "card-trial",
+            "dx-card-base",
+            "dx-card-base_section-vertical",
+            this.imgSrc && "has-image"
+        );
+    }
+}

package/src/modules/dx/contentArchive/contentArchive.html

@@ -29,28 +29,28 @@
                         name="site"
                         title={contentTypeTitle}
                         options={contentTypeList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
                         title={dateTitle}
                         options={dateList}
                         variant="nested"
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
                             title={authorTitle}
                             options={authorList}
-                            onchange={updateSelectedFilters}
+                            onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
                         title={categoryTitle}
                         options={categoryList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                 </template>
             </dx-modal-drawer>
@@ -76,28 +76,28 @@
                         name="site"
                         title={contentTypeTitle}
                         options={contentTypeList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
                         title={dateTitle}
                         options={dateList}
                         variant="nested"
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
                             title={authorTitle}
                             options={authorList}
-                            onchange={updateSelectedFilters}
+                            onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
                         title={categoryTitle}
                         options={categoryList}
-                        onchange={updateSelectedFilters}
+                        onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                 </template>
             </template>

package/src/modules/dx/contentArchive/contentArchive.ts

@@ -2,10 +2,19 @@ import { LightningElement } from "lwc";
 import cx from "classnames";
 import { getArchivePosts, getArchiveFilterList } from "utils/contentArchive";
 import { sortSplittedPostsByMonth } from "utils/dates";
+import { Filters } from "./contentArchive.types";
+import { QueryCoordinator } from "utils/queryCoordinator";
 
 const MOBILE_MATCH = "767px";
 
+const QUERY_SITE_FILTER = "c__filter";
+const PODCASTS = { id: 2, name: "Podcasts" };
+const BLOGS = { id: 1, name: "Blogs" };
 export default class ContentArchive extends LightningElement {
+    private _contentTypeList = [
+        { ...BLOGS, checked: false },
+        { ...PODCASTS, checked: false }
+    ];
     private totalResults: number | null = null;
     private currentPage: number = 1;
     private totalPages: number = 1;
@@ -22,7 +31,7 @@ export default class ContentArchive extends LightningElement {
     private isMobile: boolean = false;
     private mobileMatchMedia!: MediaQueryList;
 
-    private selectedFilterMenuData: any = {
+    private selectedFilterMenuData: Filters = {
         site: [],
         dates: [],
         authors: [],
@@ -88,10 +97,7 @@ export default class ContentArchive extends LightningElement {
     }
 
     get contentTypeList() {
-        return [
-            { id: 1, name: "Blogs" },
-            { id: 2, name: "Podcasts" }
-        ];
+        return this._contentTypeList;
     }
 
     get hideBlogFilters() {
@@ -146,9 +152,37 @@ export default class ContentArchive extends LightningElement {
         });
     }
 
-    private updateSelectedFilters(e: CustomEvent) {
+    private handleUpdateSiteFilter(e: CustomEvent) {
         const { value, name, checked } = e.detail;
 
+        let selectedFilters: string[] | null = [];
+        this._contentTypeList.forEach((option) => {
+            if (option.name === value.name) {
+                option.checked = checked;
+            }
+            if (option.checked) {
+                selectedFilters?.push(option.name);
+            }
+        });
+
+        if (selectedFilters?.length === 0) {
+            selectedFilters = null;
+        }
+        QueryCoordinator.setUrlParamValue(QUERY_SITE_FILTER, selectedFilters);
+
+        this.updateSelectedFilters(value, name, checked);
+    }
+
+    private handleFiltersEvent(e: CustomEvent) {
+        const { value, name, checked } = e.detail;
+        this.updateSelectedFilters(value, name, checked);
+    }
+
+    private updateSelectedFilters(
+        value: any,
+        name: keyof Filters,
+        checked: any
+    ) {
         let copy = {
             ...this.selectedFilterMenuData
         };
@@ -217,7 +251,7 @@ export default class ContentArchive extends LightningElement {
     private removeFilterItem(e: any) {
         const { name, value } = e.target;
 
-        this.updateSelectedFilters(
+        this.handleUpdateSiteFilter(
             new CustomEvent("updateselectedfilters", {
                 detail: {
                     name,
@@ -395,8 +429,32 @@ export default class ContentArchive extends LightningElement {
         this.onMobileChange(this.mobileMatchMedia);
         this.mobileMatchMedia.addEventListener("change", this.onMobileChange);
 
+        const presetFilters: string[] =
+            QueryCoordinator.getUrlParamValue(QUERY_SITE_FILTER);
+        if (
+            presetFilters?.some((filterString) => filterString === BLOGS.name)
+        ) {
+            this.presetSiteFilter(BLOGS);
+        }
+        if (
+            presetFilters?.some(
+                (filterString) => filterString === PODCASTS.name
+            )
+        ) {
+            this.presetSiteFilter(PODCASTS);
+        }
+
         if (this.posts.length === 0) {
             this.fetchPostsByCardType();
         }
     }
+
+    presetSiteFilter(filter: any) {
+        this._contentTypeList.forEach((option) => {
+            if (option.name === filter.name) {
+                option.checked = true;
+            }
+        });
+        this.updateSelectedFilters(filter, "site", true);
+    }
 }

package/src/modules/dx/contentArchive/contentArchive.types.ts

@@ -0,0 +1,6 @@
+export interface Filters {
+    site: any[];
+    dates: any[];
+    authors: any[];
+    categories: any[];
+}

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

@@ -30,6 +30,7 @@
                                     label={option.name}
                                     name={option.name}
                                     value={option}
+                                    checked={option.checked}
                                     onchange={onChange}
                                 ></dx-checkbox>
                             </template>

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

@@ -1,9 +1,14 @@
 import { LightningElement, api } from "lwc";
 
+interface Option {
+    id: number;
+    name: string;
+    checked: boolean;
+}
 export default class FilterMenu extends LightningElement {
     @api name: string = "";
     @api title: string = "Filter Menu";
-    @api options: any = [];
+    @api options: Option[] = [];
     @api variant: string = "base";
 
     private showMore: boolean = false;
@@ -80,7 +85,6 @@ export default class FilterMenu extends LightningElement {
 
     private onChange(e: any) {
         const { checked, value } = e.detail;
-
         this.dispatchEvent(
             new CustomEvent("change", {
                 detail: {

package/src/modules/helpers/card/card.css

@@ -233,26 +233,26 @@ a.dx-card-base:hover dx-card-title {
         -webkit-line-clamp: 3;
     }
 
-    .dx-text-body-2 {
+    .dx-text-body-2:not(.static-font) {
         font-size: var(--dx-g-text-sm);
         line-height: 20px;
     }
 
-    .dx-text-body-3 {
+    .dx-text-body-3:not(.static-font) {
         font-size: var(--dx-g-text-xs);
         line-height: 16px;
     }
 
-    .dx-text-heading-3 {
+    .dx-text-heading-3:not(.static-font) {
         font-size: 24px;
         line-height: 28px;
     }
 
-    .dx-text-heading-5 {
+    .dx-text-heading-5:not(.static-font) {
         font-size: 12px;
     }
 
-    .dx-text-heading-6 {
+    .dx-text-heading-6:not(.static-font) {
         font-size: var(--dx-g-text-sm);
     }
 }

package/src/modules/utils/queryCoordinator/queryCoordinator.ts

@@ -0,0 +1,17 @@
+export class QueryCoordinator {
+    static getUrlParamValue(key: string) {
+        return JSON.parse(
+            new URL(window.location.href).searchParams.get(key) || "null"
+        );
+    }
+
+    static setUrlParamValue(key: string, value: any) {
+        const newUrl = new URL(window.location.href);
+        if (value) {
+            newUrl.searchParams.set(key, JSON.stringify(value));
+        } else {
+            newUrl.searchParams.delete(key);
+        }
+        window.history.replaceState(null, "", newUrl.href);
+    }
+}