Digital ACT-191 ONEAPP-7016 story: updated constraints and header month view

VDS/Components/Calendar/Calendar.swift

@@ -71,10 +71,10 @@ open class CalendarBase: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    internal var containerSize: CGSize { CGSize(width: 320, height: 376) } //width:320/328
+    internal var containerSize: CGSize { CGSize(width: 328, height: 376) } //width:320/328
     private let cellItemSize = CGSize(width: 40, height: 40)
-    private let headerHeight = 104.0
+    private let headerHeight = 88.0
-    private let footerHeight = 56.0
+    private let footerHeight = 40.0
     private let items = 35
 
     internal var containerView = View().with {
@@ -135,7 +135,17 @@ open class CalendarBase: View {
 
         // Calendar View
         containerView.addSubview(collectionView)
-        collectionView.pinToSuperView()
+        collectionView
+            .pinTop(VDSLayout.space4X)
+            .pinBottom(VDSLayout.space4X)
+            .pinLeading(VDSFormControls.spaceInset)
+            .pinTrailing(VDSFormControls.spaceInset)
+        let width = containerSize.width - (2 * VDSFormControls.spaceInset)
+        collectionView.widthAnchor.constraint(equalToConstant: width).activate()
+        let height = containerSize.height - (2 * VDSLayout.space4X)
+        collectionView.heightAnchor.constraint(equalToConstant: height).activate()
+        collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
+        collectionView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).activate()
     }
     
     open override func updateView() {

VDS/Components/Calendar/CalendarHeaderView.swift

@@ -33,7 +33,7 @@ open class CalendarHeaderView: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    internal var containerSize: CGSize { CGSize(width: 320, height: 104) } //width:320/328
+    internal var containerSize: CGSize { CGSize(width: 304, height: 88) } //width:320/328
     
     private lazy var stackView = UIStackView().with {
         $0.translatesAutoresizingMaskIntoConstraints = false
@@ -56,9 +56,36 @@ open class CalendarHeaderView: View {
         $0.backgroundColor = .clear
     }
     internal var monthView = View()
+    internal var previousMonthView = View()
+    internal var nextMonthView = View()
     internal var daysView = View()
     internal let daysOfWeek = Date.capitalizedFirstLettersOfWeekdays
     
+    internal var previousButton = ButtonIcon().with {
+        $0.kind = .ghost
+        $0.iconName = .leftCaret
+        $0.iconOffset = .init(x: -2, y: 0)
+        $0.icon.size = .small
+        $0.size = .small
+    }
+    
+    internal var nextButton = ButtonIcon().with {
+        $0.kind = .ghost
+        $0.iconName = .rightCaret
+        $0.iconOffset = .init(x: 2, y: 0)
+        $0.icon.size = .small
+        $0.size = .small
+    }
+    
+    internal var monthYearLabel = Label().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.textAlignment = .center
+        $0.numberOfLines = 1
+        $0.textStyle = .boldBodySmall
+        $0.backgroundColor = .clear
+        $0.isAccessibilityElement = false
+    }
+    
     private lazy var daysCollectionView: UICollectionView = {
         let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
         collectionView.isScrollEnabled = false
@@ -72,6 +99,8 @@ open class CalendarHeaderView: View {
         return collectionView
     }()
     
+    internal var monthYearLabelTextColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+    
     //--------------------------------------------------
     // MARK: - Lifecycle
     //--------------------------------------------------
@@ -97,16 +126,33 @@ open class CalendarHeaderView: View {
         // stackview
         containerView.addSubview(stackView)
         stackView
-            .pinTop(VDSLayout.space4X)
+            .pinTop()
             .pinLeading()
             .pinTrailing()
             .pinBottom(VDSLayout.space1X)
         
         // month label view, previous and next buttons
         stackView.addArrangedSubview(monthView)
-        monthView.backgroundColor = .orange
+        monthView.backgroundColor = .clear
         monthView.heightAnchor.constraint(equalToConstant: 40).isActive = true
         
+        // month Header stack view
+        monthView.addSubview(monthHeaderStackView)
+        monthHeaderStackView.pinToSuperView()
+
+        // previous button
+        monthHeaderStackView.addArrangedSubview(previousMonthView)
+        previousMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
+        previousMonthView.addSubview(previousButton)
+        
+        // month year label
+        monthHeaderStackView.addArrangedSubview(monthYearLabel)
+        
+        // next button
+        monthHeaderStackView.addArrangedSubview(nextMonthView)
+        nextMonthView.widthAnchor.constraint(equalToConstant: 40).activate()
+        nextMonthView.addSubview(nextButton)
+        
         // days Collection View
         stackView.addArrangedSubview(daysCollectionView)
         daysCollectionView.widthAnchor.constraint(equalTo: widthAnchor).activate()
@@ -117,6 +163,8 @@ open class CalendarHeaderView: View {
     open override func updateView() {
         super.updateView()
         daysCollectionView.reloadData()
+        monthYearLabel.text = "May 2024"
+        monthYearLabel.textColor = monthYearLabelTextColorConfiguration.getColor(surface)
     }
     
     override open func layoutSubviews() {

VDS/Components/Calendar/CalendarLegendView.swift

@@ -35,7 +35,7 @@ open class CalendarLegendView: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    internal var containerSize: CGSize { CGSize(width: 320, height: 56) } //width:320/328
+    internal var containerSize: CGSize { CGSize(width: 304, height: 40) } //width:320/328
 
     internal var containerView = View().with {
         $0.clipsToBounds = true
@@ -73,9 +73,9 @@ open class CalendarLegendView: View {
         addSubview(containerView)
         containerView
             .pinTop(VDSLayout.space6X)
-            .pinBottom(VDSLayout.space4X)
+            .pinBottom()
-            .pinLeadingGreaterThanOrEqualTo(leadingAnchor, VDSLayout.space5X, .defaultLow)
+            .pinLeadingGreaterThanOrEqualTo(leadingAnchor, VDSLayout.space3X, .defaultLow)
-            .pinTrailingLessThanOrEqualTo(trailingAnchor, VDSLayout.space5X, .defaultHigh)
+            .pinTrailingLessThanOrEqualTo(trailingAnchor, VDSLayout.space3X, .defaultHigh)
             .height(containerSize.height)
             .width(containerSize.width)