Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample.git into refactor/VDSTokens

VDSSample.xcodeproj/project.pbxproj

@@ -32,9 +32,12 @@
 /* End PBXAggregateTarget section */
 
 /* Begin PBXBuildFile section */
+		1808BEBE2BA4479500129230 /* CarouselScrollbarViewConttroller.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */; };
+		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
 		445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
 		44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
 		5FC35BE928D5235A004EBEAC /* ButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */; };
+		71B23C312B921D740027F7D9 /* PaginationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71B23C302B921D730027F7D9 /* PaginationViewController.swift */; };
 		EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */; };
 		EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */; };
 		EA0D1C332A673FD400E5C127 /* RadioButtonItemViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */; };
@@ -121,9 +124,12 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+		1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselScrollbarViewConttroller.swift; sourceTree = "<group>"; };
+		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
 		445BA07929C088470036A7C5 /* NotificationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NotificationViewController.swift; sourceTree = "<group>"; };
 		44604AD829CE1CF900E62B51 /* LineViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LineViewController.swift; sourceTree = "<group>"; };
 		5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonViewController.swift; sourceTree = "<group>"; };
+		71B23C302B921D730027F7D9 /* PaginationViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationViewController.swift; sourceTree = "<group>"; };
 		EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckboxViewController.swift; sourceTree = "<group>"; };
 		EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonViewController.swift; sourceTree = "<group>"; };
 		EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RadioButtonItemViewController.swift; sourceTree = "<group>"; };
@@ -296,36 +302,39 @@
 			isa = PBXGroup;
 			children = (
 				EA89203E28B66CE2006B9984 /* ScrollViewController */,
-				EA3C3BB228996775000CA526 /* MenuViewController.swift */,
-				EAD062A22A3913920015965D /* DropShawdowViewController.swift */,
 				EA297A672A02F5320031ED56 /* TableViewTestController.swift */,
-				EAB1D2C828AAAA1D00DAE764 /* BaseViewController.swift */,
+				EAD062A22A3913920015965D /* DropShawdowViewController.swift */,
-				EA4DB30328DCD25B00103EE3 /* BadgeViewController.swift */,
+				EA3C3BB228996775000CA526 /* MenuViewController.swift */,
 				EAD062AC2A3B86950015965D /* BadgeIndicatorViewController.swift */,
-				EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
+				EA4DB30328DCD25B00103EE3 /* BadgeViewController.swift */,
+				EAB1D2C828AAAA1D00DAE764 /* BaseViewController.swift */,
+				1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */,
 				EAB5FEEE2927E28400998C17 /* ButtonGroupViewController.swift */,
+				EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
 				5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */,
-				EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */,
+				1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */,
-				EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
 				EA89204D28B67332006B9984 /* CheckBoxGroupViewController.swift */,
+				EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
+				EA0D1C2E2A66CFE900E5C127 /* CheckboxViewController.swift */,
 				EA985C00296CC21C00F2FF2E /* IconViewController.swift */,
 				EAA5EEAC28EB6924003B3210 /* InputFieldViewController.swift */,
 				EAB1D2D328AC409F00DAE764 /* LabelViewController.swift */,
 				44604AD829CE1CF900E62B51 /* LineViewController.swift */,
 				EAD0688F2A55FC11002E3A2D /* LoaderViewController.swift */,
 				445BA07929C088470036A7C5 /* NotificationViewController.swift */,
+				71B23C302B921D730027F7D9 /* PaginationViewController.swift */,
 				EA89201828B56DF5006B9984 /* RadioBoxGroupViewController.swift */,
-				EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */,
-				EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */,
 				EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */,
+				EA0D1C322A673FD400E5C127 /* RadioButtonItemViewController.swift */,
+				EA0D1C302A673F3500E5C127 /* RadioButtonViewController.swift */,
 				EA5F86CD2A1E863F00BC83E4 /* TabsContainerViewController.swift */,
 				EA596AB92A16B2ED00300C4B /* TabsViewController.swift */,
-				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */,
+				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
 				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
-				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,
 				EA5E305B295111050082B959 /* TileletViewController.swift */,
+				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,
 				EA3C3BB328996775000CA526 /* ToggleViewController.swift */,
 				EAB2375F29E88D5D00AABE9A /* TooltipViewController.swift */,
 				EAB2376B29E9E74900AABE9A /* TrailingTooltipLabelViewController.swift */,
@@ -481,6 +490,7 @@
 				EA89205128B68307006B9984 /* TextField.swift in Sources */,
 				EA297A682A02F5320031ED56 /* TableViewTestController.swift in Sources */,
 				44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */,
