From cdf45172a7f63c0cf773abfbd31349393dda3782 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 19 Mar 2024 16:07:49 +0000
Subject: [PATCH] Added a fullscreen onboarding checklist to the dashboard
 (#19888)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref https://linear.app/tryghost/issue/IPC-66/onboarding-checklist-v1

- Larger, 100vh onboarding checklist that’s currently on the dashboard,
but should be moved to it’s own component and route
- Every step links to the relevant screen, but the logic for completing
steps is missing
---
 .../dashboard/onboarding-checklist.hbs        | 139 +++++++-------
 ghost/admin/app/styles/layouts/dashboard.css  | 171 +++++++++++-------
 ghost/admin/app/templates/dashboard.hbs       |   2 +
 .../assets/icons/check-circle-simple.svg      |   9 +
 4 files changed, 183 insertions(+), 138 deletions(-)
 create mode 100644 ghost/admin/public/assets/icons/check-circle-simple.svg

diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
index f629af37df..621ca20d7f 100644
--- a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
+++ b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs
@@ -1,82 +1,85 @@
-<section class="gh-dashboard-section">
-    <article class="gh-dashboard-onboarding-box">
-        <div class="gh-dashboard-onboarding-box-message">
-            <div>
-                {{!-- {{svg-jar "confetti"}} --}}
-                <h3 class="gh-dashboard-onboarding-heading">Welcome to your new Ghost publication!</h3>
-                <p>Let’s set you up for success.</p>
-                <p>For additional resources, visit our Help Center.</p>
-            </div>
-            <span>Dismiss</span>
-        </div>
-        <div class="gh-dashboard-onboarding-items">
-            <div>
-                {{!-- Step 1 --}}
-                <div class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--completed">                                                    
-                    <div class="gh-dashboard-onboarding-item-content">
-                        {{svg-jar "rocket" }}
-                        <span class="gh-dashboard-list-text">Start a new Ghost publication</span>
-                    </div>
-                    <div class="gh-dashboard-onboarding-item-checkmark">
-                        {{svg-jar "check-2" }}
+<div class="gh-onboarding-wrapper">
+    <div class="gh-onboarding-header"> 
+        <video width="100" height="100" loop autoplay muted playsinline preload="metadata" style="width: 100px; height: 100px; margin-bottom: 24px;">
+            <source src="assets/videos/logo-loader.mp4" type="video/mp4" />
+        </video>
+        <h2 class="gh-canvas-title">Maker Stations is ready to go!</h2>
+        <p>Let’s set your brand new publication up for success.</p>
+    </div>
+
+    <div class="gh-onboarding-items">
+        <div>
+            {{!-- Step 1 --}}
+            <div class="gh-onboarding-item gh-onboarding-item--completed">                                                    
+                <div class="gh-onboarding-item-content">
+                    {{svg-jar "rocket" }}
+                    <div class="gh-onboarding-item-details">
+                        <span class="gh-onboarding-item-title">Start a new Ghost publication</span>
                     </div>
                 </div>
-                {{!-- Step 2 --}}
-                <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--default">  
-                            <div class="gh-dashboard-onboarding-item-content">
-                                {{svg-jar "brush" }}
-                                <div class="gh-dashboard-onboarding-item-details">
-                                    <span class="gh-dashboard-onboarding-item-title">Customize your publication</span>
-                                    <span class="gh-dashboard-onboarding-item-description">Match the look and feel to your style and make it yours.</span>
-                                </div>
-                            </div>
-                            <div class="gh-dashboard-onboarding-item-action">
-                                {{svg-jar "arrow-right" }}
-                            </div>
-                </LinkTo>
-                {{!-- Step 3 --}}
-                <LinkTo @route="lexical-editor.new" @model="post" class="gh-dashboard-onboarding-item"> 
-                        <div class="gh-dashboard-onboarding-item-content">
-                            {{svg-jar "writing" }}
-                            <div class="gh-dashboard-onboarding-item-details">
-                                <span class="gh-dashboard-onboarding-item-title">Create your first post</span>
-                                <span class="gh-dashboard-onboarding-item-description">Explore the editor and tell your story — or a preview of what’s to come.</span>
+                <div class="gh-onboarding-item-checkmark">
+                    {{svg-jar "check-circle-simple" }}
+                </div>
+            </div>
+            {{!-- Step 2 --}}
+            <LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item gh-onboarding-item--next">  
+                        <div class="gh-onboarding-item-content">
+                            {{svg-jar "brush" }}
+                            <div class="gh-onboarding-item-details">
+                                <span class="gh-onboarding-item-title">Customize your publication</span>
+                                <span class="gh-onboarding-item-description">Match the look and feel to your style and make it yours.</span>
                             </div>
                         </div>
-                        <div class="gh-dashboard-onboarding-item-action">
-                            {{svg-jar "arrow-right" }}
+                        <div class="gh-onboarding-item-action">
+                            {{svg-jar "arrow-right-tail" }}
                         </div>
-                </LinkTo>
-                {{!-- Step 4 --}}
-                <LinkTo @route="members" class="gh-dashboard-onboarding-item">
-                        <div class="gh-dashboard-onboarding-item-content">
-                            {{svg-jar "member-add" }}
-                            <div class="gh-dashboard-onboarding-item-details">
-                                <span class="gh-dashboard-onboarding-item-title">Build your audience</span>
-                                <span class="gh-dashboard-onboarding-item-description">Add members and grow your readership.</span>
-                            </div>
-                        </div>
-                        <div class="gh-dashboard-onboarding-item-action">
-                            {{svg-jar "arrow-right" }}
-                        </div>
-                </LinkTo>
-                {{!-- Step 5 --}}
-                <div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-dashboard-onboarding-item">                                                    
-                    <div class="gh-dashboard-onboarding-item-content">
-                        {{svg-jar "megaphone" }}
-                        <div class="gh-dashboard-onboarding-item-details">
-                            <span class="gh-dashboard-onboarding-item-title">Share your publication</span>
-                            <span class="gh-dashboard-onboarding-item-description">Share your publication on social media.</span>
+            </LinkTo>
+            {{!-- Step 3 --}}
+            <LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item"> 
+                    <div class="gh-onboarding-item-content">
+                        {{svg-jar "writing" }}
+                        <div class="gh-onboarding-item-details">
+                            <span class="gh-onboarding-item-title">Create your first post</span>
+                            <span class="gh-onboarding-item-description">Explore the editor and tell your story.</span>
                         </div>
                     </div>
-                    <div class="gh-dashboard-onboarding-item-action">
-                        {{svg-jar "arrow-right" }}
+                    <div class="gh-onboarding-item-action">
+                        {{svg-jar "arrow-right-tail" }}
                     </div>
+            </LinkTo>
+            {{!-- Step 4 --}}
+            <LinkTo @route="members" class="gh-onboarding-item">
+                    <div class="gh-onboarding-item-content">
+                        {{svg-jar "member-add" }}
+                        <div class="gh-onboarding-item-details">
+                            <span class="gh-onboarding-item-title">Build your audience</span>
+                            <span class="gh-onboarding-item-description">Add members and grow your readership.</span>
+                        </div>
+                    </div>
+                    <div class="gh-onboarding-item-action">
+                        {{svg-jar "arrow-right-tail" }}
+                    </div>
+            </LinkTo>
+            {{!-- Step 5 --}}
+            <div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-onboarding-item">                                                    
+                <div class="gh-onboarding-item-content">
+                    {{svg-jar "megaphone" }}
+                    <div class="gh-onboarding-item-details">
+                        <span class="gh-onboarding-item-title">Share your publication</span>
+                        <span class="gh-onboarding-item-description">Share your publication on social media.</span>
+                    </div>
+                </div>
+                <div class="gh-onboarding-item-action">
+                    {{svg-jar "arrow-right-tail" }}
                 </div>
             </div>
         </div>
-    </article>
-</section>
+    </div>
+
+    <p class="gh-onboarding-help">Need some more help? Check out our <a href="#">Help Center</a></p>
+    
+    <a href="#" class="gh-onboarding-skip">Skip onboarding</a>
+</div>
 
 {{#if this.showShareModal}}
 <GhFullscreenModal @modal="share"
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index 7587a4a7f9..8479e4b7ea 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -2764,84 +2764,92 @@ Dashboard Mentions */
 /* ---------------------------------
 Onboarding checklist */
 
-.gh-dashboard-onboarding-box {
-    display: grid;
-    grid-gap: 24px;
-    grid-template-columns: 1fr 2fr;
-    border: 1px solid #ebeef0;
-    border-radius: 6px;
-    overflow: hidden;
-    flex: 1;
-}
-
-.gh-dashboard-onboarding-box-message {
+.gh-onboarding-wrapper {
     display: flex;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
-    justify-content: space-between;
-    background-color: rgb(204, 29, 204); 
-    padding: 24px;
-    color: white;
-    background: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(img/gradient-bg.png);
+    min-height: 100vh;
+    position: relative;
 }
 
-.gh-dashboard-onboarding-heading {
-    font-size: 1.8rem;
-    font-weight: 700;
-    line-height: 1.3;
-    padding: 0;
-    color: #fff;
-    letter-spacing: -.3px;
+.gh-onboarding-header {
+    text-align: center;
+    margin-bottom: 40px;
 }
 
-.gh-dashboard-onboarding-items {
-    padding: 24px;
+.gh-onboarding-header p {
+    margin-top: 8px;
+    margin-bottom: 0;
+    color: var(--midgrey);
+    font-size: 1.5rem;
 }
 
-.gh-dashboard-onboarding-item {
-    padding: 12px 0;
+.gh-onboarding-items {
+    max-width: 540px;
+    width: 100%;
+    border-radius: 6px;
+    padding: 16px 24px;
+    /* box-shadow: 0px 0px 16px 4px rgba(0, 0, 0, 0.04); */
+    border: 1px solid #ebeef0;
+    /* box-shadow: -7px -6px 42px 8px rgba(75,225,226,.28),7px 6px 42px 8px rgba(202,103,255,.32); */
+}
+
+.gh-onboarding-item {
+    padding: 24px 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #ebeef0;
 }
 
-.gh-dashboard-onboarding-item:first-child {
+.gh-onboarding-item:first-child {
     margin-top: -12px;
 }
 
-.gh-dashboard-onboarding-item:last-child {
+.gh-onboarding-item:last-child {
     border-bottom: 0 none;
     margin-bottom: -12px;
 }
 
-.gh-dashboard-onboarding-item:not(.gh-dashboard-onboarding-item--completed):hover {
-    background: linear-gradient(315deg,#fafafb 60%,#fff);
+.gh-onboarding-item--next {
+    margin: 0px -32px 6px;
+    background: white;
+    padding: 24px 32px;
+    box-shadow: 0px 1px 0px rgba(17,17,26,0.05), 0px 0px 8px rgba(17,17,26,0.1);
+    border-radius: 6px;
+    border-bottom: none;
 }
 
-.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content {
-    opacity: 0.3;
+.gh-onboarding-item:has(+ .gh-onboarding-item--next) {
+    border-bottom: none;
 }
 
-.gh-dashboard-onboarding-item-content {
+.gh-onboarding-item:not(.gh-onboarding-item--next) .gh-onboarding-item-description {
+    display: none;
+}
+
+.gh-onboarding-item--completed .gh-onboarding-item-content {
+    opacity: 0.2;
+}
+
+.gh-onboarding-item-content {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     justify-content: flex-start;
     min-width: 0;
 }
 
-.gh-dashboard-onboarding-item-details {
+.gh-onboarding-item-details {
     display: flex;
     flex-direction: column;
     text-align: left;
 }
 
-.gh-dashboard-onboarding-item-title {
-    font-weight: 600;
-    font-size: 1.5rem;
+.gh-onboarding-item-title {
+    font-weight: 700;
+    font-size: 1.6rem;
+    line-height: 1;
     letter-spacing: 0;
     color: #394047;
     padding: 0 32px 0 0;
@@ -2852,77 +2860,100 @@ Onboarding checklist */
     margin-bottom: 0;
 }
 
-.gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item:hover .gh-dashboard-onboarding-item-description,
-.gh-dashboard-onboarding-items .gh-dashboard-onboarding-item--default .gh-dashboard-onboarding-item-description {
-    height: 20px;
-}
-
-.gh-dashboard-onboarding-item-description, .gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item-description {
+.gh-onboarding-item-description {
     font-weight: 400;
-    color: #626d79!important;
-    height: 0;
-    overflow: hidden;
-    transition: height .15s;
+    color: var(--middarkgrey);
+    font-size: 1.5rem;
+    line-height: 1.4;
+    margin-top: 4px;
 }
 
-.gh-dashboard-onboarding-item-action {
+.gh-onboarding-item-action {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
     min-width: 0;
+    transition: transform .15s;
 }
 
-.gh-dashboard-onboarding-item-content svg {
+.gh-onboarding-item:hover .gh-onboarding-item-action {
+    transform: translateX(5px);
+}
+
+.gh-onboarding-item-content svg {
     width: 20px;
     min-width: 20px;
     height: auto;
-    margin: 2px 16px 0 0;
+    margin: 0 16px 0 0;
     color: #ae5aef;
 }
 
-.gh-dashboard-onboarding-item-content svg path {
+.gh-onboarding-item-content svg path {
     stroke: #ae5aef;
     stroke-width: 1.5 !important;
 }
 
-.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg {
+.gh-onboarding-item--completed .gh-dashboard-onboarding-item-content svg {
     color: var(--middarkgrey);
 }
 
-.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg path {
+.gh-onboarding-item--completed .gh-onboarding-item-content svg path {
     stroke: var(--middarkgrey);
 }
 
-.gh-dashboard-onboarding-item-action {
-    display: flex;
-}
-
-.gh-dashboard-onboarding-item-action svg {
+.gh-onboarding-item-action svg {
     width: 14px;
     min-width: 14px;
     height: 14px;
     margin-right: 1rem;
 }
 
-.gh-dashboard-onboarding-item-action svg path {
-    fill: var(--midlightgrey);
+.gh-onboarding-item-action svg path {
+    fill: #ae5aef;
 }
 
-.gh-dashboard-onboarding-item-checkmark {
+.gh-onboarding-item-checkmark {
     display: flex;
 }
 
-.gh-dashboard-onboarding-item-checkmark svg {
-    width: 14px;
+.gh-onboarding-item-checkmark svg {
+    width: 20px;
     height: auto;
     margin-right: 1rem;
 }
 
-.gh-dashboard-onboarding-item-checkmark svg path {
+.gh-onboarding-item-checkmark svg path, .gh-onboarding-item-checkmark svg circle {
     stroke: var(--green);
 }
 
+.gh-onboarding-help {
+    color: var(--midgrey);
+    margin-top: 40px;
+    font-size: 1.5rem;
+}
+
+.gh-onboarding-help a {
+    color: var(--midgrey);
+    text-decoration: underline;
+}
+
+.gh-onboarding-skip {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 32px;
+    padding: 1px 14px;
+    border: 1px solid #e6e9eb;
+    color: var(--middarkgrey);
+    border-radius: 3px;
+    transition: all .2s ease;
+    white-space: nowrap;
+    height: 38px;
+    overflow: hidden;
+    transition: all .1s linear;
+}
+
 /* ---------------------------------
 Share publication modal */
 
diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs
index c6d3fbc19b..a20ded76f5 100644
--- a/ghost/admin/app/templates/dashboard.hbs
+++ b/ghost/admin/app/templates/dashboard.hbs
@@ -1,5 +1,6 @@
 <section class="gh-canvas" {{scroll-top}}>
     <div class="gh-dashboard">
+        {{#unless (feature 'onboardingChecklist')}}
         <GhCanvasHeader class="gh-canvas-header sticky">
             <h2 class="gh-canvas-title" data-test-screen-title>
                 Dashboard
@@ -78,6 +79,7 @@
                 </div>
             {{/unless}}
         </GhCanvasHeader>
+        {{/unless}}
         <section class="gh-dashboard-layout">
             {{#if this.isLoading }}
                 <GhLoadingSpinner />
diff --git a/ghost/admin/public/assets/icons/check-circle-simple.svg b/ghost/admin/public/assets/icons/check-circle-simple.svg
new file mode 100644
index 0000000000..dc52a43f02
--- /dev/null
+++ b/ghost/admin/public/assets/icons/check-circle-simple.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs>
+        <style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px!important;}
+        </style>
+    </defs>
+    <title>check-circle-1</title>
+    <path class="a" d="M6,13.223,8.45,16.7a1.049,1.049,0,0,0,1.707.051L18,6.828"/>
+    <circle class="a" cx="12" cy="11.999" r="11.25"/>
+</svg>
\ No newline at end of file