fixed more color example issues

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

VDSSample/ViewControllers/TileletViewController.swift

@@ -115,11 +115,12 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     enum IconColor: String, CaseIterable {
-        case token, custom
+        case `default`, token, custom
     }
     
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var eyebrowColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -141,7 +142,8 @@ class TileletViewController: BaseViewController<Tilelet> {
     }()
     
     /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var titleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -162,7 +164,8 @@ class TileletViewController: BaseViewController<Tilelet> {
     }()
     
     /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var subtitleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -183,18 +186,27 @@ class TileletViewController: BaseViewController<Tilelet> {
     }()
 
     var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
+    var descriptionIconTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var descriptionIconColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var descriptionNamePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
     }()
-
+    
     lazy var descriptionIconSizePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: Icon.Size.allCases)
     }()
 
+    lazy var descriptionIconColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: IconColor.allCases)
+        .with { $0.text = IconColor.default.rawValue }
+    }()
+
     lazy var descriptionIconTokenColorView = {
         PickerSelectorView(title: "paletteBlack",
                            picker: self.picker,
@@ -210,12 +222,23 @@ class TileletViewController: BaseViewController<Tilelet> {
     }()
         
     var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
+    var directionalIconTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var directionalIconColorFormStackView = FormSection().with { $0.isHidden = true }
+
     lazy var directionalIconSizePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: Icon.Size.allCases)
     }()
 
+
+    lazy var directionalIconColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: IconColor.allCases)
+        .with { $0.text = IconColor.default.rawValue }
+    }()
+
     lazy var directionalIconTokenColorView = {
         PickerSelectorView(title: "paletteBlack",
                            picker: self.picker,
@@ -315,9 +338,10 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
         }))
         
-        eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
+        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
+        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: eyebrowTokenFormStackView)
+        append(section: eyebrowColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Title"
@@ -326,18 +350,20 @@ class TileletViewController: BaseViewController<Tilelet> {
             $0.addFormRow(label: "Text", view: titleTextField)
             $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
         }))
-        titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
+        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
-        titleColorsFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
+        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleColorsFormStackView)
+        append(section: titleTokenFormStackView)
+        append(section: titleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Subtitle"
             $0.addFormRow(label: "Text", view: subTitleTextField)
             $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
         }))
-        subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
+        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: subtitleTokenFormStackView)
+        append(section: subtitleColorFormStackView)
 
         append(section: .init().with({
             $0.title = "Description Icon "
@@ -346,9 +372,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: descriptionIconFormStackView)
         descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
         descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
+        descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
-        descriptionIconFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
+        descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
+        descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
+        append(section: descriptionIconTokenFormStackView)
+        append(section: descriptionIconColorFormStackView)
 
+        
         append(section: .init().with({
             $0.title = "Directional Icon"
             $0.addFormRow(label: "Show", view: showDirectionalIconSwitch)
@@ -356,9 +386,12 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: directionalIconFormStackView)
         directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
+        directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
-        directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
+        directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
-        
+        directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
+        append(section: directionalIconTokenFormStackView)
+        append(section: directionalIconColorFormStackView)
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -434,25 +467,13 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
         
         showDescriptionIconSwitch.onChange = { [weak self] sender in
-            self?.descriptionIconFormStackView.isHidden = !sender.isOn
+            guard let self else { return }
-            self?.directionalIconFormStackView.isHidden = sender.isOn
+            self.setDescriptionIconForm()
-            if sender.isOn {
-                self?.showDirectionalIconSwitch.isOn = false
-                self?.setDescriptiveIconModel()
-            } else {
-                self?.component.descriptiveIconModel = nil
-            }
         }
         
         showDirectionalIconSwitch.onChange = { [weak self] sender in
-            self?.descriptionIconFormStackView.isHidden = sender.isOn
+            guard let self else { return }
-            self?.directionalIconFormStackView.isHidden = !sender.isOn
+            self.setDirectionalIconForm()
-            if sender.isOn {
-                self?.showDescriptionIconSwitch.isOn = false
-                self?.setDirectionalIconModel()
-            } else {
-                self?.component.directionalIconModel = nil
-            }
         }
 
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
@@ -496,6 +517,59 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
     }
     
+    func setIconColorForms() {
+        setDirectionalIconColorForm()
+        setDescriptionIconColorForm()
+    }
+    
+    func setDescriptionIconForm() {
+        let showForm = showDescriptionIconSwitch.isOn
+        descriptionIconFormStackView.isHidden = !showForm
+        directionalIconFormStackView.isHidden = true
+        if showForm {
+            showDirectionalIconSwitch.isOn = false
+            setDescriptiveIconModel()
+        } else {
+            component.descriptiveIconModel = nil
+        }
+        setIconColorForms()
+    }
+    
+    func setDirectionalIconForm() {
+        let showForm = showDirectionalIconSwitch.isOn
+        directionalIconFormStackView.isHidden = !showForm
+        descriptionIconFormStackView.isHidden = true
+        if showForm {
+            showDescriptionIconSwitch.isOn = false
+            setDirectionalIconModel()
+        } else {
+            component.directionalIconModel = nil
+        }
+        setIconColorForms()
+    }
+    
+    func setDirectionalIconColorForm() {
+        let selectedItem = directionalIconColorPickerSelectorView.selectedItem
+        if showDirectionalIconSwitch.isOn && selectedItem != .default  {
+            directionalIconTokenFormStackView.isHidden = selectedItem != .token
+            directionalIconColorFormStackView.isHidden = selectedItem != .custom
+        } else {
+            directionalIconTokenFormStackView.isHidden = true
+            directionalIconColorFormStackView.isHidden = true
+        }
+    }
+    
+    func setDescriptionIconColorForm() {
+        let selectedItem = descriptionIconColorPickerSelectorView.selectedItem
+        if showDescriptionIconSwitch.isOn && selectedItem != .default {
+            descriptionIconTokenFormStackView.isHidden = selectedItem != .token
+            descriptionIconColorFormStackView.isHidden = selectedItem != .custom
+        } else {
+            descriptionIconTokenFormStackView.isHidden = true
+            descriptionIconColorFormStackView.isHidden = true
+        }
+    }
+    
     func setupModel() {
         let titleModel = Tilelet.TitleModel(text: "Save $XX on your monthly bill.")
         let subTitleModel = Tilelet.SubTitleModel(text: "Enroll in Auto Pay & paper-free billing to save on your monthly bill.")
@@ -605,20 +679,32 @@ class TileletViewController: BaseViewController<Tilelet> {
     }
     
     func setDescriptiveIconModel() {
-        let custom = descriptionIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
-        let token = descriptionIconTokenColorView.selectedItem
         let iconSize = descriptionIconSizePickerSelectorView.selectedItem
         let iconName = descriptionNamePickerSelectorView.selectedItem
-        let iconColor: Tilelet.IconColor = colorPickerType == .token ? .token(token) : .custom(custom)
+        var iconColor: Tilelet.IconColor? = nil
+        switch descriptionIconColorPickerSelectorView.selectedItem {
+        case .token:
+            iconColor = .token(descriptionIconTokenColorView.selectedItem)
+        case .custom:
+            iconColor = .custom(descriptionIconCustomColorView.selectedColor ?? .white)
+        default:
+            break
+        }
         component.descriptiveIconModel = .init(name: iconName, iconColor: iconColor, size: iconSize)
     }
     
     func setDirectionalIconModel() {
-        let custom = directionalIconCustomColorView.selectedColor ?? VDSColor.paletteBlack
-        let token = directionalIconTokenColorView.selectedItem
         let iconType = directionIconPickerSelectorView.selectedItem
         let iconSize = directionIconSizePickerSelectorView.selectedItem
-        let iconColor: Tilelet.IconColor = colorPickerType == .token ? .token(token) : .custom(custom)
+        var iconColor: Tilelet.IconColor? = nil
+        switch directionalIconColorPickerSelectorView.selectedItem {
+        case .token:
+            iconColor = .token(directionalIconTokenColorView.selectedItem)
+        case .custom:
+            iconColor = .custom(directionalIconCustomColorView.selectedColor ?? .white)
+        default:
+            break
+        }
         component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
     }
     
@@ -695,28 +781,48 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.eyebrowColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setEyebrowModel()
             }
         }
         
+        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setEyebrowModel()
+        }
+
         titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
+            self?.titleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.titleColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setTitleModel()
             }
         }
         
