added Badge to the componements

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2022-09-22 16:59:59 -05:00
parent 5694095aa4
commit 52084116d9
3 changed files with 254 additions and 0 deletions

View File

@ -44,6 +44,8 @@
EA3C3B4C2894823E000CA526 /* AnyProxy.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA3C3B4B2894823E000CA526 /* AnyProxy.swift */; };
EA4DB18528CA967F00103EE3 /* SelectorGroupHandlerBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB18428CA967F00103EE3 /* SelectorGroupHandlerBase.swift */; };
EA4DB2FD28D3D0CA00103EE3 /* AnyEquatable.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB2FC28D3D0CA00103EE3 /* AnyEquatable.swift */; };
EA4DB30028DCBC9900103EE3 /* BadgeModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB2FF28DCBC9900103EE3 /* BadgeModel.swift */; };
EA4DB30228DCBCA500103EE3 /* Badge.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB30128DCBCA500103EE3 /* Badge.swift */; };
EA84F6B128B94A2500D67ABC /* CodableColor.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA84F6B028B94A2500D67ABC /* CodableColor.swift */; };
EA89200228AECF2A006B9984 /* UIButton+Publisher.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89200128AECF2A006B9984 /* UIButton+Publisher.swift */; };
EA89200428AECF4B006B9984 /* UITextField+Publisher.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89200328AECF4B006B9984 /* UITextField+Publisher.swift */; };
@ -141,6 +143,8 @@
EA3C3B4B2894823E000CA526 /* AnyProxy.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnyProxy.swift; sourceTree = "<group>"; };
EA4DB18428CA967F00103EE3 /* SelectorGroupHandlerBase.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SelectorGroupHandlerBase.swift; sourceTree = "<group>"; };
EA4DB2FC28D3D0CA00103EE3 /* AnyEquatable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AnyEquatable.swift; sourceTree = "<group>"; };
EA4DB2FF28DCBC9900103EE3 /* BadgeModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BadgeModel.swift; sourceTree = "<group>"; };
EA4DB30128DCBCA500103EE3 /* Badge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Badge.swift; sourceTree = "<group>"; };
EA84F6B028B94A2500D67ABC /* CodableColor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CodableColor.swift; sourceTree = "<group>"; };
EA89200128AECF2A006B9984 /* UIButton+Publisher.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIButton+Publisher.swift"; sourceTree = "<group>"; };
EA89200328AECF4B006B9984 /* UITextField+Publisher.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UITextField+Publisher.swift"; sourceTree = "<group>"; };
@ -283,6 +287,7 @@
EA33619D288B1E330071C351 /* Components */ = {
isa = PBXGroup;
children = (
EA4DB2FE28DCBC1900103EE3 /* Badge */,
EAF7F092289985E200B287F5 /* Checkbox */,
EA3362412892EF700071C351 /* Label */,
EA89200B28B530F0006B9984 /* RadioBox */,
@ -398,6 +403,15 @@
path = Label;
sourceTree = "<group>";
};
EA4DB2FE28DCBC1900103EE3 /* Badge */ = {
isa = PBXGroup;
children = (
EA4DB2FF28DCBC9900103EE3 /* BadgeModel.swift */,
EA4DB30128DCBCA500103EE3 /* Badge.swift */,
);
path = Badge;
sourceTree = "<group>";
};
EA89200B28B530F0006B9984 /* RadioBox */ = {
isa = PBXGroup;
children = (
@ -614,6 +628,7 @@
EA3361C9289054C50071C351 /* Surfaceable.swift in Sources */,
EA3361A2288B1E840071C351 /* ToggleModel.swift in Sources */,
EA1F265D28B944F00033E859 /* CollectionView.swift in Sources */,
EA4DB30228DCBCA500103EE3 /* Badge.swift in Sources */,
EA3362432892EFF20071C351 /* LabelModel.swift in Sources */,
EA33624728931B050071C351 /* Initable.swift in Sources */,
EAF7F0A4289B017C00B287F5 /* LabelAttributeModel.swift in Sources */,
@ -634,6 +649,7 @@
EAB1D29A28A5611D00DAE764 /* SelectorGroupModelable.swift in Sources */,
EAF7F0BB289D80ED00B287F5 /* Modelable.swift in Sources */,
EA89201528B56CF4006B9984 /* RadioBoxGroup.swift in Sources */,
EA4DB30028DCBC9900103EE3 /* BadgeModel.swift in Sources */,
EAF7F09E289AAEC000B287F5 /* Constants.swift in Sources */,
EA1F266528B945070033E859 /* RadioSwatch.swift in Sources */,
EA4DB18528CA967F00103EE3 /* SelectorGroupHandlerBase.swift in Sources */,

View File

@ -0,0 +1,185 @@
//
// Badge.swift
// VDS
//
// Created by Matt Bruce on 9/22/22.
//
import Foundation
import UIKit
import VDSColorTokens
import VDSFormControlsTokens
import Combine
public class Badge: BadgeBase<DefaultBadgeModel>{}
open class BadgeBase<ModelType: BadgeModel>: View<ModelType> {
private var label = Label()
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
@Proxy(\.model.fillColor)
open var fillColor: BadgeFillColor
@Proxy(\.model.text)
open var text: String
@Proxy(\.model.maxWidth)
open var maxWidth: CGFloat?
@Proxy(\.model.numberOfLines)
open var numberOfLines: Int
@Proxy(\.model.accessibilityHintEnabled)
open var accessibilityHintEnabled: String?
@Proxy(\.model.accessibilityHintDisabled)
open var accessibilityHintDisabled: String?
@Proxy(\.model.accessibilityValueEnabled)
open var accessibilityValueEnabled: String?
@Proxy(\.model.accessibilityValueDisabled)
open var accessibilityValueDisabled: String?
@Proxy(\.model.accessibilityLabelEnabled)
open var accessibilityLabelEnabled: String?
@Proxy(\.model.accessibilityLabelDisabled)
open var accessibilityLabelDisabled: String?
//--------------------------------------------------
// MARK: - Constraints
//--------------------------------------------------
private var maxWidthConstraint: NSLayoutConstraint?
private var minWidthConstraint: NSLayoutConstraint?
//functions
//--------------------------------------------------
// MARK: - Lifecycle
//--------------------------------------------------
open override func setup() {
super.setup()
isAccessibilityElement = true
accessibilityTraits = .staticText
addSubview(label)
layer.cornerRadius = 2
label.adjustsFontSizeToFitWidth = false
label.lineBreakMode = .byTruncatingTail
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 4).isActive = true
label.topAnchor.constraint(equalTo: topAnchor, constant: 2).isActive = true
trailingAnchor.constraint(greaterThanOrEqualTo: label.trailingAnchor, constant: 4).isActive = true
bottomAnchor.constraint(greaterThanOrEqualTo: label.bottomAnchor, constant: 2).isActive = true
maxWidthConstraint = label.widthAnchor.constraint(lessThanOrEqualToConstant: 100)
minWidthConstraint = label.widthAnchor.constraint(greaterThanOrEqualToConstant: 23)
minWidthConstraint?.isActive = true
}
public override func reset() {
super.reset()
setAccessibilityLabel()
}
//--------------------------------------------------
// MARK: - Configuration
//--------------------------------------------------
public func backgroundColor(for fillColor: BadgeFillColor) -> UIColor {
var config: SurfaceColorConfiguration<ModelType>
switch model.fillColor {
case .red:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.backgroundBrandhighlight
$0.darkColor = VDSColor.backgroundBrandhighlight
}
case .yellow:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteYellow62
$0.darkColor = VDSColor.paletteYellow62
}
case .green:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteGreen26
$0.darkColor = VDSColor.paletteGreen34
}
case .orange:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteOrange39
$0.darkColor = VDSColor.paletteOrange46
}
case .blue:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteBlue35
$0.darkColor = VDSColor.paletteBlue45
}
case .black:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteBlack
$0.darkColor = VDSColor.paletteBlack
}
case .white:
config = SurfaceColorConfiguration<ModelType>().with {
$0.lightColor = VDSColor.paletteWhite
$0.darkColor = VDSColor.paletteWhite
}
}
return config.getColor(model)
}
public func textColorConfiguration<ModelType: LabelModel>(for fillColor: BadgeFillColor) -> DisabledSurfaceColorConfiguration<ModelType> {
switch fillColor {
case .red, .black:
return DisabledSurfaceColorConfiguration<ModelType>().with {
$0.disabled.lightColor = VDSColor.elementsPrimaryOndark
$0.disabled.darkColor = VDSColor.elementsPrimaryOndark
$0.enabled.lightColor = VDSColor.elementsPrimaryOndark
$0.enabled.darkColor = VDSColor.elementsPrimaryOndark
}
case .yellow, .white:
return DisabledSurfaceColorConfiguration<ModelType>().with {
$0.disabled.lightColor = VDSColor.elementsPrimaryOnlight
$0.disabled.darkColor = VDSColor.elementsPrimaryOnlight
$0.enabled.lightColor = VDSColor.elementsPrimaryOnlight
$0.enabled.darkColor = VDSColor.elementsPrimaryOnlight
}
case .orange, .green, .blue:
return DisabledSurfaceColorConfiguration<ModelType>().with {
$0.disabled.lightColor = VDSColor.elementsPrimaryOndark
$0.disabled.darkColor = VDSColor.elementsPrimaryOnlight
$0.enabled.lightColor = VDSColor.elementsPrimaryOndark
$0.enabled.darkColor = VDSColor.elementsPrimaryOnlight
}
}
}
//--------------------------------------------------
// MARK: - State
//--------------------------------------------------
open override func updateView(viewModel: ModelType) {
backgroundColor = backgroundColor(for: viewModel.fillColor)
label.textColorConfiguration = textColorConfiguration(for: viewModel.fillColor)
label.numberOfLines = viewModel.numberOfLines
if let maxWidth = viewModel.maxWidth, let minWidth = minWidthConstraint?.constant, maxWidth > minWidth {
maxWidthConstraint?.constant = maxWidth
maxWidthConstraint?.isActive = true
} else {
maxWidthConstraint?.isActive = false
}
label.set(with: viewModel.label)
setAccessibilityLabel(!viewModel.disabled)
}
}

