Merge branch 'develop' into refactor/VDSTokens

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

VDSSample.xcodeproj/project.pbxproj

@@ -672,7 +672,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 51;
+				CURRENT_PROJECT_VERSION = 54;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -707,7 +707,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 51;
+				CURRENT_PROJECT_VERSION = 54;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;

VDSSample/Supporting Files/Artifactory/ArtifactoryItems.txt

@@ -1,4 +1,4 @@
 ${PROJECT_DIR}/SharedFrameworks/VDSTypographyTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSTypographyTokens.2.0.0.xcframework.zip
 ${PROJECT_DIR}/SharedFrameworks/VDSColorTokens.xcframework GVJV_VDS_Maven/%40vds-tokens/ios/VDSColorTokens.2.0.0.xcframework.zip
 ${PROJECT_DIR}/SharedFrameworks/VDSFormControlsTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSFormControlsTokens.1.0.7.xcframework.zip
-${PROJECT_DIR}/SharedFrameworks/VDSTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSTokens.1.0.1-alpha.0.xcframework.zip
+${PROJECT_DIR}/SharedFrameworks/VDSTokens.xcframework GVJV_VDS_Maven/@vds-tokens/ios/VDSTokens.2.0.0.xcframework.zip

VDSSample/ViewControllers/BaseViewController.swift

@@ -150,7 +150,7 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
    
     public var formStackView = FormSection()
     
-    lazy var stackView = UIStackView().with {
+    public lazy var stackView = UIStackView().with {
         $0.axis = .vertical
         $0.distribution = .fill
         $0.alignment = .fill

VDSSample/ViewControllers/ButtonIconViewController.swift

@@ -37,6 +37,12 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
                            items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
     }()
    
+    lazy var selectedIconNamePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
+    }()
+    
     lazy var sizePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -50,6 +56,15 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     var floating = Toggle()
     var hideBorder = Toggle()
     var disabledSwitch = Toggle()
+    var selectableSwitch = Toggle()
+    var badgeIndicatorSwitch = Toggle()
+    var variantOneSwitch = Toggle()
+    
+    lazy var badgeIndicatorExpandDirectionPickerSelectorView = {
+        PickerSelectorView(title: "right",
+                           picker: self.picker,
+                           items: ButtonIcon.BadgeIndicatorModel.ExpandDirection.allCases)
+    }()
     
     override func viewDidLoad() {
         super.viewDidLoad()
@@ -58,9 +73,10 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         setupModel()
     }
     
+    var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
+    
     override func setupForm(){
         super.setupForm()
-        addActionRow()
         addFormRow(label: "Disabled", view: disabledSwitch)
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
@@ -69,23 +85,45 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         addFormRow(label: "Floating", view: floating)
         addFormRow(label: "Hide Border", view: hideBorder)
         addFormRow(label: "Fit To Icon", view: fitToIcon)
-        addFormRow(label: "Custom Size", view: customSizeField)
         addFormRow(label: "Name", view: namePickerSelectorView)
+        addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
+        addFormRow(label: "Selectable", view: selectableSwitch)
         addFormRow(label: "X Offset", view: centerX)
         addFormRow(label: "Y Offset", view: centerY)
         
+        //badgeIndicator section
+        addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch)
+        badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
+        badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
+        append(section: badgeIndicatorFormStackView)
+
+        variantOneSwitch.onChange = { [weak self] sender in
+            self?.setBadgeIndicatorModel()
+        }
+        
+        badgeIndicatorSwitch.onChange =  { [weak self] sender in
+            guard let self else { return }
+            self.component.showBadgeIndicator = sender.isOn
+            self.badgeIndicatorFormStackView.isHidden = !sender.isOn
+            self.setBadgeIndicatorModel()
+            variantOneSwitch.isOn = false
+        }
+        
         disabledSwitch.onChange =  { [weak self] sender in
             self?.component.isEnabled = !sender.isOn
         }
         
