@salesforcedevs/dw-components 1.3.323-alpha.2 → 1.3.323

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.323-alpha.2",
+    "version": "1.3.323",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -25,8 +25,5 @@
         "@types/lodash.uniqby": "^4.7.7",
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
-    },
-    "volta": {
-        "node": "16.19.1"
     }
 }

package/src/modules/dw/blogsGrid/blogsGrid.html

@@ -50,7 +50,7 @@
                     img-alt={post.imgAlt}
                     img-src={post.imgSrc}
                     key={post.id}
-                    title={post.title}
+                    header={post.title}
                 ></dx-card-blog-post>
                 <dx-hr
                     spacing="2xs"

package/src/modules/dw/browseTrials/browseTrials.html

@@ -1,5 +1,5 @@
 <template>
-    <dx-section title={title}>
+    <dx-section header={header}>
         <dx-tab-panel-list
             tabs={tabLabels}
             onchange={handleTabChange}
@@ -26,7 +26,7 @@
                     </div>
                     <template for:each={filteredCategories} for:item="category">
                         <dx-section
-                            title={category.title}
+                            header={category.title}
                             subtitle={category.subtitle}
                             heading-level="4"
                             subtitle-level="2"
@@ -50,7 +50,7 @@
                                             href={card.href}
                                             label={card.label}
                                             terms={card.terms}
-                                            title={card.title}
+                                            header={card.title}
                                             button-one-cta={card.buttonOneCta}
                                             button-one-href={card.buttonOneHref}
                                             button-one-icon={card.buttonOneIcon}
@@ -69,7 +69,7 @@
                                             href={card.href}
                                             label={card.label}
                                             terms={card.terms}
-                                            title={card.title}
+                                            header={card.title}
                                             button-one-cta={card.buttonOneCta}
                                             button-one-href={card.buttonOneHref}
                                             button-one-icon={card.buttonOneIcon}

package/src/modules/dw/browseTrials/browseTrials.ts

