@salesforcedevs/dx-components 0.28.4 → 0.31.0-alpha.0

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

@@ -0,0 +1,444 @@
+import { LightningElement, track } from "lwc";
+import { getArchivePosts, getArchiveFilterList } from "utils/contentArchive";
+import cx from "classnames";
+
+const MOBILE_MATCH = "767px";
+const MONTHS = {
+    January: 0,
+    February: 1,
+    March: 2,
+    April: 3,
+    May: 4,
+    June: 5,
+    July: 6,
+    August: 7,
+    September: 8,
+    October: 9,
+    November: 10,
+    December: 11
+};
+
+export default class ContentArchive extends LightningElement {
+    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;
+
+    @track selectedFilterMenuData: any = {
+        site: [],
+        dates: [],
+        authors: [],
+        categories: []
+    };
+    @track 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 [
+            { id: 1, name: "Blogs" },
+            { id: 2, name: "Podcasts" }
+        ];
+    }
+
+    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 updateSelectedFilters(e: CustomEvent) {
+        const { value, name, checked } = e.detail;
+
+        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: []
+            };
+        }
+
+        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.updateSelectedFilters(
+            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 this.sortSplittedPostsByMonth(postsByMonth);
+    }
+
+    private sortSplittedPostsByMonth(postsByMonth: any) {
+        const sortedPostsByMonth: { [key: string]: Array<{}> } = {};
+
+        Object.keys(postsByMonth)
+            .sort((a, b) => {
+                const [aMonth, aYear] = a.split(" ");
+                const [bMonth, bYear] = b.split(" ");
+
+                if (aYear < bYear) {
+                    return 1;
+                } else if (aYear > bYear) {
+                    return -1;
+                } else if (MONTHS[aMonth] < MONTHS[bMonth]) {
+                    return 1;
+                } else if (MONTHS[aMonth] > MONTHS[bMonth]) {
+                    return -1;
+                }
+                return 0;
+            })
+            .forEach((key) => {
+                sortedPostsByMonth[key] = [
+                    ...postsByMonth[key].sort((a, b) => {
+                        const aDate = new Date(a.date);
+                        const bDate = new Date(b.date);
+
+                        if (aDate < bDate) {
+                            return 1;
+                        } else if (aDate > bDate) {
+                            return -1;
+                        }
+                        return 0;
+                    })
+                ];
+            });
+
+        return sortedPostsByMonth;
+    }
+
+    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();
+    }
+
+    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);
+            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;
+
+        setTimeout(() => {
+            this.updateCheckedStatus();
+        }, 0);
+    };
+
+    connectedCallback(): void {
+        this.mobileMatchMedia = window.matchMedia(
+            `(max-width: ${MOBILE_MATCH})`
+        );
+        this.onMobileChange(this.mobileMatchMedia);
+        this.mobileMatchMedia.addEventListener("change", this.onMobileChange);
+
+        if (this.posts.length === 0) {
+            this.fetchPostsByCardType();
+        }
+    }
+}

package/src/modules/dx/featuredContentHeader/featuredContentHeader.html

@@ -60,37 +60,39 @@
         >
             <img src={imgSrc} alt={imgAlt} />
         </a>
-        <svg
-            class="swoop-silhouette"
-            width="1920px"
-            height="331px"
-            viewBox="0 0 1920 331"
-            version="1.1"
-            xmlns="http://www.w3.org/2000/svg"
-            preserveAspectRatio="none"
-        >
-            <defs>
-                <path
-                    d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
-                    id="path-1"
-                ></path>
-            </defs>
-            <g
-                id="Documentation-landing-page"
-                stroke="none"
-                stroke-width="1"
-                fill="none"
-                fill-rule="evenodd"
+        <template if:false={noSwoop}>
+            <svg
+                class="swoop-silhouette"
+                width="1920px"
+                height="331px"
+                viewBox="0 0 1920 331"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                preserveAspectRatio="none"
             >
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use
-                    id="Combined-Shape"
-                    fill="#FFFFFF"
-                    xlink:href="#path-1"
-                ></use>
-            </g>
-        </svg>
+                <defs>
+                    <path
+                        d="M1920,330 L76.7313881,330.008182 C51.2800917,330.255837 25.7029624,330.372286 0,330.357528 L0,330 L76.7313881,330.008182 C789.975765,323.067922 1404.39864,213.086385 1920,0.0635708029 L1920,0.0635708029 L1920,330 Z"
+                        id="path-1"
+                    ></path>
+                </defs>
+                <g
+                    id="Documentation-landing-page"
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                >
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use
+                        id="Combined-Shape"
+                        fill="#FFFFFF"
+                        xlink:href="#path-1"
+                    ></use>
+                </g>
+            </svg>
+        </template>
     </div>
 </template>

package/src/modules/dx/featuredContentHeader/featuredContentHeader.ts

@@ -18,6 +18,7 @@ export default class FeaturedContentHeader extends LightningElement {
     @api target?: string | null = null;
     @api title!: string;
     @api backgroundImg?: "trees" | "codey" | "blog" | "moon" | null = null;
+    @api noSwoop: boolean = false;
 
     private _authors?: Array<ImageAndLabel>;
     private isSlotEmpty: boolean = true;

package/src/modules/dx/filterMenu/filterMenu.css

@@ -0,0 +1,106 @@
+@import "helpers/reset";
+
+:host {
+    --dx-c-filter-menu-margin: 0;
+    --dx-c-checkbox-font-size: 13px;
+    --dx-g-text-body-color: var(--sds-g-gray-11);
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1px solid rgb(201, 201, 201);
+    border-radius: 4px;
+    padding: 15px 20px;
+    position: relative;
+    margin: var(--dx-c-filter-menu-margin);
+    max-height: 650px;
+    overflow-y: auto;
+}
+
+.caret-down {
+    -webkit-transform: rotate(180deg); /* Safari */
+    transform: rotate(180deg);
+}
+
+.nested {
+    display: none;
+}
+
+.active {
+    display: block;
+}
+
+.checkbox-month {
+    margin-left: 6px;
+}
+
+.filter-menu-title {
+    font-size: 14px;
+    font-family: var(--dx-g-font-sans);
+    font-weight: bold;
+    color: rgb(24, 24, 24);
+}
+
+.first-layer {
+    padding-top: 12px;
+}
+
+dx-checkbox:not(:first-of-type) {
+    margin-top: 6px;
+}
+
+li,
+label {
+    position: relative;
+}
+
+.first-layer li:not(:first-of-type) {
+    margin-top: 9px;
+}
+
+.second-layer li:first-of-type {
+    margin-top: 7px;
+}
+
+.second-layer li:not(:first-of-type) {
+    margin-top: 5px;
+}
+
+svg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    background: transparent;
+    stroke: var(--dx-g-blue-vibrant-50);
+}
+
+svg,
+.filter-menu-title {
+    cursor: pointer;
+    -webkit-user-select: none; /* Safari 3.1+ */
+    -moz-user-select: none; /* Firefox 2+ */
+    -ms-user-select: none; /* IE 10+ */
+    user-select: none;
+}
+
+.year-svg {
+    right: 50px;
+}
+
+.checkbox-month,
+.checkbox-year {
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.checkbox-year {
+    --dx-c-filter-menu-font-weight: bold;
+}
+
+.view-more-btn {
+    color: var(--dx-g-blue-vibrant-50);
+    font-size: 14px;
+    font-family: var(--dx-g-font-sans);
+}