+        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setTitleModel()
+        }
+        
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            self?.subtitleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.subtitleColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setSubTitleModel()
             }
         }
+        
+        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setSubTitleModel()
+        }
 
+        descriptionIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setIconColorForms()
+            self?.setDescriptiveIconModel()
+        }
+        
         descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDescriptiveIconModel()
         }
@@ -730,6 +836,11 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setDescriptiveIconModel()
         }
         
+        directionalIconColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setIconColorForms()
+            self?.setDirectionalIconModel()
+        }
+        
         directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.setDirectionalIconModel()
         }

VDSSample/ViewControllers/TitleLockupViewController.swift

@@ -64,7 +64,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     }
     
     /// eyebrow
-    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var eyebrowColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -85,7 +86,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     }()
     
     /// title
-    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var titleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var titleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -106,7 +108,8 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     }()
     
     /// subtitle
-    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var subtitleColorPickerSelectorView = {
         PickerSelectorView(title: "primary",
                            picker: self.picker,
@@ -144,24 +147,27 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
         addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
+        eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
-        eyebrowColorsFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
+        eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
-        append(section: eyebrowColorsFormStackView)
+        append(section: eyebrowTokenFormStackView)
+        append(section: eyebrowColorFormStackView)
 
         addFormRow(label: "Title is Bold", view: titleIsBold)
         addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
         addFormRow(label: "Title Text", view: titleTextField)
         addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
-        titleColorsFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
+        titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
-        titleColorsFormStackView.addFormRow(label: "Dark", view: titleCustomColorView)
+        titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
-        append(section: titleColorsFormStackView)
+        append(section: titleTokenFormStackView)
+        append(section: titleColorFormStackView)
 
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
         addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        subtitleColorsFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
+        subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
-        subtitleColorsFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
+        subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
-        append(section: subtitleColorsFormStackView)
+        append(section: subtitleTokenFormStackView)
-        
+        append(section: subtitleColorFormStackView)
+
         
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
@@ -322,27 +328,42 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .eyebrow
-            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            self?.eyebrowTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.eyebrowColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setOtherModels()
             }
         }
         
+        eyebrowTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setOtherModels()
+        }
+        
         titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .title
-            self?.titleColorsFormStackView.isHidden = item != .custom
+            self?.titleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.titleColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setTitleModel()
             }
         }
         
+        titleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setTitleModel()
+        }
+        
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentLabelType = .subtitle
-            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            self?.subtitleTokenFormStackView.isHidden = item != .token
-            if item != .custom {
+            self?.subtitleColorFormStackView.isHidden = item != .custom
+            if item != .custom && item != .token {
                 self?.setOtherModels()
             }
         }
+        
+        subtitleTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setOtherModels()
+        }
     }
 }