Digital ACT-191 ONEAPP-7013 story: removed border, background color to slot, removed unused file, updated slotAlignment method.

VDS.xcodeproj/project.pbxproj

@@ -7,7 +7,6 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		18013CED2C355BF900907F18 /* CarouselSlotItemModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18013CEC2C355BF900907F18 /* CarouselSlotItemModel.swift */; };
 		1808BEBC2BA41C3200129230 /* CarouselScrollbar.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1808BEBB2BA41C3200129230 /* CarouselScrollbar.swift */; };
 		1832AC572BA0791D008AE476 /* BreadcrumbCellItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */; };
 		1842B1DF2BECE28B0021AFCA /* CalendarDateViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1842B1DE2BECE28B0021AFCA /* CalendarDateViewCell.swift */; };
@@ -208,7 +207,6 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
-		18013CEC2C355BF900907F18 /* CarouselSlotItemModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselSlotItemModel.swift; sourceTree = "<group>"; };
 		1808BEBB2BA41C3200129230 /* CarouselScrollbar.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CarouselScrollbar.swift; sourceTree = "<group>"; };
 		1808BEBF2BA456B700129230 /* CarouselScrollbarChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = CarouselScrollbarChangeLog.txt; sourceTree = "<group>"; };
 		1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbCellItem.swift; sourceTree = "<group>"; };
@@ -502,7 +500,6 @@
 				18AE874F2C06FDA60075F181 /* Carousel.swift */,
 				18B9763E2C11BA4A009271DF /* CarouselPaginationModel.swift */,
 				18B42AC52C09D197008D6262 /* CarouselSlotAlignmentModel.swift */,
-				18013CEC2C355BF900907F18 /* CarouselSlotItemModel.swift */,
 				18AE87532C06FE610075F181 /* CarouselChangeLog.txt */,
 			);
 			path = Carousel;
@@ -1406,7 +1403,6 @@
 				EA596ABF2A16B4F500300C4B /* Tabs.swift in Sources */,
 				EAD062A72A3B67770015965D /* UIView+CALayer.swift in Sources */,
 				EAD068942A560C13002E3A2D /* LoaderLaunchable.swift in Sources */,
-				18013CED2C355BF900907F18 /* CarouselSlotItemModel.swift in Sources */,
 				18FEA1AD2BDD137500A56439 /* CalendarIndicatorModel.swift in Sources */,
 				EA985BEC2968A91200F2FF2E /* TitleLockupTitleModel.swift in Sources */,
 				5FC35BE328D51405004EBEAC /* Button.swift in Sources */,

VDS/Components/Carousel/Carousel.swift

@@ -123,7 +123,7 @@ open class Carousel: View {
     open var selectedIndex: Int?  { didSet { setNeedsUpdate() } }
     
     /// If provided, will set the alignment for slot content when the slots has different heights.
-    open var slotAlignment: CarouselSlotAlignmentModel? = nil { didSet { setNeedsUpdate() } }
+    open var slotAlignment: CarouselSlotAlignmentModel? = .init(vertical: .top, horizontal: .left) { didSet { setNeedsUpdate() } }
     
     //--------------------------------------------------
     // MARK: - Private Properties
@@ -360,19 +360,17 @@ open class Carousel: View {
         }
     }
     
