feat: 🎸 [jira: 1975] status and substatus should support both icon and text (SAP#1023)

* feat: 🎸 status and substatus should support both icon and text

jira: HCPSDKFIORIUIKIT-1975

* docs: ✏️ [jira: 1975] fix documentations

Author: shengxu7

Apps/Examples/Examples/FioriSwiftUICore/ObjectHeader/ObjectHeaderViewScenarios.swift

@@ -158,8 +158,9 @@ struct ObjectHeaderViewScenarios: ListDataProtocol {
                                   footnote: "Due on 12/31/16",
                                   descriptionText: "Temperature sensor predicts overheating failure in 4 days Urgent and needs attention sensor predicts overheating failure in 4 days Urgent and need attention.",
                                   status: TextOrIcon.text("Very High Priority"),
-                                  substatus: TextOrIcon.text("Scheduled"),
-                                  detailContent: {})
+                                  substatus: TextOrIcon.both("Time", Image(systemName: "clock")),
+                                  detailContent: {}).environment(\.iconHorizontalAlignment, .trailing)
+                .substatusStyle(.negativeLabel)
 
             return AnyView(oh)
 

Apps/Examples/Examples/FioriSwiftUICore/ObjectItem/ObjectCell_Spec_Jan2018.swift

@@ -64,12 +64,13 @@ struct ObjectCell_Spec_Jan2018: ObjectItemListDataProtocol {
                 oi = ObjectItem(title: "Lorem ipseum dolor",
                                 footnote: "Words\nSeparated\nNewLineChars and this is Just some really long text that is here dont worry about it too much",
                                 description: "Some description",
-                                status: TextOrIcon.text("Some status"),
+                                status: .both("Some status", Image(systemName: "paperplane")),
                                 substatus: TextOrIcon.text("some substatus"))
                     .footnoteStyle {
                         Footnote($0)
                             .lineLimit(4)
                     }
+                    .statusStyle(.positiveLabel)
             } else {
                 oi = _ObjectItem(title: "Lorem ipseum dolor",
                                  footnote: "Words\nSeparated\nNewLineChars and this is Just some really long text that is here dont worry about it too much",

Apps/Examples/Examples/FioriSwiftUICore/Timeline/TimelineItemsExample.swift

@@ -21,14 +21,12 @@ struct TimelineItemsExample: View {
                     })
             }
             Section(header: Text("Timeline")) {
-                Timeline(timestamp: "06/21/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Complete", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .icon(Image(systemName: "exclamationmark.circle")), subAttribute: "subAttr", isPast: true)
+                Timeline(timestamp: "06/21/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Complete", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .both("substatus", Image(systemName: "exclamationmark.circle")), subAttribute: "subAttr", isPast: true)
                     .modifier(CustomListRowModifier())
                     .secondaryTimestampStyle(content: { config in
                         config.secondaryTimestamp.foregroundColor(.yellow)
                     })
-                    .substatusStyle(content: { config in
-                        config.substatus.foregroundColor(.yellow)
-                    })
+                    .substatusStyle(.positiveLabel)
                 Timeline(timestamp: "06/21/24", secondaryTimestamp: .icon(Image(systemName: "sun.max")), timelineNode: .complete, title: "Complete(Disabled)", subtitle: "abc", attribute: "attr", status: .text("Info"), substatus: .icon(Image(systemName: "exclamationmark.circle")), subAttribute: "subAttr", isPast: true)
                     .modifier(CustomListRowModifier())
                     .disabled(/*@START_MENU_TOKEN@*/true/*@END_MENU_TOKEN@*/)

Sources/FioriSwiftUICore/Components/TextOrIcon.swift

@@ -3,6 +3,10 @@ import SwiftUI
 
 /// It is either a String or Image
 public enum TextOrIcon {
-    case text(String)
+    /// Contains a text only
+    case text(AttributedString)
+    /// Contains an icon only
     case icon(Image)
+    /// Contains both a text and an icon
+    case both(AttributedString, Image)
 }

Sources/FioriSwiftUICore/Views/CustomBuilder/FootnoteIconsBuilder.swift

@@ -242,6 +242,8 @@ extension FootnoteIconStack: FootnoteIconList {
                 Text(txt)
             case .icon(let icon):
                 icon
+            case .both(let txt, let icon):
+                Text(txt)
             }
         }
     }

Sources/FioriSwiftUICore/Views/IconStack/IconStack+View.swift

@@ -26,6 +26,8 @@ extension IconStack: ViewList {
                 Text(txt)
             case .icon(let icon):
                 icon
+            case .both(let txt, let icon):
+                Text(txt)
             }
         }
     }
