added device ipad

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDSSample.xcodeproj/project.pbxproj

@@ -37,7 +37,6 @@
 		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
 		183B16F52C80B27C00BA6A10 /* FootnoteGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */; };
 		184023492C61E9E700A412C8 /* PriceLockupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 184023482C61E9E700A412C8 /* PriceLockupViewController.swift */; };
-		1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */; };
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
 		18926F5F2C76185A00C55BF6 /* FootnoteItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
@@ -108,6 +107,7 @@
 		EAF7F0CC289DA24F00B287F5 /* DownloadArtifactoryItems.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */; };
 		EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; };
 		EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; };
+		EAFD5AA42CB5D95600C87DE1 /* TileletGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */; };
 		EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; };
 /* End PBXBuildFile section */
 
@@ -142,7 +142,6 @@
 		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
 		183B16F42C80B27C00BA6A10 /* FootnoteGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteGroupViewController.swift; sourceTree = "<group>"; };
 		184023482C61E9E700A412C8 /* PriceLockupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PriceLockupViewController.swift; sourceTree = "<group>"; };
-		1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ListUnorderedViewController.swift; sourceTree = "<group>"; };
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
 		18926F5E2C76185A00C55BF6 /* FootnoteItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FootnoteItemViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
@@ -216,6 +215,7 @@
 		EAF7F0C8289DA24F00B287F5 /* DownloadArtifactoryItems.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = DownloadArtifactoryItems.sh; sourceTree = "<group>"; };
 		EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = "<group>"; };
 		EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = "<group>"; };
+		EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileletGroupViewController.swift; sourceTree = "<group>"; };
 		EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -359,7 +359,6 @@
 				180636CA2C29B12B00C92D86 /* InputStepperViewController.swift */,
 				EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
 				44604AD829CE1CF900E62B51 /* LineViewController.swift */,
-				1859B3142CBF77B30031CD70 /* ListUnorderedViewController.swift */,
 				EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */,
 				18C0F9472C98177F00E1DD71 /* ModalViewController.swift */,
 				445BA07929C088470036A7C5 /* NotificationViewController.swift */,
@@ -377,6 +376,7 @@
 				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
 				EA5E305B295111050082B959 /* TileletViewController.swift */,
+				EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */,
 				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,
 				EA3C3BB328996775000CA526 /* ToggleViewController.swift */,
 				EAB2375F29E88D5D00AABE9A /* TooltipViewController.swift */,
@@ -544,6 +544,7 @@
 				EA5E3050294D11540082B959 /* TileContainerViewController.swift in Sources */,
 				445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */,
 				EAEEEC942B1F824500531FC2 /* Bundle.swift in Sources */,
+				EAFD5AA42CB5D95600C87DE1 /* TileletGroupViewController.swift in Sources */,
 				EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */,
 				EA89204628B66CE2006B9984 /* ScrollViewController.swift in Sources */,
 				EA471F402A97BEAA00CE9E58 /* CustomRotorable.swift in Sources */,
@@ -565,7 +566,6 @@
 				EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
 				EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
 				EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,
-				1859B3152CBF77B30031CD70 /* ListUnorderedViewController.swift in Sources */,
 				18C0F9482C98177F00E1DD71 /* ModalViewController.swift in Sources */,
 				EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
 				EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
@@ -745,7 +745,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 75;
+				CURRENT_PROJECT_VERSION = 74;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -781,7 +781,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 75;
+				CURRENT_PROJECT_VERSION = 74;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Classes/ColorPickerView.swift

@@ -16,12 +16,9 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         }
     }
    
-    private var colorPicker: UIColorPickerViewController = {
+    public var onColorSelected: ((UIColor) -> Void)?
-        let picker = UIColorPickerViewController()
+   
-        return picker
+    private var selectedColorView: UIView = {
-    }()
-
-    var selectedColorView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
         view.widthAnchor.constraint(equalToConstant: 20).isActive = true
@@ -29,27 +26,18 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         return view
     }()
 
