[Horizon] Add navigation bar

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
@@ -50,53 +51,17 @@ struct DashboardView: View {
                 }
             }
         }
-        .navigationBarItems(leading: nameLabel)
-        .navigationBarItems(trailing: navBarIcons)
+        .navigationBarItems(leading: HorizonUI.NavigationBar.Leading(title: "Hi, Horizon App"))
+        .navigationBarItems(trailing: HorizonUI.NavigationBar.Trailing(onEvent: viewModel.onEvent))
         .scrollIndicators(.hidden, axes: .vertical)
         .background(Color.backgroundLight)
+        .onFirstAppear { viewModel.viewController =  viewController}
     }
 
     private var nameLabel: some View {
         Size16RegularTextDarkestTitle(title: viewModel.title)
     }
 
-    private var navBarIcons: some View {
-        HStack(spacing: 0) {
-            Button {
-                viewModel.notebookDidTap(viewController)
-            } label: {
-                Image(systemName: "book.closed")
-                    .tint(.backgroundDark)
-                    .frame(width: 40, height: 40)
-                    .background(Color.backgroundLightest)
-                    .clipShape(.circle)
-                    .shadow(color: .backgroundDark, radius: 2)
-            }
-
-            Button {
-                viewModel.notificationsDidTap()
-            } label: {
-                Image(systemName: "bell.badge")
-                    .tint(.backgroundDark)
-                    .frame(width: 40, height: 40)
-                    .background(Color.backgroundLightest)
-                    .clipShape(.circle)
-                    .shadow(color: .backgroundDark, radius: 2)
-            }
-
-            Button {
-                viewModel.profileDidTap()
-            } label: {
-                Image(systemName: "person")
-                    .tint(.backgroundDark)
-                    .frame(width: 40, height: 40)
-                    .background(Color.backgroundLightest)
-                    .clipShape(.circle)
-                    .shadow(color: .backgroundDark, radius: 2)
-            }
-        }
-    }
-
     @ViewBuilder
     private func moduleView(course: HCourse) -> some View {
         if let module = course.currentModule, let moduleItem = course.currentModuleItem {

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

@@ -19,6 +19,7 @@
 import Combine
 import Core
 import Foundation
+import HorizonUI
 
 final class DashboardViewModel: ObservableObject {
     // MARK: - Outputs
@@ -27,6 +28,11 @@ final class DashboardViewModel: ObservableObject {
     @Published private(set) var title: String = "Hi, John"
     @Published private(set) var courses: [HCourse] = []
 
+    // MARK: - Input
+
+    var onEvent: (HorizonUI.NavigationBar.Trailing.Event) -> Void = { _ in}
+    var viewController: WeakViewController = .init()
+
     // MARK: - Private variables
 
     private var subscriptions = Set<AnyCancellable>()
@@ -55,15 +61,35 @@ final class DashboardViewModel: ObservableObject {
             .map { "Hi, \($0)" }
             .replaceError(with: "")
             .assign(to: &$title)
+
+        configNavigationBarEvents()
     }
 
     // MARK: - Inputs
 
-    func notebookDidTap(_ viewController: WeakViewController) {
+    func notebookDidTap() {
         router.route(to: "/notebook", from: viewController)
     }
 
     func notificationsDidTap() {}
 
-    func profileDidTap() {}
+    func mailDidTap() {}
+
+    // MARK: - Private Functions
+
+    private func configNavigationBarEvents() {
+        onEvent = { [weak self] event in
+            guard let self else {
+                return
+            }
+            switch event {
+            case .mail:
+                mailDidTap()
+            case .notebook:
+                notebookDidTap()
+            case .notification:
+                notificationsDidTap()
+            }
+        }
+    }
 }

packages/HorizonUI/Sources/HorizonUI/Resources/Assets.xcassets/Icons/menu_book_notebook.imageset/Contents.json

@@ -0,0 +1,15 @@
+{
+  "images" : [
+    {
+      "filename" : "menu_book_notebook.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

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

@@ -0,0 +1,35 @@
+//
+// 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
+public extension HorizonUI.NavigationBar {
+    struct Storybook: View {
+        public var body: some View {
+            VStack {
+
+            }
+            .navigationBarItems(leading: HorizonUI.NavigationBar.Leading(title: "Hi HorizonUI"))
+            .navigationBarItems(trailing: HorizonUI.NavigationBar.Trailing(onEvent: { _ in }))
+            .navigationTitle("NavigationBar")
+        }
+    }
+}
+
+#Preview {
+    HorizonUI.NavigationBar.Storybook()
+}

packages/HorizonUI/Sources/HorizonUI/Sources/Components/NavigationBar/LeadingNavigationBar.swift

@@ -0,0 +1,42 @@
+//
+// 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
+
+public extension HorizonUI.NavigationBar {
+    struct Leading: View {
+        let title: String
+
+        public init(title: String) {
+            self.title = title
+        }
+
+        public var body: some View {
+            Text(title)
+                .foregroundStyle(Color.huiColors.text.title)
+                .huiTypography(.p3)
+                .padding(.huiSpaces.primitives.mediumSmall)
+                .background(Color.huiColors.surface.pageTertiary)
+        }
+    }
+}
+
+#Preview {
+    HorizonUI.NavigationBar.Leading(title: "HorizonUI")
+}
+

packages/HorizonUI/Sources/HorizonUI/Sources/Components/NavigationBar/TrailingNavigationBar.swift

@@ -0,0 +1,90 @@
+//
+// 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
+
+public extension HorizonUI.NavigationBar {
+    struct Trailing: View {
+        public enum Event {
+            case mail
+            case notebook
+            case notification
+        }
+
+        private let onEvent: (Event) -> Void
+
+        public init(onEvent: @escaping (Event) -> Void) {
+            self.onEvent = onEvent
+        }
+
+        public var body: some View {
+            HStack(spacing: .zero) {
+                Button {
+                    onEvent(.notebook)
+                } label: {
+                    Image.huiIcons.menuBookNotebook
+                        .dropShadow()
+                }
+
+                Button {
+                    onEvent(.notification)
+                } label: {
+                    Image.huiIcons.notificationsUnread
+                        .dropShadow()
+                }
+
+                Button {
+                    onEvent(.mail)
+                } label: {
+                    Image.huiIcons.mail
+                        .dropShadow()
+                }
+            }
+        }
+    }
+}
+
+#Preview {
+    HorizonUI.NavigationBar.Trailing { _ in }
+}
+
+fileprivate extension HorizonUI.NavigationBar.Trailing {
+    struct DropShadowModifire: ViewModifier {
+        func body(content: Content) -> some View {
+            content
+                .foregroundStyle(Color.huiColors.icon.default)
+                .frame(width: 44, height: 44)
+                .background {
+                    Rectangle()
+                        .fill(Color.huiColors.surface.pageSecondary)
+                        .huiCornerRadius(level: .level6)
+                        .huiElevation(level: .level4)
+                }
+        }
+    }
+}
+
+fileprivate extension View {
+    func dropShadow() -> some View {
+        modifier(HorizonUI.NavigationBar.Trailing.DropShadowModifire())
+    }
+}
+
+public extension HorizonUI {
+    struct NavigationBar {}
+}

packages/HorizonUI/Sources/HorizonUI/Sources/Foundation/Icons/HorizonUI.Icons.swift

@@ -416,6 +416,7 @@ public extension HorizonUI {
         let circle = Image(.circle)
         let ai = Image(.ai)
         let aiFilled = Image(.aiFilled)
+        let menuBookNotebook = Image(.menuBookNotebook)
 
         func allImages() -> [Image] {
             let mirror = Mirror(reflecting: self)

packages/HorizonUI/Sources/HorizonUI/Sources/Storybook.swift

@@ -104,7 +104,9 @@ public struct Storybook: View {
                     NavigationLink {} label: {
                         Text("Cards").tint(Color.black)
                     }
-                    NavigationLink {} label: {
+                    NavigationLink {
+                        HorizonUI.NavigationBar.Storybook()
+                    } label: {
                         Text("Navigation").tint(Color.black)
                     }         
                 }