added token/custom color ui changes

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

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -19,12 +19,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         return picker
     }()
     
-    lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
-                           picker: self.picker,
-                           items: BackgroundColor.allCases)
-    }()
-    
     lazy var imageFallbackColorPickerSelectorView = {
         SurfacePickerSelectorView(picker: self.picker)
     }()
@@ -76,9 +70,9 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         $0.placeholder = "Minimum 100px else it will occupy full container"
     }
     
-    var colorPickerType: ColorPickerType = .backgroundColor
+    var colorPickerType: ColorPickerType = .gradientColor1
     enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+        case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -95,6 +89,30 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         }
     }()
     
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
+    
+    lazy var backgroundColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
+    }()
+
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
@@ -166,6 +184,13 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         addFormRow(label: "Show Border", view: showBorderSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
         customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
         customPaddingRowView?.isHidden = true
@@ -263,11 +288,15 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             if let color = item.color {
                 self.component.color = color
             } else {
-                self.colorPickerType = .backgroundColor
+                backgroundColorTokenFormStackView.isHidden = item != .token
-                self.present(self.colorPicker, animated: true)
+                backgroundColorFormStackView.isHidden = item != .custom
             }
         }
         
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.component.color = .token(item)
+        }
+        
         backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
             guard let self else { return }
             if let effect = $0.effect {
@@ -339,14 +368,15 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
         case .gradientColor2:
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
+        case .custom:
+            backgroundColorCustomColorView.selectedColor = color
+            component.color = .custom(color)
         }
     }
     
@@ -390,7 +420,7 @@ extension TileContainerViewController {
     //Created new BackgroundColor enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -402,6 +432,8 @@ extension TileContainerViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                nil
             case .custom:
                 nil
             }

VDSSample/ViewControllers/TileletViewController.swift

@@ -67,9 +67,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         return picker
     }()
     
-    var colorPickerType: ColorPickerType = .backgroundColor
+    var colorPickerType: ColorPickerType = .custom
     enum ColorPickerType {
-        case backgroundColor
         case gradientColor1, gradientColor2
         case contentViewBackgroundColor, token, custom
     }
@@ -88,12 +87,31 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }()
     
+    var backgroundColorTokenFormStackView = FormSection().with { $0.isHidden = true }
+    var backgroundColorFormStackView = FormSection().with { $0.isHidden = true }
     lazy var backgroundColorPickerSelectorView = {
-        PickerSelectorView(title: "white",
+        PickerSelectorView(title: "",
                            picker: self.picker,
                            items: BackgroundColor.allCases)
+        .with { $0.text = BackgroundColor.white.rawValue }
     }()
     
+    lazy var backgroundColorCustomColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
+            self?.currentSurfaceColorType = .background
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var backgroundColorTokenColorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+        .with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
+    }()
+
+    
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
                            picker: self.picker,
@@ -103,7 +121,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     /// titleLockup
     var currentSurfaceColorType: SurfaceColorType = .title
     enum SurfaceColorType {
-        case eyebrow, title, subtitle, directionalIcon, descriptionIcon
+        case background, eyebrow, title, subtitle, directionalIcon, descriptionIcon
     }
     
     enum TitleTextColor: String, CaseIterable {
@@ -319,6 +337,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
         addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
         addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
+        
+        backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
+        backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
+        append(section: backgroundColorTokenFormStackView)
+        append(section: backgroundColorFormStackView)
+
+        
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -394,7 +419,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
         directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
         directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
-        directionalIconColorFormStackView.addFormRow(label: "Dark", view: directionalIconCustomColorView)
+        directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
         append(section: directionalIconTokenFormStackView)
         append(section: directionalIconColorFormStackView)
 
@@ -777,14 +802,18 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
-            if let color = self.getTilelet(backgroundColor: item) {
+            if let color = getTilelet(backgroundColor: item) {
-                self.component.color = color
+                component.color = color
             } else {
-                self.colorPickerType = .backgroundColor
+                backgroundColorTokenFormStackView.isHidden = item != .token
-                self.present(self.colorPicker, animated: true)
+                backgroundColorFormStackView.isHidden = item != .custom
             }
         }
         
+        backgroundColorTokenColorView.onPickerDidSelect  = {  [weak self] item in
+            self?.component.color = .token(item)
+        }
+                
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
             self?.currentSurfaceColorType = .eyebrow
             self?.eyebrowTokenFormStackView.isHidden = item != .token
@@ -878,6 +907,8 @@ class TileletViewController: BaseViewController<Tilelet> {
                 .black
         case .custom:
                 nil
+        case .token:
+                nil
         }
     }
 }
@@ -917,8 +948,6 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
         switch colorPickerType {
         case .contentViewBackgroundColor:
             component.contentView.backgroundColor = color
-        case .backgroundColor:
-            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
@@ -929,6 +958,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             var colorView: ColorPickerView<ColorPickerType>
             
             switch currentSurfaceColorType {
+            case .background:
+                colorView = backgroundColorCustomColorView
             case .eyebrow:
                 colorView = eyebrowCustomColorView
             case .title:
@@ -943,6 +974,8 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             colorView.selectedColor = viewController.selectedColor
             
             switch currentSurfaceColorType {
+            case .background:
+                component.color = .custom(color)
             case .eyebrow:
                 setEyebrowModel()
             case .title:
@@ -971,7 +1004,7 @@ extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black, custom
+        case primary, secondary, white, black, token, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -983,6 +1016,8 @@ extension TileletViewController {
                     .white
             case .black:
                     .black
+            case .token:
+                    nil
             case .custom:
                     nil
             }