mbrucedogs/vds_ios_sample
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/tileletGroup

Browse Source 
# Conflicts:
#	VDSSample.xcodeproj/project.pbxproj

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2024-10-09 08:46:15 -05:00
commit de8151eefc
10 changed files with 741 additions and 924 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
VDSSample.xcodeproj/project.pbxproj
View File

@ -108,6 +108,7 @@
EAF7F0CD289DA24F00B287F5 /* Artifactory.sh in Resources */ = {isa = PBXBuildFile; fileRef = EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */; };
EAF7F11A28A14A0E00B287F5 /* RadioButtonGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */; };
EAFD5AA42CB5D95600C87DE1 /* TileletGroupViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */; };
EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */ = {isa = PBXBuildFile; fileRef = EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */; };
/* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */
@ -215,6 +216,7 @@
EAF7F0C9289DA24F00B287F5 /* Artifactory.sh */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.script.sh; path = Artifactory.sh; sourceTree = "<group>"; };
EAF7F11928A14A0E00B287F5 /* RadioButtonGroupViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RadioButtonGroupViewController.swift; sourceTree = "<group>"; };
EAFD5AA32CB5D95600C87DE1 /* TileletGroupViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileletGroupViewController.swift; sourceTree = "<group>"; };
EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TokenColorPickerFormSection.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -293,6 +295,7 @@
EAB5FEF22928153D00998C17 /* Helper.swift */,
EAD062A42A3B5CDF0015965D /* Slider.swift */,
EA89205028B68307006B9984 /* TextField.swift */,
EAFD5A9C2CB4609900C87DE1 /* TokenColorPickerFormSection.swift */,
);
path = Classes;
sourceTree = "<group>";
@ -559,6 +562,7 @@
EAD062A32A3913920015965D /* DropShawdowViewController.swift in Sources */,
EA6642972BD1B2E700D81DC4 /* ColorPickerView.swift in Sources */,
EA0D1C312A673F3500E5C127 /* RadioButtonViewController.swift in Sources */,
EAFD5A9D2CB4609900C87DE1 /* TokenColorPickerFormSection.swift in Sources */,
EAB5FEF32928153D00998C17 /* Helper.swift in Sources */,
EA89204728B66CE2006B9984 /* KeyboardFrameChangeListener.swift in Sources */,
EA4DB30428DCD25B00103EE3 /* BadgeViewController.swift in Sources */,

43
VDSSample/Classes/ColorPickerView.swift
View File

@ -9,14 +9,18 @@ import Foundation
import UIKit
import VDS
public class ColorPickerView<EnumType>: UIStackView {
public var pickerType: EnumType
public class ColorPickerView: UIStackView, UIColorPickerViewControllerDelegate {
public var selectedColor: UIColor? {
didSet {
selectedColorView.backgroundColor = selectedColor
}
}
private var colorPicker: UIColorPickerViewController = {
let picker = UIColorPickerViewController()
return picker
}()
var selectedColorView: UIView = {
let view = UIView()
view.translatesAutoresizingMaskIntoConstraints = false
@ -31,25 +35,30 @@ public class ColorPickerView<EnumType>: UIStackView {
$0.text = "Select"
}
public init(with pickerType: EnumType, color: UIColor? = nil, onClick: @escaping (ColorPickerView)->Void) {
self.pickerType = pickerType
/// Callback once the user picks a color from the picker.
public var onColorSelected: ((UIColor) -> Void)?
public init(color: UIColor? = nil) {
super.init(frame: .zero)
if let color {
selectedColor = color
}
colorPicker.delegate = self
setup()
button.onClick = { _ in onClick(self) }
button.onClick = { _ in
UIApplication.topViewController()?.present(self.colorPicker, animated: true)
}
}
required init(coder: NSCoder) {
fatalError()
fatalError("init(coder:) has not been implemented")
}
private func setup() {
distribution = .fillEqually
alignment = .fill
spacing = 10
let indicatorWrapper = View()
indicatorWrapper.addSubview(selectedColorView)
indicatorWrapper.height(32)
@ -57,8 +66,9 @@ public class ColorPickerView<EnumType>: UIStackView {
indicatorWrapper.pinLeading()
indicatorWrapper.pinBottom()
indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
addArrangedSubview(indicatorWrapper)
let buttonWrapper = View()
buttonWrapper.addSubview(button)
buttonWrapper.height(32)
@ -68,4 +78,15 @@ public class ColorPickerView<EnumType>: UIStackView {
button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
addArrangedSubview(buttonWrapper)
}
// MARK: - UIColorPickerViewControllerDelegate
public func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
selectedColor = viewController.selectedColor
onColorSelected?(viewController.selectedColor)
}
public func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
UIApplication.topViewController()?.dismiss(animated: true)
}
}

107
VDSSample/Classes/TokenColorPickerFormSection.swift Normal file
View File

@ -0,0 +1,107 @@
//
// TokenColorPickerFormSection.swift
// VDSSample
//
// Created by Matt Bruce on 10/7/24.
//
import Foundation
import UIKit
import VDS
public class TokenColorPickerSection<EnumType: RawRepresentable & CaseIterable>: FormSection where EnumType.RawValue == String {
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
private var picker: UIPickerView
private var rowTitle: String = "Color"
private var rowToolTip: Tooltip.TooltipModel?
///Handles VDS Color Selections
private var tokenColorRow: UIView?
private lazy var tokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
}()
///Handles Custom Color picker selections
private var customColorRow: UIView?
private lazy var customColorView: ColorPickerView = {
.init(color: .black).with {
$0.onColorSelected = { [weak self] color in
guard let self else { return }
onColorSelected?(color)
}
}
}()
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
/// This is the 1st row that the user will pick from, again this enum has to contain "token" and "custom" otherwise it won't work well.
public lazy var pickerSelectorView = {
PickerSelectorView<EnumType>(title: "",
picker: picker,
items: EnumType.allCases as! [EnumType])
}()
public var selectedItem: EnumType { pickerSelectorView.selectedItem }
/// Callback for a non-token/non-color selection
public var onSelected: ((EnumType) -> Void)?
/// Callback after "token" is selected from the VDSColor array
public var onTokenSelected: ((UIColor.VDSColor) -> Void)?
/// Callback once the user picks a color from the picker.
public var onColorSelected: ((UIColor) -> Void)?
///Pass in a title and the reference for the picker
public init(title: String? = nil, rowTitle: String = "Color", rowTooltip: Tooltip.TooltipModel? = nil, picker: UIPickerView) {
self.picker = picker
super.init(frame: .zero)
self.title = title
self.rowTitle = rowTitle
self.rowToolTip = rowTooltip
setup()
}
required init(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public func setup() {
addFormRow(label: rowTitle, tooltip: rowToolTip, view: pickerSelectorView)
tokenColorRow = addFormRow(label: "Token", view: tokenColorView)
customColorRow = addFormRow(label: "Custom", view: customColorView)
tokenColorRow?.isHidden = true
customColorRow?.isHidden = true
pickerSelectorView.onPickerDidSelect = { [weak self] item in
guard let self else { return }
let isToken = item.rawValue == "token"
let isCustom = item.rawValue == "custom"
if isToken {
self.onTokenSelected?(self.tokenColorView.selectedItem)
} else if let selectedItem = self.customColorView.selectedColor, isCustom {
self.onColorSelected?(selectedItem)
} else {
self.onSelected?(item)
}
self.tokenColorRow?.isHidden = !isToken
self.customColorRow?.isHidden = !isCustom
}
tokenColorView.onPickerDidSelect = { [weak self] item in
guard let self else { return }
self.onTokenSelected?(item)
}
}
public func setDefault(value: EnumType) {
pickerSelectorView.set(item: value)
}
}

59
VDSSample/ViewControllers/BadgeIndicatorViewController.swift
View File

@ -37,18 +37,45 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
items: BadgeIndicator.MaximumDigits.allCases)
}()
lazy var borderColorLightPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
enum BorderColor: String, CaseIterable {
case `default`, token, custom
}
lazy var borderColorLightPickerSelectorView: TokenColorPickerSection = {
TokenColorPickerSection<BorderColor>(rowTitle: "Border Light",
picker: self.picker).with {
$0.onSelected = { [weak self] color in
guard let self else { return }
component.borderColorLight = nil
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.borderColorLight = color.uiColor
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.borderColorLight = color
}
}
}()
lazy var borderColorDarkPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
lazy var borderColorDarkPickerSelectorView : TokenColorPickerSection = {
TokenColorPickerSection<BorderColor>(rowTitle: "Border Dark",
picker: self.picker).with {
$0.onSelected = { [weak self] color in
guard let self else { return }
component.borderColorDark = nil
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.borderColorDark = color.uiColor
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.borderColorDark = color
}
}
}()
var textField = NumericField()
var leadingCharacterTextField = TextField()
@ -83,8 +110,8 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
addFormRow(label: "Surface", view: surfacePickerSelectorView)
addFormRow(label: "Hide Border", view: hideBorderSwitch, pinTrailing: false)
addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
append(section: borderColorLightPickerSelectorView)
append(section: borderColorDarkPickerSelectorView)
addFormRow(label: "Size", view: textSizePickerSelectorView)
addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
@ -173,8 +200,6 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
fillColorPickerSelectorView.text = component.fillColor.rawValue
textSizePickerSelectorView.text = component.size.rawValue
maxDigitsPickerSelectorView.text = component.maximumDigits.rawValue
borderColorDarkPickerSelectorView.text = component.borderColorDark?.toVDSColor()?.rawValue ?? ""
borderColorLightPickerSelectorView.text = component.borderColorLight?.toVDSColor()?.rawValue ?? ""
textField.text = "\(component.number!)"
visibleForms()
}
@ -207,14 +232,6 @@ class BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
maxDigitsPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.maximumDigits = item
}
borderColorDarkPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.borderColorDark = item.uiColor
}
borderColorLightPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.borderColorLight = item.uiColor
}
}
}

