CXTDT-427328 - Title Lockup text style combinations do not match spec

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

VDS/Components/TitleLockup/TitleLockup.swift

@@ -29,7 +29,7 @@ open class TitleLockup: View {
     public required init?(coder: NSCoder) {
         super.init(coder: coder)
     }
-
+    
     //--------------------------------------------------
     // MARK: - Enums
     //--------------------------------------------------
@@ -43,12 +43,6 @@ open class TitleLockup: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    private var stackView = UIStackView().with {
-        $0.translatesAutoresizingMaskIntoConstraints = false
-        $0.axis = .vertical
-        $0.distribution = .fillProportionally
-    }
-    
     private var otherStandardStyle: OtherStandardStyle {
         if let subTitleModel, !subTitleModel.text.isEmpty {
             return subTitleModel.standardStyle
@@ -75,7 +69,7 @@ open class TitleLockup: View {
     open var eyebrowLabel = Label().with {
         $0.setContentCompressionResistancePriority(.required, for: .vertical)
     }
-
+    
     /// Model used in rendering the eyebrow label.
     open var eyebrowModel: EyebrowModel? { didSet { setNeedsUpdate() } }
     
@@ -84,7 +78,7 @@ open class TitleLockup: View {
     open var titleLabel = Label().with {
         $0.setContentCompressionResistancePriority(.required, for: .vertical)
     }
-
+    
     /// Model used in rendering the title label.
     open var titleModel: TitleModel? { didSet { setNeedsUpdate() } }
     
@@ -93,7 +87,7 @@ open class TitleLockup: View {
     open var subTitleLabel = Label().with {
         $0.setContentCompressionResistancePriority(.required, for: .vertical)
     }
-
+    
     /// Model used in rendering the subtitle label.
     open var subTitleModel: SubTitleModel? { didSet { setNeedsUpdate() } }
     
@@ -273,22 +267,8 @@ open class TitleLockup: View {
         super.setup()
         
         titleLabel.textColorConfiguration = textColorPrimaryConfiguration
-
+        
         accessibilityElements = [eyebrowLabel, titleLabel, subTitleLabel]
-        addSubview(stackView)
-        
-        stackView.spacing = 0.0
-        
-        stackView.addArrangedSubview(eyebrowLabel)
-        stackView.addArrangedSubview(titleLabel)
-        stackView.addArrangedSubview(subTitleLabel)
-        
-        //pin stackview to edges
-        stackView
-            .pinTop()
-            .pinLeading()
-            .pinTrailing()
-            .pinBottom(0, .defaultHigh)
     }
     
     /// Resets to default settings.
@@ -302,15 +282,18 @@ open class TitleLockup: View {
         setNeedsUpdate()
     }
     
+    var labelViews = [UIView]()
     /// Used to make changes to the View based off a change events or from local properties.
     open override func updateView() {
         super.updateView()
         
-        let allLabelsTextAlignment = textAlignment.value.value
-        var eyebrowTextIsEmpty = true
-        var titleTextIsEmpty = true
-        var subTitleTextIsEmpty = true
+        //remove all labels
+        eyebrowLabel.removeFromSuperview()
+        titleLabel.removeFromSuperview()
+        subTitleLabel.removeFromSuperview()
         
+        //set local vars
+        let allLabelsTextAlignment = textAlignment.value.value
         var topSpacing: CGFloat = 0.0
         var bottomSpacing: CGFloat = 0.0
         
@@ -321,8 +304,12 @@ open class TitleLockup: View {
             bottomSpacing = config.bottomSpacing
         }
         
+        //set a previousView to keep track of the stack
+        //to deal with anchoring/spacing
+        var previousView: UIView?
+        
+        //see if the eyebrow should exist
         if let eyebrowModel, !eyebrowModel.text.isEmpty {
-            eyebrowTextIsEmpty = false
             eyebrowLabel.textAlignment = allLabelsTextAlignment
             eyebrowLabel.text = eyebrowModel.text
             eyebrowLabel.attributes = eyebrowModel.textAttributes
@@ -345,20 +332,35 @@ open class TitleLockup: View {
                 eyebrowLabel.textColorConfiguration = textColorPrimaryConfiguration
                 eyebrowLabel.textStyle = eyebrowModel.isBold ? otherStandardStyle.value.bold : otherStandardStyle.value.regular
             }
+            addSubview(eyebrowLabel)
+            eyebrowLabel
+                .pinTop()
+                .pinLeading()
+                .pinTrailing()
+            
+            previousView = eyebrowLabel
         }
         
+        //see if the title should exist
         if let titleModel, !titleModel.text.isEmpty {
-            titleTextIsEmpty = false
             titleLabel.textAlignment = allLabelsTextAlignment
             titleLabel.textStyle = titleModel.textStyle
             titleLabel.text = titleModel.text
             titleLabel.attributes = titleModel.textAttributes
             titleLabel.numberOfLines = titleModel.numberOfLines
             titleLabel.surface = surface
+            
+            addSubview(titleLabel)
+            titleLabel
+                .pinTop(previousView?.bottomAnchor ?? self.topAnchor, eyebrowLabel == previousView ? topSpacing : 0)
+                .pinLeading()
+                .pinTrailing()
+            
+            previousView = titleLabel
         }
         
+        //see if the subtitle should exist
         if let subTitleModel, !subTitleModel.text.isEmpty {
-            subTitleTextIsEmpty = false
             subTitleLabel.textAlignment = allLabelsTextAlignment
             subTitleLabel.textStyle = otherStandardStyle.value.regular
             subTitleLabel.textColorConfiguration = subTitleModel.textColor == .secondary ? textColorSecondaryConfiguration : textColorPrimaryConfiguration
@@ -366,25 +368,23 @@ open class TitleLockup: View {
             subTitleLabel.attributes = subTitleModel.textAttributes
             subTitleLabel.numberOfLines = subTitleModel.numberOfLines
             subTitleLabel.surface = surface
+            
+            addSubview(subTitleLabel)
+            subTitleLabel
+                .pinTop(previousView?.bottomAnchor ?? self.topAnchor, (eyebrowLabel == previousView || titleLabel == previousView) ? bottomSpacing : 0)
+                .pinLeading()
+                .pinTrailing()
+            
+            previousView = subTitleLabel
         }
         
-        //if both first 2 rows not empty set spacing
-        if !eyebrowTextIsEmpty && !titleTextIsEmpty {
-            stackView.spacing = topSpacing
-        } else {
-            stackView.spacing = 0.0
-        }
+        //pin the last view to the bottom of this view
+        previousView?.pinBottom()
         
-        //if either first 2 rows not empty and subtile not empty, create space else collapse
-        if (!eyebrowTextIsEmpty || !titleTextIsEmpty) && !subTitleTextIsEmpty {
-            stackView.setCustomSpacing(bottomSpacing, after: titleLabel)
-        } else if (!eyebrowTextIsEmpty || !titleTextIsEmpty) && subTitleTextIsEmpty {
-            stackView.setCustomSpacing(0.0, after: titleLabel)
-        }
-        
-        //hide/show
-        eyebrowLabel.isHidden = eyebrowTextIsEmpty
-        titleLabel.isHidden = titleTextIsEmpty
-        subTitleLabel.isHidden = subTitleTextIsEmpty
+        //debugging for borders
+        eyebrowLabel.debugBorder(show: hasDebugBorder, color: .green)
+        titleLabel.debugBorder(show: hasDebugBorder, color: .green)
+        subTitleLabel .debugBorder(show: hasDebugBorder, color: .green)
     }
+    
 }

VDS/SupportingFiles/ReleaseNotes.txt

@@ -1,6 +1,7 @@
 1.0.42
 =======
 - CXTDT-462698 - Tabs - Incorrect letter spacing on Large tabs
+- CXTDT-427328 - Title Lockup text style combinations do not match spec
 
 1.0.41
 =======