Digital ACT-191 ONEAPP-11355 story: changes done as per anatomy

VDS/Components/ListUnordered/ListUnordered.swift

@@ -14,7 +14,7 @@ import VDSCoreTokens
 @objcMembers
 @objc(VDSListUnordered)
 open class ListUnordered: View {
- 
+    
     //--------------------------------------------------
     // MARK: - Initializers
     //--------------------------------------------------
@@ -39,7 +39,7 @@ open class ListUnordered: View {
         case medium
         case small
         case micro
-
+        
         public static var defaultValue: Self { .large }
         
         /// TextStyle relative to Size.
@@ -67,16 +67,16 @@ open class ListUnordered: View {
     //--------------------------------------------------
     /// Size of the component. The default size is Large.
     open var size: Size = .defaultValue { didSet { setNeedsUpdate() } }
-            
+    
     /// Spacing type of the component.
     open var spacing: Spacing = .standard { didSet { setNeedsUpdate() } }
     
     /// Lead-in text that shows as the top text for the component. This is optional.
-    open var leadInText: String?
+    open var leadInText: String? = nil { didSet { setNeedsUpdate() } }
-
+    
     /// Array of unordered list items to show for the component.
     open var unorderedList: [ListUnorderedItemModel] = [] { didSet { setNeedsUpdate() }}
-
+    
     //--------------------------------------------------
     // MARK: - Configuration Properties
     //--------------------------------------------------
@@ -86,7 +86,7 @@ open class ListUnordered: View {
     // It can be used for Glyph Level 2.
     private var endash = "–"
     
-    // Spacing between unordered list items.
+    // Spacing between the list items.
     private var spaceBetweenItems: CGFloat {
         switch (size, spacing) {
         case (.large, .standard):
@@ -119,30 +119,10 @@ open class ListUnordered: View {
         $0.translatesAutoresizingMaskIntoConstraints = false
         $0.axis = .vertical
         $0.distribution = .fill
-        $0.spacing = VDSLayout.space3X
+        $0.spacing = spaceBetweenItems
         $0.backgroundColor = .clear
     }
     
-    private lazy var itemStackView = UIStackView().with {
-        $0.translatesAutoresizingMaskIntoConstraints = false
-        $0.axis = .horizontal
-        $0.alignment = .leading
-        $0.distribution = .fill
-        $0.spacing = padding
-        $0.backgroundColor = .clear
-    }
-    
-    internal var symbolLabel = Label().with {
-        $0.isAccessibilityElement = true
-        $0.numberOfLines = 1
-        $0.sizeToFit()
-    }
-    
-    internal var textLabel = Label().with {
-        $0.isAccessibilityElement = true
-        $0.lineBreakMode = .byWordWrapping
-    }
-    
     //--------------------------------------------------
     // MARK: - Overrides
     //--------------------------------------------------
@@ -152,6 +132,7 @@ open class ListUnordered: View {
         
         // add stackview
         addSubview(listStackView)
+        listStackView.heightGreaterThanEqualTo(constant:0)
         listStackView.pinToSuperView()
     }
     
@@ -163,25 +144,89 @@ open class ListUnordered: View {
     
     /// Resets to default settings.
     open override func reset() {
-        symbolLabel.reset()
-        textLabel.reset()
         super.reset()
     }
     
     /// Used to make changes to the View based off a change events or from local properties.
     open override func updateView() {
         super.updateView()
+        listStackView.removeArrangedSubviews()
+        listStackView.spacing = spaceBetweenItems
+        
         if leadInText != nil {
-            textLabel.text = leadInText
+            let listItem = getListItem(with:self.leadInText, surface: surface)
-            textLabel.textStyle = size.textStyle.regular
+            listStackView.addArrangedSubview(listItem)
-            textLabel.textColor = textColorConfiguration.getColor(surface)
-            textLabel.surface = surface
-            listStackView.addArrangedSubview(textLabel)
         }
+        
+        unorderedList.forEach { item in
+            let listItem = getListItem(levelOneText: item.levelOneText, surface: surface)
+            listStackView.addArrangedSubview(listItem)
+            
+            item.levelTwoText?.forEach { text in
+                let listItem = getListItem(levelTwoText: text, surface: surface)
+                listStackView.addArrangedSubview(listItem)
+            }
+        }
+        setNeedsLayout()
+        layoutIfNeeded()
     }
     
     //--------------------------------------------------
     // MARK: - Private Methods
     //--------------------------------------------------
-   
+    // Get Label with the required text and text formats.
+    func getLabel(with text: String?, surface: Surface) -> Label {
+        let textLabel = Label().with {
+            $0.isAccessibilityElement = true
+            $0.lineBreakMode = .byWordWrapping
+            $0.text = text
+            $0.textStyle = size.textStyle.regular
+            $0.textColor = textColorConfiguration.getColor(surface)
+            $0.surface = surface
+        }
+        return textLabel
+    }
+    
+    // Get the list item with the required text (LeadInText, Level 1 Text, Level 2 Text).
+    func getListItem(with leadInText:String? = nil, levelOneText: String? = nil, levelTwoText: String? = nil, surface:Surface) -> UIView {
+        let itemStackView = UIStackView().with {
+            $0.translatesAutoresizingMaskIntoConstraints = false
+            $0.axis = .horizontal
+            $0.alignment = .leading
+            $0.distribution = .fill
+            $0.spacing = padding
+            $0.backgroundColor = .clear
+        }
+        itemStackView.removeArrangedSubviews()
+        
+        // StackView with LeadIntext if provided.
+        if leadInText != nil {
+            let leadTextLabel = getLabel(with: leadInText, surface: surface)
+            itemStackView.addArrangedSubview(leadTextLabel)
+        }
+        
+        // StackView with Level 1 Text if provided.
+        if levelOneText != nil {
+            let discLabel = getLabel(with: disc, surface: surface)
+            discLabel.widthAnchor.constraint(equalToConstant: discLabel.intrinsicContentSize.width).activate()
+            itemStackView.addArrangedSubview(discLabel)
+            let levelOneLabel = getLabel(with: levelOneText, surface: surface)
+            itemStackView.addArrangedSubview(levelOneLabel)
+        }
+        
+        // StackView with Level 2 Text if provided.
+        if levelTwoText != nil {
+            let discLabel = getLabel(with: disc, surface: surface)
+            let discSpaceView = View()
+            discSpaceView.widthAnchor.constraint(equalToConstant: discLabel.intrinsicContentSize.width).activate()
+            discSpaceView.backgroundColor = .red
+            itemStackView.addArrangedSubview(discSpaceView)
+            let endashLabel = getLabel(with: endash, surface: surface)
+            endashLabel.widthAnchor.constraint(equalToConstant: endashLabel.intrinsicContentSize.width).activate()
+            itemStackView.addArrangedSubview(endashLabel)
+            let levelTwoLabel = getLabel(with: levelTwoText, surface: surface)
+            itemStackView.addArrangedSubview(levelTwoLabel)
+        }
+        return itemStackView
+    }
 }

VDS/Components/ListUnordered/ListUnorderedItemModel.swift

@@ -10,14 +10,14 @@ extension ListUnordered {
     public struct ListUnorderedItemModel: Equatable {
         
         /// Item Level 1 that shows text with glyph - disc, bold.
-        public var itemLevelOneText: String
+        public var levelOneText: String
         
         /// Item Level 2 that shows text (one or many) with glyph - en dash. This is optional.
-        public var itemLevelTwoText: [String]
+        public var levelTwoText: [String]?
         
         public init(itemLevelOneText: String, itemLevelTwoTexts: [String]? = nil) {
-            self.itemLevelOneText = itemLevelOneText
+            self.levelOneText = itemLevelOneText
-            self.itemLevelTwoText = itemLevelTwoTexts ?? []
+            self.levelTwoText = itemLevelTwoTexts ?? []
         }
     }
 }