refactored stackview and added in badge

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

VDS/Components/Tilet/Tilet.swift

@@ -10,31 +10,6 @@ import Foundation
 import VDSColorTokens
 import UIKit
 
-public enum TiletTitleTypographicalStyle: String, Codable, EnumSubset {
-    case TitleXLarge
-    case BoldTitleXLarge
-    case TitleLarge
-    case BoldTitleLarge
-    case TitleMedium
-    case BoldTitleMedium
-    case TitleSmall
-    case BoldTitleSmall
-    
-    public var defaultValue: TitleLockupTitleTypographicalStyle { .BoldTitleSmall }
-}
-
-public enum TiletOtherTypographicalStyle: String, Codable, EnumSubset {
-    case BodyLarge
-    case BoldBodyLarge
-    case BodyMedium
-    case BoldBodyMedium
-    case BodySmall
-    case BoldBodySmall
-    
-    public var defaultValue: TitleLockupOtherTypographicalStyle { .BodySmall }
-}
-
-
 @objc(VDSTilet)
 open class Tilet: TileContainer {
     
@@ -58,12 +33,23 @@ open class Tilet: TileContainer {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
+    private var stackView = UIStackView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.axis = .vertical
+        $0.distribution = .fill
+        $0.spacing = 5
+    }
+    
+    private var titleLockupContainerView = UIView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    
     private var titleLockup = TitleLockup().with {
         let configs = [
             TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall],
                                                   neighboring: [
                                                     .BodySmall, .BoldBodySmall,
-                                                        .BodyMedium, .BoldBodyMedium
+                                                    .BodyMedium, .BoldBodyMedium
                                                   ],
                                                   spacing: 8.0,
                                                   deviceType: .iPhone),
@@ -84,8 +70,8 @@ open class Tilet: TileContainer {
                                                     .BodyLarge, .BoldBodyLarge,
                                                     .TitleMedium, .BoldTitleMedium
                                                   ],
-                                            spacing: 12.0,
+                                                  spacing: 12.0,
-                                            deviceType: .iPhone),
+                                                  deviceType: .iPhone),
             
             TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall,
                                                    .TitleMedium, .BoldTitleMedium],
@@ -104,30 +90,34 @@ open class Tilet: TileContainer {
                                                     .BodyLarge, .BoldBodyLarge,
                                                     .TitleSmall, .BoldTitleSmall
                                                   ],
-                                            spacing: 12.0,
+                                                  spacing: 12.0,
-                                            deviceType: .iPad),
+                                                  deviceType: .iPad),
             
             TypographicalStyleDeviceSpacingConfig([.TitleXLarge, .BoldTitleXLarge],
                                                   neighboring: [
                                                     .BodyLarge, .BoldBodyLarge,
                                                     .TitleMedium, .BoldTitleMedium
                                                   ],
-                                            spacing: 16.0,
+                                                  spacing: 16.0,
-                                            deviceType: .iPad)
+                                                  deviceType: .iPad)
-
+            
-           ]
+        ]
         
         $0.bottomTypographicalStyleSpacingConfig = TypographicalStyleSpacingConfig(configs: configs)
     }
     
+    private var badgeContainerView = UIView().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    
+    private var badge = Badge().with {
+        $0.fillColor = .red
+    }
     
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
     //style
-    open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }}
-    open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }}
-
     private var _textWidth: CGFloat?
     open var textWidth: CGFloat? {
         get { _textWidth }
@@ -161,20 +151,19 @@ open class Tilet: TileContainer {
         }
     }
     
-    //badge
+    public var badgeModel: TiletBadgeModel? { didSet { didChange() }}
-    open var showBadge: Bool = false { didSet { didChange() }}
-    open var badgeText: String = "" { didSet { didChange() }}
-    open var badgeColor: BadgeFillColor = .red { didSet { didChange() }}
 
     //text
+    open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }}
+    open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }}
     open var titleText: String = "" { didSet { didChange() }}
     open var titleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
     open var subTitleText: String = "" { didSet { didChange() }}
     open var subTitleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
     open var subTitleColor: Use = .primary { didSet { didChange() }}
-
+    
     //icons
-        
+    
     
     //--------------------------------------------------
     // MARK: - Constraints
@@ -192,14 +181,27 @@ open class Tilet: TileContainer {
         aspectRatio = .none
         containerBackgroundColor = .black
         
-        addContentView(titleLockup, shouldPin: false)
+        addContentView(stackView)
-        titleLockup.pinTop()
-        titleLockup.pinLeading()
-        titleLockup.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor).isActive = true
         
-        //either you are 100% width of the tileContainer.contentView
+        //badge
-        titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: containerView.trailingAnchor)
+        badgeContainerView.addSubview(badge)
+        badge
+            .pinTop()
+            .pinLeading()
+            .pinBottom()
+        badge.trailingAnchor.constraint(lessThanOrEqualTo: badgeContainerView.trailingAnchor).isActive = true
+        
+        titleLockupContainerView.addSubview(titleLockup)
+        titleLockup
+            .pinTop()
+            .pinLeading()
+            .pinBottom()
+        titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: titleLockupContainerView.trailingAnchor)
         titleLockupTrailingConstraint?.isActive = true
