[Horizon] Update dashboard & add LearningObjectCard component

Horizon/Horizon/Resources/Localizable.xcstrings

@@ -46,9 +46,6 @@
     },
     "Confusing" : {
 
-    },
-    "Continue learning" : {
-
     },
     "Due" : {
 
@@ -91,6 +88,9 @@
     },
     "My Progress" : {
 
+    },
+    "Next Up" : {
+
     },
     "Note" : {
 

Horizon/Horizon/Sources/Features/Dashboard/View/DashboardView.swift

@@ -18,6 +18,7 @@
 
 import Core
 import SwiftUI
+import HorizonUI
 
 struct DashboardView: View {
     @ObservedObject private var viewModel: DashboardViewModel
@@ -30,30 +31,58 @@ struct DashboardView: View {
     var body: some View {
         InstUI.BaseScreen(
             state: viewModel.state,
-            config: .init(refreshable: true)
+            config: .init(
+                refreshable: true,
+                loaderBackgroundColor: .huiColors.surface.pagePrimary
+            )
         ) { _ in
-            VStack(spacing: 0) {
+            LazyVStack(spacing: .zero) {
                 ForEach(viewModel.courses) { course in
                     if course.currentModuleItem != nil, !course.upcomingModuleItems.isEmpty {
-                        VStack(alignment: .leading, spacing: 12) {
-                            Size24BoldTextDarkestTitle(title: course.name)
-                                .padding(.top, 16)
-                            CertificateProgressBar(
+                        VStack(alignment: .leading, spacing: .zero) {
+                            Text(course.name)
+                                .huiTypography(.h1)
+                                .foregroundStyle(Color.huiColors.text.title)
+                                .padding(.top, .huiSpaces.primitives.medium)
+                                .padding(.bottom, .huiSpaces.primitives.mediumSmall)
+
+                            HorizonUI.ProgressBar(
                                 progress: course.progress,
-                                progressString: course.progressString
+                                size: .medium,
+                                numberPosition: .outside
                             )
-                            moduleView(course: course)
+                            if let module = course.currentModule, let moduleItem = course.currentModuleItem {
+                                Text("Next Up", bundle: .horizon)
+                                    .huiTypography(.h3)
+                                    .foregroundStyle(Color.huiColors.text.title)
+                                    .padding(.top, .huiSpaces.primitives.large)
+                                    .padding(.bottom, .huiSpaces.primitives.small)
+                                    .frame(maxWidth: .infinity, alignment: .leading)
+
+                                HorizonUI.LearningObjectCard(
+                                    status: "Default",
+                                    moduleTitle: module.name,
+                                    learningObjectName: moduleItem.title,
+                                    duration: "20 Mins",
+                                    type: moduleItem.type?.label,
+                                    dueDate: moduleItem.dueAt?.relativeShortDateOnlyString
+                                ) {
+                                    if let url = moduleItem.htmlURL {
+                                        viewModel.navigateToCourseDetails(url: url, viewController: viewController)
+                                    }
+                                }
+                            }
                         }
-                        .padding(.horizontal, 16)
-                        .background()
+                        .padding(.horizontal, .huiSpaces.primitives.medium)
                     }
                 }
             }
+            .padding(.bottom, .huiSpaces.primitives.mediumSmall)
         }
         .navigationBarItems(leading: nameLabel)
         .navigationBarItems(trailing: navBarIcons)
         .scrollIndicators(.hidden, axes: .vertical)
-        .background(Color.backgroundLight)
+        .background(Color.huiColors.surface.pagePrimary)
     }
 
     private var nameLabel: some View {
@@ -97,64 +126,6 @@ struct DashboardView: View {
         }
     }
 
-    @ViewBuilder
-    private func moduleView(course: HCourse) -> some View {
-        if let module = course.currentModule, let moduleItem = course.currentModuleItem {
-            VStack(spacing: 0) {
-                GeometryReader { proxy in
-                    AsyncImage(url: course.imageURL) { image in
-                        image.image?.resizable().scaledToFill()
-                    }
-                    .frame(width: proxy.size.width)
-                    .cornerRadius(8)
-                }
-                .frame(height: 200)
-                .padding(.vertical, 24)
-
-                Size24RegularTextDarkestTitle(title: module.name)
-                    .padding(.bottom, 8)
-                HStack(spacing: 0) {
-                    HStack(spacing: 4) {
-                        Image(systemName: "document")
-                            .resizable()
-                            .renderingMode(.template)
-                            .aspectRatio(contentMode: .fit)
-                            .foregroundStyle(Color.textDark)
-                            .frame(width: 18, height: 18)
-                        Size12RegularTextDarkTitle(title: moduleItem.title)
-                            .lineLimit(2)
-                    }
-                    Spacer()
-                    HStack(spacing: 4) {
-                        Image(systemName: "timer")
-                            .resizable()
-                            .renderingMode(.template)
-                            .foregroundStyle(Color.textDark)
-                            .frame(width: 14, height: 14)
-                        Size12RegularTextDarkTitle(title: "20 Mins")
-                    }
-                }
-                Button {
-                    if let url = moduleItem.htmlURL {
-                        AppEnvironment.shared.router.route(to: url, from: viewController)
-                    }
-                } label: {
-                    Text("Continue learning")
-                        .font(.regular14)
-                        .frame(height: 36)
-                        .frame(maxWidth: .infinity)
-                        .background(Color.backgroundLight)
-                        .foregroundColor(Color.textDark)
-                        .cornerRadius(8)
-                        .padding(.vertical, 16)
-                }
-            }
-            .padding(.horizontal, 16)
-            .background(Color.backgroundLightest)
-            .cornerRadius(8)
-            .padding(.vertical, 16)
-        }
-    }
 }
 
 #if DEBUG

Horizon/Horizon/Sources/Features/Dashboard/View/DashboardViewModel.swift

@@ -66,4 +66,8 @@ final class DashboardViewModel: ObservableObject {
     func notificationsDidTap() {}
 
     func profileDidTap() {}
+
+    func navigateToCourseDetails(url: URL, viewController: WeakViewController) {
+        router.route(to: url, from: viewController)
+    }
 }

Horizon/Horizon/Sources/Features/HorizonTabBarController.swift

@@ -19,6 +19,7 @@
 import Core
 import HorizonUI
 import UIKit
+import SwiftUI
 
 final class HorizonTabBarController: UITabBarController, UITabBarControllerDelegate {
     // MARK: - Properties
@@ -63,7 +64,8 @@ final class HorizonTabBarController: UITabBarController, UITabBarControllerDeleg
         )
         let appearance = UINavigationBarAppearance()
         appearance.configureWithOpaqueBackground()
-        appearance.backgroundColor = .backgroundLight
+
+        appearance.backgroundColor = UIColor(Color.huiColors.surface.pagePrimary)
         appearance.shadowImage = UIImage()
         appearance.shadowColor = nil
 

packages/HorizonUI/Sources/HorizonUI/Sources/Components/LearningObjectCard/HorizonUI.LearningObjectCard.Storybook.swift

@@ -0,0 +1,78 @@
+//
+// This file is part of Canvas.
+// Copyright (C) 2024-present  Instructure, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+//
+
+import SwiftUI
+
+extension HorizonUI.LearningObjectCard {
+    struct Storybook: View {
+        var body: some View {
+            ScrollView {
+                VStack(spacing: 20) {
+                    HorizonUI.LearningObjectCard(
+                        status: "Default",
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor",
+                        duration: "20 Mins",
+                        type: "Learning Object Type",
+                        dueDate: "10/10/2015"
+                    )
+
+                    HorizonUI.LearningObjectCard(
+                        status: "Default",
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor",
+                        type: "Learning Object Type",
+                        dueDate: "10/10/2015"
+                    )
+
+                    HorizonUI.LearningObjectCard(
+                        status: "Default",
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor",
+                        duration: "20 Mins",
+                        dueDate: "10/10/2015"
+                    )
+
+                    HorizonUI.LearningObjectCard(
+                        status: "Default",
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor",
+                        duration: "20 Mins"
+                    )
+
+                    HorizonUI.LearningObjectCard(
+                        status: "Default",
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor"
+                    )
+
+                    HorizonUI.LearningObjectCard(
+                        moduleTitle: "Module Title Lorem Ipsum Dolor Sit Amet Adipiscing Elit So Do",
+                        learningObjectName: "Learning Object Name Lorem Ipsum Dolor"
+                    )
+                }
+                .padding(.horizontal, .huiSpaces.primitives.medium)
+            }
+            .navigationTitle("LearningObjectCard")
+        }
+    }
+}
+
+#Preview {
+    HorizonUI.LearningObjectCard.Storybook()
+}