@salesforcedevs/dx-components 0.53.8 → 0.53.11-alpha

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

@@ -1,246 +0,0 @@
-@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: var(--dx-g-text-sm);
-}
-
-.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: var(--dx-g-text-sm);
-    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: var(--dx-g-text-sm);
-    width: 100%;
-    height: 100%;
-    display: inline-flex;
-}
-
-dx-modal-drawer {
-    width: 300px;
-}
-
-dx-icon {
-    display: inline;
-    margin-left: 5px;
-}
-
-.content-page-length {
-    font-size: var(--dx-g-text-sm);
-}
-
-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: var(--dx-g-text-sm);
-    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

@@ -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>