add checkmark to summary card

Author: schultek

site/lib/_sass/components/_summary-card.scss

@@ -5,6 +5,13 @@
 
   header {
     padding: 1rem 1.2rem 1.2rem;
+    display: flex;
+    align-items: center;
+
+    >div {
+      flex: 1;
+      color: var(--site-base-fgColor-alt);
+    }
 
     h3 {
       margin: 0;
@@ -13,8 +20,8 @@
       color: var(--site-base-fgColor);
     }
 
-    span {
-      color: var(--site-base-fgColor-alt);
+    .summary-card-completed {
+      color: var(--site-alert-tip-color);
     }
   }
 

site/lib/src/components/tutorial/summary_card.dart

@@ -49,14 +49,20 @@ class SummaryCardComponent extends StatelessComponent {
   Component build(BuildContext context) {
     return div(classes: 'summary-card', [
       header([
-        h3([text(model.title)]),
-        if (model.subtitle case final subtitle?) span([text(subtitle)]),
+        div([
+          h3([text(model.title)]),
+          if (model.subtitle case final subtitle?) span([text(subtitle)]),
+        ]),
+        if (model.completed)
+          span(classes: 'summary-card-completed', [
+            const MaterialIcon('check_circle'),
+          ]),
       ]),
-      for (final item in model.items) buildSummaryItem(item),
+      for (final item in model.items) _buildSummaryItem(item),
     ]);
   }
 
-  Component buildSummaryItem(SummaryCardItem item) {
+  Component _buildSummaryItem(SummaryCardItem item) {
     if (item.details case final d?) {
       return details([
         summary(classes: 'summary-card-item', [

site/lib/src/models/summary_card_model.dart

@@ -8,18 +8,21 @@ class SummaryCardModel {
   const SummaryCardModel({
     required this.title,
     this.subtitle,
+    this.completed = false,
     required this.items,
   });
 
   final String title;
   final String? subtitle;
+  final bool completed;
   final List<SummaryCardItem> items;
 
   @decoder
   factory SummaryCardModel.fromMap(Map<Object?, Object?> json) {
     return SummaryCardModel(
       title: json['title'] as String,
       subtitle: json['subtitle'] as String?,
+      completed: json['completed'] as bool? ?? false,
       items: (json['items'] as List<Object?>)
           .map((e) => SummaryCardItem.fromMap(e as Map<Object?, Object?>))
           .toList(),
@@ -30,6 +33,7 @@ class SummaryCardModel {
   Map<Object?, Object?> toJson() => {
     'title': title,
     'subtitle': subtitle,
+    'completed': completed,
     'items': items.map((e) => e.toJson()).toList(),
   };
 }

site/lib/src/pages/custom_pages.dart

@@ -194,6 +194,7 @@ items:
 <SummaryCard>
 title: What you accomplished
 subtitle: Here's a summary of what you accomplished in this lesson.
+completed: true
 items:
   - title: Reviewed the core concepts of Flutter
     icon: flutter

site/lib/src/style_hash.dart

@@ -2,4 +2,4 @@
 // dart format off
 
 /// The generated hash of the `main.css` file.
-const generatedStylesHash = 'va3Vkb6epp+o';
+const generatedStylesHash = 'xVbcnbykNQw/';