@@ -4,7 +4,7 @@ import { toJson } from "dxUtils/normalizers";
 const STORED_TAB_SELECTED_KEY = "storedTabIndex";
 
 export default class BrowseTrials extends LightningElement {
-    @api title = "Browse Trials";
+    @api header = "Browse Trials";
 
     @api
     get trials() {

package/src/modules/dw/cardBlogPostProvider/cardBlogPostProvider.html

@@ -8,7 +8,7 @@
             img-alt={post.imgAlt}
             img-src={post.imgSrc}
             key={post.id}
-            title={post.title}
+            header={post.title}
             authors={post.authors}
         ></dx-card-blog-post>
         <dx-hr spacing="2xs" class="mobile-divider_posts" key={post.id}></dx-hr>

package/src/modules/dw/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.html

@@ -6,7 +6,7 @@
             href={episode.href}
             key={episode.id}
             length={episode.length}
-            title={episode.title}
+            header={episode.title}
         ></dx-card-podcast-episode>
         <dx-hr spacing="2xs" class="mobile-divider" key={episode.id}></dx-hr>
     </template>

package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.css

@@ -1,7 +1,3 @@
-@import "dxHelpers/reset";
-@import "dxHelpers/text";
-@import "dxHelpers/card";
-
 dx-section:first-of-type {
     --dx-c-section-padding-bottom: 0;
 }
@@ -10,58 +6,16 @@ dx-section {
     --dx-c-section-position: revert;
 }
 
-.feature-card {
-    display: flex;
-    flex-direction: row;
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: var(--dx-g-box-shadow-sm);
-    cursor: pointer;
-
-    --dx-c-card-title-color: var(--dx-g-blue-vibrant-20);
-}
-
-.feature-card:hover {
-    --dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
-}
-
-.feature-card-body {
-    padding-right: 20px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.dx-text-display-6 {
-    color: var(--dx-c-card-title-color);
-    transition: var(--dx-g-transition-hue-1x);
-    font-size: var(--dx-g-text-xl);
-    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;
-}
-
 .badge-link-container {
     padding-top: var(--dx-g-spacing-md);
-    width: 100%;
 }
 
 .badge-container {
-    display: flex;
-    flex-flow: row wrap;
-    width: 100%;
-    gap: 1em;
     padding-top: 0;
 }
 
 .external-link-container {
     padding-top: var(--dx-g-spacing-md);
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin-top: 4em;
-    gap: 1em;
 }
 
 .item-container {

package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.html

@@ -1,85 +1,142 @@
 <template>
     <dx-section>
-        <div class="feature-card dx-card-base">
-            <div class="feature-card-body">
-                <h4>Featured App</h4>
-                <h3 class="dx-text-display-6">{featuredCodeSample.title}</h3>
-                <span class="feature-card-content dx-text-body-2">
-                    {featuredCodeSample.body}
+        <dx-feature
+            header={featuredCodeSample.title}
+            button-href={featuredCodeSample.href}
+            button-label="Explore on GitHub"
+            image-src={featuredCodeSample.imgSrc}
+            variant="display"
+            label="Featured Demo"
+            is-external-link
+            class="code-samples-feature"
+        >
+            {featuredCodeSample.body}
+        </dx-feature>
+    </dx-section>
+
+    <dx-section header="Browse Demos">
+        <div class="docs-action-bar">
+            <div class="records-container">
+                <span if:true={endingRecord}>
+                    Showing { startingRecord } to { endingRecord } of {
+                    filteredSamples.length }
                 </span>
-                <div class="badge-link-container">
-                    <div class="external-link-container">
-                        <dx-button
-                            target={target}
-                            icon-symbol="new_window"
-                            variant="primary"
-                            href={featuredCodeSample.githubLink}
-                            onclick={handleReadItClick}
-                        >
-                            Explore on GitHub
-                        </dx-button>
-                        <dx-button
-                            target={target}
-                            variant="secondary"
-                            href={featuredCodeSample.trailheadLink}
-                            onclick={handleReadItClick}
-                        >
-                            Learn on Trailhead
-                        </dx-button>
-                    </div>
-                </div>
             </div>
-            <img
-                class="image dx-card-base_image"
-                src={featuredCodeSample.img}
-                alt={featuredCodeSample.title}
-            />
+            <div class="filters-container">
+                <dx-popover if:true={showSourcesFilter} width="max-content">
+                    <dx-button
+                        class="filter-button"
+                        variant="tertiary"
+                        icon-symbol="chevrondown"
+                        slot="control"
+                    >
+                        Source
+                    </dx-button>
+                    <dx-checkbox-group
+                        legend="Source"
+                        options={sources}
+                        slot="content"
+                        onchange={handleSourceFilterChange}
+                        value={selectedSourceFilter}
+                        class="filter-checkbox-group"
+                    ></dx-checkbox-group>
+                </dx-popover>
+                <dx-popover width="max-content">
+                    <dx-button
+                        class="filter-button"
+                        variant="tertiary"
+                        icon-symbol="chevrondown"
+                        slot="control"
+                    >
+                        Type
+                    </dx-button>
+                    <dx-checkbox-group
+                        legend="Type"
+                        options={types}
+                        slot="content"
+                        onchange={handleTypeFilterChange}
+                        value={selectedTypeFilter}
+                        class="filter-checkbox-group"
+                    ></dx-checkbox-group>
+                </dx-popover>
+                <dx-popover width="max-content">
+                    <dx-button
+                        class="filter-button"
+                        variant="tertiary"
+                        icon-symbol="chevrondown"
+                        slot="control"
+                    >
+                        Products
+                    </dx-button>
+                    <dx-checkbox-group
+                        legend="Products"
+                        options={products}
+                        slot="content"
+                        onchange={handleProductFilterChange}
+                        value={selectedProductFilter}
+                        class="filter-checkbox-group"
+                    ></dx-checkbox-group>
+                </dx-popover>
+            </div>
+            <dx-input
+                size="small"
+                placeholder="Search..."
+                icon-symbol="search"
+                shortcut-key="j"
+                class="docs-search-input"
+                onchange={handleSearchChange}
+                value={searchTerm}
+            ></dx-input>
         </div>
-    </dx-section>
-
-    <dx-section title="Explore the Apps">
         <dx-grid columns={tileColumns} if:false={showEmptyState}>
             <dx-card-docs
-                for:each={samples}
+                class="content-card"
+                for:each={currentPageSamples}
                 for:item="item"
                 for:index="i"
                 key={item.id}
                 body={item.body}
                 label={item.type}
-                title={item.title}
-                href={item.githubLink}
-                img-src={item.img}
+                header={item.title}
+                href={item.href}
             >
                 <div class="badge-link-container">
                     <div class="badge-container">
                         <dx-metadata-badge
-                            for:each={item.tags}
-                            for:item="tag"
-                            key={tag}
-                            value={tag}
+                            value={item.product}
+                            size="small"
                         ></dx-metadata-badge>
                     </div>
                     <div class="external-link-container">
                         <dx-button
                             target={target}
                             icon-symbol="new_window"
-                            variant="primary"
-                            href={item.githubLink}
+                            variant="inline"
+                            href={item.href}
                             onclick={handleReadItClick}
                         >
-                            Explore on GitHub
-                        </dx-button>
-                        <dx-button
-                            target={target}
-                            variant="secondary"
-                            href={item.trailheadLink}
-                            onclick={handleReadItClick}
-                        >
-                            Learn on Trailhead
+                            {item.buttonText}
                         </dx-button>
                     </div>
                 </div>
             </dx-card-docs>
         </dx-grid>
+        <div if:false={hidePagination} class="pagination-container">
+            <dx-pagination
+                if:false={showEmptyState}
+                current-page={page}
+                total-pages={totalPages}
+                pages-to-show={pagesToShow}
+                onpagechange={goToPage}
+            ></dx-pagination>
+        </div>
+        <dx-empty-state
+            variant="alt"
+            header="Beep boop. That did not compute."
+            subtitle={emptyStateSubtitle}
+            body={emptyStateBody}
+            suggestions={emptyStateSuggestions}
+            if:true={showEmptyState}
+        ></dx-empty-state>
     </dx-section>
 </template>

package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.ts

@@ -1,20 +1,128 @@
 import { api, LightningElement } from "lwc";
-
-import { CodeSample } from "typings/custom";
+import qs from "query-string";
+import uniqBy from "lodash.uniqby";
+import orderBy from "lodash.orderby";
+import cloneDeep from "lodash.clonedeep";
+import { DropdownItem, CodeSample } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
+const PRODUCT_FILTER_ALL_PRODUCTS = "all products";
+const WAIT_TIME = 500;
 const DEFAULT_BUTTON_TEXT = "Explore on GitHub";
 export default class CodeSamplesGrid extends LightningElement {
+    private searchTerm = "";
+    private selectedProductFilter: string[] | null = null;
+    private selectedTypeFilter: string[] | null = null;
+    private selectedSourceFilter: string[] | null = null;
+    private page = 1;
+    private pageSize = 9;
+    private startingRecord = 1;
+    private endingRecord = 24;
+    private totalRecountCount = 0;
+    private totalPages = 1;
     private _featuredCodeSample?: CodeSample = undefined;
     private _samplesList: CodeSample[] = [];
+    private _typesFiltersList: DropdownItem[] = [];
+    private _sourceFiltersList: DropdownItem[] = [];
+    private _productFiltersList: DropdownItem[] = [];
+    private matchDesktop!: MediaQueryList;
+    private matchMobile!: MediaQueryList;
+    private matchMobileSmall!: MediaQueryList;
     private deviceType: "desktop" | "mobile" | "mobile-small" = "desktop";
+    private _searchTimeout?: number;
     private target = "_blank";
     private isDesktop = "(min-width: 1024px)";
     private isMobile = "(min-width: 401px) and (max-width: 1023px)";
     private isMobileSmall = "(max-width: 400px)";
+    private showSourcesFilter = false;
+    private filteredItemsSelected: boolean = false;
+    private filtersDefaultValue = {
+        selectedSourceFilter: [] as string[],
+        selectedTypeFilter: [] as string[],
+        selectedProductFilter: [] as string[],
+        searchTerm: "",
+        page: "1"
+    };
 
     connectedCallback(): void {
-        console.log(this._samplesList);
+        this.matchDesktop = window.matchMedia(this.isDesktop);
+        this.matchDesktop.addEventListener("change", this.handleView);
+
+        this.matchMobile = window.matchMedia(this.isMobile);
+        this.matchMobile.addEventListener("change", this.handleView);
+
+        this.matchMobileSmall = window.matchMedia(this.isMobileSmall);
+        this.matchMobileSmall.addEventListener("change", this.handleView);
+        window.addEventListener("popstate", this.handleURLStateChange);
+        if (this.matchDesktop.matches) {
+            this.deviceType = "desktop";
+        }
+        if (this.matchMobile.matches) {
+            this.deviceType = "mobile";
+        }
+        if (this.matchMobileSmall.matches) {
+            this.deviceType = "mobile-small";
+        }
+        this.evaluateQueryParams(false);
+    }
+
+    handleURLStateChange(): void {
+        this.evaluateQueryParams(true);
+        this.scrollToTop();
+    }
+
+    evaluateQueryParams(resetFilters: boolean): void {
+        let page = "1";
+        if (resetFilters) {
+            this.selectedSourceFilter =
+                this.filtersDefaultValue.selectedSourceFilter;
+            this.selectedTypeFilter =
+                this.filtersDefaultValue.selectedTypeFilter;
+            this.selectedProductFilter =
+                this.filtersDefaultValue.selectedProductFilter;
+        }
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.toString()) {
+            if (urlParams.has("source")) {
+                this.selectedSourceFilter = urlParams.getAll("source");
+            }
+            if (urlParams.has("type")) {
+                this.selectedTypeFilter = urlParams.getAll("type");
+            }
+            if (urlParams.get("service")) {
+                this.selectedProductFilter = urlParams
+                    .get("service")!
+                    .split(",");
+            }
+            if (urlParams.get("filter_text")) {
+                this.searchTerm = (
+                    urlParams.get("filter_text") || ""
+                ).toLowerCase();
+            }
+            if (urlParams.has("page")) {
+                page = urlParams.get("page")!;
+            }
+        }
+        this.calculatePagination(page, true);
+    }
+
+    disconnectedCallback(): void {
+        this.matchDesktop.removeEventListener("change", this.handleView);
+        this.matchMobile.removeEventListener("change", this.handleView);
+        this.matchMobileSmall.removeEventListener("change", this.handleView);
+        window.removeEventListener("popstate", this.handleURLStateChange);
+
+        if (!this.filteredItemsSelected) {
+            this.selectedProductFilter?.forEach((filter) => {
+                track(document, "custEv_filterAbandoned", {
+                    click_text: filter,
+                    element_title: "CodeSamplesGrid",
+                    element_type: "filter abandoned",
+                    content_category: "filter"
+                });
+            });
+        }
     }
 
     @api
@@ -33,10 +141,12 @@ export default class CodeSamplesGrid extends LightningElement {
             title: sample.title,
             body: sample.body,
             buttonText: DEFAULT_BUTTON_TEXT,
-            githubLink: sample.githubLink,
-            trailheadLink: sample.trailheadLink,
-            img: sample.img,
-            tags: sample.tags,
+            href: sample.href,
+            imgSrc: sample.imgSrc,
+            product: sample.product,
+            type: sample.type,
+            // source: sample.source,
+            source: "none",
             target: this.target
         }));
     }
@@ -45,8 +155,128 @@ export default class CodeSamplesGrid extends LightningElement {
         return this._samplesList;
     }
 
+    @api
+    set products(value: string) {
+        const productsFilters = toJson(value).map((sample: string) => ({
+            label: sample,
+            value: sample.toLowerCase()
+        }));
+
+        this._productFiltersList = orderBy(
+            uniqBy([...productsFilters] as any, "value"),
+            ["value"],
+            ["asc"]
+        ) as any[];
+        this.selectedProductFilter = this._productFiltersList.map(
+            (filter) => filter.value
+        );
+        this.filtersDefaultValue.selectedProductFilter = cloneDeep(
+            this.selectedProductFilter
+        );
+    }
+    get products(): DropdownItem[] {
+        return this._productFiltersList;
+    }
+
+    @api
+    set types(value: string) {
+        const typesFilter = toJson(value).map((sample: string) => ({
+            label: sample,
+            value: sample.toLowerCase()
+        }));
+
+        this._typesFiltersList = orderBy(
+            uniqBy([...typesFilter] as any, "value"),
+            ["value"],
+            ["asc"]
+        ) as any[];
+        this.selectedTypeFilter = this._typesFiltersList.map(
+            (filter) => filter.value
+        );
+        this.filtersDefaultValue.selectedTypeFilter = cloneDeep(
+            this.selectedTypeFilter
+        );
+    }
+    get types(): DropdownItem[] {
+        return this._typesFiltersList;
+    }
+
+    @api
+    set sources(value: string) {
+        const parsedValues = toJson(value);
+        this.showSourcesFilter = parsedValues.length > 0;
+        const sourcesFilter = parsedValues.map((sample: string) => ({
+            label: sample,
+            value: sample.toLowerCase()
+        }));
+
+        this._sourceFiltersList = orderBy(
+            uniqBy([...sourcesFilter] as any, "value"),
+            ["value"],
+            ["asc"]
+        ) as any;
+        this.selectedSourceFilter = this._sourceFiltersList.map(
+            (filter) => filter.value
+        );
+        this.filtersDefaultValue.selectedSourceFilter = cloneDeep(
+            this.selectedSourceFilter
+        );
+    }
+    get sources(): DropdownItem[] {
+        return this._sourceFiltersList;
+    }
+
+    get filteredSamples(): CodeSample[] {
+        return this.filterSamples([...this.samples]);
+    }
+
+    get currentPageSamples(): CodeSample[] {
+        return this.filteredSamples.slice(
+            this.startingRecord - 1,
+            this.endingRecord
+        );
+    }
+
+    get typesList(): DropdownItem[] {
+        return this._typesFiltersList || [];
+    }
+
+    get productFiltersList(): DropdownItem[] {
+        return this._productFiltersList || [];
+    }
+
+    get showEmptyState(): boolean {
+        return !this.filteredSamples.length;
+    }
+
     get tileColumns(): string {
-        return this.deviceType === "desktop" ? "two" : "one";
+        return this.deviceType === "desktop" ? "three" : "two";
+    }
+
+    get pagesToShow(): number {
+        return this.deviceType === "mobile-small" ? 3 : 5;
+    }
+
+    get hidePagination(): boolean {
+        return this.totalPages < 2;
+    }
+
+    get emptyStateSubtitle() {
+        return (
+            "Sorry, no results were found for your search" +
+            (this.searchTerm !== "" ? ` "${this.searchTerm}"` : "")
+        );
+    }
+
+    get emptyStateBody() {
+        return "Search Tips:";
+    }
+
+    get emptyStateSuggestions() {
+        return JSON.stringify([
+            "Please consider misspellings",
+            "Try different search keywords"
+        ]);
     }
 
     handleView = (e: MediaQueryListEvent | MediaQueryList): void => {
@@ -64,4 +294,169 @@ export default class CodeSamplesGrid extends LightningElement {
             this.deviceType = "mobile-small";
         }
     };
+
+    goToPage(e: CustomEvent): void {
+        const page = e.detail;
+        this.displayRecordsPerPage(page);
+        this.setSearchParams("page", page ? page.toString() : "1");
+        this.scrollToTop();
+    }
+
+    displayRecordsPerPage(page: number): void {
+        this.page = page;
+        this.startingRecord =
+            page === 1 ? page : (page - 1) * this.pageSize + 1;
+        this.endingRecord = this.pageSize * page;
+        this.endingRecord =
+            this.endingRecord > this.totalRecountCount
+                ? this.totalRecountCount
+                : this.endingRecord;
+    }
+
+    handleSearchChange(event: CustomEvent): void {
+        const value = event.detail;
+        this.searchTerm = value.toLowerCase();
+        window.clearTimeout(this._searchTimeout);
+        this._searchTimeout = window.setTimeout(() => {
+            this.calculatePagination();
+        }, WAIT_TIME);
+    }
+
+    handleSourceFilterChange(event: CustomEvent): void {
+        this.selectedSourceFilter = event.detail.value;
+        this.calculatePagination();
+    }
+
+    handleTypeFilterChange(event: CustomEvent): void {
+        this.selectedTypeFilter = event.detail.value;
+        this.calculatePagination();
+    }
+
+    handleProductFilterChange(event: CustomEvent): void {
+        if (event.detail.checkedValue === PRODUCT_FILTER_ALL_PRODUCTS) {
+            if (event.detail.checked) {
+                this.selectedProductFilter = this.productFiltersList.map(
+                    (filter) => filter.value
+                );
+            } else {
+                this.selectedProductFilter = [];
+            }
+        } else {
+            let newList = event.detail.value;
+            if (!event.detail.checked) {
+                newList = newList.filter(
+                    (val: typeof PRODUCT_FILTER_ALL_PRODUCTS) =>
+                        val !== PRODUCT_FILTER_ALL_PRODUCTS
+                );
+            }
+            this.selectedProductFilter = newList;
+        }
+        this.calculatePagination();
+        this.filteredItemsSelected = false;
+    }
+
+    handleLanguageFilterChange(event: CustomEvent): void {
+        this.selectedTypeFilter = event.detail.value;
+        this.setSearchParams("type", this.selectedTypeFilter);
+    }
+
+    filterSamples(samples: CodeSample[]): CodeSample[] {
+        const filtered = samples
+            .filter((contentItem) => {
+                const matchesSearchTerm =
+                    contentItem.body.toLowerCase().includes(this.searchTerm) ||
+                    contentItem.title.toLowerCase().includes(this.searchTerm);
+                const matchesProductFilters =
+                    !this.selectedProductFilter ||
+                    !this.selectedProductFilter.length ||
+                    this.selectedProductFilter.includes(
+                        PRODUCT_FILTER_ALL_PRODUCTS
+                    ) ||
+                    (typeof contentItem.product === "string" &&
+                        this.selectedProductFilter.includes(
+                            contentItem.product.toLowerCase()
+                        ));
+                const matchesTypeFilters =
+                    !this.selectedTypeFilter ||
+                    !this.selectedTypeFilter.length ||
+                    (typeof contentItem.type === "string" &&
+                        this.selectedTypeFilter.includes(
+                            contentItem.type.toLowerCase()
+                        ));
+                const matchesSourceFilters =
+                    !this.selectedSourceFilter ||
+                    !this.selectedSourceFilter.length ||
+                    (typeof contentItem.source === "string" &&
+                        this.selectedSourceFilter.includes(
+                            contentItem.source.toLowerCase()
+                        ));
+
+                return (
+                    matchesSearchTerm &&
+                    matchesProductFilters &&
+                    matchesTypeFilters &&
+                    matchesSourceFilters
+                );
+            })
+            .sort((a: CodeSample, b: CodeSample) => {
+                return a.title.localeCompare(b.title);
+            });
+        return filtered;
+    }
+
+    calculatePagination(page?: string, skipSetSearchParams = false): void {
+        if (page) {
+            this.page = parseInt(page, 10) || 1;
+        }
+        this.totalRecountCount = this.filteredSamples.length;
+        this.totalPages = Math.ceil(this.totalRecountCount / this.pageSize);
+        this.displayRecordsPerPage(this.page);
+        if (!skipSetSearchParams) {
+            this.setSearchParams();
+        }
+    }
+
+    scrollToTop(): void {
+        this.template
+            .querySelector(".docs-grid-container")!
+            .scrollIntoView({ behavior: "smooth" });
+    }
+
+    setSearchParams(key?: string | null, val?: string[] | null): void {
+        const service =
+            this.selectedProductFilter!.length ===
+            this.productFiltersList.length
+                ? ""
+                : this.selectedProductFilter!.join(",");
+        const params: { [key: string]: any } = {
+            filter_text: this.searchTerm,
+            service,
+            type: this.selectedTypeFilter,
+            page: this.page.toString(),
+            source: this.selectedSourceFilter
+        };
+        if (key) {
+            params[key] = key === "service" ? val!.join(",") : val;
+        }
+        for (const _key in params) {
+            if (!params[_key]) {
+                delete params[_key];
+            }
+        }
+        const searchParams = qs.stringify(params);
+        const newurl = `${window.location.pathname}?${searchParams}`;
+        window.history.pushState({ path: newurl }, "", newurl);
+    }
+
+    handleReadItClick() {
+        this.filteredItemsSelected = true;
+        this.selectedProductFilter?.forEach((filter) => {
+            track(document, "custEv_filterApplied", {
+                click_text: filter,
+                click_url: `${window.location.origin}${filter}`,
+                element_type: "filter applied",
+                content_category: "filter"
+            });
+        });
+    }
 }

