added tabs sample

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

VDSSample.xcodeproj/project.pbxproj

@@ -306,9 +306,9 @@
 				EAF7F11928A14A0E00B287F5 /* RadioButtonViewController.swift */,
 				EA84F76128BE4AE500D67ABC /* RadioSwatchGroupViewController.swift */,
 				EA596AB92A16B2ED00300C4B /* TabsViewController.swift */,
+				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA985C24296E06EA00F2FF2E /* TextAreaViewController.swift */,
 				EAC9257F29119FC400091998 /* TextLinkViewController.swift */,
-				EA0FC2C02912DC5500DF80B4 /* TextLinkCaretViewController.swift */,
 				EA5E304F294D11540082B959 /* TileContainerViewController.swift */,
 				EA5E305B295111050082B959 /* TileletViewController.swift */,
 				EA5E30542950EA6E0082B959 /* TitleLockupViewController.swift */,

VDSSample/ViewControllers/TabsViewController.swift

@@ -14,7 +14,59 @@ import VDSColorTokens
 class TabsViewController: BaseViewController<Tabs> {
     
     var disabledSwitch = Toggle()
+    var borderlineSwitch = Toggle()
+    var fillContainerSwitch = Toggle()
+    var sampleSwitch = Toggle()
+    var widthValueTextField = NumericField()
+    var widthPercentageTextField = NumericField()
+
+    var verticalOrientationFormStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.alignment = .fill
+            $0.distribution = .fillProportionally
+            $0.axis = .vertical
+            $0.spacing = 10
+            $0.isHidden = true
+        }
+    }()
+
+    var horizontalOrientationFormStackView: UIStackView = {
+        return UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.alignment = .fill
+            $0.distribution = .fillProportionally
+            $0.axis = .vertical
+            $0.spacing = 10
+        }
+    }()
+
+    override func allTextFields() -> [TextField]? { [widthValueTextField, widthPercentageTextField] }
     
+    lazy var orientationPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tabs.Orientation.allCases)
+    }()
+    
+    lazy var indicatorPositionPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tabs.IndicatorPosition.allCases)
+    }()
+    
+    lazy var sizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tabs.Size.allCases)
+    }()
+
+    lazy var overflowPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tabs.Overflow.allCases)
+    }()
+
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -24,28 +76,90 @@ class TabsViewController: BaseViewController<Tabs> {
     
     override func setupForm(){
         super.setupForm()
+        addFormRow(label: "Large Sample", view: .makeWrapper(for: sampleSwitch))
         addFormRow(label: "Disabled", view: .makeWrapper(for: disabledSwitch))
+        addFormRow(label: "Show Borderline", view: .makeWrapper(for: borderlineSwitch))
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Size", view: sizePickerSelectorView)
         
+        if UIDevice.isIPad {
+            addFormRow(label: "Orientation", view: orientationPickerSelectorView)
+            //only in vertical mode
+            addFormRow(label: "% Width (0.25 -> 1.0)", view: widthPercentageTextField, stackView: verticalOrientationFormStackView)
+            addFormRow(label: "# Width", view: widthValueTextField, stackView: verticalOrientationFormStackView)
+        }
+        
+        //only in horizontal mode
+        addFormRow(label: "Indicator Position", view: indicatorPositionPickerSelectorView, stackView: horizontalOrientationFormStackView)
+        addFormRow(label: "Overflow", view: overflowPickerSelectorView, stackView: horizontalOrientationFormStackView)
+        
+        formStackView.addArrangedSubview(verticalOrientationFormStackView)
+        formStackView.addArrangedSubview(horizontalOrientationFormStackView)
+        
+        disabledSwitch.onChange =  { [weak self] sender in
+            self?.component.disabled = sender.isOn
+        }
+        
+        borderlineSwitch.onChange =  { [weak self] sender in
+            self?.component.borderLine = sender.isOn
+        }
+        
+        fillContainerSwitch.onChange =  { [weak self] sender in
+            self?.component.fillContainer = sender.isOn
+        }
+
+        sampleSwitch.onChange =  { [weak self] sender in
+            guard let self else { return }
+            self.component.selectedIndex = 0
+            self.component.tabModels = sender.isOn ? self.allTabs : self.some
+        }
+        
+        widthValueTextField.textPublisher.sink { [weak self] text in
+            if let value = Double(text) {
+                self?.component.width = .value(value)
+                self?.widthPercentageTextField.text = ""
+
+            }
+        }.store(in: &subscribers)
+
+        widthPercentageTextField.textPublisher.sink { [weak self] text in
+            if let value = Double(text) {
+                self?.component.width = .percentage(value)
+                self?.widthValueTextField.text = ""
+            }
+        }.store(in: &subscribers)
+
     }
     
+    var allTabs: [TabModel] = [
+        TabModel(text: "All"),
+        TabModel(text: "Work Devices"),
+        TabModel(text: "Customer Service"),
+        TabModel(text: "Help")
+    ]
+    
+    var some: [TabModel] = [
+        TabModel(text: "All"),
+        TabModel(text: "Work Devices")
+    ]
+    
     func setupModel() {
-        component.overflow = .scroll
+        //set to the large sample
-        component.updateTabItems(with: [
+        component.tabModels = allTabs
-            TabItemModel(text: "All", width: 200),
+        component.selectedIndex = 3
-            TabItemModel(text: "Work Devices", width: 250),
+        
-            TabItemModel(text: "3", width: 100),
+
-            TabItemModel(text: "4"),
-            TabItemModel(text: "5"),
-            TabItemModel(text: "6 Devices"),
-            TabItemModel(text: "7 Devices"),
-            TabItemModel(text: "8 Devices"),
-            TabItemModel(text: "9 Devices"),
-            TabItemModel(text: "10 Devices")
-        ])
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
+        sizePickerSelectorView.text = component.size.rawValue
+        orientationPickerSelectorView.text = component.orientation.rawValue
+        indicatorPositionPickerSelectorView.text = component.indicatorPosition.rawValue
+        overflowPickerSelectorView.text = component.overflow.rawValue
         disabledSwitch.isOn = component.disabled
+        borderlineSwitch.isOn = component.borderLine
+        fillContainerSwitch.isOn = component.fillContainer
+        sampleSwitch.isOn = true
+        updateWidth()
     }
     
     func setupPicker(){
@@ -53,5 +167,35 @@ class TabsViewController: BaseViewController<Tabs> {
             self?.component.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
+        
+        sizePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.size = item
+        }
+        
+        orientationPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.orientation = item
+            self?.verticalOrientationFormStackView.isHidden = item == .horizontal
+            self?.horizontalOrientationFormStackView.isHidden = item == .vertical
+        }
+        
+        indicatorPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.indicatorPosition = item
+        }
+
+        overflowPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.overflow = item
+        }
+    }
+    
+    func updateWidth() {
+        switch component.width {
+        case .percentage(let percentage):
+            widthPercentageTextField.text = "\(percentage)"
+        case .value(let value):
+            widthValueTextField.text = "\(value)"
+            widthPercentageTextField.text = ""
+        @unknown default:
+            print("")
+        }
     }
 }