feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice (SAP#1011)

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

* feat: 🎸 [HCPSDKFIORIUIKIT-2847]AI Notice

---------

Co-authored-by: I824136 <xiaoqing.he@sap.com>

Author: xiaoqinggrace

Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageCustomInitExample.swift

@@ -10,37 +10,46 @@ struct BannerMessageCustomInitExample: View {
     @State var show: Bool = true
     @State var isCustomStyle: Bool = false
     @State var headerSelection: BannerHeader = .object
-    
+    @State var showAINotice: Bool = false
+       
     let customColor = Color.preferredColor(.blue7)
 
     var bannerView: some View {
-        BannerMessage {
-            Image(systemName: "info.circle")
-        } title: {
-            Text("This is a banner message")
-        } closeAction: {
+        BannerMessage(icon: {
+            if self.showAINotice {
+                Image(fioriName: "fiori.ai")
+            } else {
+                Image(systemName: "info.circle")
+            }
+        }, title: {
+            if self.showAINotice {
+                Text("Powered by AI")
+            } else {
+                Text("This is a banner message")
+            }
+        }, closeAction: {
             Button(action: {
                 withAnimation {
                     self.show.toggle()
                 }
             }, label: {
                 Image(systemName: "xmark")
             })
-        }
-        .ifApply(self.isCustomStyle, content: { v in
-            v.topDividerStyle { c in
-                c.topDivider.background(self.customColor)
-            }
-            .iconStyle { c in
-                c.icon.foregroundStyle(self.customColor)
-            }
-            .titleStyle { c in
-                c.title.foregroundStyle(self.customColor)
-            }
-            .closeActionStyle { c in
-                c.closeAction.foregroundStyle(self.customColor)
-            }
-        })
+        }, messageType: self.showAINotice ? .aiNotice : .negative)
+            .ifApply(self.isCustomStyle, content: { v in
+                v.topDividerStyle { c in
+                    c.topDivider.background(self.customColor)
+                }
+                .iconStyle { c in
+                    c.icon.foregroundStyle(self.customColor)
+                }
+                .titleStyle { c in
+                    c.title.foregroundStyle(self.customColor)
+                }
+                .closeActionStyle { c in
+                    c.closeAction.foregroundStyle(self.customColor)
+                }
+            })
     }
 
     var body: some View {
@@ -71,6 +80,8 @@ struct BannerMessageCustomInitExample: View {
                     Text("Object Header").tag(BannerHeader.object)
                     Text("KPI Header").tag(BannerHeader.kpi)
                 }
+                
+                Toggle("AI Notice", isOn: self.$showAINotice)
             } header: {}
         }.listStyle(.plain)
             .navigationTitle("Custom Creation")

Apps/Examples/Examples/FioriSwiftUICore/BannerMessage/BannerMessageModifierExample.swift

@@ -7,33 +7,40 @@ struct BannerMessageModifierExample: View {
     @State var withLink: Bool = false
     @State var withAttachedAction: Bool = false
     @State var withLongText: Bool = false
+    @State var showAINotice: Bool = false
+    @State var showBottomSheet: Bool = false
 
     @ViewBuilder
     var titleView: some View {
-        if self.withAttachedAction {
-            HStack {
-                Spacer()
-                self.messageContent
-                Button(action: {
-                    print("Custom button tapped in title")
-                }, label: {
-                    Text("Action")
-                        .foregroundStyle(Color.preferredColor(.tintColor))
-                })
-                Spacer()
+        let text = self.withLongText ? "This is a very very very very very very very very very very very long banner message. " : "This is a banner message. "
+        let noticeText = self.withLongText ? "Generated by AI. This is a very very very very very very very very very very very long banner message. " : "Generated by AI. "
+        
+        if self.showAINotice {
+            if self.withLink {
+                Text("\(noticeText) with [link](https://www.sap.com)")
+            } else if self.withAttachedAction {
+                Text("\(noticeText)") + Text("View more").foregroundStyle(Color.preferredColor(.tintColor)).font(.fiori(forTextStyle: .footnote))
+            } else {
+                Text("\(noticeText)")
             }
         } else {
-            self.messageContent
-        }
-    }
-    
-    @ViewBuilder
-    var messageContent: some View {
-        let text = self.withLongText ? "This is a very very very very very very very very very very very long banner message" : "This is a banner message"
-        if self.withLink {
-            Text("\(text) with [link](https://www.sap.com)")
-        } else {
-            Text("\(text)")
+            if self.withLink {
+                Text("\(text) with [link](https://www.sap.com)")
+            } else if self.withAttachedAction {
+                HStack {
+                    Spacer()
+                    Text("\(text)")
+                    Button(action: {
+                        print("Custom button tapped in title")
+                    }, label: {
+                        Text("Action")
+                            .foregroundStyle(Color.preferredColor(.tintColor))
+                    })
+                    Spacer()
+                }
+            } else {
+                Text("\(text)")
+            }
         }
     }
 
@@ -54,17 +61,37 @@ struct BannerMessageModifierExample: View {
             Toggle("With Link", isOn: self.$withLink)
             Toggle("With Attached Action", isOn: self.$withAttachedAction)
             Toggle("Long Text", isOn: self.$withLongText)
+            Toggle("AI Notice", isOn: self.$showAINotice)
         }
         .bannerMessageView(isPresented: self.$show,
                            pushContentDown: self.$pushContentDown,
                            icon: {
-                               Image(systemName: "info.circle")
+                               if self.showAINotice {
+                                   Image(fioriName: "fiori.ai")
+                               } else {
+                                   Image(systemName: "info.circle")
+                               }
                            },
                            title: {
                                self.titleView
                            }, bannerTapped: {
-                               print("banner is tapped")
-                           })
+                               self.withAttachedAction && self.showAINotice ? self.toggleShowSheet() : print("banner is tapped")
+                           },
+                           messageType: self.showAINotice ? .aiNotice : .negative)
         .navigationTitle("Banner Message")
+        .sheet(isPresented: self.$showBottomSheet) {
+            Text("detail information")
+                .presentationDetents([.height(250), .medium])
+                .presentationDragIndicator(.visible)
+        }
+    }
+    
+    func openURL() {
+        let url = URL(string: "https://sap.com")!
+        UIApplication.shared.open(url)
+    }
+    
+    func toggleShowSheet() {
+        self.showBottomSheet.toggle()
     }
 }