✨ Add support for background images on primitives

appcues · Jul 21, 2022 · c2b8239 · c2b8239
1 parent d83cf2e
commit c2b8239
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/Sources/AppcuesKit/Data/Models/Experience/ExperienceComponent.swift b/Sources/AppcuesKit/Data/Models/Experience/ExperienceComponent.swift
@@ -125,6 +125,16 @@ extension ExperienceComponent {
         let accessibilityLabel: String?
 
         let style: Style?
+
+        init(from backgroundImage: Style.BackgroundImage) {
+            self.id = UUID()
+            self.imageUrl = backgroundImage.imageUrl
+            self.blurHash = backgroundImage.blurHash
+            self.contentMode = backgroundImage.contentMode
+            self.intrinsicSize = backgroundImage.intrinsicSize
+            self.accessibilityLabel = nil
+            self.style = nil
+        }
     }
 
     struct EmbedModel: ComponentModel, Decodable {
@@ -164,6 +174,7 @@ extension ExperienceComponent {
         let foregroundColor: DynamicColor?
         let backgroundColor: DynamicColor?
         let backgroundGradient: RawGradient?
+        let backgroundImage: BackgroundImage?
         let shadow: RawShadow?
         let cornerRadius: Double?
         let borderColor: DynamicColor?
@@ -197,4 +208,13 @@ extension ExperienceComponent.Style {
         // swiftlint:disable:next identifier_name
         let y: Double
     }
+
+    struct BackgroundImage: Decodable {
+        let imageUrl: URL
+        let blurHash: String?
+        let contentMode: String?
+        let verticalAlignment: String?
+        let horizontalAlignment: String?
+        let intrinsicSize: ExperienceComponent.IntrinsicSize?
+    }
 }
diff --git a/Sources/AppcuesKit/Presentation/Extensions/View+Appcues.swift b/Sources/AppcuesKit/Presentation/Extensions/View+Appcues.swift
@@ -64,14 +64,29 @@ extension View {
 
     func applyBackgroundStyle(_ style: AppcuesStyle) -> some View {
         self
-            .ifLet(style.backgroundColor) { view, val in
+            // Order for the backgrounds matters. Images > Gradients > Color.
+            .ifLet(style.backgroundImage) { view, val in
+                let model = ExperienceComponent.ImageModel(from: val)
+                let backgroundAlignment = Alignment(
+                    vertical: val.verticalAlignment,
+                    horizontal: val.horizontalAlignment
+                ) ?? .center
+                let backgroundImage = AppcuesImage(model: model)
+
+                if #available(iOS 14.0, *) {
+                    view.background(backgroundImage.ignoresSafeArea(.container, edges: .all), alignment: backgroundAlignment).clipped()
+                } else {
+                    view.background(backgroundImage.edgesIgnoringSafeArea(.all), alignment: backgroundAlignment).clipped()
+                }
+            }
+            .ifLet(style.backgroundGradient) { view, val in
                 if #available(iOS 14.0, *) {
                     view.background(val.ignoresSafeArea(.container, edges: .all))
                 } else {
                     view.background(val.edgesIgnoringSafeArea(.all))
                 }
             }
-            .ifLet(style.backgroundGradient) { view, val in
+            .ifLet(style.backgroundColor) { view, val in
                 if #available(iOS 14.0, *) {
                     view.background(val.ignoresSafeArea(.container, edges: .all))
                 } else {

diff --git a/Sources/AppcuesKit/Presentation/UI/AppcuesStyle.swift b/Sources/AppcuesKit/Presentation/UI/AppcuesStyle.swift
@@ -27,6 +27,7 @@ internal struct AppcuesStyle {
     let foregroundColor: Color?
     let backgroundColor: Color?
     let backgroundGradient: LinearGradient?
+    let backgroundImage: ExperienceComponent.Style.BackgroundImage?
     let shadow: ExperienceComponent.Style.RawShadow?
     let cornerRadius: CGFloat?
     let borderColor: Color?
@@ -68,6 +69,7 @@ internal struct AppcuesStyle {
         self.foregroundColor = Color(dynamicColor: model?.foregroundColor)
         self.backgroundColor = Color(dynamicColor: model?.backgroundColor)
         self.backgroundGradient = LinearGradient(rawGradient: model?.backgroundGradient)
+        self.backgroundImage = model?.backgroundImage
         self.shadow = model?.shadow
         self.cornerRadius = CGFloat(model?.cornerRadius)
         self.borderColor = Color(dynamicColor: model?.borderColor)