@salesforcedevs/dx-components 0.53.10 → 0.53.11-alpha

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

@@ -1,461 +0,0 @@
-import { LightningElement } from "lwc";
-import cx from "classnames";
-import { getArchivePosts, getArchiveFilterList } from "utils/contentArchive";
-import { sortSplittedPostsByMonth } from "utils/dates";
-import { Filters } from "./contentArchive.types";
-import { QueryCoordinator } from "utils/queryCoordinator";
-
-const MOBILE_MATCH = "767px";
-
-const QUERY_SITE_FILTER = "c__filter";
-const PODCASTS = { id: 2, name: "Podcasts" };
-const BLOGS = { id: 1, name: "Blogs" };
-export default class ContentArchive extends LightningElement {
-    private _contentTypeList = [
-        { ...BLOGS, checked: false },
-        { ...PODCASTS, checked: false }
-    ];
-    private totalResults: number | null = null;
-    private currentPage: number = 1;
-    private totalPages: number = 1;
-    private loading: boolean = true;
-    private filtersLoading: boolean = true;
-    private modalOpen: boolean = false;
-    private cardType: string = "expanded";
-
-    private postsByDate: {} = {};
-    private dateList: any[] = [];
-    private authorList: any[] = [];
-    private categoryList: any[] = [];
-
-    private isMobile: boolean = false;
-    private mobileMatchMedia!: MediaQueryList;
-
-    private selectedFilterMenuData: Filters = {
-        site: [],
-        dates: [],
-        authors: [],
-        categories: []
-    };
-    private posts: any[] = [];
-
-    get currentPageLength() {
-        if (this.loading) {
-            return "Loading Results...";
-        }
-
-        let currentFirstResultNumber = 0;
-        const currentLastResultNumber = this.currentPage * this.posts.length;
-
-        if (this.currentPage > 1) {
-            currentFirstResultNumber =
-                currentLastResultNumber - this.posts.length;
-        } else if (this.currentPage === 1 && !this.isEmptyState) {
-            currentFirstResultNumber = 1;
-        }
-
-        return `Showing ${currentFirstResultNumber} - ${currentLastResultNumber} of ${this.totalResults}`;
-    }
-
-    get showPagination() {
-        return this.totalPages > 1;
-    }
-
-    get resultsHeading() {
-        let pageInfo = "";
-
-        if (this.currentPage !== 1) {
-            pageInfo = `- Page ${this.currentPage}`;
-        }
-        return this.totalResults ? `Archive Results ${pageInfo}` : "No results";
-    }
-
-    get isEmptyState() {
-        return this.totalResults === 0 && !this.loading;
-    }
-
-    get spinnerSize() {
-        return this.isMobile ? "medium" : "large";
-    }
-
-    get isMinimalCard() {
-        return this.cardType === "minimal";
-    }
-
-    get minimalCardClass() {
-        return cx("min-card-btn", this.cardType === "minimal" && "btn-active");
-    }
-
-    get expandedCardClass() {
-        return cx("exp-card-btn", this.cardType === "expanded" && "btn-active");
-    }
-
-    get postsByMonth() {
-        const posts = this.splitPostsByMonth(this.posts);
-
-        return Object.keys(posts).map((key) => [key, [...posts[key]]]);
-    }
-
-    get contentTypeList() {
-        return this._contentTypeList;
-    }
-
-    get hideBlogFilters() {
-        return (
-            this.selectedFilterMenuData.site.length === 1 &&
-            this.selectedFilterMenuData.site[0].id === 2
-        );
-    }
-
-    get contentTypeTitle() {
-        return `Content Type ${
-            this.selectedFilterMenuData.site.length > 0
-                ? `(${this.selectedFilterMenuData.site.length})`
-                : ""
-        }`;
-    }
-    get dateTitle() {
-        return `Date ${
-            this.selectedFilterMenuData.dates.length > 0
-                ? `(${this.selectedFilterMenuData.dates.length})`
-                : ""
-        }`;
-    }
-    get authorTitle() {
-        return `Blog Author ${
-            this.selectedFilterMenuData.authors.length > 0
-                ? `(${this.selectedFilterMenuData.authors.length})`
-                : ""
-        }`;
-    }
-    get categoryTitle() {
-        return `Topic ${
-            this.selectedFilterMenuData.categories.length > 0
-                ? `(${this.selectedFilterMenuData.categories.length})`
-                : ""
-        }`;
-    }
-
-    private filterSelectedDates(
-        currentDateList: Array<{ name: string }>,
-        selectedDate: string,
-        toRemove: boolean = false
-    ) {
-        return currentDateList.filter((currentDateItem: { name: string }) => {
-            const year = currentDateItem.name.slice(-4);
-
-            if (toRemove) {
-                return selectedDate.slice(-4) !== currentDateItem.name;
-            }
-
-            return year !== selectedDate;
-        });
-    }
-
-    private handleUpdateSiteFilter(e: CustomEvent) {
-        const { value, name, checked } = e.detail;
-
-        let selectedFilters: string[] | null = [];
-        this._contentTypeList.forEach((option) => {
-            if (option.name === value.name) {
-                option.checked = checked;
-            }
-            if (option.checked) {
-                selectedFilters?.push(option.name);
-            }
-        });
-
-        if (selectedFilters?.length === 0) {
-            selectedFilters = null;
-        }
-        QueryCoordinator.setUrlParamValue(QUERY_SITE_FILTER, selectedFilters);
-
-        this.updateSelectedFilters(value, name, checked);
-    }
-
-    private handleFiltersEvent(e: CustomEvent) {
-        const { value, name, checked } = e.detail;
-        this.updateSelectedFilters(value, name, checked);
-    }
-
-    private updateSelectedFilters(
-        value: any,
-        name: keyof Filters,
-        checked: any
-    ) {
-        let copy = {
-            ...this.selectedFilterMenuData
-        };
-
-        if (!checked) {
-            copy[name] = copy[name].filter(
-                (selectedFilterItem: { name: string }) => {
-                    return selectedFilterItem.name !== value.name;
-                }
-            );
-        } else if (!copy[name].includes(value)) {
-            const regex = /^(\d{4})$/g;
-
-            if (regex.test(value.name) && copy[name].length > 0) {
-                copy[name] = this.filterSelectedDates(copy[name], value.name);
-            } else if (regex.test(value.name.slice(-4))) {
-                copy[name] = this.filterSelectedDates(
-                    copy[name],
-                    value.name,
-                    true
-                );
-            }
-
-            copy[name].push(value);
-        }
-
-        // Remove filters when only podcast is selected
-        if (
-            name === "site" &&
-            copy[name].length === 1 &&
-            !copy[name].some((item: { id: number }) => item.id === 1)
-        ) {
-            copy = {
-                site: [...copy.site],
-                categories: [...copy.categories],
-                dates: [...copy.dates],
-                authors: []
-            };
-        }
-
-        // Checkmark the blog type if value is a blog author
-        if (name === "authors" && checked) {
-            copy = {
-                site: [{ id: 1, name: "Blogs" }],
-                categories: [...copy.categories],
-                dates: [...copy.dates],
-                authors: [...copy.authors]
-            };
-        }
-
-        this.selectedFilterMenuData = copy;
-        this.currentPage = 1;
-        this.updateCheckedStatus();
-        this.fetchPostsByCardType();
-    }
-
-    private updateCheckedStatus() {
-        const filterMenuElements =
-            this.template.querySelectorAll("dx-filter-menu");
-
-        filterMenuElements.forEach((filterMenuElement: any) =>
-            filterMenuElement.updateCheckedStatus(this.selectedFilterMenuData)
-        );
-    }
-
-    private removeFilterItem(e: any) {
-        const { name, value } = e.target;
-
-        this.handleUpdateSiteFilter(
-            new CustomEvent("updateselectedfilters", {
-                detail: {
-                    name,
-                    value,
-                    checked: false
-                }
-            })
-        );
-    }
-
-    private toggleModal() {
-        this.modalOpen = !this.modalOpen;
-    }
-
-    // split posts by month for the minimal view date header
-    private splitPostsByMonth(posts: any[]) {
-        const postsByMonth: { [key: string]: Array<{}> } = {};
-
-        posts.forEach((post) => {
-            const date = new Date(post.date);
-            const month = new Intl.DateTimeFormat("en-US", {
-                month: "long"
-            }).format(date);
-            const year = date.getFullYear();
-
-            if (!postsByMonth[`${month} ${year}`]) {
-                postsByMonth[`${month} ${year}`] = [];
-            }
-
-            postsByMonth[`${month} ${year}`].push({ ...post });
-        });
-
-        return sortSplittedPostsByMonth(postsByMonth);
-    }
-
-    private handleCardTypeChange(e: any) {
-        const selectedCardType = e.target.value;
-        if (this.cardType !== selectedCardType) {
-            this.cardType = selectedCardType;
-
-            this.fetchPostsByCardType();
-        }
-    }
-
-    private handleFilterClear() {
-        this.selectedFilterMenuData = {
-            site: [],
-            dates: [],
-            authors: [],
-            categories: []
-        };
-
-        this.updateCheckedStatus();
-        this.fetchPostsByCardType();
-        QueryCoordinator.setUrlParamValue(QUERY_SITE_FILTER, null);
-    }
-
-    private goToPage(e: CustomEvent) {
-        const page = e.detail;
-        this.currentPage = page;
-        this.totalResults = 0;
-        this.totalPages = 0;
-
-        this.fetchPostsByCardType();
-    }
-
-    private fetchPostsByCardType() {
-        if (this.cardType === "minimal") {
-            this.fetchPosts(20);
-        } else {
-            this.fetchPosts(10);
-        }
-    }
-
-    private async fetchArchiveFilterList() {
-        this.filtersLoading = true;
-
-        if (this.dateList.length === 0) {
-            const filterListdata = await getArchiveFilterList();
-            this.dateList = this.splitOptionsByDate(filterListdata.dates);
-
-            this.authorList = filterListdata.authors;
-            this.categoryList = filterListdata.categories;
-        }
-
-        this.filtersLoading = false;
-    }
-
-    private async fetchPosts(numberOfPosts: number) {
-        this.loading = true;
-
-        const postData = await getArchivePosts(
-            numberOfPosts,
-            this.currentPage,
-            this.cardType,
-            this.selectedFilterMenuData
-        );
-
-        // get the list of filters for the filter menu
-        this.fetchArchiveFilterList();
-
-        this.posts = postData.posts;
-        this.totalResults = postData.totalResults;
-        this.totalPages = postData.totalPages;
-        this.loading = false;
-    }
-
-    private paddedMonth(date: Date) {
-        return `${(date.getMonth() + 1).toString().padStart(2, "0")}`;
-    }
-
-    // split filter options by year/month for nested checkboxes
-    private splitOptionsByDate(dateOptions: any) {
-        return dateOptions.reduce((acc: any, curr: any) => {
-            const date = new Date(curr.replace(/-/g, "/"));
-            const month = new Intl.DateTimeFormat("en-US", {
-                month: "long"
-            }).format(date);
-            const year = String(date.getFullYear());
-
-            const foundYear = acc.find((post: any) => post.name === year);
-            const foundMonth = foundYear?.months.find(
-                (m: any) => m.id === month
-            );
-
-            if (!foundYear) {
-                acc.push({
-                    id: year,
-                    name: year,
-                    isYear: true,
-                    months: [
-                        {
-                            id: month,
-                            name: `${month} ${year}`,
-                            shortName: `${year},${date.getMonth() + 1}`,
-                            isYear: false,
-                            numberOfPosts: 1
-                        }
-                    ],
-                    totalNumberOfPosts: 1
-                });
-
-                return acc;
-            }
-
-            if (!foundMonth) {
-                foundYear.months.push({
-                    id: month,
-                    name: `${month} ${year}`,
-                    shortName: `${year},${date.getMonth() + 1}`,
-                    isYear: false,
-                    numberOfPosts: 1
-                });
-                foundYear.totalNumberOfPosts += 1;
-
-                return acc;
-            }
-
-            foundMonth.numberOfPosts += 1;
-            foundYear.totalNumberOfPosts += 1;
-
-            return acc;
-        }, []);
-    }
-
-    private onMobileChange = (e: MediaQueryListEvent | MediaQueryList) => {
-        this.isMobile = e.matches;
-
-        requestAnimationFrame(() => this.updateCheckedStatus());
-    };
-
-    connectedCallback(): void {
-        this.mobileMatchMedia = window.matchMedia(
-            `(max-width: ${MOBILE_MATCH})`
-        );
-        this.onMobileChange(this.mobileMatchMedia);
-        this.mobileMatchMedia.addEventListener("change", this.onMobileChange);
-
-        const presetFilters: string[] =
-            QueryCoordinator.getUrlParamValue(QUERY_SITE_FILTER);
-        if (
-            presetFilters?.some((filterString) => filterString === BLOGS.name)
-        ) {
-            this.presetSiteFilter(BLOGS);
-        }
-        if (
-            presetFilters?.some(
-                (filterString) => filterString === PODCASTS.name
-            )
-        ) {
-            this.presetSiteFilter(PODCASTS);
-        }
-
-        if (this.posts.length === 0) {
-            this.fetchPostsByCardType();
-        }
-    }
-
-    presetSiteFilter(filter: any) {
-        this._contentTypeList.forEach((option) => {
-            if (option.name === filter.name) {
-                option.checked = true;
-            }
-        });
-        this.updateSelectedFilters(filter, "site", true);
-    }
-}

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

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

