Add icon

Author: matt-ramotar

samples/discovery/ios/ios.xcodeproj/project.xcworkspace/xcuserdata/mramotar.xcuserdatad/UserInterfaceState.xcuserstate

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "filename" : "checkmark circle (1).svg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

samples/discovery/ios/ios/Assets.xcassets/CheckmarkCircle.Fill.imageset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "1.000",
+          "green" : "1.000",
+          "red" : "1.000"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x00",
+          "green" : "0x00",
+          "red" : "0x00"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

samples/discovery/ios/ios/Assets.xcassets/CheckmarkCircle.Fill.imageset/checkmark circle (1).svg

@@ -40,6 +40,15 @@ enum ComponentBoxUI {
         contentScale: componentbox.ContentScale?
     )
 
+    case Icon(
+        id: String,
+        name: String?,
+        modifier: componentbox.Modifier?,
+        alignment: componentbox.Alignment?,
+        contentScale: componentbox.ContentScale?,
+        color: componentbox.Color?
+    )
+    
     case Row(
         id: String,
         components: [componentbox.Component]?,
@@ -68,6 +77,9 @@ enum ComponentBoxUI {
         case let .Image(id, name, url, contentDescription, modifier, alignment, contentScale):
             return AnyView(ComponentBoxUIImage(id: id, name: name, url: url, contentDescription: contentDescription, modifier: modifier, alignment: alignment, contentScale: contentScale))
 
+        case let .Icon(id, name, modifier, alignment, contentScale, color):
+            return AnyView(ComponentBoxUIIcon(id: id, name: name, modifier: modifier, alignment: alignment, contentScale: contentScale, color: color))
+            
         case let .Row(id, components, modifier, horizontalArrangement, verticalAlignment, action, isLazy):
             return AnyView(ComponentBoxUIRow(id: id, components: components, modifier: modifier, horizontalArrangement: horizontalArrangement, verticalAlignment: verticalAlignment, action: action, isLazy: isLazy))
 

samples/discovery/ios/ios/Assets.xcassets/OnPrimary.colorset/Contents.json

@@ -16,16 +16,36 @@ struct ComponentBoxUIButton: View, Identifiable {
     let isEnabled: Bool?
     let action: String?
     let variant: String?
-
+    
+    func log() {
+        print(components?.count ?? "NO components")
+    }
 
     var body: some View {
-        SwiftUI.Button {
+        
+        SwiftUI.Button(action: {}, label: {
+            
+            if (self.components != nil) {
+                ForEach(self.components!, id: \.self) { component in
+                    component.inflate()
+            }
+        }}).buttonStyle(PrimaryButton(fillMaxWidth: modifier?.fillMaxWidth as? Bool ?? false))
+    }
+}
 
-        } label: {
 
-            ForEach(self.components!, id: \.self) { component in
-                component.inflate()
 
-            }}.padding().frame(maxWidth: .infinity)
+@available(iOS 14.0, *)
+struct PrimaryButton: ButtonStyle {
+    
+    let fillMaxWidth: Bool
+
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+                .padding(12)
+                .frame(maxWidth: fillMaxWidth ? .infinity : .none)
+                .foregroundColor(Color.ui.onPrimary)
+                .font(.sharpGroteskBook(withStyle: .title3, size: 16))
+                .background(Color.ui.primary)
     }
 }

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/ComponentBoxUI.swift

@@ -0,0 +1,28 @@
+//
+// Created by Matt Ramotar on 3/27/22.
+// Copyright (c) 2022 Dropbox, Inc. All rights reserved.
+//
+
+import Foundation
+import SwiftUI
+import componentbox
+
+@available(iOS 14.0, *)
+struct ComponentBoxUIIcon: View, Identifiable {
+    let id: String
+    let name: String?
+    let modifier: componentbox.Modifier?
+    let alignment: componentbox.Alignment?
+    let contentScale: componentbox.ContentScale?
+    let color: componentbox.Color?
+    
+    func getForegroundColor() -> SwiftUI.Color {
+        return color?.title != nil ? color!.title.ui() : "On background".ui()
+    }
+
+    var body: some View {
+        if (name != nil) {
+            SwiftUI.Image(name!).renderingMode(.template).foregroundColor(getForegroundColor())
+        }
+    }
+}

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/components/Button.swift

@@ -14,16 +14,22 @@ struct ComponentBoxUIText: View, Identifiable {
     let text: String?
     let color: componentbox.Color?
     let textStyle: String?
+    
+    func getColor() -> SwiftUI.Color {
+        color != nil ? color!.title.ui() : textStyle == "button" ? Color.ui.onPrimary : Color.ui.onBackground
+    }
 
     var body: some View {
 
         let isHeading = ["h1", "h2", "h3", "h4", "h5", "h6"].contains(self.textStyle)
-        let color = color != nil ? color!.title.ui() : "On background".ui()
+        let isButton = ["button"].contains(self.textStyle)
 
         if (isHeading) {
-            SwiftUI.Text(text ?? "").sharpGroteskBold(style: .title3, color: color)
+            SwiftUI.Text(text ?? "").sharpGroteskBold(style: .title3, color: getColor())
+        } else if (isButton) {
+            SwiftUI.Text(text ?? "").sharpGroteskBold(style: .body, color: getColor())
         } else {
-            SwiftUI.Text(text ?? "").atlasGrotesk(style: .body, weight: .regular, color: color)
+            SwiftUI.Text(text ?? "").atlasGrotesk(style: .body, weight: .regular, color: getColor() )
         }
     }
 }

samples/discovery/ios/ios/ComponentBoxUI/Sources/ComponentBoxUI/components/Icon.swift

@@ -46,6 +46,10 @@ public extension Component {
             let ui = ComponentBoxUI.Image(id: image.id, name: image.name, url: image.url, contentDescription: image.contentDescription, modifier: image.modifier, alignment: image.alignment, contentScale: image.contentScale)
             return AnyView(ui.inflate())
 
+        case let icon as Component.Vector:
+            let ui = ComponentBoxUI.Icon(id: icon.id, name: icon.name, modifier: icon.modifier, alignment: icon.alignment, contentScale: icon.contentScale, color: icon.color)
+            return AnyView(ui.inflate())
+            
         case let row as Component.Row:
             let ui = ComponentBoxUI.Row(
                 id: row.id,