Added latest posts UI to newsletter preview

Refs https://github.com/TryGhost/Team/issues/2768

ghost/admin/app/components/modals/newsletters/components/latest-post.hbs

@@ -0,0 +1,7 @@
+<div class="gh-members-emailpreview-latest-post">
+    <div class="gh-members-emailpreview-latest-post-image" style={{html-safe (concat "background-image: url( {{@imgPath}} )")}}></div>
+    <div>
+        <h3>{{@postTitle}}</h3>
+        <p>{{@postDate}}</p>
+    </div>
+</div>

ghost/admin/app/components/modals/newsletters/edit/design-labs.hbs

@@ -225,21 +225,6 @@
                             </GhFormGroup>
                         {{/unless}}
 
-                        <GhFormGroup class="gh-stack-item row">
-                            <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
-                            <div class="for-switch small">
-                                <div class="container">
-                                    <input
-                                        type="checkbox"
-                                        id="capture-feedback"
-                                        checked={{@newsletter.showSubscriptionDetails}}
-                                        {{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
-                                    >
-                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
-                                </div>
-                            </div>
-                        </GhFormGroup>
-
                         <GhFormGroup class="gh-stack-item row">
                             <label for="latest-posts" class="modal-fullsettings-title" data-test-toggle="showLatestPosts">Share your latest posts</label>
                             <div class="for-switch small">
@@ -255,6 +240,21 @@
                             </div>
                         </GhFormGroup>
 
+                        <GhFormGroup class="gh-stack-item row">
+                            <label for="capture-feedback" class="modal-fullsettings-title" data-test-toggle="showSubscriptionDetails">Show subscription details</label>
+                            <div class="for-switch small">
+                                <div class="container">
+                                    <input
+                                        type="checkbox"
+                                        id="capture-feedback"
+                                        checked={{@newsletter.showSubscriptionDetails}}
+                                        {{on "change" (fn this.onCheckboxChange "showSubscriptionDetails")}}
+                                    >
+                                    <button type="button" class="input-toggle-component" {{on "click" (fn this.toggleProperty "showSubscriptionDetails")}}></button>
+                                </div>
+                            </div>
+                        </GhFormGroup>
+
                         <GhFormGroup class="gh-stack-item">
                             <label class="modal-fullsettings-title">Email footer</label>
                             <KoenigBasicHtmlInput

ghost/admin/app/components/modals/newsletters/edit/preview-labs.hbs

@@ -45,15 +45,14 @@
                 <div class="gh-members-emailpreview-featureimage" style={{this.featureImageStyle}}></div>
                 <div class="gh-members-emailpreview-featureimage-caption">Feature image caption</div>
             {{/if}}
-            <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}} {{if (and (not (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta) @newsletter.showSubscriptionDetails) "no-border"}}">
+            <div class="gh-members-emailpreview-content {{if (eq @newsletter.bodyFontCategory "sans_serif") "sans-serif"}} {{if (and (not (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta @newsletter.showLatestPosts) @newsletter.showSubscriptionDetails) "no-border"}}">
                 <p>This is what your content will look like when you send one of your posts as an email newsletter to your subscribers.</p>
                 <p>Over there on the left you’ll see some settings that allow you to customize the look and feel of this template to make it perfectly suited to your brand. Email templates are exceptionally finnicky to make, but we’ve spent a long time optimising this one to make it work beautifully across devices, email clients and content types.</p>
                 <p>So, you can trust that every email you send with Ghost will look great and work well. Just like the rest of your site.</p>
             </div>
 
             {{#if (or (and @newsletter.feedbackEnabled (feature "audienceFeedback")) this.showCommentCta)}}
-                <div class="gh-members-emailpreview-feedback {{if @newsletter.showSubscriptionDetails "no-border"}}">
-
+                <div class="gh-members-emailpreview-feedback {{if (and (not @newsletter.showLatestPosts) @newsletter.showSubscriptionDetails) "no-border"}}">
                     <div class="gh-members-emailpreview-feedback-buttons-group">
                         {{#if (and @newsletter.feedbackEnabled (feature "audienceFeedback"))}}
                             <Modals::Newsletters::Components::FeedbackButton
@@ -75,8 +74,19 @@
             {{/if}}
 
             {{#if @newsletter.showLatestPosts}}
-                <div class="gh-members-emailpreview-latest-posts">
-                    Newsletter latest posts
+                <div class="gh-members-emailpreview-latest-posts {{unless @newsletter.showSubscriptionDetails "border"}}">
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-1.png"
+                        @postTitle="The three latest posts published on your site"
+                        @postDate="Lorem ipsum dolor sit amet, consectetur elit." />
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-2.png"
+                        @postTitle="Displayed at the bottom of each newsletter"
+                        @postDate="Lorem ipsum dolor sit amet, consectetur elit." />
+                    <Modals::Newsletters::Components::LatestPost
+                        @imgPath="assets/img/latest-posts-3.png"
+                        @postTitle="To keep your work front and center"
+                        @postDate="Lorem ipsum dolor sit amet, consectetur elit." />
                 </div>
             {{/if}}
 

ghost/admin/app/styles/layouts/members.css

@@ -2268,7 +2268,7 @@ p.gh-members-import-errordetail:first-of-type {
 .gh-members-emailpreview-feedback {
     display: grid;
     gap: 20px;
-    padding: 40px;
+    padding: 24px 40px;
     border-bottom: 1px solid #e5eff5;
 }
 
@@ -2276,11 +2276,6 @@ p.gh-members-import-errordetail:first-of-type {
     border-bottom: 0;
 }
 
-.gh-members-emailpreview-labs .gh-members-emailpreview-feedback {
-    padding-top: 24px;
-    padding-bottom: 24px;
-}
-
 .gh-members-emailpreview-feedback-title {
     text-align: center;
     color: #15212a;
@@ -2294,25 +2289,14 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-members-emailpreview-feedback-button {
     background: #fff;
-    font-weight: bold;
+    font-weight: 600;
     border-radius: 22px;
-    border: 1px solid #e5eff5;
+    white-space: nowrap;
     pointer-events: none;
     cursor: default;
 }
 
-.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button {
-    border: 0;
-    font-weight: 600;
-    white-space: nowrap;
-}
-
 .gh-members-emailpreview-feedback-button svg {
-    width: 24px;
-    height: 24px;
-}
-
-.gh-members-emailpreview-labs .gh-members-emailpreview-feedback-button svg {
     width: 20px;
     height: 20px;
     stroke-width: 1.5px;
@@ -2325,6 +2309,46 @@ p.gh-members-import-errordetail:first-of-type {
     padding: 7px 18px;
 }
 
+.gh-members-emailpreview-latest-posts {
+    padding: 24px 0;
+}
+
+.gh-members-emailpreview-latest-posts.border {
+    border-bottom: 1px solid #e5eff5;
+}
+
+.gh-members-emailpreview-latest-post {
+    display: flex;
+    gap: 16px;
+    padding: 8px 0;
+}
+
+.gh-members-emailpreview-latest-post-image {
+    border-radius: var(--border-radius);
+    width: 100%;
+    max-width: 120px;
+    height: auto;
+    background: transparent;
+    background-repeat: no-repeat;
+    background-size: cover;
+    aspect-ratio: 5 / 4;
+}
+
+.gh-members-emailpreview-latest-post h3 {
+    margin: 12px 0 4px;
+    color: #15212a;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 1.9rem;
+}
+
+.gh-members-emailpreview-latest-post p {
+    margin: 0;
+    color: #738a94;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial, sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 1.4rem;
+}
+
+
 .gh-members-emailpreview-subscription-details {
     padding: 24px;
     background: #F4F5F6;