package/src/modules/dx/instrumentation/instrumentation.html

@@ -1 +0,0 @@
-<template></template>

package/src/modules/dx/instrumentation/instrumentation.ts

@@ -1,116 +0,0 @@
-import { LightningElement, api } from "lwc";
-
-const TRACKING_EVENT_NAME = "developerwebsite_track";
-const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
-const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
-
-export function track(
-    element: EventTarget,
-    event: string,
-    payload: Record<string, unknown>
-): void {
-    const detail = { event, payload };
-    // if window.LISTENER_INDICATOR is undefined, `dx-instrumentation` has not
-    // been mounted, and the listener hasn't been attached.
-    if ((window as any)[LISTENER_INDICATOR] === undefined) {
-        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
-        (window as any)[LISTENER_QUEUE].push(detail);
-    } else {
-        const e = new CustomEvent(TRACKING_EVENT_NAME, {
-            bubbles: true,
-            composed: true,
-            detail
-        });
-        element.dispatchEvent(e);
-    }
-}
-
-const googleTagManager = {
-    track: function (e: Event) {
-        if ((window as any).dataLayer === undefined) {
-            (window as any).dataLayer = [];
-        }
-        const { event, payload } = (e as CustomEvent).detail;
-        (window as any).dataLayer.push({ ...payload, event });
-    }
-};
-
-interface TrackEventListener {
-    add: () => void;
-    remove: () => void;
-}
-
-export function developerwebTrackEventListener(
-    trackerFns: { track: (e: Event) => void }[] = []
-): TrackEventListener {
-    if (trackerFns.length === 0) {
-        throw new Error("No tracker functions passed");
-    }
-
-    const trackdeveloperwebEvent = (e: Event) => {
-        trackerFns.forEach((tracker) => {
-            tracker.track(e);
-        });
-    };
-
-    const attachEventListener = () => {
-        document.addEventListener(TRACKING_EVENT_NAME, trackdeveloperwebEvent);
-    };
-
-    const removeEventListener = () => {
-        document.removeEventListener(
-            TRACKING_EVENT_NAME,
-            trackdeveloperwebEvent
-        );
-    };
-
-    return {
-        add: attachEventListener,
-        remove: removeEventListener
-    };
-}
-
-export default class Instrumentation extends LightningElement {
-    @api useGoogleTagManager = false;
-
-    private tracker: TrackEventListener | null = null;
-
-    private setupTracker() {
-        const trackerFunctions = this.useGoogleTagManager
-            ? [googleTagManager]
-            : [];
-        this.tracker = developerwebTrackEventListener(trackerFunctions);
-        this.tracker.add();
-        (window as any)[LISTENER_INDICATOR] = true;
-    }
-
-    private dispatchQueuedEvents() {
-        while ((window as any)[LISTENER_QUEUE].length > 0) {
-            const event = (window as any)[LISTENER_QUEUE].pop() as {
-                event: string;
-                payload: Record<string, unknown>;
-            };
-            track(this, event.event, event.payload);
-        }
-    }
-
-    renderedCallback() {
-        if (this.tracker === null) {
-            this.setupTracker();
-
-            if (
-                (window as any)[LISTENER_QUEUE] !== undefined &&
-                (window as any)[LISTENER_QUEUE].length > 0
-            ) {
-                this.dispatchQueuedEvents();
-            }
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.tracker !== null) {
-            this.tracker.remove();
-            this.tracker = null;
-        }
-    }
-}

