feat: 🎸 [HCPSDKFIORIUIKIT-2452] Add vertical layout style modifier to…

… Illustrated Message (#655) * feat: 🎸 add vertical layout style modifier to illustrated msg * refactor: 💡 remove unused variable * docs: ✏️ fix documentation typo --------- Co-authored-by: Bill Zhou <bill.zhou01@sap.com>
SAP · Mar 12, 2024 · 4b268b6 · 4b268b6
1 parent 27a1aef
commit 4b268b6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift b/Apps/Examples/Examples/FioriSwiftUICore/IllustratedMessage/IllustratedMessageExample.swift
@@ -42,6 +42,16 @@ struct IllustratedMessageExample: View {
             })
                 .border(Color.gray)
                 .frame(width: selectedWidth, height: selectedHeight)
+
+            // no image and no action; vertical layout manually selected
+            IllustratedMessage(title: {
+                Text("This is an IllustratedMessageView with no image or action button")
+            }, description: {
+                Text("Subtitle")
+            })
+                .illustratedMessageStyle(.vertical)
+                .border(Color.gray)
+                .frame(width: selectedWidth, height: selectedHeight)
 
             // action but no image
             IllustratedMessage(title: {
@@ -54,6 +64,18 @@ struct IllustratedMessageExample: View {
                 .border(Color.gray)
                 .frame(width: selectedWidth, height: selectedHeight)
 
+            // action but no image; vertical layout manually selected
+            IllustratedMessage(title: {
+                Text("IllustratedMessage Title")
+            }, description: {
+                Text("Subtitle: abc def ghi jkl mno pqr stu vwx yz abc def ghi jkl mno pqr stu vwx yz")
+            }, action: {
+                FioriButton(title: "ActionTitle", action: { _ in print("Action tapped") })
+            })
+                .illustratedMessageStyle(.vertical)
+                .border(Color.gray)
+                .frame(width: selectedWidth, height: selectedHeight)
+
             // image but no action
             IllustratedMessage(detailImage: {
                 Image("wheel")
@@ -68,6 +90,21 @@ struct IllustratedMessageExample: View {
                 .border(Color.gray)
                 .frame(width: selectedWidth, height: selectedHeight)
 
+            // image but no action; vertical layout manually selected
+            IllustratedMessage(detailImage: {
+                Image("wheel")
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: 50)
+            }, title: {
+                Text("IllustratedMessage Title")
+            }, description: {
+                Text("Subtitle")
+            })
+                .illustratedMessageStyle(.vertical)
+                .border(Color.gray)
+                .frame(width: selectedWidth, height: selectedHeight)
+
             // all components
             IllustratedMessage(detailImage: {
                 Image("wheel")
@@ -84,6 +121,23 @@ struct IllustratedMessageExample: View {
                 .border(Color.gray)
                 .frame(width: selectedWidth, height: selectedHeight)
 
+            // all components; vertical layout manually selected
+            IllustratedMessage(detailImage: {
+                Image("wheel")
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: 100)
+            }, title: {
+                Text("Unable to load data")
+            }, description: {
+                Text("Reload to try again or contact your administrator to update your permission.")
+            }, action: {
+                FioriButton(title: "ActionTitle", action: { _ in print("Action tapped") })
+            })
+                .illustratedMessageStyle(.vertical)
+                .border(Color.gray)
+                .frame(width: selectedWidth, height: selectedHeight)
+
             // MARK: horizontal orientation
 
             // no image and no action
@@ -134,7 +188,6 @@ struct IllustratedMessageExample: View {
                 Text("Subtitle")
             }, action: {
                 FioriButton(title: "ActionTitle", action: { _ in print("Action tapped") })
-//                Button(action: { print("Action tapped") }, label: { Text("Sign In") })
             })
                 .illustratedMessageStyle(.horizontal)
                 .border(Color.gray)

diff --git a/Sources/FioriSwiftUICore/_FioriStyles/IllustratedMessageStyle.fiori.swift b/Sources/FioriSwiftUICore/_FioriStyles/IllustratedMessageStyle.fiori.swift
@@ -62,9 +62,11 @@ extension IllustratedMessageFioriStyle {
     }
 }
 
+/// Vertical layout style of the Illustrated Message. All content is displayed in one column. This is the default layout style
+public typealias IllustratedMessageVerticalLayoutStyle = IllustratedMessageBaseStyle
+
 /// Horizontal layout style of the Illustrated Message. Shows content in two columns, with an image on the left and a vertical stack of the other content on the right
 public struct IllustratedMessageHorizontalLayoutStyle: IllustratedMessageStyle {
-    @State var viewIsNarrow = true
     public func makeBody(_ configuration: IllustratedMessageConfiguration) -> some View {
         HStack(spacing: 0) {
             configuration.detailImage
@@ -80,6 +82,13 @@ public struct IllustratedMessageHorizontalLayoutStyle: IllustratedMessageStyle {
     }
 }
 
+/// Vertical layout style of the Illustrated Message. All content is displayed in one column. This is the default layout style
+public extension IllustratedMessageStyle where Self == IllustratedMessageVerticalLayoutStyle {
+    static var vertical: some IllustratedMessageStyle {
+        IllustratedMessageVerticalLayoutStyle().concat(.fiori)
+    }
+}
+
 /// Horizontal layout style of the Illustrated Message. Shows content in two columns, with an image on the left and a vertical stack of the other content on the right
 public extension IllustratedMessageStyle where Self == IllustratedMessageHorizontalLayoutStyle {
     static var horizontal: some IllustratedMessageStyle {