-        component.onClickActionPublisher("ButtonIcon", label: actionLabel)
+        selectableSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.selectable = !self.component.selectable
+        }
         
         floating.onChange =  { [weak self] sender in
             self?.component.floating = sender.isOn
         }
 
         hideBorder.onChange =  { [weak self] sender in
-            self?.component.hideBorder = sender.isOn
+            self?.component.hideBorder = !sender.isOn
         }
 
         fitToIcon.onChange =  { [weak self] sender in
@@ -122,6 +160,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         sizePickerSelectorView.text = component.size.rawValue
         namePickerSelectorView.text = name.rawValue
         disabledSwitch.isOn = !component.isEnabled
+        badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
     }
     
     func updateOffset() {
@@ -160,6 +199,26 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
         namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.iconName = item
         }
+        
+        selectedIconNamePickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.selectedIconName = item
+        }
+        
+        badgeIndicatorExpandDirectionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.setBadgeIndicatorModel()
+        }
+    }
+    
+    func setBadgeIndicatorModel() {
+        if variantOneSwitch.isOn {
+            if badgeIndicatorSwitch.isOn {
+                component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small)
+            } else {
+                component.badgeIndicatorModel = nil
+            }
+        } else  {
+            component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999)
+        }
     }
 }
 

VDSSample/ViewControllers/MenuViewController.swift

@@ -72,7 +72,7 @@ class MenuViewController: UITableViewController, TooltipLaunchable {
         MenuComponent(title: "Badge Indicator", completed: true, viewController: BadgeIndicatorViewController.self),
         MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
         MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
-        MenuComponent(title: "ButtonIcon", completed: false, viewController: ButtonIconViewController.self),
+        MenuComponent(title: "ButtonIcon", completed: true, viewController: ButtonIconViewController.self),
         MenuComponent(title: "Checkbox", completed: true, viewController: CheckboxViewController.self),
         MenuComponent(title: "CheckboxItem", completed: true, viewController: CheckboxItemViewController.self),
         MenuComponent(title: "CheckboxGroup", completed: true, viewController: CheckboxGroupViewController.self),

VDSSample/ViewControllers/NotificationViewController.swift

@@ -33,10 +33,17 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
         PickerSelectorView(title: "vertical", picker: self.picker, items: Notification.Layout.allCases)
     }()
     
+    var notification = Notification()
+
     override func viewDidLoad() {
         super.viewDidLoad()
+
+        stackView.insertArrangedSubview(notification, at: 0)
         addContentTopView(view: component)
         
+        notification.title = titleDefaultText
+        notification.subTitle = subtitleDefaultText
+        
         component.title = titleDefaultText
         component.subTitle = subtitleDefaultText
         titleTextField.text = titleDefaultText
@@ -68,16 +75,21 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
         
         titleTextField.textPublisher.sink { newString in
             self.component.title = newString
+            self.notification.title = newString
         }.store(in: &subscribers)
         
         subTitleTextField.textPublisher.sink { newString in
             self.component.subTitle = newString
+            self.notification.subTitle = newString
         }.store(in: &subscribers)
         
         buttonGroupToggle.onChange = { [weak self] toggle in
             if toggle.isOn {
                 self?.component.primaryButtonModel = nil
                 self?.component.secondaryButtonModel = nil
+                self?.notification.primaryButtonModel = nil
+                self?.notification.secondaryButtonModel = nil
+
                 self?.label.text = ""
             } else {
                 self?.setupButtons(with: self?.firstButtonDefaultText, secondButtonText: self?.secondButtonDefaultText)
@@ -103,6 +115,7 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
         
         hideCloseButtonToggle.onChange = { [weak self] toggle in
             self?.component.hideCloseButton = toggle.isOn
+            self?.notification.hideCloseButton = toggle.isOn
         }
         
     }
@@ -110,16 +123,19 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
     func setupPicker() {
         surfacePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.surface = item
+            self?.notification.surface = item
             self?.contentTopView.backgroundColor = item.color
         }
         
         notificationTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
             self?.component.style = item
+            self?.notification.style = item
         }
         
         layoutTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
             guard let self else { return }
             self.component.layout = item
+            self.notification.layout = item
             if self.component.layout != item {
                 self.layoutTypePickerSelectorView.set(item: self.component.layout)
             }
@@ -131,12 +147,18 @@ class NotificationViewController: BaseViewController<VDS.Notification> {
             component.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
+            notification.primaryButtonModel = .init(text: firstButtonText, onClick: { [weak self] button in
+                self?.label.text = "\(button.text!) button click"
+            })
         }
         
         if let secondButtonText {
             component.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
                 self?.label.text = "\(button.text!) button click"
             })