+				1808BEBE2BA4479500129230 /* CarouselScrollbarViewConttroller.swift in Sources */,
 				EA3C3BB528996775000CA526 /* StoryboardInitable.swift in Sources */,
 				EA89201928B56DF5006B9984 /* RadioBoxGroupViewController.swift in Sources */,
 				EA3C3BB628996775000CA526 /* MenuViewController.swift in Sources */,
@@ -508,12 +518,14 @@
 				EAB2376029E88D5D00AABE9A /* TooltipViewController.swift in Sources */,
 				EA89204828B66CE2006B9984 /* ScrollViewKeyboardAvoiding.swift in Sources */,
 				EA0FC2C12912DC5500DF80B4 /* TextLinkCaretViewController.swift in Sources */,
+				71B23C312B921D740027F7D9 /* PaginationViewController.swift in Sources */,
 				EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,
 				EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */,
 				EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
 				EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
 				EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
 				EA985C25296E06EA00F2FF2E /* TextAreaViewController.swift in Sources */,
+				1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */,
 				EA81410E2A0ED8DC004F60D2 /* ButtonIconViewController.swift in Sources */,
 				EA985C20296DECF600F2FF2E /* IconName.swift in Sources */,
 				EA89204928B66CE2006B9984 /* KeyboardFrameChangeListening.swift in Sources */,
@@ -672,7 +684,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 54;
+				CURRENT_PROJECT_VERSION = 56;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -707,7 +719,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 54;
+				CURRENT_PROJECT_VERSION = 56;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/ViewControllers/BreadcrumbsViewController.swift

@@ -0,0 +1,92 @@
+//
+//  BreadcrumbsViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 05/03/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import VDSColorTokens
+import Combine
+
+class  BreadcrumbsViewController: BaseViewController<Breadcrumbs> {
+    
+    var selectedSwitch = Toggle()
+    var sampleSwitch = Toggle()
+    var selectedCrumbLabel = Label().with { $0.textStyle = .boldBodyMedium }
+    var allBreadcrumbs: [Breadcrumbs.BreadcrumbItemModel] = [
+        .init(text: "Home"),
+        .init(text: "Support", enabeled: false),
+        .init(text: "Service & Apps"),
+        .init(text: "My Verizon"),
+        .init(text: "Bill"),
+        .init(text: "Mobile Billing & Payments"),
+        .init(text: "Billing statement FAQs", selected: true)
+    ]
+    
+    var some: [Breadcrumbs.BreadcrumbItemModel] = [
+        .init(text: "Plans"),
+        .init(text: "Upgrade Plan"),
+        .init(text: "Billing Statement Frequently Asked Questions About Stuff You don't want to see", selected: true)
+    ]
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        let stack = UIStackView(arrangedSubviews: [component, selectedCrumbLabel]).with {
+            $0.axis = .vertical
+            $0.spacing = 25
+        }
+        addContentTopView(view: stack)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Last Crumb Selected", view: selectedSwitch)
+        addFormRow(label: "Large Sample", view: sampleSwitch)
+
+        selectedSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            component.breadcrumbs.last?.isSelected = sender.isOn
+        }
+        
+        sampleSwitch.onChange =  { [weak self] sender in
+            guard let self else { return }
+            self.component.breadcrumbModels = sender.isOn ? self.allBreadcrumbs : self.some
+            selectedSwitch.isOn = true
+            updatedCrumbLabel(crumb: component.breadcrumbs.last ?? nil)
+        }
+    }
+    
+    func setupPicker(){
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+            self?.selectedCrumbLabel.surface = item
+        }
+    }
+    
+    func updatedCrumbLabel(crumb: BreadcrumbItem?) {
+        selectedCrumbLabel.text = "Selected Crumb : \(crumb?.text ?? "")"
+    }
+    
+    func setupModel() {
+        //setup UI
+        component.breadcrumbModels = allBreadcrumbs
+        selectedSwitch.isOn = true
+        sampleSwitch.isOn = true
+        surfacePickerSelectorView.text = component.surface.rawValue
+
+        updatedCrumbLabel(crumb: component.breadcrumbs.last ?? nil)
+        //test setup to show component was picked
+        component.onBreadcrumbDidSelect = { [weak self] crumb in
+            guard let self else { return }
+            self.updatedCrumbLabel(crumb: crumb)
+        }
+        
+    }
+}

VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift

