Merge branch 'develop' of https://gitlab.verizon.com/BPHV_MIPS/vds_ios_sample into vasavk/inputStepper

VDSSample.xcodeproj/project.pbxproj

@@ -37,6 +37,7 @@
 		1832AC5B2BA1347B008AE476 /* BreadcrumbsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */; };
 		186D13CD2BBA990800986B53 /* DropdownSelectViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */; };
 		18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A3F12F2BD9332500498E4A /* CalendarViewController.swift */; };
+		18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18AE87512C06FDD60075F181 /* CarouselViewController.swift */; };
 		440B84CC2BD8E98B004A732A /* TableViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 440B84CB2BD8E98B004A732A /* TableViewController.swift */; };
 		445BA07A29C088470036A7C5 /* NotificationViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 445BA07929C088470036A7C5 /* NotificationViewController.swift */; };
 		44604AD929CE1CF900E62B51 /* LineViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 44604AD829CE1CF900E62B51 /* LineViewController.swift */; };
@@ -135,6 +136,7 @@
 		1832AC5A2BA1347B008AE476 /* BreadcrumbsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbsViewController.swift; sourceTree = "<group>"; };
 		186D13CC2BBA990800986B53 /* DropdownSelectViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropdownSelectViewController.swift; sourceTree = "<group>"; };
 		18A3F12F2BD9332500498E4A /* CalendarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarViewController.swift; sourceTree = "<group>"; };
+		18AE87512C06FDD60075F181 /* CarouselViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselViewController.swift; sourceTree = "<group>"; };
 		440B84CB2BD8E98B004A732A /* TableViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TableViewController.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>"; };
@@ -330,6 +332,7 @@
 				EA81410D2A0ED8DC004F60D2 /* ButtonIconViewController.swift */,
 				5FC35BE828D5235A004EBEAC /* ButtonViewController.swift */,
 				18A3F12F2BD9332500498E4A /* CalendarViewController.swift */,
+				18AE87512C06FDD60075F181 /* CarouselViewController.swift */,
 				1808BEBD2BA4479500129230 /* CarouselScrollbarViewConttroller.swift */,
 				EA89204D28B67332006B9984 /* CheckBoxGroupViewController.swift */,
 				EAF7F09B2899B92400B287F5 /* CheckboxItemViewController.swift */,
@@ -550,6 +553,7 @@
 				EAF7F09C2899B92400B287F5 /* CheckboxItemViewController.swift in Sources */,
 				EA0D1C2F2A66CFE900E5C127 /* CheckboxViewController.swift in Sources */,
 				18A3F1302BD9332500498E4A /* CalendarViewController.swift in Sources */,
+				18AE87522C06FDD60075F181 /* CarouselViewController.swift in Sources */,
 				EA596ABA2A16B2ED00300C4B /* TabsViewController.swift in Sources */,
 				EA89204E28B67332006B9984 /* CheckBoxGroupViewController.swift in Sources */,
 				EAA5EEAD28EB6924003B3210 /* InputFieldViewController.swift in Sources */,
@@ -717,7 +721,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 67;
+				CURRENT_PROJECT_VERSION = 71;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -753,7 +757,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 67;
+				CURRENT_PROJECT_VERSION = 71;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Supporting Files/Resources/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "VZ-My-Verizon-iOS-1024x1024.png",
+      "filename" : "Icon on stone.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

VDSSample/ViewControllers/BaseViewController.swift

@@ -252,8 +252,16 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
         NotificationCenter.default.publisher(for: UIAccessibility.voiceOverStatusDidChangeNotification).sink { [weak self] _ in
             if UIAccessibility.isVoiceOverRunning {
                 if let component = self?.component {
-                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) { [weak self] in
-                        self?.loadCustomRotors()
+                        guard let self else { return }
+                        loadCustomRotors()
+                        if let rotors = component.accessibilityCustomRotors {
+                            if var accessibilityCustomRotors {
+                                accessibilityCustomRotors.append(contentsOf: rotors)
+                            } else {
+                                accessibilityCustomRotors = rotors
+                            }
+                        }
                         UIAccessibility.post(notification: .screenChanged, argument: component)
                     }
                 }

VDSSample/ViewControllers/CarouselScrollbarViewConttroller.swift

@@ -114,7 +114,7 @@ class CarouselScrollbarViewConttroller: BaseViewController<CarouselScrollbar> {
         }
         
         layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.selectedLayout = item
+            self?.component.layout = item
             self?.component.position = Int(self?.positionTextField.text ?? "1") ?? 1
         }
     }