-    var button = Button().with {
+    private var button = Button().with {
         $0.size = .small
         $0.use = .secondary
         $0.text = "Select"
     }
 
-    /// Callback once the user picks a color from the picker.
-    public var onColorSelected: ((UIColor) -> Void)?
-
     public init(color: UIColor? = nil) {
         super.init(frame: .zero)
-        if let color {
+        self.selectedColor = color
-            selectedColor = color
-        }
-        colorPicker.delegate = self
         setup()
-        button.onClick = { _ in
-            UIApplication.topViewController()?.present(self.colorPicker, animated: true)
-        }
     }
-
+   
     required init(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
@@ -58,7 +46,7 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         distribution = .fillEqually
         alignment = .fill
         spacing = 10
-
+       
         let indicatorWrapper = View()
         indicatorWrapper.addSubview(selectedColorView)
         indicatorWrapper.height(32)
@@ -66,9 +54,8 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         indicatorWrapper.pinLeading()
         indicatorWrapper.pinBottom()
         indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-       
         addArrangedSubview(indicatorWrapper)
-
+       
         let buttonWrapper = View()
         buttonWrapper.addSubview(button)
         buttonWrapper.height(32)
@@ -77,16 +64,23 @@ public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
         button.pinBottom()
         button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
         addArrangedSubview(buttonWrapper)
+       
+        button.onClick = { [weak self] _ in
+            guard let self = self else { return }
+            let colorPicker = UIColorPickerViewController()
+            colorPicker.title = "Select a Color"
+            colorPicker.delegate = self
+            if let selectedColor = self.selectedColor {
+                colorPicker.selectedColor = selectedColor
+            }
+            UIApplication.topViewController()?.present(colorPicker, animated: true)
+        }
     }
    
     // MARK: - UIColorPickerViewControllerDelegate
-
     public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
         selectedColor = viewController.selectedColor
         onColorSelected?(viewController.selectedColor)
     }
-   
+
-    public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
-        UIApplication.topViewController()?.dismiss(animated: true)
-    }
 }

VDSSample/Classes/Helper.swift

@@ -112,4 +112,35 @@ extension BaseViewController {
             $0.labelPublisher(label)
         }
     }
+    
+    func makeTilelet(badge: String? = nil, eyebrow: String? = nil, title: String? = nil, subTitle: String? = nil) -> Tilelet {
+        var badgeModel: Tilelet.BadgeModel?
+        if let badge {
+            badgeModel = Tilelet.BadgeModel(text: badge)
+        }
+        
+        var eyebrowModel: Tilelet.EyebrowModel?
+        if let eyebrow {
+         eyebrowModel = Tilelet.EyebrowModel(text: eyebrow)
+        }
+        
+        var titleModel: Tilelet.TitleModel?
+        if let title {
+            titleModel = Tilelet.TitleModel(text: title)
+        }
+        
+        var subTitleModel: Tilelet.SubTitleModel?
+        if let subTitle {
+            subTitleModel = Tilelet.SubTitleModel(text: subTitle)
+        }
+        
+        return .init().with {
+            $0.surface = .light
+            $0.badgeModel = badgeModel
+            $0.eyebrowModel = eyebrowModel
+            $0.titleModel = titleModel
+            $0.subTitleModel = subTitleModel
+            $0.directionalIconModel = .init(iconColor: .token(.paletteWhite), size: .small)
+        }
+    }
 }

VDSSample/Classes/TokenColorPickerFormSection.swift

@@ -85,19 +85,19 @@ public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>:
             let isToken =  item.rawValue == "token"
             let isCustom =  item.rawValue == "custom"
             if isToken {
-                self.onTokenSelected?(self.tokenColorView.selectedItem)
+                onTokenSelected?(self.tokenColorView.selectedItem)
             } else if let selectedItem = self.customColorView.selectedColor, isCustom {
-                self.onColorSelected?(selectedItem)
+                onColorSelected?(selectedItem)
             } else {
-                self.onSelected?(item)
+                onSelected?(item)
             }
-            self.tokenColorRow?.isHidden = !isToken
+            tokenColorRow?.isHidden = !isToken
-            self.customColorRow?.isHidden = !isCustom
+            customColorRow?.isHidden = !isCustom
         }
        
         tokenColorView.onPickerDidSelect = { [weak self] item in
             guard let self else { return }
-            self.onTokenSelected?(item)
+            onTokenSelected?(item)
         }
     }
    

VDSSample/ViewControllers/LabelViewController.swift

