Merge pull request #17301 from edx/alasdair/learner-analytics-dashboard-week-streak-tweak

Update to week streak display logic

lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx

@@ -49,9 +49,15 @@ function getStreakIcons(count) {
   ));
 }
 
+function getStreakEncouragement(count) {
+  const action = (count > 0) ? 'Maintain' : 'Start';
+
+  return `${action} your active streak by`;
+}
+
 function getStreakString(count) {
   const unit = (count ===1) ? 'week' : 'weeks';
-  return `Active ${count} ${unit} in a row`;
+  return (count > 0) ? `Active ${count} ${unit} in a row` : false;
 }
 
 export function LearnerAnalyticsDashboard(props) {
@@ -107,21 +113,23 @@ export function LearnerAnalyticsDashboard(props) {
           <Discussions {...discussion_info} profileImages={profile_images} />
         </div>
       </div>
-      <div className={classNames(
-             'analytics-group',
-             'sidebar',
-             {'week-streak': week_streak > 0}
-           )}>
+      <div className="analytics-group sidebar week-streak">
         <h2 className="group-heading">Timing</h2>
         <h3 className="section-heading">Course due dates</h3>
         <DueDates dates={schedule} assignmentCounts={assignmentCounts} />
-        {week_streak > 0 && 
-          <div className="week-streak-wrapper">
+        <div className="week-streak-wrapper">
+          <h3 className="section-heading">Week streak</h3>
+          {week_streak > 0 && 
             <div className="streak-icon-wrapper" aria-hidden="true">{getStreakIcons(week_streak)}</div>
-            <h3 className="section-heading">Week streak</h3>
-            <p>{getStreakString(week_streak)}</p>
-          </div>
-        }
+          }
+          <p>{getStreakString(week_streak)}</p>
+          <p className="streak-encouragement">{getStreakEncouragement(week_streak)}</p>
+          <ul className="streak-criteria">
+            <li>Answering problems</li>
+            <li>Participating in discussions</li>
+            <li>Watching course videos</li>
+          </ul>
+        </div>
         <div className="active-users-wrapper">
           <span className="fa fa-user count-icon" aria-hidden="true"></span>
           <span className="user-count">{weekly_active_users.toLocaleString('en', {useGrouping:true})}</span>

lms/static/sass/features/_learner-analytics-dashboard.scss

@@ -244,7 +244,7 @@ $trophy-gold: #f39c12;
     color: $font-color;
 
     .streak-icon-wrapper {
-      margin-bottom: 10px;
+      margin: 10px 0;
     }
 
     .fa-trophy {
@@ -256,6 +256,14 @@ $trophy-gold: #f39c12;
     .section-heading {
       margin-bottom: 0;
     }
+
+    .streak-encouragement {
+      margin-bottom: 5px;
+    }
+
+    .streak-criteria {
+      margin-bottom: 20px;
+    }
   }
 
   .active-users-wrapper {