@@ -0,0 +1,121 @@
+//
+//  CarouselScrollbarViewConttroller.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 15/03/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import Combine
+import VDSColorTokens
+
+class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
+    
+    lazy var layoutPickerSelectorView = {
+        PickerSelectorView(title: "1UP",
+                           picker: self.picker,
+                           items: CarouselScrollbar.Layout.allCases)
+    }()
+    
+    var slidesTextField = NumericField()
+    var positionTextField = NumericField()
+    var currentPositionLabel = Label().with { $0.textStyle = .boldBodyMedium }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        let stack = UIStackView(arrangedSubviews: [component, currentPositionLabel]).with {
+            $0.axis = .vertical
+            $0.spacing = 25
+        }
+        addContentTopView(view: stack)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Layout", view: layoutPickerSelectorView)
+        addFormRow(label: "Number Of Slides", view: slidesTextField)
+        addFormRow(label: "Position", view: positionTextField)
+        
+        slidesTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else {
+                    return
+                }
+                self?.component.numberOfSlides = number.intValue
+                self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
+            }.store(in: &subscribers)
+        
+        positionTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else {
+                    return
+                }
+                self?.component.position = number.intValue
+            }.store(in: &subscribers)
+    }
+    
+    func setupModel() {
+        //setup UI
+        component.numberOfSlides = 4
+        surfacePickerSelectorView.text = component.surface.rawValue
+        slidesTextField.text = String(component.numberOfSlides)
+        positionTextField.text = String(component.position)
+        updatedPositionLabel(position: component.position, callbackText:"")
+
+        //setup test page to show scrubber id was changed
+        component.onScrubberDrag = { [weak self] scrubberId in
+            guard let self else { return }
+            positionTextField.text = String(scrubberId)
+            updatedPositionLabel(position: component.position, callbackText:"onScrubberDrag")
+        }
+        
+        /// will be called when the thumb move forward.
+        component.onMoveForward = { [weak self] scrubberId in
+            guard let self else { return }
+            updatedPositionLabel(position: component.position, callbackText:"onMoveForward")
+        }
+
+        /// will be called when the thumb move backward.
+        component.onMoveBackward = { [weak self] scrubberId in
+            guard let self else { return }
+            updatedPositionLabel(position: component.position, callbackText:"onMoveBackward")
+        }
+
+        /// will be called when the thumb touch start.
+        component.onThumbTouchStart = { [weak self] scrubberId in
+            guard let self else { return }
+            updatedPositionLabel(position: component.position, callbackText:"onThumbTouchStart")
+        }
+
+        /// will be called when the thumb touch end.
+        component.onThumbTouchEnd = { [weak self] scrubberId in
+            guard let self else { return }
+            updatedPositionLabel(position: component.position, callbackText:"onThumbTouchEnd")
+        }
+
+    }
+
+    func updatedPositionLabel(position: Int?, callbackText: String) {
+        currentPositionLabel.text = "\(callbackText) Thumb position : \(position ?? 1)"
+    }
+
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+            self?.currentPositionLabel.surface = item
+        }
+        
+        layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.selectedLayout = item
+            self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
+        }
+    }
+}

VDSSample/ViewControllers/LoaderViewController.swift

@@ -16,7 +16,6 @@ class LoaderViewController: BaseViewController<Loader>, LoaderLaunchable {
 
     override func viewDidLoad() {
         super.viewDidLoad()
-        contentTopView.height(constant: 80)
         addContentTopView(view: component)
         setupPicker()
     }

VDSSample/ViewControllers/MenuViewController.swift

@@ -70,9 +70,11 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "TableView Tester", completed: true, viewController: TableViewTestController.self),
         MenuComponent(title: "Badge", completed: true, viewController: BadgeViewController.self),
         MenuComponent(title: "Badge Indicator", completed: true, viewController: BadgeIndicatorViewController.self),
+        MenuComponent(title: "Breadcrumbs", completed: true, viewController: BreadcrumbsViewController.self),
         MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
         MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
+        MenuComponent(title: "Carousel Scrollbar", completed: true, viewController: CarouselScrollbarViewConttroller.self),
         MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
         MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),
         MenuComponent(title: "CheckboxGroup", completed: true, viewController: CheckboxGroupViewController.self),
@@ -82,17 +84,18 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
         MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
         MenuComponent(title: "Notification", completed: true, viewController: NotificationViewController.self),
+        MenuComponent(title: "Pagination", completed: true, viewController: PaginationViewController.self),
         MenuComponent(title: "RadioBoxGroup", completed: true, viewController: RadioBoxGroupViewController.self),
         MenuComponent(title: "RadioButton", completed: true, viewController: RadioButtonViewController.self),
         MenuComponent(title: "RadioButtonItem", completed: true, viewController: RadioButtonItemViewController.self),
         MenuComponent(title: "RadioButtonGroup", completed: true, viewController: RadioButtonGroupViewController.self),
 //        //MenuComponent(title: "TabsContainer", completed: false, viewController: TabsContainerViewController.self),
         MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
-        MenuComponent(title: "TextArea", completed: false, viewController: TextAreaViewController.self),
+        MenuComponent(title: "TextArea", completed: true, viewController: TextAreaViewController.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: "TileContainer", completed: true, viewController: TileContainerViewController.self),
-        MenuComponent(title: "Tilelet", completed: false, viewController: TileletViewController.self),
+        MenuComponent(title: "Tilelet", completed: true, viewController: TileletViewController.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/NotificationViewController.swift

@@ -29,21 +29,11 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
                            items: Notification.Style.allCases)
     }()
     