package/src/modules/dx/newsletterForm/newsletterForm.css

@@ -1,73 +0,0 @@
-@import "helpers/text";
-@import "helpers/button";
-
-:host {
-    --dx-g-text-base: 20px;
-    --dx-c-checkbox-text-line-height: 20px;
-    --dx-c-checkbox-align-label: flex-start;
-    --dx-c-checkbox-font-size: 14px;
-    --dx-c-checkbox-text-transform: none;
-}
-
-h4 {
-    font-size: 20px;
-    margin: 0 0 28px 0;
-    text-align: center;
-}
-
-dx-input,
-dx-select {
-    display: block;
-    margin-top: 12px;
-    height: 77px;
-}
-
-dx-input {
-    --dx-c-input-width: 100%;
-}
-
-dx-checkbox:not(:first-child) {
-    margin-top: 12px;
-}
-
-dx-checkbox:last-of-type {
-    margin-bottom: 16px;
-}
-
-.form-submit {
-    background-color: var(--dx-g-blue-vibrant-50);
-    border: 2px solid var(--dx-g-blue-vibrant-50);
-    border-radius: 4px;
-    font-family: var(--dx-g-font-display);
-    font-size: 14px;
-    color: white;
-    height: 44px;
-    width: 100%;
-    margin-top: 20px;
-}
-
-.form-submit:hover {
-    background-color: var(--dx-g-blue-vibrant-40);
-    border-color: var(--dx-g-blue-vibrant-40);
-    cursor: pointer;
-}
-
-.legal-text {
-    font-size: 14px;
-    margin: 0 0 16px 0;
-}
-
-@media screen and (max-width: 360px) {
-    :host {
-        --dx-g-text-base: 16px;
-        --dx-c-checkbox-display: inline-block;
-    }
-
-    h4 {
-        font-size: 16px;
-    }
-
-    .form-submit {
-        margin-top: 0;
-    }
-}