84
VDSSample/ViewControllers/BadgeViewController.swift
View File

@ -36,12 +36,14 @@ class BadgeViewController: BaseViewController<Badge> {
}
}
}
lazy var fillColorPickerSelectorView = {
PickerSelectorView(title: "red",
picker: self.picker,
items: Badge.FillColor.allCases)
}()
enum FillColor: String, CaseIterable {
case red, yellow, green, orange, blue, black, white, token, custom
}
enum TextColor: String, CaseIterable {
case `default`, token, custom
}
lazy var numberOfLinesPickerSelectorView = {
PickerSelectorView(title: "one",
@ -51,18 +53,74 @@ class BadgeViewController: BaseViewController<Badge> {
var textField = TextField()
var maxWidthTextField = NumericField()
override func viewDidLoad() {
super.viewDidLoad()
addContentTopView(view: component, pinTrailing: false)
setupPicker()
setupModel()
}
lazy var fillColorSection = {
TokenColorPickerSection<FillColor>(rowTitle: "Fill Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
var fillColor: Badge.FillColor = .red
switch item {
case .red:
fillColor = .red
case .yellow:
fillColor = .yellow
case .green:
fillColor = .green
case .orange:
fillColor = .orange
case .blue:
fillColor = .blue
case .black:
fillColor = .black
case .white:
fillColor = .white
default:
break
}
component.fillColor = fillColor
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.fillColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.fillColor = .custom(color)
}
}
}()
lazy var textColorSection = {
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
component.textColor = nil
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.textColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.textColor = .custom(color)
}
}
}()
override func setupForm(){
super.setupForm()
addFormRow(label: "Fill Color", view: fillColorPickerSelectorView)
addFormRow(label: "Surface", view: surfacePickerSelectorView)
append(section: fillColorSection)
append(section: textColorSection)
addFormRow(label: "Text", view: textField)
addFormRow(label: "Max Width", view: maxWidthTextField)
addFormRow(label: "Number of Lines", view: numberOfLinesPickerSelectorView)
@ -89,6 +147,8 @@ class BadgeViewController: BaseViewController<Badge> {
//setup UI
surfacePickerSelectorView.text = component.surface.rawValue
textField.text = component.text
fillColorSection.setDefault(value: .red)
textColorSection.setDefault(value: .default)
}
func setupPicker(){
@ -97,14 +157,6 @@ class BadgeViewController: BaseViewController<Badge> {
self?.component.surface = item
self?.contentTopView.backgroundColor = item.color
}
fillColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.fillColor = item
}
numberOfLinesPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.numberOfLines = item.intValue
}
}
}

