Merge branch 'feature/tilet' into 'develop'

added TileContainer

See merge request BPHV_MIPS/vds_ios_sample!15

VDSSample.xcodeproj/project.pbxproj

@@ -43,6 +43,9 @@
 		EA3C3BB628996775000CA526 /* MenuViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3BB228996775000CA526 /* MenuViewController.swift */; };
 		EA3C3BB728996775000CA526 /* ToggleViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3BB328996775000CA526 /* ToggleViewController.swift */; };
 		EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB30328DCD25B00103EE3 /* BadgeViewController.swift */; };
+		EA5E3050294D11540082B959 /* TileContainerViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E304F294D11540082B959 /* TileContainerViewController.swift */; };
+		EA5E30552950EA6E0082B959 /* TitleLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */; };
+		EA5E305C295111050082B959 /* TiletViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E305B295111050082B959 /* TiletViewController.swift */; };
 		EA84F76228BE4AE500D67ABC /* RadioSwatchGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA84F76128BE4AE500D67ABC /* RadioSwatchGroupViewController.swift */; };
 		EA89201928B56DF5006B9984 /* RadioBoxGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */; };
 		EA89204628B66CE2006B9984 /* ScrollViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89203F28B66CE2006B9984 /* ScrollViewController.swift */; };
@@ -107,6 +110,9 @@
 		EA3C3BB228996775000CA526 /* MenuViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MenuViewController.swift; sourceTree = "<group>"; };
 		EA3C3BB328996775000CA526 /* ToggleViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ToggleViewController.swift; sourceTree = "<group>"; };
 		EA4DB30328DCD25B00103EE3 /* BadgeViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BadgeViewController.swift; sourceTree = "<group>"; };
+		EA5E304F294D11540082B959 /* TileContainerViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileContainerViewController.swift; sourceTree = "<group>"; };
+		EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TitleLockupViewController.swift; sourceTree = "<group>"; };
+		EA5E305B295111050082B959 /* TiletViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TiletViewController.swift; sourceTree = "<group>"; };
 		EA84F76128BE4AE500D67ABC /* RadioSwatchGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioSwatchGroupViewController.swift; sourceTree = "<group>"; };
 		EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioBoxGroupViewController.swift; sourceTree = "<group>"; };
 		EA89203F28B66CE2006B9984 /* ScrollViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ScrollViewController.swift; sourceTree = "<group>"; };
@@ -253,6 +259,9 @@
 				EAA5EEAC28EB6924003B3210 /* TextEntryFieldViewController.swift */,
 				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
 				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
+				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
+				EA5E305B295111050082B959 /* TiletViewController.swift */,
+				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,
 				EA3C3BB328996775000CA526 /* ToggleViewController.swift */,
 			);
 			path = ViewControllers;
@@ -398,6 +407,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				EA3C3BB728996775000CA526 /* ToggleViewController.swift in Sources */,
+				EA5E30552950EA6E0082B959 /* TitleLockupViewController.swift in Sources */,
 				EAB5FEEF2927E28400998C17 /* ButtonGroupViewController.swift in Sources */,
 				EA89204C28B66CE2006B9984 /* ScrollWrapperView.swift in Sources */,
 				EA89205128B68307006B9984 /* TextField.swift in Sources */,
@@ -405,6 +415,7 @@
 				EA89201928B56DF5006B9984 /* RadioBoxGroupViewController.swift in Sources */,
 				EA3C3BB628996775000CA526 /* MenuViewController.swift in Sources */,
 				EA3C3B9D289966EF000CA526 /* AppDelegate.swift in Sources */,
+				EA5E3050294D11540082B959 /* TileContainerViewController.swift in Sources */,
 				EAF7F11A28A14A0E00B287F5 /* RadioButtonViewController.swift in Sources */,
 				EA89204628B66CE2006B9984 /* ScrollViewController.swift in Sources */,
 				EA3C3B9F289966EF000CA526 /* SceneDelegate.swift in Sources */,
