@salesforcedevs/dx-components 0.53.11 → 0.54.0-alpha03

package/src/modules/dx/contentArchive/contentArchive.html

@@ -1,337 +0,0 @@
-<template>
-    <dx-featured-content-header
-        class="documentation_header"
-        title="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}
-    ></dx-featured-content-header>
-    <div class="container">
-        <template if:true={isMobile}>
-            <dx-modal-drawer open={modalOpen} onclickclose={toggleModal}>
-                <img
-                    if:true={filtersLoading}
-                    src="/assets/svg/sidebar-loading.svg"
-                    alt="loading"
-                    class="modal-loading"
-                />
-                <template if:false={filtersLoading}>
-                    <div class="filter-header-container">
-                        <p class="filter-title">Filters</p>
-                        <button
-                            onclick={handleFilterClear}
-                            class="filter-clear-btn"
-                        >
-                            Clear all
-                        </button>
-                    </div>
-                    <dx-filter-menu
-                        name="site"
-                        title={contentTypeTitle}
-                        options={contentTypeList}
-                        onchange={handleUpdateSiteFilter}
-                    ></dx-filter-menu>
-                    <dx-filter-menu
-                        name="dates"
-                        title={dateTitle}
-                        options={dateList}
-                        variant="nested"
-                        onchange={handleFiltersEvent}
-                    ></dx-filter-menu>
-                    <template if:false={hideBlogFilters}>
-                        <dx-filter-menu
-                            name="authors"
-                            title={authorTitle}
-                            options={authorList}
-                            onchange={handleFiltersEvent}
-                        ></dx-filter-menu>
-                    </template>
-                    <dx-filter-menu
-                        name="categories"
-                        title={categoryTitle}
-                        options={categoryList}
-                        onchange={handleFiltersEvent}
-                    ></dx-filter-menu>
-                </template>
-            </dx-modal-drawer>
-        </template>
-        <div class="filter-container">
-            <template if:false={isMobile}>
-                <img
-                    if:true={filtersLoading}
-                    src="/assets/svg/sidebar-loading.svg"
-                    alt="loading"
-                />
-                <template if:false={filtersLoading}>
-                    <div class="filter-header-container">
-                        <p class="filter-title">Filters</p>
-                        <button
-                            onclick={handleFilterClear}
-                            class="filter-clear-btn"
-                        >
-                            Clear all
-                        </button>
-                    </div>
-                    <dx-filter-menu
-                        name="site"
-                        title={contentTypeTitle}
-                        options={contentTypeList}
-                        onchange={handleUpdateSiteFilter}
-                    ></dx-filter-menu>
-                    <dx-filter-menu
-                        name="dates"
-                        title={dateTitle}
-                        options={dateList}
-                        variant="nested"
-                        onchange={handleFiltersEvent}
-                    ></dx-filter-menu>
-                    <template if:false={hideBlogFilters}>
-                        <dx-filter-menu
-                            name="authors"
-                            title={authorTitle}
-                            options={authorList}
-                            onchange={handleFiltersEvent}
-                        ></dx-filter-menu>
-                    </template>
-                    <dx-filter-menu
-                        name="categories"
-                        title={categoryTitle}
-                        options={categoryList}
-                        onchange={handleFiltersEvent}
-                    ></dx-filter-menu>
-                </template>
-            </template>
-            <template if:true={isMobile}>
-                <div class="content-info-container">
-                    <button class="filter-content" onclick={toggleModal}>
-                        Filter
-                        <span>
-                            <dx-icon
-                                class="filter-icon"
-                                symbol="filter"
-                                sprite="action"
-                                size="small"
-                            ></dx-icon>
-                        </span>
-                    </button>
-                    <div class="card-type-group">
-                        <button
-                            onclick={handleCardTypeChange}
-                            value="expanded"
-                            class={expandedCardClass}
-                        >
-                            Expanded
-                        </button>
-                        <button
-                            onclick={handleCardTypeChange}
-                            value="minimal"
-                            class={minimalCardClass}
-                        >
-                            Minimal
-                        </button>
-                    </div>
-                </div>
-            </template>
-        </div>
-        <div class="content-container">
-            <div class="content-info-container">
-                <p class="content-page-length">{currentPageLength}</p>
-                <template if:false={isMobile}>
-                    <div class="card-type-group">
-                        <button
-                            onclick={handleCardTypeChange}
-                            value="expanded"
-                            class={expandedCardClass}
-                        >
-                            Expanded
-                        </button>
-                        <button
-                            onclick={handleCardTypeChange}
-                            value="minimal"
-                            class={minimalCardClass}
-                        >
-                            Minimal
-                        </button>
-                    </div>
-                </template>
-            </div>
-            <div class="filter-chips-container">
-                <template if:true={selectedFilterMenuData.site.length}>
-                    <div class="chip-item-container">
-                        <p class="chip-title">Type</p>
-                        <template
-                            for:each={selectedFilterMenuData.site}
-                            for:item="postType"
-                        >
-                            <span class="chip-item" key={postType.name}>
-                                {postType.name}
-                                <dx-button
-                                    name="site"
-                                    value={postType}
-                                    onclick={removeFilterItem}
-                                    variant="inline"
-                                >
-                                    &#10005;
-                                </dx-button>
-                            </span>
-                        </template>
-                    </div>
-                </template>
-                <template if:true={selectedFilterMenuData.dates.length}>
-                    <div class="chip-item-container">
-                        <p class="chip-title">Date</p>
-                        <template
-                            for:each={selectedFilterMenuData.dates}
-                            for:item="date"
-                        >
-                            <span class="chip-item" key={date}>
-                                {date.name}
-                                <dx-button
-                                    name="dates"
-                                    onclick={removeFilterItem}
-                                    value={date}
-                                    variant="inline"
-                                >
-                                    &#10005;
-                                </dx-button>
-                            </span>
-                        </template>
-                    </div>
-                </template>
-                <template if:true={selectedFilterMenuData.authors.length}>
-                    <div class="chip-item-container">
-                        <p class="chip-title">Author</p>
-                        <template
-                            for:each={selectedFilterMenuData.authors}
-                            for:item="author"
-                        >
-                            <span class="chip-item" key={author.name}>
-                                {author.name}
-                                <dx-button
-                                    name="authors"
-                                    value={author}
-                                    onclick={removeFilterItem}
-                                    variant="inline"
-                                >
-                                    &#10005;
-                                </dx-button>
-                            </span>
-                        </template>
-                    </div>
-                </template>
-                <template if:true={selectedFilterMenuData.categories.length}>
-                    <div class="chip-item-container">
-                        <p class="chip-title">Category</p>
-                        <template
-                            for:each={selectedFilterMenuData.categories}
-                            for:item="category"
-                        >
-                            <span class="chip-item" key={category.name}>
-                                {category.name}
-                                <dx-button
-                                    name="categories"
-                                    value={category}
-                                    onclick={removeFilterItem}
-                                    variant="inline"
-                                >
-                                    &#10005;
-                                </dx-button>
-                            </span>
-                        </template>
-                    </div>
-                </template>
-            </div>
-            <h3 class="results-heading" if:false={loading}>{resultsHeading}</h3>
-            <hr />
-            <template if:true={loading}>
-                <template if:false={modalOpen}>
-                    <div class="spinner-container">
-                        <dx-spinner
-                            size={spinnerSize}
-                            variant="brand"
-                        ></dx-spinner>
-                    </div>
-                </template>
-            </template>
-            <template if:false={loading}>
-                <template if:false={isEmptyState}>
-                    <template if:true={isMinimalCard}>
-                        <template
-                            for:each={postsByMonth}
-                            for:item="postByMonth"
-                        >
-                            <template iterator:it={postByMonth}>
-                                <h3
-                                    key={it.value}
-                                    class="posts-month"
-                                    if:true={it.first}
-                                >
-                                    {it.value}
-                                </h3>
-                                <template
-                                    if:false={it.first}
-                                    for:each={it.value}
-                                    for:item="post"
-                                >
-                                    <dx-card-minimal
-                                        key={post.id}
-                                        content-type={post.contentType}
-                                        title={post.title}
-                                        href={post.href}
-                                    ></dx-card-minimal>
-                                </template>
-                            </template>
-                        </template>
-                    </template>
-                    <template for:each={posts} for:item="post">
-                        <template if:false={isMinimalCard}>
-                            <template if:true={post.author}>
-                                <dx-card-expanded
-                                    key={post.id}
-                                    title={post.title}
-                                    content-type={post.contentType}
-                                    href={post.href}
-                                    date={post.date}
-                                    body={post.excerpt}
-                                    author-img-src={post.authorImgSrc}
-                                    author-label={post.author.name}
-                                    topics={post.topics}
-                                    length={post.duration}
-                                ></dx-card-expanded>
-                            </template>
-                            <template if:false={post.author}>
-                                <dx-card-expanded
-                                    key={post.id}
-                                    title={post.title}
-                                    content-type={post.contentType}
-                                    href={post.href}
-                                    date={post.date}
-                                    body={post.excerpt}
-                                    topics={post.topics}
-                                    length={post.duration}
-                                ></dx-card-expanded>
-                            </template>
-                        </template>
-                    </template>
-                    <template if:true={showPagination}>
-                        <div class="pagination-container">
-                            <dx-pagination
-                                current-page={currentPage}
-                                total-pages={totalPages}
-                                onpagechange={goToPage}
-                                pages-to-show="5"
-                            ></dx-pagination>
-                        </div>
-                    </template>
-                </template>
-            </template>
-            <template if:true={isEmptyState}>
-                <div class="empty-state-container">
-                    <p class="empty-state-text">
-                        Please try a different filter selection.
-                    </p>
-                </div>
-            </template>
-        </div>
-    </div>
-</template>