-    lazy var layoutTypePickerSelectorView = {
-        PickerSelectorView(title: "vertical", picker: self.picker, items: Notification.Layout.allCases)
-    }()
-    
-    var notification = Notification()
-
     override func viewDidLoad() {
         super.viewDidLoad()
 
-        stackView.insertArrangedSubview(notification, at: 0)
         addContentTopView(view: component)
-        
+                
-        notification.title = titleDefaultText
-        notification.subTitle = subtitleDefaultText
-        
         component.title = titleDefaultText
         component.subTitle = subtitleDefaultText
         titleTextField.text = titleDefaultText
@@ -60,7 +50,6 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Style", view: notificationTypePickerSelectorView)
-        addFormRow(label: "Layout", view: layoutTypePickerSelectorView)
         addFormRow(label: "Title", view: titleTextField)
         addFormRow(label: "SubTitle", view: subTitleTextField)
         addFormRow(label: "Hide Button Group", view: buttonGroupToggle)
@@ -73,31 +62,29 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
             print("onCloseClick: \(notification.title)")
         }
         
-        titleTextField.textPublisher.sink { newString in
+        titleTextField.textPublisher.sink { [weak self] newString in
+            guard let self else { return }
             self.component.title = newString
-            self.notification.title = newString
         }.store(in: &subscribers)
         
-        subTitleTextField.textPublisher.sink { newString in
+        subTitleTextField.textPublisher.sink { [weak self] newString in
+            guard let self else { return }
             self.component.subTitle = newString
-            self.notification.subTitle = newString
         }.store(in: &subscribers)
         
         buttonGroupToggle.onChange = { [weak self] toggle in
+            guard let self else { return }
             if toggle.isOn {
-                self?.component.primaryButtonModel = nil
+                self.component.primaryButtonModel = nil
-                self?.component.secondaryButtonModel = nil
+                self.component.secondaryButtonModel = nil
-                self?.notification.primaryButtonModel = nil
+                self.label.text = ""
-                self?.notification.secondaryButtonModel = nil
-
-                self?.label.text = ""
             } else {
-                self?.setupButtons(with: self?.firstButtonDefaultText, secondButtonText: self?.secondButtonDefaultText)
+                self.setupButtons(with: self.firstButtonDefaultText, secondButtonText: self.secondButtonDefaultText)
             }
         }
         
-        firstButtonTextField.textPublisher.sink { newString in
+        firstButtonTextField.textPublisher.sink { [weak self] newString in
-            
+            guard let self else { return }
             if newString.isEmpty {
                 self.component.primaryButtonModel = nil
                 self.component.secondaryButtonModel = nil
@@ -107,38 +94,30 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
             
         }.store(in: &subscribers)
         
-        secondButtonTextField.textPublisher.sink { newString in
+        secondButtonTextField.textPublisher.sink { [weak self] newString in
+            guard let self else { return }
             if !(self.firstButtonTextField.text?.isEmpty ?? true){
                 self.setupButtons(secondButtonText: newString)
             }
         }.store(in: &subscribers)
         
         hideCloseButtonToggle.onChange = { [weak self] toggle in
-            self?.component.hideCloseButton = toggle.isOn
+            guard let self else { return }
-            self?.notification.hideCloseButton = toggle.isOn
+            self.component.hideCloseButton = toggle.isOn
         }
         
     }
     
     func setupPicker() {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.surface = item
+            guard let self else { return }
-            self?.notification.surface = item
+            self.component.surface = item
-            self?.contentTopView.backgroundColor = item.color
+            self.contentTopView.backgroundColor = item.color
         }
         
         notificationTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
-            self?.component.style = item
-            self?.notification.style = item
-        }
-        
-        layoutTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
             guard let self else { return }
-            self.component.layout = item
+            self.component.style = item
-            self.notification.layout = item
-            if self.component.layout != item {
-                self.layoutTypePickerSelectorView.set(item: self.component.layout)
-            }
         }
     }
     
@@ -147,18 +126,12 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
             component.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
-            notification.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
-                self?.label.text = "\(button.text!) button click"
-            })
         }
         
         if let secondButtonText {
             component.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
-            notification.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
-                self?.label.text = "\(button.text!) button click"
-            })
         }
     }
 }

VDSSample/ViewControllers/PaginationViewController.swift

