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

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

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

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}