package/src/modules/dw/contentArchive/contentArchive.html

@@ -1,7 +1,7 @@
 <template>
     <dx-featured-content-header
         class="documentation_header"
-        title="Content Archive"
+        header="Content Archive"
         body="Learn more about the topics that interest you most by exploring the full collection of Salesforce Developers blog and podcast content."
         dark="true"
         no-swoop={isMobile}
@@ -27,13 +27,13 @@
                     </div>
                     <dx-filter-menu
                         name="content-type"
-                        title={contentTypeTitle}
+                        header={contentTypeTitle}
                         options={contentTypeList}
                         onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
-                        title={dateTitle}
+                        header={dateTitle}
                         options={dateList}
                         variant="nested"
                         filters-dates-loading={filtersDatesLoading}
@@ -42,20 +42,20 @@
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
-                            title={authorTitle}
+                            header={authorTitle}
                             options={authorList}
                             onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
-                        title={categoryTitle}
+                        header={categoryTitle}
                         options={categoryList}
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="language"
-                        title={languageTitle}
+                        header={languageTitle}
                         options={languagesList}
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
@@ -81,13 +81,13 @@
                     </div>
                     <dx-filter-menu
                         name="contentType"
-                        title={contentTypeTitle}
+                        header={contentTypeTitle}
                         options={contentTypeList}
                         onchange={handleUpdateSiteFilter}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="dates"