@@ -0,0 +1,48 @@
+//
+//  PaginationViewController.swift
+//  VDSSample
+//
+//  Created by Bandaru, Krishna Kishore on 01/03/24.
+//
+
+import UIKit
+import VDS
+
+final class PaginationViewController: BaseViewController<Pagination> {
+    
+    var totalPagesTextField = NumericField()
+    var selectedPageTextField = NumericField()
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        
+        addContentTopView(view: component)
+        totalPagesTextField.text = "10"
+        component.total = 10
+    }
+    
+    override func setupForm(){
+        super.setupForm()
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Total pages", view: totalPagesTextField)
+        addFormRow(label: "Selected page", view: selectedPageTextField)
+        setUpPublishers()
+    }
+    
+    func setUpPublishers() {
+        surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        totalPagesTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.total = number?.intValue ?? 0
+            }.store(in: &subscribers)
+        selectedPageTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.selectedPage = number?.intValue ?? 0
+            }.store(in: &subscribers)
+    }
+}

VDSSample/ViewControllers/TextAreaViewController.swift

@@ -5,7 +5,6 @@
 //  Created by Matt Bruce on 1/10/23.
 //
 
-import Foundation
 import Foundation
 import UIKit
 import VDS
@@ -23,28 +22,38 @@ class  TextAreaViewController: BaseViewController<TextArea> {
     var showErrorSwitch = Toggle()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
+    var maxLengthTextField = NumericField()
+    var readOnlySwitch = Toggle()
+
+    lazy var heightPickerSelectorView = {
+        PickerSelectorView(title: "2X",
+                           picker: self.picker,
+                           items: TextArea.Height.allCases)
+    }()
     
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
-
+        component.text = "Starting Text"
         setupPicker()
         setupModel()
     }
         
     override func setupForm(){
-        super.setupForm()  
+        super.setupForm()
         addFormRow(label: "Disabled", view: disabledSwitch)
         addFormRow(label: "Required", view: requiredSwitch)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Label Text", view: labelTextField)
         addFormRow(label: "Helper Text", view: helperTextField)
+        addFormRow(label: "Read Only", view: readOnlySwitch)
         addFormRow(label: "Error", view: showErrorSwitch)
         addFormRow(label: "Error Text", view: errorTextField)
-        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
-        
+        addFormRow(label: "Character Count", view: maxLengthTextField)
+        addFormRow(label: "Min Height", view: heightPickerSelectorView)
+
         requiredSwitch.onChange = { [weak self] sender in
             self?.component.required = sender.isOn
         }
@@ -61,6 +70,10 @@ class  TextAreaViewController: BaseViewController<TextArea> {
             self?.component.isEnabled = !sender.isOn
         }
 
+        readOnlySwitch.onChange = { [weak self] sender in
+            self?.component.readOnly = sender.isOn
+        }
+        
         labelTextField
             .textPublisher
             .sink { [weak self] text in
@@ -82,7 +95,10 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let number else { return }
+                guard let number else {
+                    self?.component.width = nil
+                    return
+                }
                 self?.component.width = number.cgFloatValue
             }.store(in: &subscribers)
         
@@ -98,6 +114,15 @@ class  TextAreaViewController: BaseViewController<TextArea> {
                 self?.updateTooltip()
             }.store(in: &subscribers)
         
+        maxLengthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else {
+                    self?.component.maxLength = nil
+                    return
+                }
+                self?.component.maxLength = number.intValue
+            }.store(in: &subscribers)
     }
     
     func setupModel() {
@@ -106,15 +131,14 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
         component.tooltipModel = .init(title: "Check the formatting of your address", content:"House/Building number then street name")
-
         component
             .publisher(for: .valueChanged)
             .sink { component in
-                if let text = component.value {
+//                if let text = component.value {
-                    print("text entry: \(text)")
+//                    print("text entry: \(text)")
-                } else {
+//                } else {
-                    print("text entry: null")
+//                    print("text entry: null")
-                }
+//                }
             }.store(in: &subscribers)
  
         //setup UI
@@ -135,6 +159,10 @@ class  TextAreaViewController: BaseViewController<TextArea> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
+        
+        heightPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.minHeight = item
+        }
     }
     
     func updateTooltip() {

VDSSample/ViewControllers/TextLinkCaretViewController.swift

@@ -24,7 +24,7 @@ class TextLinkCaretViewController: BaseViewController<TextLinkCaret> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component)
 
         setupPicker()
         setupModel()

VDSSample/ViewControllers/TextLinkViewController.swift

@@ -24,7 +24,7 @@ class TextLinkViewController: BaseViewController<TextLink> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component, edgeSpacing: 16.0), edgeSpacing: 0.0)
+        addContentTopView(view: component)
 
         setupPicker()
         setupModel()

VDSSample/ViewControllers/TileletViewController.swift

@@ -22,7 +22,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     lazy var otherStandardStylePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
-                           items: Tilelet.SubTitleModel.StandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
+                           items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
     
     lazy var subtitleColorPickerSelectorView = {
@@ -31,18 +31,173 @@ class TileletViewController: BaseViewController<Tilelet> {
                                 items: [.primary, .secondary])
     }()
     