86
VDSSample/ViewControllers/ButtonIconViewController.swift
View File

@ -76,34 +76,36 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
setupModel()
}
var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true }
var badgeIndicatorFormStackView = FormSection().with { $0.isHidden = true; $0.title = "Badge Indicator" }
///ColorPicker
var colorPickerType: ColorPickerType = .light
enum ColorPickerType {
case light, dark
}
lazy var colorPicker: UIColorPickerViewController = {
let picker = UIColorPickerViewController()
picker.delegate = self
return picker
}()
lazy var lightColorPicker: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.light) {[weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
lazy var lightColorPicker: ColorPickerView = {
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateColors()
}
}
}()
lazy var darkColorPicker: ColorPickerView = {
return .init(with: ColorPickerType.dark) {[weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateColors()
}
}
}()
func updateColors() {
if let selectedLightColor = lightColorPicker.selectedColor {
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedLightColor)
} else if let selectedDarkColor = darkColorPicker.selectedColor,
let selectedLightColor = lightColorPicker.selectedColor {
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
}
}
override func setupForm(){
super.setupForm()
addFormRow(label: "Disabled", view: disabledSwitch, pinTrailing: false)
@ -111,21 +113,25 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
addFormRow(label: "Surface Type", view: surfaceTypePickerSelectorView)
addFormRow(label: "Size", view: sizePickerSelectorView)
addFormRow(label: "Kind", view: kindPickerSelectorView)
addFormRow(label: "Selected Light", view: lightColorPicker)
addFormRow(label: "Selected Dark", view: darkColorPicker)
addFormRow(label: "Floating", view: floating, pinTrailing: false)
addFormRow(label: "Hide Border", view: hideBorder, pinTrailing: false)
addFormRow(label: "Fit To Icon", view: fitToIcon, pinTrailing: false)
addFormRow(label: "Name", view: namePickerSelectorView)
addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
addFormRow(label: "X Offset", view: centerX)
addFormRow(label: "Y Offset", view: centerY)
append(section: .init().with {
$0.title = "Select State"
$0.addFormRow(label: "Selectable", view: selectableSwitch, pinTrailing: false)
$0.addFormRow(label: "Selected Icon Name", view: selectedIconNamePickerSelectorView)
$0.addFormRow(label: "Selected Light", view: lightColorPicker)
$0.addFormRow(label: "Selected Dark", view: darkColorPicker)
})
//badgeIndicator section
addFormRow(label: "Show Badge Indicator", view: badgeIndicatorSwitch, pinTrailing: false)
//badgeIndicator section
badgeIndicatorFormStackView.addFormRow(label: "Expand Direction", view: badgeIndicatorExpandDirectionPickerSelectorView)
badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch)
badgeIndicatorFormStackView.addFormRow(label: "Badge Variants", view: variantOneSwitch, pinTrailing: false)
badgeIndicatorFormStackView.addFormRow(label: "Custom X offset", view: customBadgeIndicatorXField)
badgeIndicatorFormStackView.addFormRow(label: "Custom Y offset", view: customBadgeIndicatorYField)
@ -218,7 +224,8 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
func setupModel() {
let name = Icon.Name.addToFavorite
let selectedName = Icon.Name.addedToFavorite
component.selectedIconName = selectedName
component.iconName = name
component.onChange = { c in print("changed: \(c.isSelected)") }
//setup UI
@ -227,6 +234,7 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
kindPickerSelectorView.text = component.kind.rawValue
sizePickerSelectorView.text = component.size.rawValue
namePickerSelectorView.text = name.rawValue
selectedIconNamePickerSelectorView.text = selectedName.rawValue
disabledSwitch.isOn = !component.isEnabled
badgeIndicatorExpandDirectionPickerSelectorView.text = ButtonIcon.BadgeIndicatorModel.ExpandDirection.right.rawValue
}
@ -308,27 +316,3 @@ extension ButtonIconViewController: ComponentSampleable {
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
}
}
extension ButtonIconViewController: UIColorPickerViewControllerDelegate {
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
let selectedColor = picker.selectedColor
if let selectedColor {
colorPicker.selectedColor = selectedColor
}
present(colorPicker, animated: true)
}
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
dismiss(animated: true)
}
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
let color = viewController.selectedColor
let selectedColorPickerView = colorPickerType == .dark ? darkColorPicker : lightColorPicker
selectedColorPickerView.selectedColor = color
if let selectedDarkColor = darkColorPicker.selectedColor, let selectedLightColor = lightColorPicker.selectedColor {
component.selectedIconColorConfiguration = .init(selectedLightColor, selectedDarkColor)
}
}
}

71
VDSSample/ViewControllers/IconViewController.swift
View File

@ -12,19 +12,52 @@ import VDSCoreTokens
import Combine
class IconViewController: BaseViewController<Icon> {
enum IconColor: String, CaseIterable {
case `default`, token, custom
}
lazy var lightColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
lazy var lightColorPickerSelectorView : TokenColorPickerSection = {
TokenColorPickerSection<IconColor>(rowTitle: "Light Color",
picker: self.picker).with {
$0.onSelected = { [weak self] color in
guard let self else { return }
light = .black
setColorConfiguration()
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
light = color.uiColor
setColorConfiguration()
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
light = color
setColorConfiguration()
}
}
}()
lazy var darkColorPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
lazy var darkColorPickerSelectorView: TokenColorPickerSection = {
TokenColorPickerSection<IconColor>(rowTitle: "Dark Color",
picker: self.picker).with {
$0.onSelected = { [weak self] color in
guard let self else { return }
dark = .white
setColorConfiguration()
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
dark = color.uiColor
setColorConfiguration()
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
dark = color
setColorConfiguration()
}
}
}()
lazy var namePickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
@ -51,8 +84,8 @@ class IconViewController: BaseViewController<Icon> {
addFormRow(label: "Surface", view: surfacePickerSelectorView)
addFormRow(label: "Size", view: sizePickerSelectorView)
addFormRow(label: "Custom Size", view: customSizeField)
addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
append(section: lightColorPickerSelectorView)
append(section: darkColorPickerSelectorView)
addFormRow(label: "Name", view: namePickerSelectorView)
customSizeField
@ -69,8 +102,6 @@ class IconViewController: BaseViewController<Icon> {
//setup UI
surfacePickerSelectorView.text = component.surface.rawValue
sizePickerSelectorView.text = component.size.rawValue
lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
namePickerSelectorView.text = name.rawValue
}
func setupPicker(){
@ -83,23 +114,15 @@ class IconViewController: BaseViewController<Icon> {
sizePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.size = item
}
lightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setColorConfiguration()
}
darkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setColorConfiguration()
}
namePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.name = item
}
}
var light: UIColor = .black
var dark: UIColor = .white
func setColorConfiguration() {
let light = lightColorPickerSelectorView.selectedItem.uiColor
let dark = darkColorPickerSelectorView.selectedItem.uiColor
component.colorConfiguration = .init(light, dark)
}

