feat: 🎸 [HCPSDKFIORIUIKIT-2481] New Mobile Card (#665)

* feat: 🎸 [HCPSDKFIORIUIKIT-2481] New Mobile Card

* fix: 🐛 [HCPSDKFIORIUIKIT-2481] remove one public TagStyle

Apps/Examples/Examples/Assets.xcassets/card_image.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "MicrosoftTeams-image.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Sources/FioriSwiftUICore/FioriButton/FioriButtonStyle.swift

@@ -75,11 +75,13 @@ public struct FioriPlainButtonStyle: FioriButtonStyle {
 
 /// A Fiori button style for the primary button.
 public struct FioriPrimaryButtonStyle: FioriButtonStyle {
+    private let maxWidth: CGFloat?
+
     /// Create a `FioriPrimaryButtonStyle` instance.
-    public init() {}
+    public init(_ maxWidth: CGFloat? = nil) { self.maxWidth = maxWidth }
 
     public func makeBody(configuration: Configuration) -> some View {
-        let config = FioriButtonStyleProvider.getPrimaryButtonStyle(state: configuration.state)
+        let config = FioriButtonStyleProvider.getPrimaryButtonStyle(state: configuration.state).withMaxWidth(self.maxWidth)
 
         return configuration.label
             .fioriButtonConfiguration(config)
@@ -89,15 +91,17 @@ public struct FioriPrimaryButtonStyle: FioriButtonStyle {
 /// A Fiori button style for the secondary button.
 public struct FioriSecondaryButtonStyle: FioriButtonStyle {
     private let colorStyle: FioriButtonColorStyle
+    private let maxWidth: CGFloat?
 
     /// Create a `FioriSecondaryButtonStyle` instance.
     /// - Parameter colorStyle: The color style used for this button style.
-    public init(colorStyle: FioriButtonColorStyle = .tint) {
+    public init(colorStyle: FioriButtonColorStyle = .tint, maxWidth: CGFloat? = nil) {
         self.colorStyle = colorStyle
+        self.maxWidth = maxWidth
     }
 
     public func makeBody(configuration: Configuration) -> some View {
-        let config = FioriButtonStyleProvider.getSecondaryButtonStyle(colorStyle: self.colorStyle, for: configuration.state)
+        let config = FioriButtonStyleProvider.getSecondaryButtonStyle(colorStyle: self.colorStyle, for: configuration.state).withMaxWidth(self.maxWidth)
 
         return configuration.label
             .fioriButtonConfiguration(config)
@@ -107,15 +111,17 @@ public struct FioriSecondaryButtonStyle: FioriButtonStyle {
 /// A Fiori button style for the tertiary button.
 public struct FioriTertiaryButtonStyle: FioriButtonStyle {
     private let colorStyle: FioriButtonColorStyle
+    private let maxWidth: CGFloat?
 
     /// Create a `FioriTertiaryButtonStyle` instance.
     /// - Parameter colorStyle: The color style used for this button style.
-    public init(colorStyle: FioriButtonColorStyle = .tint) {
+    public init(colorStyle: FioriButtonColorStyle = .tint, maxWidth: CGFloat? = nil) {
         self.colorStyle = colorStyle
+        self.maxWidth = maxWidth
     }
 
     public func makeBody(configuration: Configuration) -> some View {
-        let config = FioriButtonStyleProvider.getTertiaryButtonStyle(colorStyle: self.colorStyle, for: configuration.state)
+        let config = FioriButtonStyleProvider.getTertiaryButtonStyle(colorStyle: self.colorStyle, for: configuration.state).withMaxWidth(self.maxWidth)
 
         return configuration.label
             .fioriButtonConfiguration(config)

Sources/FioriSwiftUICore/FioriButton/FioriButtonStyleProvider.swift

@@ -131,12 +131,18 @@ struct FioriButtonConfiguration {
     let backgroundColor: Color
     let font: Font
     let padding: EdgeInsets
+    let maxWidth: CGFloat?
 
-    init(foregroundColor: Color, backgroundColor: Color, font: Font = .fiori(forTextStyle: .body).weight(.bold), padding: EdgeInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)) {
+    init(foregroundColor: Color, backgroundColor: Color, font: Font = .fiori(forTextStyle: .body).weight(.bold), padding: EdgeInsets = EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16), maxWidth: CGFloat? = nil) {
         self.foregroundColor = foregroundColor
         self.backgroundColor = backgroundColor
         self.font = font
         self.padding = padding
+        self.maxWidth = maxWidth
+    }
+
+    func withMaxWidth(_ maxWidth: CGFloat?) -> FioriButtonConfiguration {
+        FioriButtonConfiguration(foregroundColor: self.foregroundColor, backgroundColor: self.backgroundColor, font: self.font, padding: self.padding, maxWidth: maxWidth)
     }
 }
 
@@ -146,8 +152,8 @@ extension View {
             .font(config.font)
             .foregroundColor(config.foregroundColor)
             .padding(config.padding)
+            .frame(minWidth: 44, maxWidth: config.maxWidth, minHeight: 44)
             .background(RoundedRectangle(cornerRadius: 5).fill(config.backgroundColor))
-            .frame(minWidth: 44, minHeight: 44)
             .contentShape(Rectangle())
     }
 }

Sources/FioriSwiftUICore/Utils/EqualWidthWithMaxWidthHStackLayout.swift

@@ -0,0 +1,97 @@
+import SwiftUI
+
+struct EqualWidthWithMaxWidthHStackLayout: Layout {
+    /// The distance between adjacent subviews.
+    var spacing: CGFloat? = 4
+
+    /// Same height for all subviews
+    var isSameHeight: Bool = true
+
+    /// The vertical alignment of subviews.
+    var alignment: VerticalAlignment = .center
+
+    /// Maximum width for each element in the container
+    var maxWidth: CGFloat? = nil
+
+    var horizontalSizeClass: UserInterfaceSizeClass? = .compact
+
+    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
+        guard let containerWidth = proposal.width, containerWidth > 0, !subviews.isEmpty else { return .zero }
+        let subViewSizes = subviews.map {
+            $0.sizeThatFits(.unspecified)
+        }
+        let maxHeight: CGFloat = subViewSizes.reduce(0) { curr, subviewSize in
+            max(curr, subviewSize.height)
+        }
+
+        return CGSize(width: containerWidth, height: maxHeight)
+    }
+
+    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
+        guard let containerWidth = proposal.width, containerWidth > 0, !subviews.isEmpty else { return }
+
+        let subViewSizes = subviews.map {
+            $0.sizeThatFits(.unspecified)
+        }
+        let maxHeight: CGFloat = subViewSizes.reduce(0) { curr, subviewSize in
+            max(curr, subviewSize.height)
+        }
+        let theSpacing: CGFloat = self.spacing ?? 0
+        let totalSpacing = theSpacing * CGFloat(subviews.count - 1)
+        let theMaxWidth = self.horizontalSizeClass == .compact ? CGFloat.greatestFiniteMagnitude : self.maxWidth ?? CGFloat.greatestFiniteMagnitude
+        let subviewWidth: CGFloat = min(theMaxWidth, (containerWidth - CGFloat(subviews.count - 1) * theSpacing) / CGFloat(subviews.count))
+
+        // align trailing
+        var x: CGFloat = bounds.minX + subviewWidth / 2 + bounds.size.width - subviewWidth * CGFloat(subviews.count) - totalSpacing
+        var y = bounds.midY
+        var anchor = UnitPoint.center
+        switch self.alignment {
+        case .top:
+            y = bounds.minY
+            anchor = .top
+        case .bottom:
+            y = bounds.maxY
+            anchor = .bottom
+        default:
+            y = bounds.midY
+            anchor = .center
+        }
+        for i in subviews.indices {
+            subviews[i].place(at: CGPointMake(x, y),
+                              anchor: anchor,
+                              proposal: ProposedViewSize(width: subviewWidth, height: self.isSameHeight ? maxHeight : subViewSizes[i].height))
+            x += subviewWidth + theSpacing
+        }
+    }
+}
+
+#Preview("layout top") {
+    EqualWidthWithMaxWidthHStackLayout(spacing: 8, alignment: .top) {
+        FioriButton(title: "Save")
+            .border(Color.green)
+        Text("Decline")
+            .border(Color.green)
+    }.border(Color.gray)
+}
+
+#Preview("layout center") {
+    EqualWidthWithMaxWidthHStackLayout(spacing: 8, alignment: .center) {
+        FioriButton(title: "Save")
+            .frame(maxWidth: .infinity)
+            .border(Color.green)
+        Text("Decline")
+            .border(Color.green)
+    }.border(Color.gray)
+}
+
+#Preview("layout bottom") {
+    EqualWidthWithMaxWidthHStackLayout(spacing: 8, alignment: .bottom, maxWidth: 120) {
+        FioriButton(title: "Save")
+            .frame(maxWidth: .infinity)
+            .border(Color.green)
+
+        Text("Decline")
+            .frame(maxWidth: .infinity)
+            .border(Color.green)
+    }.border(Color.gray)
+}

Sources/FioriSwiftUICore/Utils/OptionalImage.swift

@@ -0,0 +1,28 @@
+import SwiftUI
+
+struct OptionalImage: View {
+    let image: Image?
+
+    init(_ image: Image?) {
+        self.image = image
+    }
+
+    var body: some View {
+        if let image {
+            image
+                .resizable()
+        } else {
+            EmptyView()
+        }
+    }
+}
+
+extension OptionalImage: _ViewEmptyChecking {
+    var isEmpty: Bool {
+        self.image == nil
+    }
+}
+
+#Preview {
+    OptionalImage(Image(systemName: "square.and.arrow.up.circle"))
+}

Sources/FioriSwiftUICore/Utils/OptionalKPIItem.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+struct OptionalKPIItem: View {
+    let data: KPIItemData?
+
+    init(_ data: KPIItemData?) {
+        self.data = data
+    }
+
+    var body: some View {
+        if let d = data {
+            KPIItem(data: d)
+        } else {
+            EmptyView()
+        }
+    }
+}
+
+extension OptionalKPIItem: _ViewEmptyChecking {
+    var isEmpty: Bool {
+        self.data == nil
+    }
+}
+
+#Preview {
+    OptionalKPIItem(KPIItemData.components([.icon(Image(systemName: "arrowtriangle.up.fill")),
+                                            .unit("$"),
+                                            .metric("26.9"),
+                                            .unit("M")]))
+}

Sources/FioriSwiftUICore/Views/TagStack/Tag.swift

@@ -42,7 +42,7 @@ public struct LightTagStyle: TagStyle {
             .font(.fiori(forTextStyle: .footnote))
             .foregroundColor(.preferredColor(.secondaryLabel))
             .padding(EdgeInsets(top: 2, leading: 3, bottom: 2, trailing: 3))
-            .background(RoundedRectangle(cornerRadius: 4).stroke(Color.preferredColor(.quarternaryLabel), lineWidth: 0.5))
+            .background(RoundedRectangle(cornerRadius: 4).stroke(Color.preferredColor(.quaternaryLabel), lineWidth: 0.5))
     }
 }
 
@@ -79,7 +79,7 @@ public struct CustomTagStyle: TagStyle {
     var borderWidth: CGFloat = 0.5
 
     /// Color around the perimeter of the tag
-    var borderColor: Color = .preferredColor(.quarternaryLabel)
+    var borderColor: Color = .preferredColor(.quaternaryLabel)
 
     public init(textColor: Color? = nil, font: Font? = nil, fillColor: Color? = nil, contentInsets: EdgeInsets? = nil, cornerRadius: CGFloat? = nil, borderWidth: CGFloat? = nil, borderColor: Color? = nil) {
         if let tc = textColor {

Sources/FioriSwiftUICore/_ComponentProtocols/BaseComponentProtocols.swift

@@ -144,13 +144,13 @@ protocol _CardBodyComponent {
 
 // sourcery: BaseComponent
 protocol _MediaImageComponent {
-    // sourcery: @ViewBuilder
+    // sourcery: @ViewBuilder, resultBuilder.backingComponent = OptionalImage
     var mediaImage: Image? { get }
 }
 
 // sourcery: BaseComponent
 protocol _KpiComponent {
-    // sourcery: @ViewBuilder, resultBuilder.backingComponent = KPIItem
+    // sourcery: @ViewBuilder, resultBuilder.backingComponent = OptionalKPIItem
     var kpi: KPIItemData? { get }
 }