-    var clickableSwitch = Toggle()
+    lazy var textPositionPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
     
+    lazy var paddingPickerSelectorView = {
+        PickerSelectorView(title: "small",
+                           picker: self.picker,
+                           items: Tilelet.Padding.allCases)
+    }()
+    lazy var badgeFillColorPickerSelectorView = {
+        PickerSelectorView(title: "red",
+                           picker: self.picker,
+                           items: Badge.FillColor.allCases)
+    }()
+    lazy var badgeNumberOfLinesPickerSelectorView = {
+        PickerSelectorView(title: "one",
+                           picker: self.picker,
+                           items: BadgeViewController.NumberOfLines.allCases)
+    }()
+    lazy var scalingTypePickerSelectorView = {
+        PickerSelectorView(title: "white",
+                           picker: self.picker,
+                           items: Tilelet.AspectRatio.allCases)
+    }()
+    lazy var imageFallbackColorPickerSelectorView = {
+        SurfacePickerSelectorView(picker: self.picker)
+    }()
+    
+    lazy var backgroundEffectSelectorView = {
+        PickerSelectorView(title: "none",
+                           picker: self.picker,
+                           items: TileContainerViewController.BackgroundEffect.allCases)
+    }()
+    
+    lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        if case .custom(let hexCode) = component.color {
+            picker.selectedColor = UIColor(hexString: hexCode)
+        }
+        picker.delegate = self
+        return picker
+    }()
+    
+    lazy var backgroundColorPickerSelectorView = {
+        PickerSelectorView(title: "white",
+                           picker: self.picker,
+                           items: BackgroundColor.allCases)
+    }()
+
+    lazy var gradientColorView1: UIStackView = {
+        let stackView = UIStackView()
+        let indicatorWrapper = View()
+        indicatorWrapper.addSubview(gradientColor1View)
+        indicatorWrapper.height(32)
+        indicatorWrapper.pinTop()
+        indicatorWrapper.pinLeading()
+        indicatorWrapper.pinBottom()
+        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
+        stackView.addArrangedSubview(indicatorWrapper)
+        stackView.distribution = .fillEqually
+        stackView.alignment = .fill
+        var button = Button().with { instance in
+            instance.size = .small
+            instance.use = .secondary
+            instance.text = "Select"
+            instance.onClick = { [weak self] in
+                self?.gradientColorTapped($0, view: self?.gradientColor1View)
+            }
+        }
+        button.tag = 1
+        let buttonWrapper = View()
+        buttonWrapper.addSubview(button)
+        buttonWrapper.height(32)
+        button.pinTop()
+        button.pinTrailing()
+        button.pinBottom()
+        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
+        stackView.addArrangedSubview(buttonWrapper)
+        stackView.tag = 1
+        stackView.spacing = 10
+        return stackView
+    }()
+    
+    lazy var gradientColorView2: UIStackView = {
+        let stackView = UIStackView()
+        stackView.distribution = .fillEqually
+        stackView.alignment = .fill
+        stackView.spacing = 10
+        let indicatorWrapper = View()
+        indicatorWrapper.addSubview(gradientColor2View)
+        indicatorWrapper.height(32)
+        indicatorWrapper.pinTop()
+        indicatorWrapper.pinLeading()
+        indicatorWrapper.pinBottom()
+        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
+        stackView.addArrangedSubview(indicatorWrapper)
+        var button = Button().with { instance in
+            instance.size = .small
+            instance.use = .secondary
+            instance.text = "Select"
+            instance.onClick = { [weak self] in
+                self?.gradientColorTapped($0, view: self?.gradientColor2View)
+            }
+        }
+        button.tag = 2
+        let buttonWrapper = View()
+        buttonWrapper.addSubview(button)
+        buttonWrapper.height(32)
+        button.pinTop()
+        button.pinTrailing()
+        button.pinBottom()
+        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
+        stackView.addArrangedSubview(buttonWrapper)
+        stackView.tag = 2
+        return stackView
+    }()
+    
+    var gradientColor1View: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
+        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
+        view.tag = 1
+        return view
+    }()
+    
+    var gradientColor2View: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
+        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
+        view.tag = 2
+        return view
+    }()
+    
+    lazy var textAlignmentPickerSelectorView = {
+        PickerSelectorView(title: "left",
+                           picker: self.picker,
+                           items: TitleLockup.TextAlignment.allCases)
+    }()
+    
+    let backgroundImage = UIImage(named: "backgroundTest")!
+    var clickableSwitch = Toggle()
+    var eyebrowTextField = TextField()
     var titleTextField = TextField()
     var subTitleTextField = TextField()
     var widthTextField = NumericField()
     var heightTextField = NumericField()
     var textPercentageTextField = NumericField()
     var textWidthTextField = NumericField()