-                        title={dateTitle}
+                        header={dateTitle}
                         options={dateList}
                         filters-dates-loading={filtersDatesLoading}
                         variant="nested"
@@ -96,20 +96,20 @@
                     <template if:false={hideBlogFilters}>
                         <dx-filter-menu
                             name="authors"
-                            title={authorTitle}
+                            header={authorTitle}
                             options={authorList}
                             onchange={handleFiltersEvent}
                         ></dx-filter-menu>
                     </template>
                     <dx-filter-menu
                         name="categories"
-                        title={categoryTitle}
+                        header={categoryTitle}
                         options={categoryList}
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
                     <dx-filter-menu
                         name="language"
-                        title={languageTitle}
+                        header={languageTitle}
                         options={languagesList}
                         onchange={handleFiltersEvent}
                     ></dx-filter-menu>
@@ -312,7 +312,7 @@
                                     <dx-card-minimal
                                         key={post.id}
                                         content-type={post.contentType}
-                                        title={post.title}
+                                        header={post.title}
                                         href={post.href}
                                     ></dx-card-minimal>
                                 </template>
@@ -324,7 +324,7 @@
                             <template if:true={post.authors}>
                                 <dx-card-expanded
                                     key={post.id}
-                                    title={post.title}
+                                    header={post.title}
                                     content-type={post.contentType}
                                     href={post.href}
                                     date={post.date}
