@salesforcedevs/dw-components 1.3.323 → 1.3.324-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.323",
+    "version": "1.3.324-alpha",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {

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

@@ -1,3 +1,7 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/card";
+
 dx-section:first-of-type {
     --dx-c-section-padding-bottom: 0;
 }
@@ -6,16 +10,83 @@ dx-section {
     --dx-c-section-position: revert;
 }
 
+.featured-app-container {
+    padding-right: 20px;
+    display: flex;
+    flex-flow: row wrap-reverse;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.featured-app-container h4 {
+    color: var(--dx-g-text-heading-color);
+    font-weight: 800;
+}
+
+.dx-text-display-5 {
+    color: var(--dx-g-text-heading-color);
+    transition: var(--dx-g-transition-hue-1x);
+    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;
+}
+
+.featured-app-text {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    align-self: flex-end;
+    padding-right: 20px;
+}
+
+.featured-app-container img {
+    width: 50%;
+    height: 80%;
+    border-radius: 20px;
+    box-shadow: var(--dx-g-box-shadow-lg);
+}
+
+@media screen and (max-width: 639px) {
+    .featured-app-container {
+        flex-direction: column-reverse;
+    }
+
+    .featured-app-container h4 {
+        margin-top: 1em;
+    }
+
+    .featured-app-container img {
+        width: 100%;
+        height: auto;
+    }
+
+    .featured-app-text {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+}
+
 .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;
+    margin-top: 4em;
+    gap: 1em;
 }
 
 .item-container {
@@ -99,6 +170,8 @@ dx-section {
 @media screen and (max-width: 767px) {
     .badge-link-container {
         display: flex;
+        flex-direction: column;
+        gap: 1.5em;
     }
 
     .docs-action-bar {
@@ -123,7 +196,6 @@ dx-section {
     }
 
     .external-link-container {
-        padding: 0 0 0 8px;
         margin-top: -4px;
     }
 }

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

@@ -1,142 +1,100 @@
 <template>
-    <dx-section>
-        <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 }
+    <dx-section
+        class="feature-gradient"
+        background-color="linear-gradient(var(--dx-g-indigo-vibrant-90), white)"
+    >
+        <div class="featured-app-container">
+            <div class="featured-app-text">
+                <h4>Featured App</h4>
+                <h2 class="dx-text-display-5">{featuredCodeSample.title}</h2>
+                <span class="feature-card-content dx-text-body-2">
+                    {featuredCodeSample.body}
                 </span>
+                <div class="badge-link-container">
+                    <div class="badge-container">
+                        <dx-metadata-badge
+                            for:each={featuredCodeSample.tags}
+                            for:item="tag"
+                            key={tag}
+                            value={tag}
+                        ></dx-metadata-badge>
+                    </div>
+
+                    <div class="external-link-container">
+                        <dx-button
+                            target={target}
+                            icon-symbol="new_window"
+                            variant="primary"
+                            size="large"
+                            href={featuredCodeSample.githubLink}
+                            onclick={handleReadItClick}
+                        >
+                            Explore on GitHub
+                        </dx-button>
+                        <dx-button
+                            target={target}
+                            variant="secondary"
+                            size="large"
+                            href={featuredCodeSample.trailheadLink}
+                            onclick={handleReadItClick}
+                        >
+                            Learn on Trailhead
+                        </dx-button>
+                    </div>
+                </div>
             </div>
-            <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>
+            <img
+                class="image dx-card-base_image featured-app-image"
+                src={featuredCodeSample.img}
+                alt={featuredCodeSample.title}
+            />
         </div>
+    </dx-section>
+    <dx-section title="Explore the Apps">
         <dx-grid columns={tileColumns} if:false={showEmptyState}>
             <dx-card-docs
-                class="content-card"
-                for:each={currentPageSamples}
+                for:each={samples}
                 for:item="item"
                 for:index="i"
                 key={item.id}
                 body={item.body}
-                label={item.type}
                 header={item.title}
-                href={item.href}
+                href={item.githubLink}
+                img-src={item.img}
+                show-mobile-img
             >
                 <div class="badge-link-container">
                     <div class="badge-container">
                         <dx-metadata-badge
-                            value={item.product}
-                            size="small"
+                            for:each={item.tags}
+                            for:item="tag"
+                            key={tag}
+                            value={tag}
                         ></dx-metadata-badge>
                     </div>
                     <div class="external-link-container">
                         <dx-button
                             target={target}
                             icon-symbol="new_window"
-                            variant="inline"
-                            href={item.href}
+                            variant="primary"
+                            size="large"
+                            href={item.githubLink}
                             onclick={handleReadItClick}
                         >
-                            {item.buttonText}
+                            Explore on GitHub
+                        </dx-button>
+                        <dx-button
+                            target={target}
+                            variant="secondary"
+                            size="large"
+                            href={item.trailheadLink}
+                            onclick={handleReadItClick}
+                        >
+                            Learn on Trailhead
                         </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,128 +1,20 @@
 import { api, LightningElement } from "lwc";
-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 { 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 {
-        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"
-                });
-            });
-        }
+        console.log(this._samplesList);
     }
 
     @api
@@ -141,12 +33,10 @@ export default class CodeSamplesGrid extends LightningElement {
             title: sample.title,
             body: sample.body,
             buttonText: DEFAULT_BUTTON_TEXT,
-            href: sample.href,
-            imgSrc: sample.imgSrc,
-            product: sample.product,
-            type: sample.type,
-            // source: sample.source,
-            source: "none",
+            githubLink: sample.githubLink,
+            trailheadLink: sample.trailheadLink,
+            img: sample.img,
+            tags: sample.tags,
             target: this.target
         }));
     }
@@ -155,128 +45,8 @@ 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" ? "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"
-        ]);
+        return this.deviceType === "desktop" ? "two" : "one";
     }
 
     handleView = (e: MediaQueryListEvent | MediaQueryList): void => {
@@ -294,169 +64,4 @@ 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"
-            });
-        });
-    }
 }