@salesforcedevs/dw-components 1.14.7 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.14.7",
+    "version": "1.15.0",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/setimmediate": "1.0.4",
         "setimmediate": "1.0.5"
     },
-    "gitHead": "f3c08bcb4c3fa70aa7b29eeadaf1a718498f166a"
+    "gitHead": "f2ca29c18bf3158e8edc88a21402617e528f2243"
 }

package/src/modules/dw/cardBlogPostProvider/cardBlogPostProvider.css

@@ -3,3 +3,19 @@
 :host {
     display: contents;
 }
+
+.featured-posts {
+    margin-bottom: var(--dx-g-spacing-xl);
+}
+
+@media screen and (min-width: 1025px) {
+    .hide-on-desktop {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 1024px) {
+    .hide-on-small-screen {
+        display: none;
+    }
+}

package/src/modules/dw/cardBlogPostProvider/cardBlogPostProvider.html

@@ -1,16 +1,78 @@
 <template>
-    <template for:each={posts} for:item="post">
-        <dx-card-blog-post
-            label="BLOG POST"
-            body={post.body}
-            datetime={post.datetime}
-            href={post.href}
-            img-alt={post.imgAlt}
-            img-src={post.imgSrc}
-            key={post.id}
-            header={post.title}
-            authors={post.authors}
-        ></dx-card-blog-post>
-        <dx-hr spacing="2xs" class="mobile-divider_posts" key={post.id}></dx-hr>
+    <template lwc:if={hasBlogPosts}>
+        <div class="hide-on-small-screen">
+            <div class="featured-posts">
+                <dx-grid columns="two">
+                    <dx-card-blog-post
+                        label="BLOG POST"
+                        body={firstPost.body}
+                        datetime={firstPost.datetime}
+                        href={firstPost.href}
+                        img-alt={firstPost.imgAlt}
+                        img-src={firstPost.imgSrc}
+                        key={firstPost.id}
+                        header={firstPost.title}
+                        authors={firstPost.authors}
+                    ></dx-card-blog-post>
+                    <dx-grid columns="one">
+                        <template for:each={secondAndThird} for:item="post">
+                            <dx-card-blog-post
+                                layout="horizontal"
+                                datetime={post.datetime}
+                                href={post.href}
+                                img-alt={post.imgAlt}
+                                img-src={post.imgSrc}
+                                key={post.id}
+                                header={post.title}
+                                authors={post.authors}
+                            ></dx-card-blog-post>
+                        </template>
+                    </dx-grid>
+                </dx-grid>
+            </div>
+            <dx-grid columns="four">
+                <template for:each={restOfBlogPosts} for:item="post">
+                    <dx-card-blog-post
+                        label="BLOG POST"
+                        body={post.body}
+                        datetime={post.datetime}
+                        href={post.href}
+                        img-alt={post.imgAlt}
+                        img-src={post.imgSrc}
+                        key={post.id}
+                        header={post.title}
+                        authors={post.authors}
+                    ></dx-card-blog-post>
+                    <dx-hr
+                        spacing="2xs"
+                        class="mobile-divider_posts"
+                        key={post.id}
+                    ></dx-hr>
+                </template>
+            </dx-grid>
+        </div>
+
+        <div class="hide-on-desktop">
+            <dx-grid columns="three">
+                <template for:each={sortedPosts} for:item="post">
+                    <dx-card-blog-post
+                        label="BLOG POST"
+                        body={post.body}
+                        datetime={post.datetime}
+                        href={post.href}
+                        img-alt={post.imgAlt}
+                        img-src={post.imgSrc}
+                        key={post.id}
+                        header={post.title}
+                        authors={post.authors}
+                    ></dx-card-blog-post>
+                    <dx-hr
+                        spacing="2xs"
+                        class="mobile-divider_posts"
+                        key={post.id}
+                    ></dx-hr>
+                </template>
+            </dx-grid>
+        </div>
     </template>
 </template>

package/src/modules/dw/cardBlogPostProvider/cardBlogPostProvider.ts

@@ -1,6 +1,12 @@
 import { LightningElement, api, track } from "lwc";
-import { fetchWordpressPosts } from "dxUtils/wordpress";
-import { normalizePost } from "dxUtils/normalizers";
+import {
+    fetchSingleWordpressPost,
+    fetchWordpressPosts
+} from "dxUtils/wordpress";
+import {
+    normalizePost,
+    normalizeSinglePostResponse
+} from "dxUtils/normalizers";
 
 type BlogPost = {
     body: string;
@@ -11,9 +17,71 @@ type BlogPost = {
 };
 
 export default class CardBlogPostProvider extends LightningElement {
-    @api count?: string;
+    @api count: string = "7";
+    @track _sortedPosts: BlogPost[] = [];
 
-    @track posts: BlogPost[] = [];
+    private _featuredPost: BlogPost | undefined;
+    private _posts: BlogPost[] = [];
+
+    set posts(posts: BlogPost[]) {
+        this._posts = posts;
+        if (this._featuredPost) {
+            this._sortedPosts = [
+                this._featuredPost,
+                ...this.filterOutFeaturedPost(posts)
+            ];
+        } else {
+            this._sortedPosts = posts;
+        }
+    }
+
+    get sortedPosts() {
+        return this._sortedPosts;
+    }
+
+    set featuredPost(featuredPost: BlogPost) {
+        this._featuredPost = featuredPost;
+        this._sortedPosts = [
+            featuredPost,
+            ...this.filterOutFeaturedPost(this._posts)
+        ];
+    }
+
+    get hasBlogPosts() {
+        return this._sortedPosts && this._sortedPosts.length > 0;
+    }
+
+    // the three sections used in the desktop view
+    get firstPost() {
+        return this._sortedPosts[0];
+    }
+
+    get secondAndThird() {
+        return this._sortedPosts.slice(1, 3);
+    }
+
+    get restOfBlogPosts() {
+        return this._sortedPosts.slice(3);
+    }
+
+    private filterOutFeaturedPost(posts: BlogPost[]) {
+        // the featured post + the rest must equal count
+        const countMinusOne = parseInt(this.count, 10) - 1;
+        return posts
+            .filter((post) => post.id !== this._featuredPost.id)
+            .slice(0, countMinusOne);
+    }
+
+    private fetchFeaturedPost = async () => {
+        const FEATURED_BLOG_POST_ID = process.env.FEATURED_BLOG_POST_ID;
+        if (FEATURED_BLOG_POST_ID) {
+            this.featuredPost = await fetchSingleWordpressPost(
+                "/blogs/wp-json/wp/v2/posts",
+                FEATURED_BLOG_POST_ID,
+                normalizeSinglePostResponse
+            );
+        }
+    };
 
     private fetchPosts = async () => {
         this.posts = await fetchWordpressPosts(
@@ -24,6 +92,7 @@ export default class CardBlogPostProvider extends LightningElement {
     };
 
     connectedCallback() {
+        this.fetchFeaturedPost();
         this.fetchPosts();
     }
 }