@@ -337,7 +337,7 @@
                             <template if:false={post.authors}>
                                 <dx-card-expanded
                                     key={post.id}
-                                    title={post.title}
+                                    header={post.title}
                                     content-type={post.contentType}
                                     href={post.href}
                                     date={post.date}
@@ -363,7 +363,7 @@
             <template if:true={isEmptyState}>
                 <dx-empty-state
                     variant="alt"
-                    title="Beep boop. That did not compute."
+                    header="Beep boop. That did not compute."
                     subtitle={emptyStateSubtitle}
                     body={emptyStateBody}
                     suggestions={emptyStateSuggestions}

package/src/modules/dw/docsGrid/docsGrid.html

@@ -45,7 +45,7 @@
                 for:item="item"
                 for:index="i"
                 key={item.id}
-                title={item.title}
+                header={item.title}
                 body={item.description}
                 href={item.guidesHref}
                 class="docs-card"
@@ -84,7 +84,7 @@
     </div>
     <dx-empty-state
         variant="alt"
-        title="Beep boop. That did not compute."
+        header="Beep boop. That did not compute."
         subtitle={emptyStateSubtitle}
         body={emptyStateBody}
         suggestions={emptyStateSuggestions}

package/src/modules/dw/eventsList/eventsList.html

@@ -49,7 +49,7 @@
         </dx-section>
         <dx-section
             class="events-list upcoming-events"