VDSSample/ViewControllers/CarouselViewController.swift

@@ -0,0 +1,214 @@
+//
+//  CarouselViewController.swift
+//  VDSSample
+//
+//  Created by Kanamarlapudi, Vasavi on 29/05/24.
+//
+
+import Foundation
+import UIKit
+import VDS
+import Combine
+import VDSCoreTokens
+
+class CarouselViewController: BaseViewController<Carousel> {
+    
+    let label = Label()
+    
+    lazy var paginationDisplayPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.PaginationDisplay.allCases)
+    }()
+    
+    lazy var peekPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Peek.allCases)
+    }()
+    
+    lazy var gutterPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Gutter.allCases)
+    }()
+    
+    lazy var layoutPickerSelectorView = {
+        PickerSelectorView(title: "1UP",
+                           picker: self.picker,
+                           items: UIDevice.isIPad ? CarouselScrollbar.Layout.allCases : [CarouselScrollbar.Layout.oneUP, CarouselScrollbar.Layout.twoUP, CarouselScrollbar.Layout.threeUP])
+    }()
+    
+    lazy var paginationKindPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: ButtonIcon.Kind.allCases)
+    }()
+    
+    lazy var horizAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Horizontal.allCases)
+    }()
+    
+    lazy var vertAlignmtPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Carousel.Vertical.allCases)
+    }()
+    
+    var paginationFloatingSwitch = Toggle()
+    var paginationInsetField = NumericField()
+    var selectedIndexField = NumericField()
+    var rows: [UIView] = []
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        addContentTopView(view: component)
+        setupPicker()
+        setupModel()
+    }
+    
+    override func setupForm() {
+        super.setupForm()
+        //add form rows
+        addFormRow(label: "onChange", view: label)
+        addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Pagination Display", view: paginationDisplayPickerSelectorView)
+        addFormRow(label: "Peek", view: peekPickerSelectorView)
+        addFormRow(label: "Gutter", view: gutterPickerSelectorView)
+        addFormRow(label: "Layout", view: layoutPickerSelectorView)
+//        addFormRow(label: "Selected Group Index", view: selectedIndexField)
+        addFormRow(label: "Pagination Kind", view: paginationKindPickerSelectorView)
+        addFormRow(label: "Pagination Float", view: paginationFloatingSwitch)
+        addFormRow(label: "Pagination Inset", view: paginationInsetField)
+        addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
+        addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
+        
+        selectedIndexField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number, number.intValue >= 0 {
+                    self?.component.groupIndex = number.intValue
+                } else {
+                    self?.component.groupIndex = 0
+                }
+            }.store(in: &subscribers)
+        
+        paginationInsetField
+            .numberPublisher
+            .sink { [weak self] number in
+                if let number {
+                    self?.component.paginationInset = number.cgFloatValue
+                } else {
+                    self?.component.paginationInset =  UIDevice.isIPad ? VDSLayout.space3X : VDSLayout.space2X
+                }
+            }.store(in: &subscribers)
+        
+        paginationFloatingSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
+        }
+        
+    }
+    
+    func setupModel() {
+        //setup UI
+        paginationDisplayPickerSelectorView.text = component.paginationDisplay.rawValue
+        peekPickerSelectorView.text = component.peek.rawValue
+        gutterPickerSelectorView.text = component.gutter.rawValue
+        layoutPickerSelectorView.text = component.layout.rawValue
+        paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
+        paginationFloatingSwitch.isOn = true
+        paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
+        let onClick: (ButtonBase) -> Void = { button in print("\(button.text!) clicked")}
+        rows.append(Label().with { $0.text = "Offer you best deals on phones, tablets, home, internet and more. Pre order the new version mobiles and get off *T&C apply."; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Secondary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Get iPhone 15 on us. Online only. ";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "Primary"; $0.onClick =  onClick})
+        rows.append(Label().with { $0.text = "Unlimited plans. No trade-in required.";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Label().with { $0.text = "With trade-in. Any condition guaranteed";  $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping})
+        rows.append(Button().with{ $0.use = .primary; $0.text = "More"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Shop"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Buy"; $0.onClick =  onClick})
+        rows.append(Button().with{ $0.use = .secondary; $0.text = "Offer"; $0.onClick =  onClick})
+        component.views = rows.compactMap({ view in
+              return TileContainer().with { instance in
+                instance.aspectRatio = .none
+                instance.addContentView(view)
+                instance.color = .custom(.lightGray)
+              }
+            })
+        label.text = "0"
+        
+        component.slotAlignment = .init(vertical: Carousel.Vertical.top, horizontal: Carousel.Horizontal.left)
+        horizAlignmtPickerSelectorView.text = Carousel.Horizontal.left.rawValue
+        vertAlignmtPickerSelectorView.text = Carousel.Vertical.top.rawValue
+        
+        // Callback when moving the carousel. Returns selectedGroupIndex.
+        component.onChange = { [weak self] selectedGroupIndex in
+            guard let self else { return }
+            label.text = "\(selectedGroupIndex)"
+        }
+    }
+    
+    func setupPicker() {
+        surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.surface = item
+            self?.contentTopView.backgroundColor = item.color
+        }
+        
+        paginationDisplayPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.paginationDisplay = item
+            if (self?.component.peek == Carousel.Peek.none) && item == .none {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.paginationDisplayPickerSelectorView.text = "persistent"
+                }
+            }
+        }
+        
+        peekPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.peek = item
+            if item == .none {
+                self?.paginationDisplayPickerSelectorView.text = "persistent"
+            } else if item == .minimum && UIDevice.isIPad {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "standard"
+                }
+            } else if item == .standard && !UIDevice.isIPad && (self?.component.layout != CarouselScrollbar.Layout.oneUP) {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
+            }
+        }
+        
+        gutterPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.gutter = item
+        }
+        
+        layoutPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            if item != .oneUP && !UIDevice.isIPad && self?.component.peek == Carousel.Peek.standard {
+                DispatchQueue.main.asyncAfter(deadline: .now() + 0.0) {
+                    self?.peekPickerSelectorView.text = "minimum"
+                }
+            }
+            self?.component.layout = item
+            self?.label.text = "0"
+        }
+        
+        paginationKindPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            guard let self else { return }
+            self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
+        }
+        
+        vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
+        }
+        
+        horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            guard let self else { return }
+            self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
+        }
+    }
+}