View File

@ -0,0 +1,53 @@
//
// BadgeModel.swift
// VDS
//
// Created by Matt Bruce on 9/22/22.
//
import Foundation
import UIKit
import VDSColorTokens
public enum BadgeFillColor: String, Codable, CaseIterable {
case red, yellow, green, orange, blue, black, white
}
public protocol BadgeModel: Modelable, Accessable {
var fillColor: BadgeFillColor { get set }
var text: String { get set }
var maxWidth: CGFloat? { get set }
var numberOfLines: Int { get set }
}
extension BadgeModel {
public var label: DefaultLabelModel {
var model = DefaultLabelModel()
model.textPosition = .left
model.typograpicalStyle = .BoldBodySmall
model.text = text
model.surface = surface
model.disabled = disabled
return model
}
}
public struct DefaultBadgeModel: BadgeModel {
public var id = UUID()
public var fillColor: BadgeFillColor = .red
public var text: String = ""
public var maxWidth: CGFloat?
public var numberOfLines: Int = 1
public var surface: Surface = .light
public var disabled: Bool = false
public var accessibilityHintEnabled: String?
public var accessibilityHintDisabled: String?
public var accessibilityValueEnabled: String?
public var accessibilityValueDisabled: String?
public var accessibilityLabelEnabled: String?
public var accessibilityLabelDisabled: String?
public init() { }
}