feat: 🎸 [JIRA:HCPSDKFIORIUIKIT-2717] Feedback Patterns

Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMultiMessageCustomInitExample.swift

@@ -6,6 +6,7 @@
 //  Copyright © 2024 SAP. All rights reserved.
 //
 import FioriSwiftUICore
+import FioriThemeManager
 import RegexBuilder
 import SwiftUI
 
@@ -61,11 +62,20 @@ struct BannerMultiMessageCustomInitExample: View {
                         Spacer()
                     }
                     .popover(isPresented: self.$showingMessageDetail) {
-                        BannerMultiMessageSheet(closeAction: {
+                        BannerMultiMessageSheet(title: {
+                            Text("CustomMessagesCount")
+                        }, closeAction: {
+                            FioriButton(isSelectionPersistent: false, action: { _ in
+                                self.showingMessageDetail = false
+                            }, image: { _ in
+                                FioriIcon.tables.circleTaskFill
+                            })
+                            .fioriButtonStyle(FioriTertiaryButtonStyle(colorStyle: .normal))
+                        }, dismissAction: {
                             self.showingMessageDetail = false
                         }, removeAction: { category, _ in
                             self.removeCategory(category: category)
-                        }, turnOnSectionHeader: self.turnOnSectionHeader, bannerMultiMessages: self.$bannerMultiMessages) { id in
+                        }, turnOnSectionHeader: self.turnOnSectionHeader, messageItemView: { id in
                             if let (message, category) = getItemData(with: id) {
                                 BannerMessage(icon: {
                                     message.icon
@@ -103,8 +113,8 @@ struct BannerMultiMessageCustomInitExample: View {
                             } else {
                                 EmptyView()
                             }
-                        }
-                        .presentationDetents([.medium, .large])
+                        }, bannerMultiMessages: self.$bannerMultiMessages)
+                            .presentationDetents([.medium, .large])
                     }
                 }
                 .listRowSeparator(.hidden)

Sources/FioriSwiftUICore/_ComponentProtocols/CompositeComponentProtocols.swift

@@ -631,3 +631,24 @@ protocol _ToastMessageComponent: _IconComponent, _TitleComponent {
     /// The duration in seconds for which the toast message is shown. The default is `1`.
     var duration: Double { get }
 }
+
+// sourcery: CompositeComponent
+protocol _BannerMultiMessageSheet: _TitleComponent, _CloseActionComponent {
+    /// callback when this component want to dismiss itself
+    var dismissAction: (() -> Void)? { get }
+    /// callback when category or single item is removed
+    var removeAction: ((String, UUID?) -> Void)? { get }
+    /// callback when the link button is clicked
+    var viewDetailAction: ((UUID) -> Void)? { get }
+    // sourcery: defaultValue = true
+    /// the mark to turn on section header or not
+    var turnOnSectionHeader: Bool { get }
+    // sourcery: @ViewBuilder
+    // sourcery: defaultValue = "{ _ in EmptyView() }"
+    // sourcery: resultBuilder.defaultValue = "{ _ in EmptyView() }"
+    /// view for each item under the category
+    var messageItemView: (UUID) -> any View { get }
+    // sourcery: @Binding
+    /// the data source for banner multi-message sheet
+    var bannerMultiMessages: [BannerMessageListModel] { get }
+}

Sources/FioriSwiftUICore/_FioriStyles/BannerMessageStyle.fiori.swift

@@ -20,7 +20,7 @@ public enum BannerMultiMessageType: Int {
 public struct BannerMessageBaseStyle: BannerMessageStyle {
     public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
         VStack(spacing: 0) {
-            configuration.topDivider.background(BannerMessageFioriStyle.titleForegroundColor(type: configuration.messageType)).frame(height: 4)
+            configuration.topDivider.frame(height: 4)
             HStack {
                 HStack(spacing: 6, content: {
                     switch configuration.alignment {
@@ -42,7 +42,6 @@ public struct BannerMessageBaseStyle: BannerMessageStyle {
                             .padding([.top, .bottom], 13)
                     }
                 })
-                .foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: configuration.messageType))
                 .padding(.leading, configuration.alignment == .center ? 44 : 16)
                 .padding(.trailing, configuration.alignment == .center ? 0 : 16)
                 .onTapGesture {
@@ -63,6 +62,63 @@ public struct BannerMessageBaseStyle: BannerMessageStyle {
     }
 }
 
+struct BannerMessageNeutralStyle: BannerMessageStyle {
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle { c in
+                c.icon.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .neutral))
+            }
+    }
+}
+
+struct BannerMessageNegativeStyle: BannerMessageStyle {
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle { c in
+                c.icon.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .negative))
+            }
+            .titleStyle(content: { c in
+                c.title.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .negative))
+            })
+    }
+}
+
+struct BannerMessageCriticalStyle: BannerMessageStyle {
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle { c in
+                c.icon.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .critical))
+            }
+            .titleStyle(content: { c in
+                c.title.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .critical))
+            })
+    }
+}
+
+struct BannerMessagePositiveStyle: BannerMessageStyle {
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle { c in
+                c.icon.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .positive))
+            }
+            .titleStyle(content: { c in
+                c.title.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .positive))
+            })
+    }
+}
+
+struct BannerMessageInformativeStyle: BannerMessageStyle {
+    public func makeBody(_ configuration: BannerMessageConfiguration) -> some View {
+        BannerMessage(configuration)
+            .iconStyle { c in
+                c.icon.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .informative))
+            }
+            .titleStyle(content: { c in
+                c.title.foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: .informative))
+            })
+    }
+}
+
 // Default fiori styles
 extension BannerMessageFioriStyle {
     static func titleForegroundColor(type: BannerMultiMessageType) -> Color {
@@ -92,6 +148,7 @@ extension BannerMessageFioriStyle {
 
         func makeBody(_ configuration: IconConfiguration) -> some View {
             Icon(configuration)
+                .foregroundStyle(BannerMessageFioriStyle.titleForegroundColor(type: self.bannerMessageConfiguration.messageType))
         }
     }
 
@@ -118,6 +175,7 @@ extension BannerMessageFioriStyle {
 
         func makeBody(_ configuration: TopDividerConfiguration) -> some View {
             TopDivider(configuration)
+                .background(BannerMessageFioriStyle.titleForegroundColor(type: self.bannerMessageConfiguration.messageType))
         }
     }
 }
@@ -366,7 +424,11 @@ struct BannerMessageModifier: ViewModifier {
                     }))
                     .frame(minWidth: (UIDevice.current.userInterfaceIdiom != .phone && self.alignment != .center) ? 393 : nil, alignment: .leading)
                     .popover(isPresented: self.$showingMessageDetail) {
-                        BannerMultiMessageSheet(closeAction: {
+                        BannerMultiMessageSheet(title: {
+                            EmptyView()
+                        }, closeAction: {
+                            EmptyView()
+                        }, dismissAction: {
                             self.showingMessageDetail = false
                         }, removeAction: { _, _ in
                             if self.bannerMultiMessages.isEmpty {