VDSSample/ViewControllers/DatePickerViewController.swift

@@ -93,6 +93,37 @@ class DatePickerViewController: BaseViewController<DatePicker> {
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         append(section: getCalendarSection())
+        append(section: .init().with({
+            func datePicker() -> VDS.DatePicker {
+                VDS.DatePicker().with {
+                    $0.calendarModel = .init(minDate: Date().startOfMonth, maxDate: Calendar.current.date(byAdding: .month, value: 2, to: Date())!)
+                }
+            }
+            $0.title = "UI Testing"
+            $0.addFormRow(label: "Below Test", view: datePicker())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Test Space", view: View())
+            $0.addFormRow(label: "Above Test", view: datePicker())
+        }))
+
         disabledSwitch.onChange = { [weak self] sender in
             self?.component.isEnabled = !sender.isOn
         }
@@ -154,7 +185,6 @@ class DatePickerViewController: BaseViewController<DatePicker> {
             .sink { [weak self] text in
                 self?.updateTooltip()
             }.store(in: &subscribers)
-        
     }
     
     func setupModel() {
@@ -227,8 +257,7 @@ extension DatePickerViewController {
         section.addFormRow(label: "Indicator One Date", view: indicatorOnePicker)
         section.addFormRow(label: "Indicator Two Date", view: indicatorTwoPicker)
         section.addFormRow(label: "Indicator Three Date", view: indicatorThreePicker)
-        
+                
-        
         containerBorderSwitch.onChange = { [weak self] sender in
             self?.updateCalendarModel()
         }
@@ -307,8 +336,7 @@ extension DatePickerViewController {
     }
     
     func updateCalendarModel() {
-        component.calendarModel = .init(surface: component.surface,
+        component.calendarModel = .init(hideContainerBorder: containerBorderSwitch.isOn,
-                                        hideContainerBorder: containerBorderSwitch.isOn,
                                         hideCurrentDateIndicator: hideCurrentDateIndicatorSwitch.isOn,
                                         activeDates: activeDates,
                                         inactiveDates: inactiveDates,

VDSSample/ViewControllers/MenuViewController.swift

@@ -75,6 +75,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
         MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
         MenuComponent(title: "Calendar", completed: true, viewController: CalendarViewController.self),
+        MenuComponent(title: "Carousel", completed: true, viewController: CarouselViewController.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),

VDSSample/ViewControllers/TableViewController.swift

@@ -10,6 +10,23 @@ import VDS
 import UIKit
 import VDSCoreTokens
 
+enum TableLineStyle: String, CaseIterable {
+    case none
+    case primary
+    case secondary
+    
+    func lineStyle() -> Line.Style? {
+        switch self {
+        case .primary:
+            return Line.Style.primary
+        case .secondary:
+            return Line.Style.secondary
+        case .none:
+            return nil
+        }
+    }
+}
+
 class TableViewController: BaseViewController<Table> {
 
     var striped = Toggle()
@@ -21,11 +38,11 @@ class TableViewController: BaseViewController<Table> {
     }
     
     lazy var headerLineStylePicker = {
-        PickerSelectorView(title: "primary", picker: self.picker, items: Line.Style.allCases)
+        PickerSelectorView(title: "primary", picker: self.picker, items: TableLineStyle.allCases)
     }()
     
     lazy var rowLineStylePicker = {
-        PickerSelectorView(title: "secondary", picker: self.picker, items: Line.Style.allCases)
+        PickerSelectorView(title: "secondary", picker: self.picker, items: TableLineStyle.allCases)
     }()
     
     lazy var paddingPicker = {
@@ -55,6 +72,20 @@ class TableViewController: BaseViewController<Table> {
         
         striped.onChange = { [weak self] sender in
             self?.component.striped = sender.isOn
+            
+            let headerStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.headerLineStylePicker.text ?? "")
+            let rowStyle = sender.isOn ? nil : TableLineStyle(rawValue: self?.rowLineStylePicker.text ?? "")
+            
+            var headers = self?.component.tableHeader ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&headers, style: headerStyle?.lineStyle())
+            self?.component.tableHeader = headers
+            
+            var rows = self?.component.tableRows ?? [TableRowModel]()
+            self?.updateBottomLineStyle(items:&rows, style: rowStyle?.lineStyle())
+            self?.component.tableRows = rows
+            
+            self?.component.padding = .compact
+            self?.paddingPicker.text = Table.Padding.compact.rawValue
         }
         
         fillContainer.onChange = { [weak self] sender in
@@ -82,28 +113,14 @@ class TableViewController: BaseViewController<Table> {
         
         headerLineStylePicker.onPickerDidSelect = { [weak self] item in
             var headers = self?.component.tableHeader ?? [TableRowModel]()
-            for currentHeaderIndex in 0..<headers.count {
+            self?.updateBottomLineStyle(items:&headers, style: item.lineStyle())
-                var currentHeader = headers[currentHeaderIndex]
-                for currentHeaderItem in 0..<currentHeader.columnsCount {
-                    currentHeader.columns[currentHeaderItem].bottomLine = item
-                }
-                headers[currentHeaderIndex] = currentHeader
-            }
             self?.component.tableHeader = headers
         }
         
         rowLineStylePicker.onPickerDidSelect = { [weak self] item in
             
             var rows = self?.component.tableRows ?? [TableRowModel]()
-            
+            self?.updateBottomLineStyle(items:&rows, style: item.lineStyle())
-            for currentRowIndex in 0..<rows.count {
-                var currentRow = rows[currentRowIndex]
-                for currentRowItem in 0..<currentRow.columnsCount {
-                    currentRow.columns[currentRowItem].bottomLine = item
-                }
-                rows[currentRowIndex] = currentRow
-            }
-            
             self?.component.tableRows = rows
         }
         
@@ -117,12 +134,22 @@ class TableViewController: BaseViewController<Table> {
         customColumnWidthSize.backgroundColor = enable ? UIColor.white : VDSColor.paletteGray85
     }
     
+    func updateBottomLineStyle(items:inout [TableRowModel], style: Line.Style?) {
+        for currentRowIndex in 0..<items.count {
+            var currentRow = items[currentRowIndex]
+            for currentRowItem in 0..<currentRow.columnsCount {
+                currentRow.columns[currentRowItem].bottomLine = style
+            }
+            items[currentRowIndex] = currentRow
+        }
+    }
+    
     func setupModel() {
         ///Header row
         
         self.component.tableHeader = [TableRowModel(columns: [TableItemModel(bottomLine: .primary, component: nil),
                                                               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 })])]
+                                                              TableItemModel(bottomLine: .primary, component: Label().with { $0.text = "Call filter"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping })], isHeader: true)]
         
         ///First row
         var rows = [TableRowModel(columns: [TableItemModel(bottomLine: .secondary, component: Label().with { $0.text = "Cost"; $0.textStyle = UIDevice.isIPad ? .bodyLarge : .bodySmall; $0.lineBreakMode = .byWordWrapping}),

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -115,54 +115,77 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     
     override func viewDidLoad() {
         super.viewDidLoad()
-        addContentTopView(view: .makeWrapper(for: component))
+        
-        component.width = 300
+        let mainView = View()
+        mainView.backgroundColor = .purple
+        
+        ///top
+        let topView = View()
+        topView.backgroundColor = .yellow
+
+        let topLabel = Label()
+        topLabel.text = "Do you want to Register?"
+        
+        let topButton = Button()
+        topButton.setTitle("Register", for: .normal)
+
+        ///bottom
+        let bottomView = View()
+        bottomView.backgroundColor = .green
+
+        let bottomLabel = Label()
+        bottomLabel.text = "Forgot your info?"
+
+        let bottomButton = Button()
+        bottomButton.setTitle("Forgot Password", for: .normal)
+
+        mainView.addSubview(topView)
+        mainView.addSubview(bottomView)
+        
+        topView.addSubview(topLabel)
+        topView.addSubview(topButton)
+
+        bottomView.addSubview(bottomLabel)
+        bottomView.addSubview(bottomButton)
+        let space: CGFloat = 5
+        topView
+            .pinTop(space*2)
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(anchor: bottomView.topAnchor, constant: space*2)
+        
+        topLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: topButton.topAnchor, constant: space)
+        
+        topButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
+        bottomView
+            .pinLeading(space*2)
+            .pinTrailing(space*2)
+            .pinBottom(space*2)
+
+        bottomLabel
+            .pinTop(space)
+            .pinLeading(space)
+            .pinTrailing(space)
+            .pinBottom(anchor: bottomButton.topAnchor, constant: space)
+        
+        bottomButton
+            .pinBottom(space)
+            .pinLeading(space)
+            .pinTrailingLessThanOrEqualTo(anchor: nil, constant: space)
+
         component.color = .secondary
         component.accessibilityLabel = "Tile Container"
-        
-        let level2View = View()
-        level2View.backgroundColor = .purple
-        
-        let level3View = View()
-        level3View.backgroundColor = .yellow
-        level2View.addSubview(level3View)
-        level3View.pinToSuperView(.uniform(15))
 
-        let level2label = Label()
+        addContentTopView(view: .makeWrapper(for: component))
-        level2label.text = "Do you want to Register?"
+        component.addContentView(mainView)
-       
-        level3View.addSubview(level2label)
-        level2label.pinTop().pinLeading()
-        
-        let level3Button = Button()
-        level3Button.setTitle("Register", for: .normal)
-        
-        level3View.addSubview(level3Button)
-        level3Button.pinTop(anchor: level2label.bottomAnchor, constant: 5)
-        level3Button.pinLeading()
-       
-        let level4View = View()
-        level4View.backgroundColor = .green
-        level3View.addSubview(level4View)
-        level4View.pinTop(anchor: level3Button.bottomAnchor, constant: 10)
-        level4View.pinLeading()
-        level4View.pinBottom()
-        level4View.pinTrailing()
-       
-        let level4Label = Label()
-        level4Label.text = "Forgot your info?"
-        level4View.addSubview(level4Label)
-        level4Label.pinTop().pinLeading()
-
-        let level4Button = Button()
-        level4Button.setTitle("Forgot Password", for: .normal)
-        level4View.addSubview(level4Button)
-        
-        level4Button.pinTop(anchor: level4Label.bottomAnchor, constant: 5)
-        level4Button.pinLeading().pinBottom()
-        
-
-        component.addContentView(level2View)
         setupPicker()
         setupModel()
     }
@@ -248,20 +271,34 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else { 
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self?.heightTextField.text = ""
-                    self.component.height = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
 
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self?.widthTextField.text = ""
-                    self.component.width = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
     }

VDSSample/ViewControllers/TileletViewController.swift

@@ -311,6 +311,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     var backgroundColor: BackgroundColor = .black
     var maxWidthTextField = NumericField()
     var isLinkSwitch = Toggle()
+    var descriptionIconAccessibilityTextField = TextField()
 
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     
@@ -402,6 +403,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         }))
         append(section: descriptionIconFormStackView)
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
+        descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
         descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
@@ -440,20 +442,34 @@ class TileletViewController: BaseViewController<Tilelet> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self?.heightTextField.text = ""
-                    self.component.height = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.height * 0.65 {
+                    self.component.height = number
+                } else {
+                    self.component.height = nil
+                }
+                if let val = heightTextField.text, val.count > 2, number < 100 {
+                    heightTextField.text = ""
                 }
             }.store(in: &subscribers)
-        
+
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                guard let self else { return }
+                guard let self, let number = number?.cgFloatValue else {
-                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self?.widthTextField.text = ""
-                    self.component.width = value
+                    return
-                    self.component.layoutIfNeeded()
+                }
+                if number >= 100 && number < self.view.frame.width * 0.85 {
+                    self.component.width = number
+                } else {
+                    self.component.width = nil
+                }
+                if let val = widthTextField.text, val.count > 2, number < 100 {
+                    widthTextField.text = ""
                 }
             }.store(in: &subscribers)
         
@@ -502,6 +518,12 @@ class TileletViewController: BaseViewController<Tilelet> {
             self.setDescriptionIconForm()
         }
         
+        descriptionIconAccessibilityTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.setDescriptiveIconModel()
+            }.store(in: &subscribers)
+
         showDirectionalIconSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             self.setDirectionalIconForm()
@@ -713,6 +735,11 @@ class TileletViewController: BaseViewController<Tilelet> {
         let iconSize = descriptionIconSizePickerSelectorView.selectedItem
         let iconName = descriptionNamePickerSelectorView.selectedItem
         var iconColor: Tilelet.IconColor? = nil
+        var accessibleText: String?
+        if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
+            accessibleText = at
+        }
+        
         switch descriptionIconColorPickerSelectorView.selectedItem {
         case .token:
             iconColor = .token(descriptionIconTokenColorView.selectedItem)
@@ -721,7 +748,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         default:
             break
         }
-        component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize)
+        component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize, accessibleText: accessibleText ?? nil )
     }
     
     func setDirectionalIconModel() {