-    private func estimateHeightFor(item: CarouselSlotItemModel, with width: CGFloat) -> CGFloat {
+    private func estimateHeightFor(component: UIView, with itemWidth: CGFloat) -> CGFloat {
-        let itemWidth = width
         let maxSize = CGSize(width: itemWidth, height: CGFloat.greatestFiniteMagnitude)
-        let estItemSize = item.component?.systemLayoutSizeFitting(maxSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel) ?? CGSize(width: itemWidth, height: item.defaultHeight)
+        let estItemSize = component.systemLayoutSizeFitting(maxSize, withHorizontalFittingPriority: .required, verticalFittingPriority: .fittingSizeLevel)
         return estItemSize.height
     }
     
     private func fetchCarouselHeight() -> CGFloat {
         var height = slotDefaultHeight
         if views.count > 0 {
-            for x in 0...views.count - 1 {
+            for index in 0...views.count - 1 {
-                let item : CarouselSlotItemModel = .init(component: views[x])
+                let estHeight = estimateHeightFor(component: views[index], with: minimumSlotWidth)
-                let estHeight = estimateHeightFor(item: item, with: minimumSlotWidth)
                 height = estHeight > height ? estHeight : height
             }
         }
@@ -396,12 +394,11 @@ open class Carousel: View {
             // Add carousel items
             if views.count > 0 {
                 var xPos = 0.0
-                for x in 0...views.count - 1 {
+                for index in 0...views.count - 1 {
                     
                     // Add Carousel Slot
                     let carouselSlot = View().with {
                         $0.clipsToBounds = true
-                        $0.backgroundColor = UIColor(red: CGFloat(216) / 255.0, green: CGFloat(218) / 255.0, blue: CGFloat(218) / 255.0, alpha: 1)
                     }
                     scrollView.addSubview(carouselSlot)
                     scrollView.delegate = self
@@ -412,35 +409,11 @@ open class Carousel: View {
                         .pinLeading(xPos)
                         .width(minimumSlotWidth)
                         .height(slotHeight)
-                    carouselSlot.layer.cornerRadius = 12.0
                     xPos = xPos + minimumSlotWidth + gutter.value
                     
-                    // Add received component
+                    let component = views[index]
-                    let item : CarouselSlotItemModel = .init(component: views[x])
+                    carouselSlot.addSubview(component)
-                    if let component = item.component {
+                    setSlotAlignment(contentView: component)
-                        carouselSlot.addSubview(component)
-                        if slotAlignment != nil {
-                            // If slotAlignment exist, use component's own sizes
-                            component.widthAnchor.constraint(lessThanOrEqualTo: carouselSlot.widthAnchor).activate()
-                            setSlotAlignment(contentView: component, parentView: carouselSlot)
-                        } else {
-                            // If no slotAlignment, should use full slot
-                            component.pinToSuperView()
-                        }
-                        carouselSlot.backgroundColor = .clear
-                        carouselSlot.layer.cornerRadius = 0
-                        if var surfacedView = component as? Surfaceable {
-                            surfacedView.surface = surface
-                        }
-                    
-                        // TO BE REMOVED AFTER VQA - borderWidth and borderColor below did set only for Testing purpose to VQA
-                        carouselSlot.layer.borderWidth = 1.0
-                        carouselSlot.layer.borderColor = SurfaceColorConfiguration().with {
-                            $0.lightColor = VDSColor.elementsPrimaryOnlight
-                            $0.darkColor = VDSColor.elementsPrimaryOndark
-                        }.getColor(self).cgColor
-                                                
-                    }
                 }
                 scrollView.contentSize = CGSize(width: xPos - gutter.value, height: slotHeight)
             }
@@ -459,31 +432,38 @@ open class Carousel: View {
     }
     
     // Set slot alignment if provided. Used only when slot content have different heights or widths.
-    private func setSlotAlignment(contentView: UIView, parentView: View) {
+    private func setSlotAlignment(contentView: UIView) {
-        parentView.backgroundColor = .clear
         switch slotAlignment?.vertical {
         case .top:
-            contentView.topAnchor.constraint(equalTo: parentView.topAnchor).activate()
+            contentView
-            break
+                .pinTop()
+                .pinBottomLessThanOrEqualTo()
         case .middle:
-            contentView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor).activate()
+            contentView
-            break
+                .pinTopGreaterThanOrEqualTo()
+                .pinBottomLessThanOrEqualTo()
+                .pinCenterY()
         case .bottom:
-            contentView.bottomAnchor.constraint(equalTo: parentView.bottomAnchor).activate()
+            contentView
-            break
+                .pinTopGreaterThanOrEqualTo()
+                .pinBottom()
         default: break
         }
         
         switch slotAlignment?.horizontal {
         case .left:
-            contentView.leadingAnchor.constraint(equalTo: parentView.leadingAnchor).activate()
+            contentView
-            break
+                .pinLeading()
+                .pinTrailingLessThanOrEqualTo()
         case .center:
-            contentView.centerXAnchor.constraint(equalTo: parentView.centerXAnchor).activate()
+            contentView
-            break
+                .pinLeadingGreaterThanOrEqualTo()
+                .pinTrailingLessThanOrEqualTo()
+                .pinCenterX()
         case .right:
-            parentView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).activate()
+            contentView
-            break
+                .pinLeadingGreaterThanOrEqualTo()
+                .pinTrailing()
         default: break
         }
     }

VDS/Components/Carousel/CarouselSlotItemModel.swift

@@ -1,23 +0,0 @@
-//
-//  CarouselSlotItemModel.swift
-//  VDS
-//
-//  Created by Kanamarlapudi, Vasavi on 30/06/24.
-//
-
-import Foundation
-import UIKit
-import VDSCoreTokens
-
-/// A custom data type that holds the style and component for a slot of the 'Carousel' component.
-public struct CarouselSlotItemModel {
-   
-    public let defaultHeight: CGFloat = 50.0
-    
-    /// Component to be show on Carousel slot
-    public var component: UIView?
-
-    public init(component: UIView? = nil) {
-        self.component = component
-    }
-}