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

package/src/modules/dx/contentArchive/contentArchive.css

@@ -0,0 +1,246 @@
+@import "helpers/reset";
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    padding: 0 40px;
+    max-width: 1390px;
+    margin: 0 auto;
+}
+
+.modal-loading {
+    padding: 16px;
+}
+
+.filter-container {
+    width: 100%;
+}
+
+.filter-header-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.filter-clear-btn {
+    color: var(--dx-g-blue-vibrant-50);
+    font-family: var(--dx-g-font-display);
+    font-size: 14px;
+}
+
+.results-heading,
+.posts-month {
+    color: var(--dx-g-text-heading-color);
+    font-family: var(--dx-g-font-display);
+    font-size: 20px;
+    letter-spacing: -0.4px;
+    line-height: 28px;
+    margin-top: 40px;
+}
+
+.posts-month {
+    margin-bottom: 11px;
+}
+
+hr {
+    margin-top: 20px;
+    margin-bottom: 28px;
+}
+
+.content-container {
+    width: 100%;
+}
+
+.content-info-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 60px;
+}
+
+.card-type-group {
+    display: flex;
+}
+
+.min-card-btn,
+.exp-card-btn {
+    font-size: 14px;
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+}
+
+.btn-active {
+    color: var(--dx-g-blue-vibrant-50);
+    text-decoration: underline 2px;
+    text-underline-offset: 2px;
+}
+
+.min-card-btn {
+    margin-left: 10px;
+}
+
+.min-card-btn:hover,
+.exp-card-btn:hover {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+button:focus,
+button:active {
+    outline: none;
+}
+
+.spinner-container {
+    position: relative;
+    margin-top: 85px;
+}
+
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 36px;
+}
+
+.empty-state-container {
+    background-image: url(/assets/svg/no-results-combined.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 170px;
+    width: 100%;
+}
+
+.empty-state-text {
+    color: var(--dx-g-blue-vibrant-20);
+    font-family: var(--dx-g-font-display);
+    font-size: 12px;
+    text-align: center;
+    width: 130px;
+}
+
+.filter-title {
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+}
+
+.filter-content {
+    color: var(--dx-g-blue-vibrant-50);
+    font-family: var(--dx-g-font-display);
+    font-size: 14px;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+}
+
+dx-modal-drawer {
+    width: 300px;
+}
+
+dx-icon {
+    display: inline;
+    margin-left: 5px;
+}
+
+.content-page-length {
+    font-size: 14px;
+}
+
+dx-card-minimal:not(first-of-type) {
+    margin-top: 14px;
+}
+
+dx-card-expanded:not(:first-of-type) {
+    margin-top: 22.5px;
+}
+
+dx-filter-menu {
+    --dx-c-filter-menu-margin: 16px 0;
+}
+
+.filter-chips-container {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin-top: 23px;
+}
+
+.chip-item-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+}
+
+.chip-title,
+.chip-item {
+    font-size: 14px;
+    font-family: var(--dx-g-font-sans);
+}
+
+.chip-title {
+    font-weight: bold;
+    color: rgb(24, 24, 24);
+}
+
+.chip-item {
+    border: 2px solid rgb(92, 92, 92);
+    border-radius: 4px;
+    color: rgb(92, 92, 92);
+    font-weight: 600;
+    padding: 2px 4px;
+}
+
+.chip-item dx-button {
+    margin-left: 4px;
+
+    --dx-c-button-primary-color: inherit;
+}
+
+/* TABLET */
+@media screen and (min-width: 768px) {
+    .container {
+        flex-direction: row;
+    }
+
+    .filter-container {
+        margin-top: 56px;
+        min-width: 220px;
+        max-width: 300px;
+    }
+
+    .empty-state-container {
+        background-size: 550px 100%;
+        height: 250px;
+    }
+
+    .empty-state-text {
+        font-size: 18px;
+        width: 177px;
+    }
+
+    .content-container {
+        margin-left: 30.5px;
+    }
+
+    .results-heading {
+        font-size: 24px;
+    }
+}
+
+/* DESKTOP */
+@media screen and (min-width: 1024px) {
+    .content-container {
+        margin-left: 62px;
+    }
+
+    .empty-state-container {
+        height: 350px;
+    }
+
+    .results-heading {
+        font-size: 32px;
+        margin-top: 42px;
+    }
+}

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

@@ -0,0 +1,336 @@
+<template>
+    <dx-featured-content-header
+        class="documentation_header"
+        title="Content Archive"
+        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={updateSelectedFilters}
+                    ></dx-filter-menu>
+                    <dx-filter-menu
+                        name="dates"
+                        title={dateTitle}
+                        options={dateList}
+                        variant="nested"
+                        onchange={updateSelectedFilters}
+                    ></dx-filter-menu>
+                    <template if:false={hideBlogFilters}>
+                        <dx-filter-menu
+                            name="authors"
+                            title={authorTitle}
+                            options={authorList}
+                            onchange={updateSelectedFilters}
+                        ></dx-filter-menu>
+                    </template>
+                    <dx-filter-menu
+                        name="categories"
+                        title={categoryTitle}
+                        options={categoryList}
+                        onchange={updateSelectedFilters}
+                    ></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={updateSelectedFilters}
+                    ></dx-filter-menu>
+                    <dx-filter-menu
+                        name="dates"
+                        title={dateTitle}
+                        options={dateList}
+                        variant="nested"
+                        onchange={updateSelectedFilters}
+                    ></dx-filter-menu>
+                    <template if:false={hideBlogFilters}>
+                        <dx-filter-menu
+                            name="authors"
+                            title={authorTitle}
+                            options={authorList}
+                            onchange={updateSelectedFilters}
+                        ></dx-filter-menu>
+                    </template>
+                    <dx-filter-menu
+                        name="categories"
+                        title={categoryTitle}
+                        options={categoryList}
+                        onchange={updateSelectedFilters}
+                    ></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>