@@ -412,6 +423,7 @@
 				EA89204A28B66CE2006B9984 /* KeyboardFrameChange.swift in Sources */,
 				EA3C3BB428996775000CA526 /* PickerBase.swift in Sources */,
 				EAB1D2C928AAAA1D00DAE764 /* BaseViewController.swift in Sources */,
+				EA5E305C295111050082B959 /* TiletViewController.swift in Sources */,
 				EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
 				EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
 				EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,
@@ -571,7 +583,7 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 9;
+				CURRENT_PROJECT_VERSION = 10;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = VDSSample/Info.plist;
@@ -601,7 +613,7 @@
 				ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 9;
+				CURRENT_PROJECT_VERSION = 10;
 				DEVELOPMENT_TEAM = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
 				INFOPLIST_FILE = VDSSample/Info.plist;

VDSSample/Classes/TextField.swift

@@ -9,34 +9,47 @@ import Foundation
 import UIKit
 import VDS
 
-class TextField: UITextField {
+public class TextField: UITextField {
-    var textPadding = UIEdgeInsets(
+    public var isNumeric: Bool = false
+    
+    public var textPadding = UIEdgeInsets(
         top: 10,
         left: 10,
         bottom: 10,
         right: 10
     )
     
-    override init(frame: CGRect) {
+    public override init(frame: CGRect) {
         super.init(frame: frame)
         font = TypographicalStyle.BodyLarge.font
     }
     
-    required init?(coder: NSCoder) {
+    public required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
     
-    override func textRect(forBounds bounds: CGRect) -> CGRect {
+    public override func textRect(forBounds bounds: CGRect) -> CGRect {
         layer.borderColor = UIColor.black.cgColor
         layer.borderWidth = 1
         let rect = super.textRect(forBounds: bounds)
         return rect.inset(by: textPadding)
     }
     
-    override func editingRect(forBounds bounds: CGRect) -> CGRect {
+    public override func editingRect(forBounds bounds: CGRect) -> CGRect {
         layer.borderColor = UIColor.black.cgColor
         layer.borderWidth = 1
         let rect = super.editingRect(forBounds: bounds)
         return rect.inset(by: textPadding)
     }
 }
+
+public class NumericField: TextField {
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        isNumeric = true
+    }
+    
+    public required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

VDSSample/Protocols/PickerBase.swift

@@ -49,6 +49,7 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
     public var text: String = "" {
         didSet {
             label.text = text
+            updateSelectedIndex()
         }
     }
     public var items: [EnumType] {
@@ -64,7 +65,9 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
         self.axis = .horizontal
         self.distribution = .fillEqually
         self.alignment = .fill
+        text = title
         label.text = title
+        updateSelectedIndex()
         addArrangedSubview(label)
         addArrangedSubview(button)
         button
@@ -79,6 +82,11 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
             }.store(in: &subscribers)
     }
     
+    func updateSelectedIndex() {
+        guard let foundTextIndex = items.firstIndex(where: { "\($0.rawValue)" == text }) else { return }
+        selectedIndex = foundTextIndex //add one since we always have a empty space
+    }
+    
     public required init(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
@@ -88,14 +96,13 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
     }
     
     public func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
-        items.count + 1
+        items.count
     }
     
     public func pickerView( _ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
-        guard row - 1 >= 0 else { return }
         selectedIndex = row
-        onPickerDidSelect?(items[row-1])
+        onPickerDidSelect?(items[row])
-        text = "\(items[row-1].rawValue)"
+        text = "\(items[row].rawValue)"
         pickerView.isHidden = true
     }
     
@@ -109,7 +116,7 @@ public class PickerSelectorView<EnumType: RawRepresentable>: UIStackView, Picker
     }
     
     private func title(for row: Int) -> String {
-        guard  row > 0, let item = items[row-1].rawValue as? String else { return "" }
+        guard  let item = items[row].rawValue as? String else { return "" }
         return item
     }
 

VDSSample/Supporting Files/Resources/Assets.xcassets/backgroundTest.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "black-test.jpeg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

VDSSample/ViewControllers/BadgeViewController.swift

@@ -50,10 +50,10 @@ class  BadgeViewController: BaseViewController {
     }()
     
     var textField = TextField()
-    var maxWidthTextField = TextField()
+    var maxWidthTextField = NumericField()
     var badge = Badge()
     
-    override func allTextFields() -> [UITextField]? { [textField, maxWidthTextField] }
+    override func allTextFields() -> [TextField]? { [textField, maxWidthTextField] }
     
     override func viewDidLoad() {
         super.viewDidLoad()

VDSSample/ViewControllers/BaseViewController.swift

@@ -188,8 +188,23 @@ public class BaseViewController: UIViewController, Initable {
     }
 
     open func setup() {
+        
         if let textFields = allTextFields() {
             for textField in textFields {
+                if textField.isNumeric {
+                    let keypadToolbar: UIToolbar = UIToolbar()
+                    
+                    // add a done button to the numberpad
+                    keypadToolbar.items=[
+                        UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: self, action: nil),
+                        UIBarButtonItem(title: "Done", style: UIBarButtonItem.Style.done, target: textField, action: #selector(UITextField.resignFirstResponder))
+                    ]
+                    keypadToolbar.sizeToFit()
+
+                    // add a toolbar with a done button above the number pad
+                    textField.inputAccessoryView = keypadToolbar
+                    textField.keyboardType = .numberPad
+                }
                 textField.returnKeyType = .done
                 textField
                     .publisher(for: .editingDidEndOnExit)
@@ -205,5 +220,5 @@ public class BaseViewController: UIViewController, Initable {
         print("\(Self.self) updateView()")
     }
 
-    open func allTextFields() -> [UITextField]? { nil }    
+    open func allTextFields() -> [TextField]? { nil }
 }

VDSSample/ViewControllers/ButtonGroupViewController.swift

@@ -61,15 +61,15 @@ class ButtonGroupViewController: BaseViewController {
     
     var label = Label()
     var disabledSwitch = Toggle()
-    var widthTextField = TextField()
+    var widthTextField = NumericField()
-    var percentageTextField = TextField()
+    var percentageTextField = NumericField()
 
     let largeButtonGroup = ButtonGroup()
     let smallButtonGroup = ButtonGroup()
     let largeLabel = Label().with{ $0.text = "Large Button Group"; $0.typograpicalStyle = .BoldTitleSmall }
     let smallLabel = Label().with{ $0.text = "Small Button Group"; $0.typograpicalStyle = .BoldTitleSmall }
 
-    override func allTextFields() -> [UITextField]? { [widthTextField, percentageTextField] }
+    override func allTextFields() -> [TextField]? { [widthTextField, percentageTextField] }
 
     override func viewDidLoad() {
         super.viewDidLoad()

VDSSample/ViewControllers/ButtonViewController.swift

@@ -27,7 +27,7 @@ class ButtonViewController: BaseViewController {
     var label = Label()
     var disabledSwitch = Toggle()
     var textField = TextField()
-    var widthTextField = TextField()
+    var widthTextField = NumericField()
 
     var button: Button!
 
@@ -41,7 +41,7 @@ class ButtonViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [textField, widthTextField] }
+    override func allTextFields() -> [TextField]? { [textField, widthTextField] }
 
     func setupForm(){
         addFormRow(label: "Button Action", view: label)

VDSSample/ViewControllers/CheckBoxGroupViewController.swift

@@ -29,7 +29,7 @@ class  CheckboxGroupViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [labelTextField, childTextField] }
+    override func allTextFields() -> [TextField]? { [labelTextField, childTextField] }
 
     func setupForm() {
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))

VDSSample/ViewControllers/CheckboxViewController.swift

@@ -30,7 +30,7 @@ class  CheckboxViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [labelTextField, childTextField, errorTextField] }
+    override func allTextFields() -> [TextField]? { [labelTextField, childTextField, errorTextField] }
 
     func setupForm(){
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))

VDSSample/ViewControllers/LabelViewController.swift

@@ -38,7 +38,7 @@ class LabelViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [textField] }
+    override func allTextFields() -> [TextField]? { [textField] }
 
     func setupForm(){
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))

VDSSample/ViewControllers/MenuViewController.swift

@@ -83,6 +83,9 @@ class MenuViewController: UITableViewController {
         MenuComponent(title: "TextEntryField", completed: false, viewController: TextEntryFieldViewController.self),
         MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
         MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self),
+        MenuComponent(title: "TileContainer", completed: false, viewController: TileContainerViewController.self),
+        MenuComponent(title: "Tilet", completed: false, viewController: TiletViewController.self),
+        MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self),
         MenuComponent(title: "Toggle", completed: true, viewController: ToggleViewController.self)
     ]
     

VDSSample/ViewControllers/RadioBoxGroupViewController.swift

@@ -31,7 +31,7 @@ class  RadioBoxGroupViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [textField, subTextField, subTextRightField] }
+    override func allTextFields() -> [TextField]? { [textField, subTextField, subTextRightField] }
     
     func setupForm() {
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))

