Added properties from Badge & tilecontainer

VDSSample/ViewControllers/TileletViewController.swift

@@ -36,13 +36,145 @@ class TileletViewController: BaseViewController<Tilelet> {
                            picker: self.picker,
                            items: Tilelet.TextPosition.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
-
+    
     lazy var paddingPickerSelectorView = {
-        PickerSelectorView(title: "16",
+        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()
@@ -51,12 +183,21 @@ class TileletViewController: BaseViewController<Tilelet> {
     var heightTextField = NumericField()
     var textPercentageTextField = NumericField()
     var textWidthTextField = NumericField()
-    
+    var showBackgroundImageSwitch = Toggle()
     var showDescriptionIconSwitch = Toggle()
     var showDirectionalIconSwitch = Toggle()
     var badgeTextField = TextField()
     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 = .secondary
+    var maxWidthTextField = NumericField()
 
+    var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
@@ -64,9 +205,9 @@ class TileletViewController: BaseViewController<Tilelet> {
         setupPicker()
         setupModel()
     }
-        
+    
     override func setupForm(){
-        super.setupForm()  
+        super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addActionRow()
         addFormRow(label: "Clickable", view: clickableSwitch)
@@ -74,7 +215,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
         addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView)
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
-
+        
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
         addFormRow(label: "Title Text", view: titleTextField)
         addFormRow(label: "Title is Bold", view: titleIsBold)
@@ -82,12 +223,26 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
         addFormRow(label: "Width", view: widthTextField)
         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: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView)
-        addFormRow(label: "Badge Text", view: badgeTextField)
         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: "Aspect Ratio", view: scalingTypePickerSelectorView)
+        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 }
@@ -107,7 +262,7 @@ class TileletViewController: BaseViewController<Tilelet> {
                     self.component.layoutIfNeeded()
                 }
             }.store(in: &subscribers)
-
+        
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
@@ -175,7 +330,7 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self?.component.directionalIconModel = nil
             }
         }
-
+        
         titleIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setTitleModel()
         }.store(in: &subscribers)
@@ -188,6 +343,31 @@ class TileletViewController: BaseViewController<Tilelet> {
             .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() {
@@ -197,8 +377,10 @@ 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.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
@@ -207,13 +389,14 @@ class TileletViewController: BaseViewController<Tilelet> {
         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
         }
@@ -234,7 +417,7 @@ class TileletViewController: BaseViewController<Tilelet> {
             component.subTitleModel = nil
         }
     }
-        
+    
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
             component.eyebrowModel = Tilelet.EyebrowModel(text: text, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
@@ -250,7 +433,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         otherStandardStylePickerSelectorView.text = otheritems.first?.rawValue ?? ""
         setSubTitleModel()
     }
-
+    
     //Picker
     func setupPicker(){
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
@@ -276,6 +459,77 @@ class TileletViewController: BaseViewController<Tilelet> {
             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
+        }
     }
 }
 
@@ -292,3 +546,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
+            }
+        }
+    }
+}