+            notification.secondaryButtonModel = .init(text: secondButtonText, onClick: { [weak self] button in
+                self?.label.text = "\(button.text!) button click"
+            })
         }
     }
 }
@@ -158,3 +180,4 @@ extension NotificationViewController: ComponentSampleable {
         return ComponentSample(component: component)
     }
 }
+

VDSSample/ViewControllers/TileContainerViewController.swift

@@ -13,10 +13,19 @@ import Combine
 
 class TileContainerViewController: BaseViewController<TileContainer> {
     
+    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: TileContainer.BackgroundColor.allCases)
+                           items: BackgroundColor.allCases)
     }()
     
     lazy var imageFallbackColorPickerSelectorView = {
@@ -26,7 +35,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     lazy var paddingPickerSelectorView = {
         PickerSelectorView(title: "16",
                            picker: self.picker,
-                           items: TileContainer.Padding.allCases)
+                           items: Padding.allCases)
     }()
     
     lazy var scalingTypePickerSelectorView = {
@@ -35,22 +44,135 @@ class TileContainerViewController: BaseViewController<TileContainer> {
                            items: TileContainer.AspectRatio.allCases)
     }()
     
-    var clickableSwitch = Toggle()
+    lazy var backgroundEffectSelectorView = {
+        PickerSelectorView(title: "none",
+                           picker: self.picker,
+                           items: BackgroundEffect.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
+    }()
+    
+    var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
+    var backgroundColor: BackgroundColor = .secondary
+    var padding: Padding = .padding4X
+    var clickableSwitch = Toggle()
     var showBackgroundImageSwitch = Toggle()
     var showBorderSwitch = Toggle()
     var showDropShadowSwitch = Toggle()
-    var heightTextField = NumericField()
+    var selectedGradient1Color: String?
-    var widthTextField = NumericField()
+    var selectedGradient2Color: String?
-
+    var colorPickerType: ColorPickerType = .backgroundColor
     var backgroundImage = UIImage(named: "backgroundTest")!
+    var selectedGradientColorView: UIView?
+    var customPaddingRowView: UIView?
+    var anyCancellable: AnyCancellable?
+    
+    var contentAreaBackgroundColorButton = Button().with { instance in
+        instance.size = .small
+        instance.use = .secondary
+        instance.text = "Select"
+    }
+    
+    var paddingTextField = NumericField().with {
+        $0.placeholder = "Custom Padding"
+    }
+    
+    var heightTextField = NumericField().with {
+        $0.placeholder = "Minimum 100px else it will occupy full container"
+    }
+    var widthTextField = NumericField().with {
+        $0.placeholder = "Minimum 100px else it will occupy full container"
+    }
     
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: .makeWrapper(for: component))
         component.width = 150
-        component.color = .black
+        component.color = .secondary
-
         setupPicker()
         setupModel()
     }
@@ -61,17 +183,37 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             $0.textStyle = .boldBodyLarge
             $0.text = "This object does NOT reflect normal \"surface\" changes, all properties are maually set"
         })
+        formStackView.addArrangedSubview(Label().with {
+            $0.text = "For testing max width is limited to 85% of view's width & 65% view's height."
+        })
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Clickable", view: clickableSwitch)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Height", view: heightTextField)
         addFormRow(label: "Show Border", view: showBorderSwitch)
-        //addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
+        addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
         addFormRow(label: "Padding", view: paddingPickerSelectorView)