VDSSample/ViewControllers/RadioButtonViewController.swift

@@ -29,7 +29,7 @@ class  RadioButtonViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [labelTextField, childTextField] }
+    override func allTextFields() -> [TextField]? { [labelTextField, childTextField] }
 
     func setupForm() {
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))

VDSSample/ViewControllers/RadioSwatchGroupViewController.swift

@@ -40,6 +40,7 @@ class  RadioSwatchGroupViewController: BaseViewController {
             .publisher(for: .valueChanged)
             .sink { [weak self] sender in
                 self?.radioSwatchGroup.selectorViews.first?.strikethrough = sender.isOn
+                self?.radioSwatchGroup.reload()
             }.store(in: &subscribers)
     }
     

VDSSample/ViewControllers/TextEntryFieldViewController.swift

@@ -25,7 +25,7 @@ class  TextEntryFieldViewController: BaseViewController {
     var errorTextField = TextField()
     var successTextField = TextField()
     var helperTextField = TextField()
-    var widthTextField = TextField()
+    var widthTextField = NumericField()
     var showErrorSwitch = Toggle()
     var showSuccessSwitch = Toggle()
     var tooltipTitleTextField = TextField()
@@ -41,7 +41,7 @@ class  TextEntryFieldViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [labelTextField, errorTextField, successTextField, helperTextField, widthTextField, tooltipTitleTextField, tooltipContentTextField] }
+    override func allTextFields() -> [TextField]? { [labelTextField, errorTextField, successTextField, helperTextField, widthTextField, tooltipTitleTextField, tooltipContentTextField] }
     
     func setupForm(){
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
@@ -151,6 +151,7 @@ class  TextEntryFieldViewController: BaseViewController {
  
         //setup UI
         surfacePickerSelectorView.text = textEntryField.surface.rawValue
+        helperTextPlacementPickerSelectorView.text = textEntryField.helperTextPlacement.rawValue
         disabledSwitch.isOn = textEntryField.disabled
         requiredSwitch.isOn = textEntryField.required
         labelTextField.text = textEntryField.labelText

VDSSample/ViewControllers/TextLinkCaretViewController.swift

@@ -34,7 +34,7 @@ class TextLinkCaretViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [textField] }
+    override func allTextFields() -> [TextField]? { [textField] }
 
     func setupForm(){
         addFormRow(label: "Button Action", view: label)

VDSSample/ViewControllers/TextLinkViewController.swift

@@ -35,7 +35,7 @@ class TextLinkViewController: BaseViewController {
         setupModel()
     }
     
-    override func allTextFields() -> [UITextField]? { [textField] }
+    override func allTextFields() -> [TextField]? { [textField] }
 
     func setupForm(){
         addFormRow(label: "Button Action", view: label)

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -0,0 +1,147 @@
+//
+//  TileContainerViewController.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 12/16/22.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSColorTokens
+
+class TileContainerViewController: BaseViewController {
+    
+    lazy var backgroundColorPickerSelectorView = {
+        PickerSelectorView(title: "white",
+                           picker: self.picker,
+                           items: TileContainer.ContainerBackgroundColor.allCases)
+    }()
+    
+    lazy var imageFallbackColorPickerSelectorView = {
+        SurfacePickerSelectorView(picker: self.picker)
+    }()
+    
+    lazy var paddingPickerSelectorView = {
+        PickerSelectorView(title: "16",
+                           picker: self.picker,
+                           items: TileContainer.ContainerPadding.allCases)
+    }()
+    
+    lazy var scalingTypePickerSelectorView = {
+        PickerSelectorView(title: "white",
+                           picker: self.picker,
+                           items: TileContainer.ContainerScalingType.allCases)
+    }()
+    
+    var showBackgroundImageSwitch = Toggle()
+    var showBorderSwitch = Toggle()
+    var showDropShadowSwitch = Toggle()
+    var heightTextField = NumericField()
+    var widthTextField = NumericField()
+
+    var tileContainer = TileContainer()
+    var backgroundImage = UIImage(named: "backgroundTest")!
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: .makeWrapper(for: tileContainer))
+        
+        setupForm()
+        setupPicker()
+        setupModel()
+    }
+    
+    override func allTextFields() -> [TextField]? { [widthTextField, heightTextField] }
+
+    func setupForm(){
+        formStackView.addArrangedSubview(Label().with{
+            $0.typograpicalStyle = .BoldBodyLarge
+            $0.text = "This object does NOT reflect normal \"surface\" changes, all properties are maually set"
+        })
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Width", view: widthTextField)
+        addFormRow(label: "Height", view: heightTextField)
+        addFormRow(label: "Show Border", view: showBorderSwitch)
+        //addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
+        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        addFormRow(label: "Padding", view: paddingPickerSelectorView)
+        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
+        addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
+        addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
+
+        showBackgroundImageSwitch
+            .publisher(for: .valueChanged)
+            .sink { [weak self] sender in
+                if let image = self?.backgroundImage, sender.isOn {
+                    self?.tileContainer.backgroundImage = image
+                } else {
+                    self?.tileContainer.backgroundImage = nil
+                }
+            }.store(in: &subscribers)
+
+        showBorderSwitch
+            .publisher(for: .valueChanged)
+            .sink { [weak self] sender in
+                self?.tileContainer.showBorder = sender.isOn
+            }.store(in: &subscribers)
+
+        showDropShadowSwitch
+            .publisher(for: .valueChanged)
+            .sink { [weak self] sender in
+                self?.tileContainer.showDropShadows = sender.isOn
+            }.store(in: &subscribers)
+
+        heightTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if let n = NumberFormatter().number(from: text) {
+                    self?.tileContainer.height = CGFloat(truncating: n)
+                } else {
+                    self?.tileContainer.height = nil
+                }
+            }.store(in: &subscribers)
+
+        widthTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if let n = NumberFormatter().number(from: text) {
+                    self?.tileContainer.width = CGFloat(truncating: n)
+                }
+            }.store(in: &subscribers)
+
+    }
+    
+    func setupModel() {
+        //setup UI
+        surfacePickerSelectorView.text = tileContainer.surface.rawValue
+        paddingPickerSelectorView.text = tileContainer.containerPadding.rawValue
+        scalingTypePickerSelectorView.text = tileContainer.aspectRatio.rawValue
+        widthTextField.text = "\(tileContainer.width)"
+        heightTextField.text = tileContainer.height != nil ? "\(tileContainer.height!)" : ""
+    }
+      
+    func setupPicker(){
+        
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tileContainer.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tileContainer.containerBackgroundColor = item
+        }
+        
+        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tileContainer.aspectRatio = item
+        }
+        
+        paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tileContainer.containerPadding = item
+        }
+
+        imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tileContainer.imageFallbackColor = item
+        }
+    }
+}