@@ -41,6 +43,8 @@ extension IconStack: ViewList {
             return true
         case .icon:
             return false
+        case .both:
+            return true
         }
     }
 

Sources/FioriSwiftUICore/Views/TextOrIconView.swift

@@ -1,7 +1,24 @@
 import SwiftUI
 
+struct IconHorizontalAlignment: EnvironmentKey {
+    /// The default is `.leading`. `.center` and `.trailing` means `.trailing`.
+    public static let defaultValue: HorizontalAlignment = .leading
+}
+
+public extension EnvironmentValues {
+    /// Determine the relative positioning of an icon within the `TextOrIcon` when both a text and an icon are present. . The default is `.leading`. `.center` and `.trailing` means `.trailing`.
+    var iconHorizontalAlignment: HorizontalAlignment {
+        get {
+            self[IconHorizontalAlignment.self]
+        } set {
+            self[IconHorizontalAlignment.self] = newValue
+        }
+    }
+}
+
 /// TextOrIconView to display TextOrIcon
 public struct TextOrIconView: View {
+    @Environment(\.iconHorizontalAlignment) var iconHorizontalAlignment
     var content: TextOrIcon?
 
     /// init with TextOrIcon
@@ -30,6 +47,17 @@ public struct TextOrIconView: View {
 
             case .icon(let icon):
                 icon
+            
+            case .both(let text, let icon):
+                HStack(alignment: .center, spacing: 2) {
+                    if self.iconHorizontalAlignment == .leading {
+                        icon
+                        Text(text)
+                    } else {
+                        Text(text)
+                        icon
+                    }
+                }
             }
         } else {
             EmptyView()

Sources/FioriSwiftUICore/_FioriStyles/StatusStyle.fiori.swift

@@ -26,3 +26,35 @@ public struct StatusFioriStyle: StatusStyle {
             .font(.fiori(forTextStyle: .subheadline))
     }
 }
+
+/// A convenient `StatusStyle` to set a foreground color for `Status`
+public struct StatusColorStyleStyle: StatusStyle {
+    let style: ColorStyle
+    public func makeBody(_ configuration: StatusConfiguration) -> some View {
+        Status(configuration)
+            .foregroundStyle(Color.preferredColor(self.style))
+            .font(.fiori(forTextStyle: .subheadline))
+    }
+}
+
+public extension StatusStyle where Self == StatusColorStyleStyle {
+    /// `.negativeLabel` color style for `Status`
+    static var negativeLabel: Self {
+        StatusColorStyleStyle(style: .negativeLabel)
+    }
+    
+    /// `.positiveLabel` color style for `Status`
+    static var positiveLabel: Self {
+        StatusColorStyleStyle(style: .positiveLabel)
+    }
+    
+    /// `.criticalLabel` color style for `Status`
+    static var criticalLabel: Self {
+        StatusColorStyleStyle(style: .criticalLabel)
+    }
+    
+    /// `.informativeLabel` color style for `Status`
+    static var informativeLabel: Self {
+        StatusColorStyleStyle(style: .informativeLabel)
+    }
+}

Sources/FioriSwiftUICore/_FioriStyles/SubstatusStyle.fiori.swift

@@ -26,3 +26,35 @@ public struct SubstatusFioriStyle: SubstatusStyle {
             .font(.fiori(forTextStyle: .subheadline))
     }
 }
+
+/// A convenient `SubstatusStyle` to set a foreground color for `Substatus`
+public struct SubstatusColorStyle: SubstatusStyle {
+    let style: ColorStyle
+    public func makeBody(_ configuration: SubstatusConfiguration) -> some View {
+        Substatus(configuration)
+            .foregroundStyle(Color.preferredColor(self.style))
+            .font(.fiori(forTextStyle: .subheadline))
+    }
+}
+
+public extension SubstatusStyle where Self == SubstatusColorStyle {
+    /// `.negativeLabel` color style for `Substatus`
+    static var negativeLabel: Self {
+        SubstatusColorStyle(style: .negativeLabel)
+    }
+    
+    /// `.positiveLabel` color style for `Substatus`
+    static var positiveLabel: Self {
+        SubstatusColorStyle(style: .positiveLabel)
+    }
+    
+    /// `.criticalLabel` color style for `Substatus`
+    static var criticalLabel: Self {
+        SubstatusColorStyle(style: .criticalLabel)
+    }
+    
+    /// `.informativeLabel` color style for `Substatus`
+    static var informativeLabel: Self {
+        SubstatusColorStyle(style: .informativeLabel)
+    }
+}