@@ -109,7 +109,7 @@ class LabelViewController: BaseViewController<Label> {
         
 
         let fullText = "Here is a sample of text that has an inline text link that you can click on!"
-        let linkText = "inline text link"
+        let linkText = "that has an inline text link that you"
 
         sampleLabel.textStyle = .titleLarge
         sampleLabel.text = fullText

VDSSample/ViewControllers/ListUnorderedViewController.swift

@@ -1,138 +0,0 @@
-//
-//  ListUnorderedViewController.swift
-//  VDSSample
-//
-//  Created by Vasavi Kanamarlapudi on 16/10/24.
-//
-
-import Foundation
-import VDS
-
-class ListUnorderedViewController: BaseViewController<ListUnordered> {
-    
-    lazy var sizePickerView = {
-        PickerSelectorView(title: "Large",
-                           picker: self.picker,
-                           items: ListUnordered.Size.allCases)
-    }()
-    
-    lazy var spacingPickerView = {
-        PickerSelectorView(title:"Standard",
-                           picker: self.picker,
-                           items: ListUnordered.Spacing.allCases)
-    }()
-    
-    var leadInTextField = TextField()
-    var itemLevelTwoTextOne = TextField()
-    var itemLevelTwoTextTwo = TextField()
-    
-    var unorderedList: [ListUnordered.ListUnorderedItemModel]?
-    
-    override func viewDidLoad() {
-        super.viewDidLoad()
-        addContentTopView(view: component)
-        setupPicker()
-        setupModel()
-    }
-    
-    override func setupForm() {
-        super.setupForm()
-        addFormRow(label: "Surface", view: surfacePickerSelectorView)
-        addFormRow(label: "Size", view: sizePickerView)
-        addFormRow(label: "Spacing", view: spacingPickerView)
-        
-        let form1 = FormSection()
-        form1.title = "Lead-In Text (optional)"
-        form1.addFormRow(label: "Lead In Text", view: leadInTextField)
-        
-        let form2 = FormSection()
-        form2.title = "List Item Level 2 (Optional)"
-        form2.addFormRow(label: "Subtext 1", view: itemLevelTwoTextOne)
-        form2.addFormRow(label: "Subtext 2", view: itemLevelTwoTextTwo)
-        
-        append(section: form1)
-        append(section: form2)
-        
-        leadInTextField
-            .textPublisher
-            .sink { [weak self] text in
-                self?.component.leadInText = text
-            }.store(in: &subscribers)
-        
-        itemLevelTwoTextOne
-            .textPublisher
-            .sink { [weak self] text in
-                guard let self else { return }
-                self.updateUnorderList()
-                self.component.unorderedList = unorderedList ?? []
-            }.store(in: &subscribers)
-        
-        itemLevelTwoTextTwo
-            .textPublisher
-            .sink { [weak self] text in
-                guard let self else { return }
-                self.updateUnorderList()
-                self.component.unorderedList = unorderedList ?? []
-            }.store(in: &subscribers)
-    }
-    
-    func setupPicker() {
-        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.component.surface = item
-            self?.contentTopView.backgroundColor = item.color
-        }
-        
-        sizePickerView.onPickerDidSelect = { [weak self] item in
-            self?.component.size = item
-        }
-        
-        spacingPickerView.onPickerDidSelect = { [weak self] item in
-            self?.component.spacing = item
-        }
-    }
-    
-    func setupModel() {
-        sizePickerView.text = component.size.rawValue
-        spacingPickerView.text = component.spacing.rawValue
-        leadInTextField.text = "To manage your existing Call Intercept calling feature:"
-        self.component.leadInText = leadInTextField.text
-        itemLevelTwoTextOne.text = "Priority callers can bypass Call Intercept by entering your 4 digit Call Intercept Override Code."
-        itemLevelTwoTextTwo.text = "Your phone will alert you with a short-short-long ring and \"Priority Caller\" will appear on your display."
-        updateUnorderList()
-        self.component.unorderedList = self.unorderedList ?? []
-    }
-    
-    // Update test data
-    func updateUnorderList() {
-        if (itemLevelTwoTextOne.text?.isEmpty == true) {
-            itemLevelTwoTextOne.text = nil
-        }
-        if (itemLevelTwoTextTwo.text?.isEmpty == true) {
-            itemLevelTwoTextTwo.text = nil
-        }
-        var levelTwoSubTexts : [String?]? = nil
-        if let subtextOneEmpty = itemLevelTwoTextOne.text?.isEmpty, let subtextTwoEmpty = itemLevelTwoTextTwo.text?.isEmpty {
-            if !subtextOneEmpty && !subtextTwoEmpty {
-                levelTwoSubTexts = [itemLevelTwoTextOne.text, itemLevelTwoTextTwo.text]
-            } else if !subtextOneEmpty || !subtextTwoEmpty {
-                if subtextOneEmpty {
-                    levelTwoSubTexts = [itemLevelTwoTextTwo.text]
-                } else if subtextTwoEmpty {
-                    levelTwoSubTexts = [itemLevelTwoTextOne.text]
-                }
-            }
-            unorderedList = [
-                .init(itemLevelOneText: "Call 800-435-7986 to have your PIN reset."),
-                .init(itemLevelOneText: "To bypass Call Intercept",
-                      itemLevelTwoTexts: levelTwoSubTexts)
-            ]
-        }
-    }
-}
-
-extension ListUnorderedViewController: ComponentSampleable {
-    static func makeSample() -> ComponentSample {
-        let component = Self.makeComponent()
-        return ComponentSample(component: component)
-    }
-}

VDSSample/ViewControllers/MenuViewController.swift

@@ -89,7 +89,6 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "InputStepper", completed: true, viewController: InputStepperViewController.self),
         MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
         MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