VDSSample/ViewControllers/TiletViewController.swift

@@ -0,0 +1,144 @@
+//
+//  TiletViewController.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 12/19/22.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSColorTokens
+
+class TiletViewController: BaseViewController {
+
+    lazy var titleTextStylePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: TiletTitleTypographicalStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var otherTextStylePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: TiletOtherTypographicalStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView<Use>(title: "",
+                                 picker: self.picker,
+                                 items: [.primary, .secondary])
+    }()
+
+    var titleTextField = TextField()
+    var subTitleTextField = TextField()
+    var widthTextField = NumericField()
+    var textPercentageTextField = NumericField()
+    var textWidthTextField = NumericField()
+
+    var tilet = Tilet()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: .makeWrapper(for: tilet))
+        
+        setupForm()
+        setupPicker()
+        setupModel()
+    }
+    
+    override func allTextFields() -> [TextField]? { [titleTextField, subTitleTextField, widthTextField, textWidthTextField, textPercentageTextField] }
+
+    func setupForm(){
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        
+        addFormRow(label: "Title Style", view: titleTextStylePickerSelectorView)
+        addFormRow(label: "Other Style", view: otherTextStylePickerSelectorView)
+        
+        addFormRow(label: "Title Text", view: titleTextField)
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        addFormRow(label: "Subtitle Text", view: subTitleTextField)
+        addFormRow(label: "Width", view: widthTextField)
+        addFormRow(label: "Text Width", view: textWidthTextField)
+        addFormRow(label: "Text Percentage", view: textPercentageTextField)
+
+        widthTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if let n = NumberFormatter().number(from: text) {
+                    self?.tilet.width = CGFloat(truncating: n)
+                }
+            }.store(in: &subscribers)
+
+        textWidthTextField
+            .textPublisher
+            .sink { [weak self] text in
+                guard let self else { return }
+                if let n = NumberFormatter().number(from: text), n.floatValue > 50.0 && n.floatValue <= Float(self.tilet.width) {
+                    self.tilet.textWidth = CGFloat(truncating: n)
+                    self.textPercentageTextField.text = ""
+                } else {
+                    self.tilet.textWidth = nil
+                }
+            }.store(in: &subscribers)
+        
+        textPercentageTextField
+            .textPublisher
+            .sink { [weak self] text in
+                if let n = NumberFormatter().number(from: text), n.intValue > 15 && n.intValue <= 100 {
+                    self?.tilet.textPercentage = CGFloat(truncating: n)
+                    self?.textWidthTextField.text = ""
+                } else {
+                    self?.tilet.textPercentage = nil
+                }
+            }.store(in: &subscribers)
+
+        titleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.tilet.titleText = text
+            }.store(in: &subscribers)
+
+        subTitleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.tilet.subTitleText = text
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        tilet.surface = .light
+        tilet.width = 312
+        tilet.titleText = "Save $XX on your monthly bill."
+        tilet.subTitleText = "Enroll in Auto Pay & paper-free billing to save on your monthly bill."
+        
+        //setup UI
+        surfacePickerSelectorView.text = tilet.surface.rawValue
+        otherTextStylePickerSelectorView.text = tilet.otherTypograpicalStyle.rawValue
+        titleTextStylePickerSelectorView.text = tilet.titleTypograpicalStyle.rawValue
+        subtitleColorPickerSelectorView.text = tilet.subTitleColor.rawValue
+        titleTextField.text = tilet.titleText
+        subTitleTextField.text = tilet.subTitleText
+        widthTextField.text = "\(tilet.width)"
+    }
+    
+    //Picker
+    func setupPicker(){
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tilet.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        titleTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tilet.titleTypograpicalStyle = item
+        }
+
+        otherTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.tilet.otherTypograpicalStyle = item
+        }
+        
+        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.tilet.subTitleColor = item
+        }
+    }
+}

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -0,0 +1,127 @@
+//
+//  TitleLockupViewController.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 12/19/22.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSColorTokens
+
+class TitleLockupViewController: BaseViewController {
+
+    lazy var textPositionPickerSelectorView = {
+        PickerSelectorView(title: "left",
+                           picker: self.picker,
+                           items: TitleLockupTextPosition.allCases)
+    }()
+    
+    lazy var titleTextStylePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: TitleLockupTitleTypographicalStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var otherTextStylePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: TitleLockupOtherTypographicalStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView<Use>(title: "",
+                                 picker: self.picker,
+                                 items: [.primary, .secondary])
+    }()
+
+    var eyebrowTextField = TextField()
+    var titleTextField = TextField()
+    var subTitleTextField = TextField()
+
+    var titleLockup = TitleLockup()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: titleLockup)
+
+        setupForm()
+        setupPicker()
+        setupModel()
+    }
+    
+    override func allTextFields() -> [TextField]? { [eyebrowTextField, titleTextField, subTitleTextField] }
+
+    func setupForm(){
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Text Position", view: textPositionPickerSelectorView)
+        
+        addFormRow(label: "Title Style", view: titleTextStylePickerSelectorView)
+        addFormRow(label: "Other Style", view: otherTextStylePickerSelectorView)
+        
+        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+        addFormRow(label: "Title Text", view: titleTextField)
+
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        addFormRow(label: "Subtitle Text", view: subTitleTextField)
+
+        eyebrowTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.titleLockup.eyebrowText = text
+            }.store(in: &subscribers)
+
+        titleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.titleLockup.titleText = text
+            }.store(in: &subscribers)
+
+        subTitleTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.titleLockup.subTitleText = text
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        titleLockup.eyebrowText = "Today only."
+        titleLockup.titleText = "Get more of our best"
+        titleLockup.subTitleText = "Get both of our best and pay less. Pair 5G Home Internet with Verizon mobile to save every month."
+        
+        //setup UI
+        surfacePickerSelectorView.text = titleLockup.surface.rawValue
+        textPositionPickerSelectorView.text = titleLockup.textPosition.rawValue
+        otherTextStylePickerSelectorView.text = titleLockup.otherTypograpicalStyle.rawValue
+        titleTextStylePickerSelectorView.text = titleLockup.titleTypograpicalStyle.rawValue
+        subtitleColorPickerSelectorView.text = titleLockup.subTitleColor.rawValue
+        eyebrowTextField.text = titleLockup.eyebrowText
+        titleTextField.text = titleLockup.titleText
+        subTitleTextField.text = titleLockup.subTitleText
+    }
+    
+    //Picker
+    func setupPicker(){
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.titleLockup.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.titleLockup.textPosition = item
+        }
+        
+        titleTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.titleLockup.titleTypograpicalStyle = item
+        }
+
+        otherTextStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.titleLockup.otherTypograpicalStyle = item
+        }
+        
+        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.titleLockup.subTitleColor = item
+        }
+    }
+}

VDSSample/ViewControllers/ToggleViewController.swift

@@ -52,7 +52,7 @@ class ToggleViewController: BaseViewController {
         setupPicker()
     }
     
-    override func allTextFields() -> [UITextField]? { [onTextField, offTextField] }
+    override func allTextFields() -> [TextField]? { [onTextField, offTextField] }
 
     func setupForm() {