167
VDSSample/ViewControllers/TileContainerViewController.swift
View File

@ -13,12 +13,6 @@ import Combine
class TileContainerViewController: BaseViewController<TileContainer> {
lazy var colorPicker: UIColorPickerViewController = {
let picker = UIColorPickerViewController()
picker.delegate = self
return picker
}()
lazy var imageFallbackColorPickerSelectorView = {
SurfacePickerSelectorView(picker: self.picker)
}()
@ -53,12 +47,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
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"
}
@ -70,46 +58,50 @@ class TileContainerViewController: BaseViewController<TileContainer> {
$0.placeholder = "Minimum 100px else it will occupy full container"
}
var colorPickerType: ColorPickerType = .gradientColor1
enum ColorPickerType {
case custom, gradientColor1, gradientColor2, contentViewBackgroundColor
}
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = {
TokenColorPickerSection<BackgroundColor>(rowTitle: "Background Color",
picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
component.color = .primary
case .secondary:
component.color = .secondary
case .white:
component.color = .white
case .black:
component.color = .black
default: break;
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.color = .custom(color.uiColor)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.color = .custom(color)
}
}
}()
lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
lazy var gradientColorView1: ColorPickerView = {
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateGradientColors()
}
}
}()
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)
lazy var gradientColorView2: ColorPickerView = {
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateGradientColors()
}
}
}()
@ -208,21 +200,10 @@ class TileContainerViewController: BaseViewController<TileContainer> {
addFormRow(label: "Height", view: heightTextField)
addFormRow(label: "Show Border", view: showBorderSwitch, pinTrailing: false)
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
backgroundColorTokenFormStackView.addFormRow(label: "Token", view: backgroundColorTokenColorView)
backgroundColorFormStackView.addFormRow(label: "Custom", view: backgroundColorCustomColorView)
append(section: backgroundColorTokenFormStackView)
append(section: backgroundColorFormStackView)
append(section: 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, pinTrailing: false)
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@ -309,7 +290,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
func setupModel() {
//setup UI
surfacePickerSelectorView.text = component.surface.rawValue
backgroundColorPickerSelectorView.text = backgroundColor.rawValue
backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
paddingPickerSelectorView.text = padding.rawValue
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@ -322,21 +303,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
self?.component.surface = item
self?.contentTopView.backgroundColor = item.color
}
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
guard let self else { return }
if let color = item.color {
self.component.color = color
} else {
backgroundColorTokenFormStackView.isHidden = item != .token
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 {
@ -345,7 +312,6 @@ class TileContainerViewController: BaseViewController<TileContainer> {
self.gradientColorView1.selectedColor = nil
self.gradientColorView2.selectedColor = nil
} else {
self.colorPickerType = .gradientColor1
self.gradientColorsFormStackView.isHidden = false
}
}
@ -369,12 +335,12 @@ class TileContainerViewController: BaseViewController<TileContainer> {
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.contentView.backgroundColor ?? .white
self.present(self.colorPicker, animated: true)
}
func updateGradientColors(){
if let selectedGradient1Color = gradientColorView1.selectedColor,
let selectedGradient2Color = gradientColorView2.selectedColor{
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
}
}
@ -389,45 +355,6 @@ extension TileContainerViewController: ComponentSampleable {
}
}
extension TileContainerViewController: UIColorPickerViewControllerDelegate {
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
let selectedColor = picker.selectedColor
if let selectedColor {
colorPicker.selectedColor = selectedColor
}
present(colorPicker, animated: true)
}
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
dismiss(animated: true)
}
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
let color = viewController.selectedColor
switch colorPickerType {
case .contentViewBackgroundColor:
component.contentView.backgroundColor = color
case .gradientColor1:
gradientColorView1.selectedColor = viewController.selectedColor
updateGradientColors()
case .gradientColor2:
gradientColorView2.selectedColor = viewController.selectedColor
updateGradientColors()
case .custom:
backgroundColorCustomColorView.selectedColor = color
component.color = .custom(color)
}
}
func updateGradientColors(){
if let selectedGradient1Color = gradientColorView1.selectedColor,
let selectedGradient2Color = gradientColorView2.selectedColor{
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

754
VDSSample/ViewControllers/TileletViewController.swift
View File

@ -39,7 +39,7 @@ class TileletViewController: BaseViewController<Tilelet> {
lazy var badgeFillColorPickerSelectorView = {
PickerSelectorView(title: "red",
picker: self.picker,
items: Badge.FillColor.allCases)
items: BadgeViewController.FillColor.allCases)
}()
lazy var badgeNumberOfLinesPickerSelectorView = {
PickerSelectorView(title: "one",
@ -61,63 +61,125 @@ class TileletViewController: BaseViewController<Tilelet> {
items: TileContainerViewController.BackgroundEffect.allCases)
}()
lazy var colorPicker: UIColorPickerViewController = {
let picker = UIColorPickerViewController()
picker.delegate = self
return picker
lazy var backgroundColorPickerSelectorView: TokenColorPickerSection = {
TokenColorPickerSection<BackgroundColor>(
rowTitle: "Background Color",
rowTooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."),
picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
component.color = .primary
case .secondary:
component.color = .secondary
case .white:
component.color = .white
case .black:
component.color = .black
default: break;
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
component.color = .custom(color.uiColor)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
component.color = .custom(color)
}
}
}()
var colorPickerType: ColorPickerType = .custom
enum ColorPickerType {
case gradientColor1, gradientColor2
case contentViewBackgroundColor, token, custom
}
lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
lazy var gradientColorView1: ColorPickerView = {
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateGradientColors()
}
}
}()
lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
lazy var gradientColorView2: ColorPickerView = {
return .init().with {
$0.onColorSelected = { [weak self] _ in
guard let self else { return }
updateGradientColors()
}
}
}()
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 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,
items: TitleLockup.TextAlignment.allCases)
}()
/// Badge
enum BadgeFillColor: String, CaseIterable {
case red, yellow, green, orange, blue, black, white, token, custom
}
enum BadgeTextColor: String, CaseIterable {
case `default`, token, custom
}
var badgeFillColor: Badge.FillColor = .red { didSet { setBadgeModel() } }
lazy var badgeFillColorSection = {
TokenColorPickerSection<BadgeFillColor>(rowTitle: "Fill Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
var fillColor: Badge.FillColor = .red
switch item {
case .red:
fillColor = .red
case .yellow:
fillColor = .yellow
case .green:
fillColor = .green
case .orange:
fillColor = .orange
case .blue:
fillColor = .blue
case .black:
fillColor = .black
case .white:
fillColor = .white
default:
break
}
badgeFillColor = fillColor
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
badgeFillColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
badgeFillColor = .custom(color)
}
}
}()
var badgeTextColor: Badge.TextColor? { didSet { setBadgeModel() } }
lazy var badgeTextColorSection = {
TokenColorPickerSection<BadgeTextColor>(rowTitle: "Text Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
badgeTextColor = nil
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
badgeTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
badgeTextColor = .custom(color)
}
}
}()
/// titleLockup
var currentSurfaceColorType: SurfaceColorType = .title
enum SurfaceColorType {
@ -135,81 +197,80 @@ class TileletViewController: BaseViewController<Tilelet> {
enum IconColor: String, CaseIterable {
case `default`, token, custom
}
/// eyebrow
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var eyebrowColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TextColor.allCases)
}()
lazy var eyebrowTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
}()
lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
self?.currentSurfaceColorType = .eyebrow
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setEyebrowModel() } }
lazy var eyebrowTextColorFormSection = {
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
eyeBrowTextColor = .primary
case .secondary:
eyeBrowTextColor = .secondary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
eyeBrowTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
eyeBrowTextColor = .custom(color)
}
}
}()
/// title
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var titleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TitleTextColor.allCases)
}()
lazy var titleTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
}()
lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
self?.currentSurfaceColorType = .title
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setSubTitleModel() } }
lazy var subTitleTextColorFormSection = {
TokenColorPickerSection<TextColor>(rowTitle: "Text Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
subtitleTextColor = .primary
case .secondary:
subtitleTextColor = .secondary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
subtitleTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
subtitleTextColor = .custom(color)
}
}
}()
/// subtitle
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var subtitleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TextColor.allCases)
}()
lazy var subtitleTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
}()
lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .white) { [weak self] picker in
self?.currentSurfaceColorType = .subtitle
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
lazy var titleTextColorFormSection = {
TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color", picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
titleTextColor = .primary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
titleTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
titleTextColor = .custom(color)
}
}
}()
///Icons
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,
@ -222,61 +283,32 @@ class TileletViewController: BaseViewController<Tilelet> {
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: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
}()
lazy var descriptionIconCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom) { [weak self] picker in
self?.currentSurfaceColorType = .descriptionIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
}
}()
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: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteWhite.rawValue }
}()
lazy var directionalIconCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom) { [weak self] picker in
self?.currentSurfaceColorType = .directionalIcon
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var descriptionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDescriptiveIconModel() } }
lazy var descriptionIconColorFormSection = {
TokenColorPickerSection<IconColor>(picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .default:
descriptionIconColor = nil
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
descriptionIconColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
descriptionIconColor = .custom(color)
}
$0.isHidden = true
}
}()
var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
lazy var directionIconPickerSelectorView = {
PickerSelectorView(title: "",
picker: self.picker,
@ -288,7 +320,29 @@ class TileletViewController: BaseViewController<Tilelet> {
picker: self.picker,
items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
}()
var directionIconColor: Tilelet.IconColor? = .token(.paletteWhite) { didSet { setDirectionalIconModel() } }
lazy var directionIconColorFormSection = {
TokenColorPickerSection<IconColor>(picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .default:
directionIconColor = nil
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
directionIconColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
directionIconColor = .custom(color)
}
$0.isHidden = true
}
}()
let backgroundImage = UIImage(named: "backgroundTest")!
var clickableSwitch = Toggle()
var eyebrowTextField = TextField()
@ -337,14 +391,7 @@ class TileletViewController: BaseViewController<Tilelet> {
addFormRow(label: "Text Width", view: textWidthTextField)
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)
append(section: backgroundColorPickerSelectorView)
addFormRow(label: "Background Image", view: showBackgroundImageSwitch, pinTrailing: false)
addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch, pinTrailing: false)
addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@ -357,10 +404,11 @@ class TileletViewController: BaseViewController<Tilelet> {
append(section: .init().with({
$0.title = "Badge"
$0.addFormRow(label: "Text", view: badgeTextField)
$0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
$0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
$0.addFormRow(label: "Max Width", view: maxWidthTextField)
}))
append(section: badgeFillColorSection)
append(section: badgeTextColorSection)
append(section: .init().with({
$0.title = "Text Styles"
@ -372,35 +420,21 @@ class TileletViewController: BaseViewController<Tilelet> {
$0.title = "Eyebrow"
$0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
$0.addFormRow(label: "Text", view: eyebrowTextField)
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
}))
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowTokenFormStackView)
append(section: eyebrowColorFormStackView)
append(section: eyebrowTextColorFormSection)
append(section: .init().with({
$0.title = "Title"
$0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
$0.addFormRow(label: "Text", view: titleTextField)
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
}))
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
append(section: titleTokenFormStackView)
append(section: titleColorFormStackView)
append(section: titleTextColorFormSection)
append(section: .init().with({
$0.title = "Subtitle"
$0.addFormRow(label: "Text", view: subTitleTextField)
$0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
}))
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleTokenFormStackView)
append(section: subtitleColorFormStackView)
append(section: subTitleTextColorFormSection)
append(section: .init().with({
$0.title = "Description Icon "
@ -410,12 +444,7 @@ class TileletViewController: BaseViewController<Tilelet> {
descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
descriptionIconFormStackView.addFormRow(label: "Accessibility", view: descriptionIconAccessibilityTextField)
descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
descriptionIconFormStackView.addFormRow(label: "Color", view: descriptionIconColorPickerSelectorView)
descriptionIconTokenFormStackView.addFormRow(label: "Token", view: descriptionIconTokenColorView)
descriptionIconColorFormStackView.addFormRow(label: "Custom", view: descriptionIconCustomColorView)
append(section: descriptionIconTokenFormStackView)
append(section: descriptionIconColorFormStackView)
append(section: descriptionIconColorFormSection)
append(section: .init().with({
$0.title = "Directional Icon"
@ -424,12 +453,8 @@ class TileletViewController: BaseViewController<Tilelet> {
append(section: directionalIconFormStackView)
directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
directionalIconFormStackView.addFormRow(label: "Color", view: directionalIconColorPickerSelectorView)
directionalIconTokenFormStackView.addFormRow(label: "Token", view: directionalIconTokenColorView)
directionalIconColorFormStackView.addFormRow(label: "Custom", view: directionalIconCustomColorView)
append(section: directionalIconTokenFormStackView)
append(section: directionalIconColorFormStackView)
append(section: directionIconColorFormSection)
clickableSwitch.onChange = { [weak self] sender in
guard let self else { return }
if sender.isOn {
@ -575,12 +600,58 @@ class TileletViewController: BaseViewController<Tilelet> {
self?.component.badgeModel?.maxWidth = number.cgFloatValue
}.store(in: &subscribers)
}
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.")
component.color = .black
component.surface = .light
component.titleModel = titleModel
component.subTitleModel = subTitleModel
component.padding = .small
//setup UI
backgroundColorPickerSelectorView.setDefault(value: backgroundColor)
textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
surfacePickerSelectorView.text = component.surface.rawValue
otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
titleTextField.text = titleModel.text
subTitleTextField.text = subTitleModel.text
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
textPositionPickerSelectorView.text = component.textPostion.rawValue
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
updateOtherTextStyles()
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
badgeFillColorSection.setDefault(value: .red)
badgeTextColorSection.setDefault(value: .default)
eyebrowTextColorFormSection.setDefault(value: .primary)
titleTextColorFormSection.setDefault(value: .primary)
subTitleTextColorFormSection.setDefault(value: .primary)
descriptionIconColorFormSection.setDefault(value: .token)
directionIconColorFormSection.setDefault(value: .token)
}
func setIconColorForms() {
setDirectionalIconColorForm()
setDescriptionIconColorForm()
}
func setDirectionalIconColorForm() {
directionIconColorFormSection.isHidden = !showDirectionalIconSwitch.isOn
}
func setDescriptionIconColorForm() {
descriptionIconColorFormSection.isHidden = !showDescriptionIconSwitch.isOn
}
func setDescriptionIconForm() {
let showForm = showDescriptionIconSwitch.isOn
descriptionIconFormStackView.isHidden = !showForm
@ -607,62 +678,10 @@ class TileletViewController: BaseViewController<Tilelet> {
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.")
component.color = .black
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
titleTextField.text = titleModel.text
subTitleTextField.text = subTitleModel.text
widthTextField.text = component.width != nil ? "\(component.width!)" : ""
textPositionPickerSelectorView.text = component.textPostion.rawValue
scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
updateOtherTextStyles()
descriptionIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
directionalIconCustomColorView.selectedColor = VDSColor.elementsPrimaryOnlight
directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
}
//sub models
func setBadgeModel() {
if let text = badgeTextField.text, !text.isEmpty {
component.badgeModel = Tilelet.BadgeModel(text: text, fillColor: badgeFillColorPickerSelectorView.selectedItem, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
component.badgeModel = Tilelet.BadgeModel(text: text, textColor: badgeTextColor, fillColor: badgeFillColor, numberOfLines: badgeNumberOfLinesPickerSelectorView.selectedItem.intValue)
} else {
component.badgeModel = nil
}
@ -670,21 +689,7 @@ class TileletViewController: BaseViewController<Tilelet> {
func setTitleModel() {
if let text = titleTextField.text, !text.isEmpty {
var textColor: TitleLockup.TitleTextColor
switch titleColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .token:
textColor = .token(titleTokenColorView.selectedItem)
case .custom:
if let color = titleCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
component.titleModel = Tilelet.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
} else {
component.titleModel = nil
}
@ -692,23 +697,7 @@ class TileletViewController: BaseViewController<Tilelet> {
func setSubTitleModel() {
if let text = subTitleTextField.text, !text.isEmpty {
var textColor: TitleLockup.TextColor
switch subtitleColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .secondary:
textColor = .secondary
case .token:
textColor = .token(subtitleTokenColorView.selectedItem)
case .custom:
if let color = subtitleCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: subtitleTextColor)
} else {
component.subTitleModel = nil
}
@ -716,22 +705,7 @@ class TileletViewController: BaseViewController<Tilelet> {
func setEyebrowModel() {
if let text = eyebrowTextField.text, !text.isEmpty {
var textColor: TitleLockup.TextColor
switch eyebrowColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .secondary:
textColor = .secondary
case .token:
textColor = .token(eyebrowTokenColorView.selectedItem)
case .custom:
if let color = eyebrowCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
} else {
component.eyebrowModel = nil
}
@ -740,36 +714,26 @@ class TileletViewController: BaseViewController<Tilelet> {
func setDescriptiveIconModel() {
let iconSize = descriptionIconSizePickerSelectorView.selectedItem
let iconName = descriptionNamePickerSelectorView.selectedItem
var iconColor: Tilelet.IconColor? = nil
var accessibleText: String?
if let at = descriptionIconAccessibilityTextField.text, !at.isEmpty {
accessibleText = at
}
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, accessibleText: accessibleText ?? nil )
component.descriptiveIconModel = .init(name: iconName, iconColor: descriptionIconColor, size: iconSize, accessibleText: accessibleText ?? nil )
}
func setDirectionalIconModel() {
let iconType = directionIconPickerSelectorView.selectedItem
let iconSize = directionIconSizePickerSelectorView.selectedItem
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: directionIconColor, size: iconSize)
}
func updateGradientColors(){
if let selectedGradient1Color = gradientColorView1.selectedColor,
let selectedGradient2Color = gradientColorView2.selectedColor{
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
}
component.directionalIconModel = .init(iconType: iconType, iconColor: iconColor, size: iconSize)
}
func updateOtherTextStyles() {
@ -802,10 +766,6 @@ class TileletViewController: BaseViewController<Tilelet> {
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
}
@ -824,7 +784,6 @@ class TileletViewController: BaseViewController<Tilelet> {
self.gradientColorView1.selectedColor = nil
self.gradientColorView2.selectedColor = nil
} else {
self.colorPickerType = .gradientColor1
self.gradientColorsFormStackView.isHidden = false
}
}
@ -832,59 +791,7 @@ class TileletViewController: BaseViewController<Tilelet> {
textAlignmentPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.component.titleLockup.textAlignment = item
}
backgroundColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
guard let self else { return }
if let color = getTilelet(backgroundColor: item) {
component.color = color
} else {
backgroundColorTokenFormStackView.isHidden = item != .token
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
self?.eyebrowColorFormStackView.isHidden = item != .custom
self?.setEyebrowModel()
}
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setEyebrowModel()
}
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentSurfaceColorType = .title
self?.titleTokenFormStackView.isHidden = item != .token
self?.titleColorFormStackView.isHidden = item != .custom
self?.setTitleModel()
}
titleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setTitleModel()
}
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentSurfaceColorType = .subtitle
self?.subtitleTokenFormStackView.isHidden = item != .token
self?.subtitleColorFormStackView.isHidden = item != .custom
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()
}
@ -892,17 +799,7 @@ class TileletViewController: BaseViewController<Tilelet> {
descriptionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setDescriptiveIconModel()
}
descriptionIconTokenColorView.onPickerDidSelect = { [weak self] item in
self?.colorPickerType = .token
self?.setDescriptiveIconModel()
}
directionalIconColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setIconColorForms()
self?.setDirectionalIconModel()
}
directionIconPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setDirectionalIconModel()
}
@ -910,11 +807,7 @@ class TileletViewController: BaseViewController<Tilelet> {
directionIconSizePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setDirectionalIconModel()
}
directionalIconTokenColorView.onPickerDidSelect = { [weak self] item in
self?.colorPickerType = .token
self?.setDirectionalIconModel()
}
}
func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@ -960,79 +853,6 @@ extension TileletViewController: ComponentSampleable {
}
}
extension TileletViewController: UIColorPickerViewControllerDelegate {
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
let selectedColor = picker.selectedColor
if let selectedColor {
colorPicker.selectedColor = selectedColor
}
present(colorPicker, animated: true)
}
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
dismiss(animated: true)
}
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
let color = viewController.selectedColor
var lightColorView: ColorPickerView<ColorPickerType>
var darkColorView: ColorPickerView<ColorPickerType>
switch colorPickerType {
case .contentViewBackgroundColor:
component.contentView.backgroundColor = color
case .gradientColor1:
gradientColorView1.selectedColor = viewController.selectedColor
updateGradientColors()
case .gradientColor2:
gradientColorView2.selectedColor = viewController.selectedColor
updateGradientColors()
case .custom:
var colorView: ColorPickerView<ColorPickerType>
switch currentSurfaceColorType {
case .background:
colorView = backgroundColorCustomColorView
case .eyebrow:
colorView = eyebrowCustomColorView
case .title:
colorView = titleCustomColorView
case .subtitle:
colorView = subtitleCustomColorView
case .directionalIcon:
colorView = directionalIconCustomColorView
case .descriptionIcon:
colorView = descriptionIconCustomColorView
}
colorView.selectedColor = viewController.selectedColor
switch currentSurfaceColorType {
case .background:
component.color = .custom(color)
case .eyebrow:
setEyebrowModel()
case .title:
setTitleModel()
case .subtitle:
setSubTitleModel()
case .directionalIcon:
setDirectionalIconModel()
case .descriptionIcon:
setDescriptiveIconModel()
}
default:
break
}
}
func updateGradientColors(){
if let selectedGradient1Color = gradientColorView1.selectedColor,
let selectedGradient2Color = gradientColorView2.selectedColor{
component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
}
}
}
extension TileletViewController {
enum BackgroundColor: String, CaseIterable {

290
VDSSample/ViewControllers/TitleLockupViewController.swift
View File

@ -36,21 +36,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
var titleTextField = TextField()
var subTitleTextField = TextField()
/// **********************************************
/// Text Color
lazy var colorPicker: UIColorPickerViewController = {
let picker = UIColorPickerViewController()
picker.delegate = self
return picker
}()
var currentLabelType: LabelType = .title
var colorPickerType: ColorPickerType = .custom
enum LabelType {
case eyebrow, title, subtitle
}
enum TitleTextColor: String, CaseIterable {
case primary, token, custom
}
@ -58,81 +43,81 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
enum TextColor: String, CaseIterable {
case primary, secondary, token, custom
}
enum ColorPickerType {
case custom
}
/// eyebrow
var eyebrowTokenFormStackView = FormSection().with { $0.isHidden = true }
var eyebrowColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var eyebrowColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TextColor.allCases)
}()
lazy var eyebrowTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
}()
lazy var eyebrowCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var eyeBrowTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
lazy var eyebrowTextColorFormSection = {
TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
eyeBrowTextColor = .primary
case .secondary:
eyeBrowTextColor = .secondary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
eyeBrowTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
eyeBrowTextColor = .custom(color)
}
}
}()
/// title
var titleTokenFormStackView = FormSection().with { $0.isHidden = true }
var titleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var titleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TitleTextColor.allCases)
}()
lazy var titleTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
}()
lazy var titleCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var subtitleTextColor: TitleLockup.TextColor = .primary { didSet { setOtherModels() } }
lazy var subTitleTextColorFormSection = {
TokenColorPickerSection<TextColor>(rowTitle: "Text Color",
picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
subtitleTextColor = .primary
case .secondary:
subtitleTextColor = .secondary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
subtitleTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
subtitleTextColor = .custom(color)
}
}
}()
/// subtitle
var subtitleTokenFormStackView = FormSection().with { $0.isHidden = true }
var subtitleColorFormStackView = FormSection().with { $0.isHidden = true }
lazy var subtitleColorPickerSelectorView = {
PickerSelectorView(title: "primary",
picker: self.picker,
items: TextColor.allCases)
}()
lazy var subtitleTokenColorView = {
PickerSelectorView(title: "",
picker: self.picker,
items: UIColor.VDSColor.allCases)
.with { $0.text = UIColor.VDSColor.paletteBlack.rawValue }
}()
lazy var subtitleCustomColorView: ColorPickerView<ColorPickerType> = {
return .init(with: ColorPickerType.custom, color: .black) { [weak self] picker in
self?.colorPickerType = picker.pickerType
self?.selectedColorTapped(picker)
var titleTextColor: TitleLockup.TitleTextColor = .primary { didSet { setTitleModel() } }
lazy var titleTextColorFormSection = {
TokenColorPickerSection<TitleTextColor>(rowTitle: "Text Color",
picker: self.picker).with {
$0.onSelected = { [weak self] item in
guard let self else { return }
switch item {
case .primary:
titleTextColor = .primary
default: break
}
}
$0.onTokenSelected = { [weak self] color in
guard let self else { return }
titleTextColor = .token(color)
}
$0.onColorSelected = { [weak self] color in
guard let self else { return }
titleTextColor = .custom(color)
}
}
}()
override func viewDidLoad() {
super.viewDidLoad()
addContentTopView(view: component)
@ -156,34 +141,22 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
$0.title = "\nEyebrow"
$0.addFormRow(label: "is Bold", view: eyebrowIsBold, pinTrailing: false)
$0.addFormRow(label: "Text", view: eyebrowTextField)
$0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
}))
eyebrowTokenFormStackView.addFormRow(label: "Token", view: eyebrowTokenColorView)
eyebrowColorFormStackView.addFormRow(label: "Custom", view: eyebrowCustomColorView)
append(section: eyebrowTokenFormStackView)
append(section: eyebrowColorFormStackView)
append(section: eyebrowTextColorFormSection)
append(section: .init().with({
$0.title = "\nTitle"
$0.addFormRow(label: "is Bold", view: titleIsBold, pinTrailing: false)
$0.addFormRow(label: "Text", view: titleTextField)
$0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
}))
titleTokenFormStackView.addFormRow(label: "Token", view: titleTokenColorView)
titleColorFormStackView.addFormRow(label: "Custom", view: titleCustomColorView)
append(section: titleTokenFormStackView)
append(section: titleColorFormStackView)
append(section: titleTextColorFormSection)
append(section: .init().with({
$0.title = "\nSubtitle"
$0.addFormRow(label: "Subtitle Text", view: subTitleTextField)
$0.addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
}))
subtitleTokenFormStackView.addFormRow(label: "Token", view: subtitleTokenColorView)
subtitleColorFormStackView.addFormRow(label: "Custom", view: subtitleCustomColorView)
append(section: subtitleTokenFormStackView)
append(section: subtitleColorFormStackView)
append(section: subTitleTextColorFormSection)
eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
self?.setOtherModels()
@ -230,6 +203,10 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
titleTextField.text = titleModel.text
subTitleTextField.text = subTitleModel.text
eyebrowTextColorFormSection.setDefault(value: .primary)
titleTextColorFormSection.setDefault(value: .primary)
subTitleTextColorFormSection.setDefault(value: .primary)
setTitleModel()
updateOtherTextStyles()
}
@ -238,21 +215,7 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
var titleTextStyle: TextStyle?
if let text = titleTextField.text, !text.isEmpty {
var textColor: TitleLockup.TitleTextColor
switch titleColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .token:
textColor = .token(titleTokenColorView.selectedItem)
case .custom:
if let color = titleCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
component.titleModel = TitleLockup.TitleModel(text: text, textColor: titleTextColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
} else {
component.titleModel = nil
@ -271,44 +234,14 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
let style = otherStandardStylePickerSelectorView.selectedItem
if let text = subTitleTextField.text, !text.isEmpty {
var textColor: TitleLockup.TextColor
switch subtitleColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .secondary:
textColor = .secondary
case .token:
textColor = .token(subtitleTokenColorView.selectedItem)
case .custom:
if let color = subtitleCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleTextColor)
debug(type: "SubTitle", textStyle: style.value.regular)
} else {
component.subTitleModel = nil
}
if let text = eyebrowTextField.text, !text.isEmpty {
var textColor: TitleLockup.TextColor
switch eyebrowColorPickerSelectorView.selectedItem {
case .primary:
textColor = .primary
case .secondary:
textColor = .secondary
case .token:
textColor = .token(eyebrowTokenColorView.selectedItem)
case .custom:
if let color = eyebrowCustomColorView.selectedColor {
textColor = .custom(color)
} else {
textColor = .custom(VDSColor.elementsPrimaryOnlight)
}
}
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: eyeBrowTextColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
} else {
@ -340,40 +273,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
otherStandardStylePickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.setOtherModels()
}
eyebrowColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .eyebrow
self?.eyebrowTokenFormStackView.isHidden = item != .token
self?.eyebrowColorFormStackView.isHidden = item != .custom
self?.setOtherModels()
}
eyebrowTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setOtherModels()
}
titleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .title
self?.titleTokenFormStackView.isHidden = item != .token
self?.titleColorFormStackView.isHidden = item != .custom
self?.setTitleModel()
}
titleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setTitleModel()
}
subtitleColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
self?.currentLabelType = .subtitle
self?.subtitleTokenFormStackView.isHidden = item != .token
self?.subtitleColorFormStackView.isHidden = item != .custom
self?.setOtherModels()
}
subtitleTokenColorView.onPickerDidSelect = { [weak self] item in
self?.setOtherModels()
}
}
}
@ -390,40 +289,3 @@ extension TitleLockupViewController: ComponentSampleable {
return ComponentSample(component: component)
}
}
extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
let selectedColor = picker.selectedColor
if let selectedColor {
colorPicker.selectedColor = selectedColor
}
present(colorPicker, animated: true)
}
func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
dismiss(animated: true)
}
func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
guard let hexString = viewController.selectedColor.hexString else { return }
var colorView: ColorPickerView<ColorPickerType>
switch currentLabelType {
case .eyebrow:
colorView = eyebrowCustomColorView
case .title:
colorView = titleCustomColorView
case .subtitle:
colorView = subtitleCustomColorView
}
colorView.selectedColor = viewController.selectedColor
if currentLabelType == .title {
setTitleModel()
} else {
setOtherModels()
}
}
}