+        
+        //stackView.addArrangedSubview(badgeContainerView)
+        //stackView.addArrangedSubview(titleLockupContainerView)
+        
     }
     
     public override func reset() {
@@ -207,60 +209,84 @@ open class Tilet: TileContainer {
         aspectRatio = .none
         surface = .light
         containerBackgroundColor = .black
-
-        titleLockup.reset()
         
+        //badge
+        badge.reset()
+        badgeModel = nil
+        
+        //titleLockup
+        titleLockup.reset()
         titleText = ""
         titleTextAttributes = nil
         subTitleText = ""
         subTitleTextAttributes = nil
         subTitleColor = .primary
     }
-
+    
     //--------------------------------------------------
     // MARK: - State
     //--------------------------------------------------
-   
+    
     open override func updateView() {
         super.updateView()
-                
-        //flip the surface for the titleLockup
-        let flippedSurface: Surface = containerBackgroundColor == .black ? .dark : .light
-        titleLockup.surface = flippedSurface
         
-        //either use textWidth
+        //flip the surface for the titleLockup
-        if let textWidth {
+        let titleLockupSurface: Surface = containerBackgroundColor == .black ? .dark : .light
-            titleLockupTrailingConstraint?.isActive = false
+        titleLockup.surface = titleLockupSurface
-            titleLockupWidthConstraint?.isActive = false
+        
-            titleLockupWidthConstraint = titleLockup.widthAnchor.constraint(equalToConstant: textWidth)
+        //update constraints
-            titleLockupWidthConstraint?.isActive = true
+        
-            
+        //badge
-        } else if let textPercentage {
+        if let badgeModel {
-            titleLockupTrailingConstraint?.isActive = false
+            if badgeContainerView.superview == nil {
-            titleLockupWidthConstraint?.isActive = false
+                stackView.insertArrangedSubview(badgeContainerView, at: 0)
-            titleLockupWidthConstraint = NSLayoutConstraint(item: titleLockup,
+            }
-                                                               attribute: .width,
+            badge.set(with: badgeModel)
-                                                               relatedBy: .equal,
-                                                               toItem: containerView,
-                                                               attribute: .width,
-                                                               multiplier: textPercentage / 100,
-                                                               constant: 0.0)
-            titleLockupWidthConstraint?.isActive = true
-
         } else {
-            titleLockupWidthConstraint?.isActive = false
+            badgeContainerView.removeFromSuperview()
-            titleLockupTrailingConstraint?.isActive = true
-            
         }
         
-        titleLockup.titleText = titleText
+        if !titleText.isEmpty || !subTitleText.isEmpty {
-        titleLockup.titleTypograpicalStyle = titleTypograpicalStyle.value
+            if titleLockupContainerView.superview == nil {
-        titleLockup.titleTextAttributes = titleTextAttributes
+                stackView.insertArrangedSubview(titleLockupContainerView, at: badgeContainerView.superview == nil ? 0 : 1)
-        
+            }
-        titleLockup.subTitleText = subTitleText
+            
-        titleLockup.otherTypograpicalStyle = otherTypograpicalStyle.value
+            //titleLockup
-        titleLockup.subTitleTextAttributes = titleTextAttributes
+            if let textWidth {
-        titleLockup.subTitleColor = subTitleColor
+                titleLockupTrailingConstraint?.isActive = false
+                titleLockupWidthConstraint?.isActive = false
+                titleLockupWidthConstraint = titleLockup.widthAnchor.constraint(equalToConstant: textWidth)
+                titleLockupWidthConstraint?.isActive = true
+                
+            } else if let textPercentage {
+                titleLockupTrailingConstraint?.isActive = false
+                titleLockupWidthConstraint?.isActive = false
+                titleLockupWidthConstraint = NSLayoutConstraint(item: titleLockup,
+                                                                attribute: .width,
+                                                                relatedBy: .equal,
+                                                                toItem: containerView,
+                                                                attribute: .width,
+                                                                multiplier: textPercentage / 100,
+                                                                constant: 0.0)
+                titleLockupWidthConstraint?.isActive = true
+                
+            } else {
+                titleLockupWidthConstraint?.isActive = false
+                titleLockupTrailingConstraint?.isActive = true
+            }
+            
+            titleLockup.titleText = titleText
+            titleLockup.titleTypograpicalStyle = titleTypograpicalStyle.value
+            titleLockup.titleTextAttributes = titleTextAttributes
+            
+            titleLockup.subTitleText = subTitleText
+            titleLockup.otherTypograpicalStyle = otherTypograpicalStyle.value
+            titleLockup.subTitleTextAttributes = titleTextAttributes
+            titleLockup.subTitleColor = subTitleColor
+            
+        } else {
+            titleLockupContainerView.removeFromSuperview()
+        }
     }
 }