-    
+    var showBackgroundImageSwitch = Toggle()
     var showDescriptionIconSwitch = Toggle()
     var showDirectionalIconSwitch = Toggle()
     var badgeTextField = TextField()
+    var eyebrowIsBold = Toggle().with { $0.isOn = true }
+    var titleIsBold = Toggle().with { $0.isOn = true }
+    var colorPickerType: ColorPickerType = .backgroundColor
+    var selectedGradient1Color: String?
+    var selectedGradient2Color: String?
+    var selectedGradientColorView: UIView?
+    var showDropShadowSwitch = Toggle()
+    var backgroundColor: BackgroundColor = .black
+    var maxWidthTextField = NumericField()
+
+    var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -51,26 +206,49 @@ class TileletViewController: BaseViewController<Tilelet> {
         setupPicker()
         setupModel()
     }
-        
+    
     override func setupForm(){
-        super.setupForm()  
+        super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addActionRow()
         addFormRow(label: "Clickable", view: clickableSwitch)
-        
+                
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
+        addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
-        addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView)
+        addFormRow(label: "Padding", view: paddingPickerSelectorView)
-        
-        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: "Height", view: heightTextField)
+        addFormRow(label: "Height", view: heightTextField)
+        addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
         addFormRow(label: "Text Width", view: textWidthTextField)
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
-        addFormRow(label: "Badge Text", view: badgeTextField)
+        addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView)
         addFormRow(label: "Description Icon", view: showDescriptionIconSwitch)
         addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch)
+
+        addFormRow(label: "Badge Text", view: badgeTextField)
+        addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView)
+        addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
+        addFormRow(label: "Badge Max Width", view: maxWidthTextField)
+
+        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
+        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
+        
+        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
+        addFormRow(label: "Title Text", view: titleTextField)
+        addFormRow(label: "Title is Bold", view: titleIsBold)
+        
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        addFormRow(label: "Subtitle Text", view: subTitleTextField)
+                        
+        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
+        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
+        addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
+        addFormRow(label: "Background Effect", view: backgroundEffectSelectorView)
+        //Gradient Section
+        gradientColorsFormStackView.addFormRow(label: "Gradient Color1", view: gradientColorView1)
+        gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
+        append(section: gradientColorsFormStackView)
         
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -84,13 +262,21 @@ class TileletViewController: BaseViewController<Tilelet> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                self?.component.height = number?.cgFloatValue
+                guard let self else { return }
+                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self.component.height = value
+                    self.component.layoutIfNeeded()
+                }
             }.store(in: &subscribers)
-
+        
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                self?.component.width = number?.cgFloatValue
+                guard let self else { return }
+                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self.component.width = value
+                    self.component.layoutIfNeeded()
+                }
             }.store(in: &subscribers)
         
         textWidthTextField
@@ -150,7 +336,48 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self?.component.directionalIconModel = nil
             }
         }
+
+        eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
+            self?.setEyebrowModel()
+        }.store(in: &subscribers)
+
+        titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
+            self?.setTitleModel()
+        }.store(in: &subscribers)
         