+        customPaddingRowView = addFormRow(label: "Custom Padding", view: paddingTextField)
+        customPaddingRowView?.isHidden = true
+        let rowView = addFormRow(label: "Content area BG color(only for padding validation)", view: contentAreaBackgroundColorButton)
+        if let rowView = rowView as? UIStackView {
+            rowView.alignment = .top
+        }
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         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)
+        
+        anyCancellable = paddingTextField.textPublisher.receive(on: RunLoop.main).sink { [weak self] value in
+            if let value = Float(value) {
+                self?.component.padding = .custom(CGFloat(value))
+            }
+        }
 
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
@@ -103,21 +245,29 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
-                self?.component.height = number?.cgFloatValue
+                guard let self else { return }
+                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.height * 0.65 {
+                    self.component.height = value
+                    self.component.layoutIfNeeded()
+                }
             }.store(in: &subscribers)
 
         widthTextField
             .numberPublisher
             .sink { [weak self] number in
-                self?.component.width = number?.cgFloatValue
+                guard let self else { return }
+                if let value = number?.cgFloatValue, value >= 100 && value < self.view.frame.width * 0.85 {
+                    self.component.width = value
+                    self.component.layoutIfNeeded()
+                }
             }.store(in: &subscribers)
     }
     
     func setupModel() {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
-        backgroundColorPickerSelectorView.text = component.color.rawValue
+        backgroundColorPickerSelectorView.text = backgroundColor.rawValue
-        paddingPickerSelectorView.text = component.padding.rawValue
+        paddingPickerSelectorView.text = padding.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
         heightTextField.text = component.height != nil ? "\(component.height!)" : ""
@@ -131,20 +281,65 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         }
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.color = item
+            guard let self else { return }
+            if let color = item.color {
+                self.component.color = color
+            } else {
+                self.colorPickerType = .backgroundColor
+                self.present(self.colorPicker, animated: true)
+            }
+        }
+        
+        backgroundEffectSelectorView.onPickerDidSelect = { [weak self] in
+            guard let self else { return }
+            if let effect = $0.effect {
+                self.component.backgroundEffect = 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
+            }
         }
         
         scalingTypePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.aspectRatio = item
+            self?.component.layoutIfNeeded()
+            self?.showDebug(show: self?.debugViewSwitch.isOn ?? false)
         }
         
         paddingPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.padding = item
+            if let value = item.value {
+                self?.paddingTextField.text = ""
+                self?.component.padding = value
+                self?.customPaddingRowView?.isHidden = true
+            } else {
+                self?.customPaddingRowView?.isHidden = false
+            }
         }
         
         imageFallbackColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.imageFallbackColor = item
         }
+        
+        contentAreaBackgroundColorButton.onClick = { [weak self] _ in
+            guard let self else { return }
+            self.colorPickerType = .contentViewBackgroundColor
+            self.colorPicker.selectedColor = self.component.containerView.backgroundColor ?? .white
+            self.present(self.colorPicker, animated: true)
+        }
+    }
+    
+    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)
     }
 }
 
@@ -152,7 +347,118 @@ extension TileContainerViewController: ComponentSampleable {
     static func makeSample() -> ComponentSample {
         let component = Self.makeComponent()
         component.width = 150
-        component.color = .black
+        component.color = .primary
         return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
     }
 }
+
+extension TileContainerViewController: UIColorPickerViewControllerDelegate {
+    
+    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 TileContainerViewController {
+    
+    //Created new BackgroundEffect enum for sample app only. Since we defined enum with associated value color defined in TileContainer cannot be RawRepresentable & CaseIterable
+    enum BackgroundEffect: String, CaseIterable {
+        case transparency
+        case gradient
+        case none
+        
+        var rawValue: String {
+            switch self {
+            case .gradient:
+                "gradient (select gradient colors to apply)"
+            default:
+                String(describing: self)
+            }
+        }
+        
+        var effect: TileContainer.BackgroundEffect? {
+            return switch self {
+            case .transparency:
+                    .transparency
+            case .gradient:
+                nil
+            case .none:
+                TileContainer.BackgroundEffect.none
+            }
+        }
+    }
+    
+    //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
+        
+        var color: TileContainer.BackgroundColor? {
+            switch self {
+            case .primary:
+                    .primary
+            case .secondary:
+                    .secondary
+            case .white:
+                    .white
+            case .black:
+                    .black
+            case .custom:
+                nil
+            }
+        }
+    }
+    
+    //Internal helper enum to identiy the configuration
+    enum ColorPickerType {
+        case backgroundColor, gradientColors, contentViewBackgroundColor
+    }
+    
+    //Internal helper enum to map padding & pass custom padding values
+    public enum Padding: String, CaseIterable {
+        case padding2X
+        case padding4X
+        case padding6X
+        case padding8X
+        case padding12X
+        case custom
+        
+        public var value: TileContainer.Padding? {
+            return switch self {
+            case .padding2X:
+                    .padding2X
+            case .padding4X:
+                    .padding4X
+            case .padding6X:
+                    .padding6X
+            case .padding8X:
+                    .padding8X
+            case .padding12X:
+                    .padding12X
+            case .custom:
+                nil
+            }
+        }
+    }
+}