added TitleLockup

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2022-12-19 14:41:22 -06:00
parent fcf0b524b2
commit 2630dc43bf
2 changed files with 216 additions and 0 deletions

View File

@ -42,6 +42,7 @@
EA4DB30228DCBCA500103EE3 /* Badge.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA4DB30128DCBCA500103EE3 /* Badge.swift */; };
EA5E304C294CBDD00082B959 /* TileContainer.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E304B294CBDD00082B959 /* TileContainer.swift */; };
EA5E304E294CC7F00082B959 /* VDSColor.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E304D294CC7F00082B959 /* VDSColor.swift */; };
EA5E30532950DDA60082B959 /* TitleLockup.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA5E30522950DDA60082B959 /* TitleLockup.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 */; };
EA89200628B526D6006B9984 /* CheckboxGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA89200528B526D6006B9984 /* CheckboxGroup.swift */; };
@ -139,6 +140,7 @@
EA4DB30128DCBCA500103EE3 /* Badge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Badge.swift; sourceTree = "<group>"; };
EA5E304B294CBDD00082B959 /* TileContainer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TileContainer.swift; sourceTree = "<group>"; };
EA5E304D294CC7F00082B959 /* VDSColor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VDSColor.swift; sourceTree = "<group>"; };
EA5E30522950DDA60082B959 /* TitleLockup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TitleLockup.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>"; };
EA89200528B526D6006B9984 /* CheckboxGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CheckboxGroup.swift; sourceTree = "<group>"; };
@ -318,6 +320,7 @@
EA1F265F28B945070033E859 /* RadioSwatch */,
EAC925852911C9DE00091998 /* TextFields */,
EA5E304A294CBDBB0082B959 /* TileContainer */,
EA5E30512950DD8D0082B959 /* TitleLockup */,
EA3361A0288B1E6F0071C351 /* Toggle */,
);
path = Components;
@ -444,6 +447,14 @@
path = TileContainer;
sourceTree = "<group>";
};
EA5E30512950DD8D0082B959 /* TitleLockup */ = {
isa = PBXGroup;
children = (
EA5E30522950DDA60082B959 /* TitleLockup.swift */,
);
path = TitleLockup;
sourceTree = "<group>";
};
EA89200B28B530F0006B9984 /* RadioBox */ = {
isa = PBXGroup;
children = (
@ -716,6 +727,7 @@
EAF7F0AB289B13FD00B287F5 /* TypographicalStyleLabelAttribute.swift in Sources */,
EAB1D29C28A5618900DAE764 /* RadioButtonGroup.swift in Sources */,
EA336171288B19200071C351 /* VDS.docc in Sources */,
EA5E30532950DDA60082B959 /* TitleLockup.swift in Sources */,
EAA5EEB528ECBFB4003B3210 /* ImageLabelAttribute.swift in Sources */,
EAB5FF0129424ACB00998C17 /* UIControl.swift in Sources */,
EAB1D2E628AE842000DAE764 /* Publisher+Bind.swift in Sources */,

View File

@ -0,0 +1,204 @@
//
// TitleLockup.swift
// VDS
//
// Created by Matt Bruce on 12/19/22.
//
import Foundation
import UIKit
import VDSColorTokens
import Combine
public enum TitleLockupTextPosition: String, Codable, CaseIterable {
case left, center
var labelTextPosition: TextPosition {
switch self {
case .left:
return .left
case .center:
return .center
}
}
}
public enum TitleLockupitleTypographicalStyle: String, Codable, CaseIterable {
case FeatureMedium
case BoldFeatureMedium
case FeatureSmall
case BoldFeatureSmall
case FeatureXSmall
case BoldFeatureXSmall
case Title2XLarge
case BoldTitle2XLarge
case TitleXLarge
case BoldTitleXLarge
case TitleLarge
case BoldTitleLarge
case TitleMedium
case BoldTitleMedium
case TitleSmall
case BoldTitleSmall
public var typographicalStyle: TypographicalStyle {
return TypographicalStyle(rawValue: self.rawValue) ?? .BoldFeatureXSmall
}
}
public enum TitleLockupOtherTypographicalStyle: String, Codable, CaseIterable {
case BodyLarge
case BoldBodyLarge
case BodyMedium
case BoldBodyMedium
case BodySmall
case BoldBodySmall
public var typographicalStyle: TypographicalStyle {
return TypographicalStyle(rawValue: self.rawValue) ?? .BodyLarge
}
}
@objc(VDSTitleLockup)
open class TitleLockup: View {
//--------------------------------------------------
// MARK: - Initializers
//--------------------------------------------------
required public init() {
super.init(frame: .zero)
}
public override init(frame: CGRect) {
super.init(frame: .zero)
}
public required init?(coder: NSCoder) {
super.init(coder: coder)
}
//--------------------------------------------------
// MARK: - Private Properties
//--------------------------------------------------
private var stackView = UIStackView().with {
$0.translatesAutoresizingMaskIntoConstraints = false
$0.axis = .vertical
$0.distribution = .fill
}
//--------------------------------------------------
// MARK: - Configuration Properties
//--------------------------------------------------
// Sizes are from InVision design specs.
//--------------------------------------------------
// MARK: - Public Properties
//--------------------------------------------------
open var textPosition: TitleLockupTextPosition = .left { didSet { didChange() }}
//style
open var titleTypograpicalStyle: TitleLockupitleTypographicalStyle = .BoldFeatureXSmall { didSet { didChange() }}
open var otherTypograpicalStyle: TitleLockupOtherTypographicalStyle = .BodyLarge { didSet { didChange() }}
//first row
open var eyebrowLabel = Label().with {
$0.setContentCompressionResistancePriority(.required, for: .vertical)
}
open var eyebrowText: String = "" { didSet { didChange() }}
open var eyebrowTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
//second row
open var titleLabel = Label().with {
$0.setContentCompressionResistancePriority(.required, for: .vertical)
}
open var titleText: String = "" { didSet { didChange() }}
open var titleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
//third row
open var subTitleLabel = Label().with {
$0.setContentCompressionResistancePriority(.required, for: .vertical)
}
open var subTitleText: String = "" { didSet { didChange() }}
open var subTitleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
open var subTitleColor: Use = .primary { didSet { didChange() }}
//--------------------------------------------------
// MARK: - Lifecycle
//--------------------------------------------------
open override func setup() {
super.setup()
isAccessibilityElement = true
accessibilityTraits = .button
addSubview(stackView)
stackView.spacing = 0.0
stackView.addArrangedSubview(eyebrowLabel)
stackView.addArrangedSubview(titleLabel)
stackView.addArrangedSubview(subTitleLabel)
//pin stackview to edges
stackView.pinToSuperView()
}
public override func reset() {
super.reset()
titleLabel.reset()
eyebrowLabel.reset()
subTitleLabel.reset()
textPosition = .left
eyebrowText = ""
titleText = ""
subTitleText = ""
titleTypograpicalStyle = .BoldFeatureXSmall
otherTypograpicalStyle = .BodyLarge
}
//--------------------------------------------------
// MARK: - State
//--------------------------------------------------
open override func updateView() {
super.updateView()
let allLabelsTextPosition = textPosition.labelTextPosition
eyebrowLabel.textPosition = allLabelsTextPosition
eyebrowLabel.typograpicalStyle = otherTypograpicalStyle.typographicalStyle
eyebrowLabel.text = eyebrowText
eyebrowLabel.attributes = eyebrowTextAttributes
eyebrowLabel.surface = surface
titleLabel.textPosition = allLabelsTextPosition
titleLabel.typograpicalStyle = titleTypograpicalStyle.typographicalStyle
titleLabel.text = titleText
titleLabel.attributes = titleTextAttributes
titleLabel.surface = surface
subTitleLabel.textPosition = allLabelsTextPosition
subTitleLabel.typograpicalStyle = otherTypograpicalStyle.typographicalStyle
subTitleLabel.text = subTitleText
subTitleLabel.attributes = subTitleTextAttributes
subTitleLabel.surface = surface
subTitleLabel.disabled = subTitleColor == .secondary
//if both first 2 rows not empty set spacing
if !eyebrowText.isEmpty && !titleText.isEmpty {
stackView.spacing = 12.0
} else {
stackView.spacing = 0.0
}
//if either first 2 rows not empty and subtile not empty, create space else collapse
if (!eyebrowText.isEmpty || !titleText.isEmpty) && !subTitleText.isEmpty {
stackView.setCustomSpacing(24.0, after: titleLabel)
} else if (!eyebrowText.isEmpty || !titleText.isEmpty) && subTitleText.isEmpty {
stackView.setCustomSpacing(0.0, after: titleLabel)
}
}
}