+        paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.padding = item
+        }
+        
+        eyebrowTextField.textPublisher
+            .sink { [weak self] text in
+                self?.setEyebrowModel()
+            }.store(in: &subscribers)
+        
+        showBackgroundImageSwitch.onChange = { [weak self] sender in
+            if let image = self?.backgroundImage, sender.isOn {
+                self?.component.backgroundImage = image
+                if self?.component.width == nil {
+                }
+            } else {
+                self?.component.backgroundImage = nil
+            }
+        }
+        
+        showDropShadowSwitch.onChange =  { [weak self] sender in
+            self?.component.showDropShadows = sender.isOn
+        }
+        
+        imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.imageFallbackColor = item
+        }
+        
+        maxWidthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                guard let number else { return }
+                self?.component.badgeModel?.maxWidth = number.cgFloatValue
+            }.store(in: &subscribers)
     }
     
     func setupModel() {
@@ -160,24 +387,26 @@ class TileletViewController: BaseViewController<Tilelet> {
         component.surface = .light
         component.titleModel = titleModel
         component.subTitleModel = subTitleModel
-        
+        component.padding = .small
         //setup UI
+        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
+        textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
         surfacePickerSelectorView.text = component.surface.rawValue
-        otherStandardStylePickerSelectorView.text = subTitleModel.standardStyle.rawValue
+        otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
         subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
-        
+        textPositionPickerSelectorView.text = component.textPostion.rawValue
-        self.updateOtherTextStyles()
+        scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
-
+        updateOtherTextStyles()
     }
     
     //sub models
     func setBadgeModel() {
         if let text = badgeTextField.text, !text.isEmpty {
-            component.badgeModel = Tilelet.BadgeModel(text: text)
+            component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
         } else {
             component.badgeModel = nil
         }
@@ -185,7 +414,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = Tilelet.TitleModel(text: text, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -193,20 +422,28 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.subTitleModel = nil
         }
     }
-        
+    
+    func setEyebrowModel() {
+        if let text = eyebrowTextField.text, !text.isEmpty {
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+        } else {
+            component.eyebrowModel = nil
+        }
+    }
+    
     func updateOtherTextStyles() {
         let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
-        let otheritems = items.compactMap { Tilelet.SubTitleModel.StandardStyle(rawValue: $0.rawValue)! }
+        let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
         otherStandardStylePickerSelectorView.items = otheritems
         otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
         setSubTitleModel()
     }
-
+    
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
@@ -227,6 +464,82 @@ class TileletViewController: BaseViewController<Tilelet> {
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setSubTitleModel()
         }
+        
+        textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            self.component.textPostion = item
+        }
+        
+        badgeFillColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.badgeModel?.fillColor = item
+        }
+        
+        badgeNumberOfLinesPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.badgeModel?.numberOfLines = item.intValue
+        }
+        
+        scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.aspectRatio = item
+            self?.component.layoutIfNeeded()
+            self?.showDebug(show: self?.debugViewSwitch.isOn ?? false)
+        }
+        
+        backgroundEffectSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            if let effect = item.effect {
+                self.component.backgroundEffect = self.getTilelet(effect: effect)
+                self.gradientColorsFormStackView.isHidden = true
+                self.selectedGradient1Color = nil
+                self.selectedGradient1Color = nil
+                self.gradientColor1View.backgroundColor = .clear
+                self.gradientColor2View.backgroundColor = .clear
+            } else {
+                self.colorPickerType = .gradientColors
+                self.gradientColorsFormStackView.isHidden = false
+            }
+        }
+        
+        textAlignmentPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.titleLockup.textAlignment = item
+        }
+        
+        backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            self.component.color = self.getTilelet(backgroundColor: item)
+        }
+    }
+    
+    func gradientColorTapped(_ sender: Button, view: UIView?) {
+        selectedGradientColorView = view
+        let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
+        if let selectedColor {
+            colorPicker.selectedColor = UIColor(hexString: selectedColor)
+        }
+        present(colorPicker, animated: true)
+    }
+    
+    func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
+        switch effect {
+        case .transparency:
+            Tilelet.BackgroundEffect.transparency
+        case .gradient(let firstColor, let secondColor):
+            Tilelet.BackgroundEffect.gradient(firstColor, secondColor)
+        default:
+            Tilelet.BackgroundEffect.none
+        }
+    }
+    
+    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor {
+        switch backgroundColor {
+        case .primary:
+                .primary
+        case .secondary:
+                .secondary
+        case .white:
+                .white
+        case .black:
+                .black
+        }
     }
 }
 
@@ -243,3 +556,57 @@ extension TileletViewController: ComponentSampleable {
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
+
+extension TileletViewController: UIColorPickerViewControllerDelegate {
+    
+    //Internal helper enum to identiy the configuration
+    enum ColorPickerType {
+        case backgroundColor, gradientColors, contentViewBackgroundColor
+    }
+
+    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        dismiss(animated: true)
+    }
+    
+    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        guard let hexString = viewController.selectedColor.hexString else { return }
+        switch colorPickerType {
+        case .contentViewBackgroundColor:
+            component.containerView.backgroundColor = UIColor(hexString: hexString)
+        case .backgroundColor:
+            component.color = .custom(hexString)
+        case .gradientColors:
+            guard let selectedGradientColorView else { return }
+            if selectedGradientColorView.tag == 1 {
+                selectedGradient1Color = hexString
+            } else {
+                selectedGradient2Color = hexString
+            }
+            selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
+            if let selectedGradient1Color, let selectedGradient2Color {
+                component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
+            }
+        }
+    }
+}
+
+extension TileletViewController {
+    
+    enum BackgroundColor: String, CaseIterable {
+        
+        case primary, secondary, white, black
+        
+        var color: TileContainer.BackgroundColor? {
+            switch self {
+            case .primary:
+                    .primary
+            case .secondary:
+                    .secondary
+            case .white:
+                    .white
+            case .black:
+                    .black
+            }
+        }
+    }
+}

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -106,7 +106,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
-        otherStandardStylePickerSelectorView.text = subTitleModel.standardStyle.rawValue
+        otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
         subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         eyebrowTextField.text = eyebrowModel.text
@@ -139,7 +139,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         let style = otherStandardStylePickerSelectorView.selectedItem
     
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = TitleLockup.SubTitleModel(text: text, standardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem)
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem)
             debug(type: "SubTitle", textStyle: style.value.regular)
         } else {
             component.subTitleModel = nil