-        MenuComponent(title: "List Unordered", completed: false, viewController: ListUnorderedViewController.self),
         MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
         MenuComponent(title: "Modal", completed: true, viewController: ModalViewController.self),
         MenuComponent(title: "Notification", completed: true, viewController: NotificationViewController.self),
@@ -107,6 +106,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self),
         MenuComponent(title: "TileContainer", completed: true, viewController: TileContainerViewController.self),
         MenuComponent(title: "Tilelet", completed: true, viewController: TileletViewController.self),
+        MenuComponent(title: "TileletGroup", completed: true, viewController: TileletGroupViewController.self),
         MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self),
         MenuComponent(title: "Toggle", completed: true, viewController: ToggleViewController.self),
         MenuComponent(title: "Tooltip", completed: true, viewController: TooltipViewController.self),

VDSSample/ViewControllers/TableViewController.swift

@@ -147,11 +147,7 @@ class TableViewController: BaseViewController<Table> {
     func setupModel() {
         ///Header row
         
-        let tableInfoLabel = Label().with({
+        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
-            $0.text = ""
-            $0.accessibilityLabel = "Verizon Plan compare, table, with 3 Rows, 3 Columns, Empty"
-        })
-        self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: tableInfoLabel),
                                                               TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Verizon smart family"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping}),
                                                               TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
         

VDSSample/ViewControllers/TileletGroupViewController.swift

@@ -0,0 +1,138 @@
+//
+//  TileletGroupViewController.swift
+//  VDSSample
+//
+//  Created by Matt Bruce on 10/8/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSCoreTokens
+
+class TileletGroupViewController: BaseViewController<TileletGroup> {
+    var collectionView: UICollectionView!
+    
+    public enum RowQuantity: String, CaseIterable {
+        case one, two, three
+        case four, five, six
+        
+        init(quantity: Int){
+            if quantity == 1 {
+                self = .one
+            } else if quantity == 2 {
+                self = .two
+            } else if quantity == 3 {
+                self = .three
+            } else if quantity == 4 {
+                self = .four
+            } else if quantity == 5 {
+                self = .five
+            } else if quantity == 6 {
+                self = .six
+            } else {
+                self = UIDevice.isIPad ? .six : .three
+            }
+        }
+        var intValue: Int {
+            switch self {
+            case .one:
+                return 1
+            case .two:
+                return 2
+            case .three:
+                return 3
+            case .four:
+                return 4
+            case .five:
+                return 5
+            case .six:
+                return 6
+            }
+        }
+        
+        public static var allCases: [TileletGroupViewController.RowQuantity] {
+            UIDevice.isIPad ? Self.allCases : [.one, .two, .three]
+        }
+    }
+
+    lazy var rowQuantitySelectorView = {
+        PickerSelectorView<RowQuantity>(title: "",
+                                        picker: self.picker,
+                                        items: RowQuantity.allCases)
+    }()
+    
+    lazy var paddingSelectorView = {
+        PickerSelectorView<TileletGroup.Padding>(title: "",
+                                                 picker: self.picker,
+                                                 items: TileletGroup.Padding.allCases)
+    }()
+
+    var disabledSwitch = Toggle()
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        
+        resetTilets()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+        
+        debugViewSwitch.onChange =  { [weak self] sender in
+            self?.component.debugBorder(show: sender.isOn, color: .blue)
+        }
+    }
+    
+    func resetTilets() {
+        component.tilelets = [
+            makeTilelet(badge: "Here's the badge", title: "Title goes here"),
+            makeTilelet(title: "Title goes here"),
+            makeTilelet(subTitle: "Here's the subTitle"),
+            makeTilelet(eyebrow: "Here's the eyebrow", subTitle: "Here's the subTitle")
+        ]
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        addActionRow()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
+        if UIDevice.isIPad {
+            addFormRow(label: "Padding", view: paddingSelectorView)
+        }
+        addFormRow(label: "Row Quantity", view: rowQuantitySelectorView)
+        
+        disabledSwitch.onChange = { [weak self] sender in
+            self?.component.isEnabled = !sender.isOn
+        }
+
+    }
+        
+    func setupModel() {
+        //setup UI
+        surfacePickerSelectorView.text = component.surface.rawValue
+        disabledSwitch.isOn = !component.isEnabled
+        rowQuantitySelectorView.text = RowQuantity(quantity: component.rowQuantity).rawValue
+    }
+      
+    func setupPicker(){
+        
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        paddingSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.padding = item
+        }
+        
+        rowQuantitySelectorView.onPickerDidSelect = {  [weak self] item in
+            if UIDevice.isIPad {
+                self?.component.rowQuantityTablet = item.intValue
+            } else {
+                self?.component.rowQuantityPhone = item.intValue
+            }
+            self?.resetTilets()
+        }
+    }
+}