-            title="Upcoming Events"
+            header="Upcoming Events"
             if:true={upcomingEvents.length}
         >
             <dx-card-event
@@ -57,7 +57,7 @@
                 for:item="item"
                 key={item.id}
                 href={item.urlStub}
-                title={item.name}
+                header={item.name}
                 end-datetime={item.endDate}
                 start-datetime={item.startDate}
                 short-description={item.shortDescription}
@@ -71,7 +71,7 @@
 
         <dx-section
             class="events-list past-events"
-            title="Past Events"
+            header="Past Events"
             if:true={pastEvents.length}
         >
             <dx-card-event
@@ -79,7 +79,7 @@
                 for:item="item"
                 key={item.id}
                 href={item.urlStub}
-                title={item.name}
+                header={item.name}
                 end-datetime={item.endDate}
                 start-datetime={item.startDate}
                 short-description={item.shortDescription}
@@ -90,7 +90,7 @@
         </dx-section>
         <div class="events-empty" if:true={showEmptyState}>
             <dx-empty-state
-                title="Beep boop. That did not compute."
+                header="Beep boop. That did not compute."
                 subtitle={emptyStateSubtitle}
             ></dx-empty-state>
         </div>

package/src/modules/dw/podcastsGrid/podcastsGrid.html

@@ -8,7 +8,7 @@
                     href={podcast.href}
                     key={podcast.id}
                     length={podcast.length}
-                    title={podcast.title}
+                    header={podcast.title}
                 ></dx-card-podcast-episode>
                 <dx-hr
                     spacing="2xs"

package/src/modules/dw/podcastsPromo/podcastsPromo.html

@@ -1,6 +1,6 @@
 <template>
     <dx-section
-        title="Developer Podcast"
+        header="Developer Podcast"
         part="section"
         cta-label={ctaLabel}
         cta-href={ctaHref}

package/src/modules/dw/videoGrid/videoGrid.html

@@ -6,7 +6,7 @@
                     key={cardData.id}
                     type="twitter"
                     video-id={cardData.videoId}
-                    title={cardData.title}
+                    header={cardData.title}
                     body={cardData.body}
                     has-social={cardData.hasSocial}
                     social-name={cardData.socialName}
@@ -20,7 +20,7 @@
                     key={cardData.id}
                     type="linkedin"
                     video-id={cardData.videoId}
-                    title={cardData.title}
+                    header={cardData.title}
                     body={cardData.body}
                     has-social={cardData.hasSocial}
                     social-name={cardData.socialName}