Merge branch 'feature/pagination' into 'develop'

Pagination Component

See merge request BPHV_MIPS/vds_ios!168

VDS.xcodeproj/project.pbxproj

@@ -21,10 +21,17 @@
 		5F21D7BF28DCEB3D003E7CD6 /* Useable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */; };
 		5FC35BE328D51405004EBEAC /* Button.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5FC35BE228D51405004EBEAC /* Button.swift */; };
 		7115BD3C2B84C0C200E0A610 /* TileContainerChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 7115BD3B2B84C0C200E0A610 /* TileContainerChangeLog.txt */; };
+		71ACE89C2BA0451200FB6ADC /* PaginationContainer.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71ACE89B2BA0451200FB6ADC /* PaginationContainer.swift */; };
+		71B23C2D2B91FA690027F7D9 /* Pagination.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71B23C2C2B91FA690027F7D9 /* Pagination.swift */; };
+		71B5FCBB2B95A0CA00269BCC /* PaginationChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 71B5FCBA2B95A0CA00269BCC /* PaginationChangeLog.txt */; };
 		71BFA70A2B7F70E6000DCE33 /* DropShadowable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71BFA7092B7F70E6000DCE33 /* DropShadowable.swift */; };
 		71C02B382B7BD98F00E93E66 /* NotificationChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 71C02B372B7BD98F00E93E66 /* NotificationChangeLog.txt */; };
+		71FC86DA2B96F44C00700965 /* PaginationButton.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86D92B96F44C00700965 /* PaginationButton.swift */; };
+		71FC86DC2B96F4C800700965 /* PaginationCellItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86DB2B96F4C800700965 /* PaginationCellItem.swift */; };
 		71FC86DE2B9738B900700965 /* SurfaceConfigurationValue.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86DD2B9738B900700965 /* SurfaceConfigurationValue.swift */; };
 		71FC86E02B973AE500700965 /* DropShadowConfiguration.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86DF2B973AE500700965 /* DropShadowConfiguration.swift */; };
+		71FC86E22B97483000700965 /* Clamping.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86E12B97483000700965 /* Clamping.swift */; };
+		71FC86E42B9841AC00700965 /* PaginationFlowLayout.swift in Sources */ = {isa = PBXBuildFile; fileRef = 71FC86E32B9841AC00700965 /* PaginationFlowLayout.swift */; };
 		EA0B18022A9E236900F2D0CD /* SelectorGroupBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0B18012A9E236900F2D0CD /* SelectorGroupBase.swift */; };
 		EA0B18052A9E2D2D00F2D0CD /* SelectorBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0B18032A9E2D2D00F2D0CD /* SelectorBase.swift */; };
 		EA0B18062A9E2D2D00F2D0CD /* SelectorItemBase.swift in Sources */ = {isa = PBXBuildFile; fileRef = EA0B18042A9E2D2D00F2D0CD /* SelectorItemBase.swift */; };
@@ -198,10 +205,17 @@
 		5F21D7BE28DCEB3D003E7CD6 /* Useable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Useable.swift; sourceTree = "<group>"; };
 		5FC35BE228D51405004EBEAC /* Button.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Button.swift; sourceTree = "<group>"; };
 		7115BD3B2B84C0C200E0A610 /* TileContainerChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = TileContainerChangeLog.txt; sourceTree = "<group>"; };
+		71ACE89B2BA0451200FB6ADC /* PaginationContainer.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationContainer.swift; sourceTree = "<group>"; };
+		71B23C2C2B91FA690027F7D9 /* Pagination.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Pagination.swift; sourceTree = "<group>"; };
+		71B5FCBA2B95A0CA00269BCC /* PaginationChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = PaginationChangeLog.txt; sourceTree = "<group>"; };
 		71BFA7092B7F70E6000DCE33 /* DropShadowable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropShadowable.swift; sourceTree = "<group>"; };
 		71C02B372B7BD98F00E93E66 /* NotificationChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = NotificationChangeLog.txt; sourceTree = "<group>"; };
+		71FC86D92B96F44C00700965 /* PaginationButton.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationButton.swift; sourceTree = "<group>"; };
+		71FC86DB2B96F4C800700965 /* PaginationCellItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationCellItem.swift; sourceTree = "<group>"; };
 		71FC86DD2B9738B900700965 /* SurfaceConfigurationValue.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SurfaceConfigurationValue.swift; sourceTree = "<group>"; };
 		71FC86DF2B973AE500700965 /* DropShadowConfiguration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DropShadowConfiguration.swift; sourceTree = "<group>"; };
+		71FC86E12B97483000700965 /* Clamping.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Clamping.swift; sourceTree = "<group>"; };
+		71FC86E32B9841AC00700965 /* PaginationFlowLayout.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PaginationFlowLayout.swift; sourceTree = "<group>"; };
 		EA0B18012A9E236900F2D0CD /* SelectorGroupBase.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SelectorGroupBase.swift; sourceTree = "<group>"; };
 		EA0B18032A9E2D2D00F2D0CD /* SelectorBase.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SelectorBase.swift; sourceTree = "<group>"; };
 		EA0B18042A9E2D2D00F2D0CD /* SelectorItemBase.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SelectorItemBase.swift; sourceTree = "<group>"; };
@@ -415,6 +429,19 @@
 			path = Button;
 			sourceTree = "<group>";
 		};
+		71B23C2B2B91FA510027F7D9 /* Pagination */ = {
+			isa = PBXGroup;
+			children = (
+				71B23C2C2B91FA690027F7D9 /* Pagination.swift */,
+				71ACE89B2BA0451200FB6ADC /* PaginationContainer.swift */,
+				71FC86D92B96F44C00700965 /* PaginationButton.swift */,
+				71FC86DB2B96F4C800700965 /* PaginationCellItem.swift */,
+				71FC86E32B9841AC00700965 /* PaginationFlowLayout.swift */,
+				71B5FCBA2B95A0CA00269BCC /* PaginationChangeLog.txt */,
+			);
+			path = Pagination;
+			sourceTree = "<group>";
+		};
 		EA0B17FF2A9E21CA00F2D0CD /* Selector */ = {
 			isa = PBXGroup;
 			children = (
@@ -528,6 +555,7 @@
 				44604AD529CE195300E62B51 /* Line */,
 				EAD0688C2A55F801002E3A2D /* Loader */,
 				445BA07629C07ABA0036A7C5 /* Notification */,
+				71B23C2B2B91FA510027F7D9 /* Pagination */,
 				EA89200B28B530F0006B9984 /* RadioBox */,
 				EAF7F11428A1470D00B287F5 /* RadioButton */,
 				EA596ABB2A16B4D500300C4B /* Tabs */,
@@ -616,6 +644,7 @@
 			isa = PBXGroup;
 			children = (
 				EA3361BC288B2C760071C351 /* TypeAlias.swift */,
+				71FC86E12B97483000700965 /* Clamping.swift */,
 				71FC86DD2B9738B900700965 /* SurfaceConfigurationValue.swift */,
 				71FC86DF2B973AE500700965 /* DropShadowConfiguration.swift */,
 			);
@@ -1006,6 +1035,7 @@
 				EAEEECA92B1F969700531FC2 /* TooltipChangeLog.txt in Resources */,
 				EAEEEC9C2B1F8F0700531FC2 /* TextLinkCaretChangeLog.txt in Resources */,
 				EAA5EEE428F5B855003B3210 /* VerizonNHGDS-Light.otf in Resources */,
+				71B5FCBB2B95A0CA00269BCC /* PaginationChangeLog.txt in Resources */,
 				EAEEECAD2B1FC1A600531FC2 /* TitleLockupChangeLog.txt in Resources */,
 				EAEEECAB2B1FBF2A00531FC2 /* ToggleChangeLog.txt in Resources */,
 			);
@@ -1039,6 +1069,7 @@
 				EA3361C328902D960071C351 /* Toggle.swift in Sources */,
 				EAF7F0A0289AB7EC00B287F5 /* View.swift in Sources */,
 				EA89201328B568D8006B9984 /* RadioBoxItem.swift in Sources */,
+				71FC86E42B9841AC00700965 /* PaginationFlowLayout.swift in Sources */,
 				EAC9258C2911C9DE00091998 /* InputField.swift in Sources */,
 				EA3362402892EF6C0071C351 /* Label.swift in Sources */,
 				EAB2376229E9880400AABE9A /* TrailingTooltipLabel.swift in Sources */,
@@ -1048,6 +1079,7 @@
 				71BFA70A2B7F70E6000DCE33 /* DropShadowable.swift in Sources */,
 				EA0D1C452A6AD73000E5C127 /* RawRepresentable.swift in Sources */,
 				EA985C23296E033A00F2FF2E /* TextArea.swift in Sources */,
+				71FC86E22B97483000700965 /* Clamping.swift in Sources */,
 				EAF7F0B3289B1ADC00B287F5 /* ActionLabelAttribute.swift in Sources */,
 				1855EC662BAABF2A002ACAC2 /* BreadcrumbItemModel.swift in Sources */,
 				EAC925832911B35400091998 /* TextLinkCaret.swift in Sources */,
@@ -1062,6 +1094,7 @@
 				EAE785312BA0A438009428EA /* UIImage+Helper.swift in Sources */,
 				EAB5FEF5292D371F00998C17 /* ButtonBase.swift in Sources */,
 				EA978EC5291D6AFE00ACC883 /* AnyLabelAttribute.swift in Sources */,
+				71ACE89C2BA0451200FB6ADC /* PaginationContainer.swift in Sources */,
 				EAC71A1F2A2E173D00E47A9F /* RadioButton.swift in Sources */,
 				EA33622C2891E73B0071C351 /* FontProtocol.swift in Sources */,
 				EA596ABD2A16B4EC00300C4B /* Tab.swift in Sources */,
@@ -1069,6 +1102,7 @@
 				EA985BEE2968A92400F2FF2E /* TitleLockupSubTitleModel.swift in Sources */,
 				EA985BF22968B5BB00F2FF2E /* TitleLockupTextStyle.swift in Sources */,
 				EAB1D2CD28ABE76100DAE764 /* Withable.swift in Sources */,
+				71FC86DC2B96F4C800700965 /* PaginationCellItem.swift in Sources */,
 				EAC846F3294B95CE00F685BA /* ButtonGroupCollectionViewCell.swift in Sources */,
 				EAF7F0952899861000B287F5 /* CheckboxItem.swift in Sources */,
 				EA985BE82968951C00F2FF2E /* TileletTitleModel.swift in Sources */,
@@ -1086,6 +1120,7 @@
 				EAC9258F2911C9DE00091998 /* EntryFieldBase.swift in Sources */,
 				EAB1D2EA28AE84AA00DAE764 /* UIControlPublisher.swift in Sources */,
 				EAD068922A560B65002E3A2D /* LoaderViewController.swift in Sources */,
+				71FC86DA2B96F44C00700965 /* PaginationButton.swift in Sources */,
 				EABFEB642A26473700C4C106 /* NSAttributedString.swift in Sources */,
 				EAF7F13328A2A16500B287F5 /* AttachmentLabelAttributeModel.swift in Sources */,
 				EAF4A6A12BAC8B94006BCC2C /* BreadcrumbsFlowLayout.swift in Sources */,
@@ -1094,6 +1129,7 @@
 				EA8E40932A82889500934ED3 /* TooltipDialog.swift in Sources */,
 				44604AD429CE186A00E62B51 /* NotificationButtonModel.swift in Sources */,
 				EAD8D2C128BFDE8B006EB6A6 /* UIGestureRecognizer+Publisher.swift in Sources */,
+				71B23C2D2B91FA690027F7D9 /* Pagination.swift in Sources */,
 				EA0D1C372A681CCE00E5C127 /* ToggleView.swift in Sources */,
 				EAF7F0B9289C139800B287F5 /* ColorConfiguration.swift in Sources */,
 				EA3361BD288B2C760071C351 /* TypeAlias.swift in Sources */,

VDS/Components/Icon/IconName.swift

@@ -48,7 +48,6 @@ extension Icon {
         internal static let paginationRightCaret = Name(name: "pagination-right-caret")
         internal static let verizonUp = Name(name: "verizon-up")
         internal static let warningBold = Name(name: "warning-bold")
-
         public static let checkmark = Name(name: "checkmark")
         public static let checkmarkAlt = Name(name: "checkmark-alt")
         public static let close = Name(name: "close")

VDS/Components/Pagination/Pagination.swift

@@ -0,0 +1,244 @@
+//
+//  Pagination.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 01/03/24.
+//
+
+import Foundation
+import VDSColorTokens
+import Combine
+
+///Pagination is a control that enables customers to navigate multiple pages of content by selecting either a specific page or the next or previous set of four pages.
+@objc(VDSPagination)
+open class Pagination: View {
+    
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    ///Maximum component width
+    private let maxWidth: CGFloat = 288.0
+    ///Collectionview width anchor
+    private var collectionViewWidthAnchor: NSLayoutConstraint?
+    ///Collectionview container Center X constraint
+    private var collectionContainerViewCenterXConstraint: NSLayoutConstraint?
+    ///Selected page index
+    private var _selectedPageIndex: Int = 0
+    ///Custom flow layout defined for the Pagination
+    private let flowLayout = PaginationFlowLayout()
+    ///A root view for the pagination
+    public let containerView: View = View().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+    }
+    ///Collectionview to render pagination indexes
+    private lazy var collectionView: UICollectionView = {
+        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
+        collectionView.isScrollEnabled = false
+        collectionView.translatesAutoresizingMaskIntoConstraints = false
+        collectionView.showsHorizontalScrollIndicator = false
+        collectionView.showsVerticalScrollIndicator = false
+        collectionView.isAccessibilityElement = true
+        collectionView.register(PaginationCellItem.self, forCellWithReuseIdentifier: PaginationCellItem.identifier)
+        collectionView.backgroundColor = .clear
+        collectionView.delegate = self
+        collectionView.dataSource = self
+        return collectionView
+    }()
+    ///Container view to hold collectionview to render pagination indexes and to handler accessibility.
+    private let collectionContainerView = PaginationContainer()
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    ///Previous button to select previous page
+    public let previousButton: PaginationButton = .init(type: .previous)
+    ///Next button to select next page
+    public let nextButton: PaginationButton = .init(type: .next)
+    /// A callback when the page changes. Passes parameters (selectedPage).
+    public var onPageDidSelect: ((Int) -> Void)?
+    /// Total number of pages, allows limit ranging from 0 to 9999.
+    @Clamping(range: 0...9999)
+    public var total: Int {
+        didSet {
+            previousButton.isHidden = true
+            nextButton.isHidden = total <= 1
+            _selectedPageIndex = 0
+            setNeedsUpdate()
+            updateSelection()
+        }
+    }
+    ///Selected active page number and clips to total pages if selected index is greater than the total pages.
+    public var selectedPage: Int {
+        set {
+            if newValue >= total {
+                _selectedPageIndex = total - 1
+            } else if newValue < 0 {
+                _selectedPageIndex = 0
+            } else {
+                _selectedPageIndex = max(newValue - 1, 0)
+            }
+            setNeedsUpdate()
+            updateSelection()
+        }
+        get {
+            _selectedPageIndex + 1 //Returns selected page value not index
+        }
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Executed on initialization for this View.
+    open override func initialSetup() {
+        super.initialSetup()
+        
+        collectionContainerView.addSubview(collectionView)
+        containerView.addSubview(previousButton)
+        containerView.addSubview(collectionContainerView)
+        containerView.addSubview(nextButton)
+        addSubview(containerView)
+
+        containerView
+            .pinTop()
+            .pinBottom()
+            .pinLeadingGreaterThanOrEqualTo()
+            .pinTrailingLessThanOrEqualTo()
+            .pinCenterX()
+            .width(maxWidth)
+            .height(44)
+        
+        previousButton
+            .pinTop()
+            .pinBottom()
+            .pinLeading()
+            .pinTrailingGreaterThanOrEqualTo(collectionContainerView.leadingAnchor)
+        
+        collectionContainerView
+            .pinTrailingGreaterThanOrEqualTo(nextButton.leadingAnchor)
+            .pinTop()
+            .pinBottom()
+        
+        collectionView
+            .height(VDSLayout.Spacing.space4X.value)
+            .pinCenterY()
+            .pinCenterX()
+        
+        collectionViewWidthAnchor = collectionView.width(constant: 92)
+        
+        nextButton
+            .pinTop()
+            .pinBottom()
+            .pinTrailing()
+        
+        nextButton.onClick = onbuttonTapped
+        previousButton.onClick = onbuttonTapped
+        previousButton.isHidden = true
+        
+        flowLayout.$collectionViewWidth
+            .receive(on: RunLoop.main)
+            .sink { [weak self] value in
+                self?.collectionViewWidthAnchor?.constant = value //As cell width is dynamic i.e cell may contain 2 or 3 or 4 charcters. Make sure that all the visible cells are displayed.
+            }.store(in: &subscribers)
+        collectionContainerView.onAccessibilityIncrement = { [weak self] in
+            guard let self else { return }
+            self.selectedPage = max(0, self.selectedPage + 1)
+        }
+        collectionContainerView.onAccessibilityDecrement = { [weak self] in
+            guard let self else { return }
+            self.selectedPage = max(0, self.selectedPage - 1)
+        }
+    }
+    
+    ///Updating the accessiblity values i.e elements, label, value other items for the component.
+    open override func updateAccessibility() {
+        super.updateAccessibility()
+        accessibilityElements = [previousButton, collectionContainerView, nextButton]
+        collectionContainerView.accessibilityLabel = "Pagination containing \(total) pages"
+        collectionContainerView.accessibilityValue = "Page \(selectedPage) of \(total) selected"
+    }
+    
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        super.updateView()
+        nextButton.surface = surface
+        previousButton.surface = surface
+        collectionView.reloadData()
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Private Methods
+    //--------------------------------------------------
+    ///When previous/next button is tapped
+    private func onbuttonTapped(_ sender: UIButton) {
+        let isNextAction = sender == nextButton
+        _selectedPageIndex = if isNextAction { _selectedPageIndex + 1 } else { _selectedPageIndex - 1 }
+        updateSelection()
+        DispatchQueue.main.asyncAfter(deadline: .now() + .milliseconds(100)) { [weak self] in
+            guard let self else { return }
+            UIAccessibility.post(notification: .announcement, argument: "Page \(self.selectedPage) of \(self.total) selected")
+        }
+    }
+    
+    ///Refreshing the UI based on the selected page
+    private func updateSelection() {
+        guard _selectedPageIndex < total else { return }
+        //Need to make selected page as second element so scrolling previous index of the selected page to left
+        collectionView.scrollToItem(at: IndexPath(row: max(_selectedPageIndex - 1, 0), section: 0), at: .left, animated: false)
+        previousButton.isHidden = _selectedPageIndex == 0
+        nextButton.isHidden = _selectedPageIndex == total - 1
+        collectionView.reloadData()
+        verifyIfMaxDigitChanged()
+    }
+    
+    ///Identifying if there is any change in the digits of upcoming page
+    private func verifyIfMaxDigitChanged() {
+        let upperLimitPage = _selectedPageIndex + flowLayout.maxNumberOfColumns
+        let upperLimitDigits = upperLimitPage.digitCount //future value digits
+        switch (flowLayout.numberOfColumns, upperLimitDigits) {
+        case (_, 1), (_, 2):
+            flowLayout.numberOfColumns = 4
+        default:
+            flowLayout.numberOfColumns = 3
+        }
+        if upperLimitDigits != flowLayout.upperLimitDigits {
+            flowLayout.upperLimitDigits = upperLimitDigits
+            flowLayout.invalidateLayout()
+            collectionView.reloadData()
+            //Need to make selected page as second element so scrolling previous index of the selected page to left
+            collectionView.scrollToItem(at: IndexPath(row: max(_selectedPageIndex - 1, 0), section: 0), at: .left, animated: false)
+        }
+    }
+}
+
+extension Pagination: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
+    //--------------------------------------------------
+    // MARK: - UICollectionView Delegate & Datasource
+    //--------------------------------------------------
+    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { total }
+
+    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: PaginationCellItem.identifier, for: indexPath) as? PaginationCellItem else { return UICollectionViewCell() }
+        cell.update(_selectedPageIndex, currentIndex: indexPath.row, surface: surface)
+        return cell
+    }
+    
+    public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+        guard _selectedPageIndex != indexPath.row else { return }
+        _selectedPageIndex = indexPath.row
+        updateSelection()
+        onPageDidSelect?(selectedPage)
+    }
+}
+
+fileprivate extension Int {
+    //--------------------------------------------------
+    // MARK: - Extension on Int to identify number of digits in given number.
+    //--------------------------------------------------
+    var digitCount: Int {
+        numberOfDigits(in: self)
+    }
+    
+    private func numberOfDigits(in number: Int) -> Int {
+        number < 10 && number >= 0 ? 1 : 1 + numberOfDigits(in: number/10)
+    }
+}

VDS/Components/Pagination/PaginationButton.swift

@@ -0,0 +1,111 @@
+//
+//  PaginationButton.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 05/03/24.
+//
+
+import UIKit
+import VDSColorTokens
+
+///This is customised button for Pagination view
+@objc(PaginationButton)
+open class PaginationButton: ButtonBase {
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    /// Type of the PaginationButton
+    private var type: Type = .next
+    /// Button tint color configuration
+    private let buttonTintColorConfiguration = SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteWhite)
+    /// Button title color configuration
+    private let buttonTextColorConfiguration = SurfaceColorConfiguration(VDSColor.paletteBlack, VDSColor.paletteWhite)
+    /// Button configuration for iOS 15+
+    @available(iOS 15.0, *)
+    private var buttonConfiguration: Button.Configuration {
+        var configuration = ButtonBase.Configuration.plain()
+        configuration.imagePadding = VDSLayout.Spacing.space2X.value
+        configuration.imagePlacement = type == .next ? .trailing : .leading
+        configuration.titleAlignment =  type == .next ? .trailing : .leading
+        configuration.contentInsets = .zero
+        return configuration
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Public Properties
+    //--------------------------------------------------
+    /// TextStyle used on the titleLabel.
+    open override var textStyle: TextStyle { TextStyle.boldBodySmall }
+    /// UIColor used on the titleLabel text.
+    open override var textColor: UIColor { buttonTextColorConfiguration.getColor(surface) }
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    init(type: Type) {
+        self.type = type
+        super.init()
+    }
+    
+    required public init() {
+        super.init()
+    }
+    
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    /// Executed on initialization for this View.
+    open override func initialSetup() {
+        super.initialSetup()
+        if #available(iOS 15.0, *) {
+            configuration = buttonConfiguration
+        } else {
+            semanticContentAttribute = type == .next ? .forceRightToLeft : .forceLeftToRight
+            imageEdgeInsets = .init(top: 0, left: 0, bottom: 0, right: VDSLayout.Spacing.space2X.value)
+        }
+        contentHorizontalAlignment = type == .next ? .trailing : .leading
+    }
+    
+    /// Used to make changes to the View based off a change events or from local properties.
+    open override func updateView() {
+        text = type.title
+        let color = buttonTintColorConfiguration.getColor(surface)
+        setImage(type.image(color), for: .normal)
+        tintColor = color
+        super.updateView()
+    }
+}
+
+extension PaginationButton {
+    //--------------------------------------------------
+    // MARK: - Enum to configure PaginationButton
+    //--------------------------------------------------
+    enum `Type` {
+        case previous, next
+        
+        var title: String {
+            switch self {
+            case .next:
+                "Next"
+            case .previous:
+                "Previous"
+            }
+        }
+        
+        private var imageSize: CGSize { Icon.Size.xsmall.dimensions }
+        
+        ///Image for the configuration type
+        func image(_ color: UIColor) -> UIImage? {
+            switch self {
+            case .previous:
+                UIImage.image(for: .paginationLeftArrow, color: color, renderingMode: .alwaysTemplate)?.resized(to: imageSize)
+            case .next:
+                UIImage.image(for: .paginationRightArrow, color: color, renderingMode: .alwaysTemplate)?.resized(to: imageSize)
+            }
+        }
+    }
+}

VDS/Components/Pagination/PaginationCellItem.swift

@@ -0,0 +1,63 @@
+//
+//  PaginationCellItem.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 05/03/24.
+//
+
+import UIKit
+import VDSColorTokens
+
+///This is customised view for Pagination cell item
+final class PaginationCellItem: UICollectionViewCell {
+    
+    ///Identifier for the PaginationCellItem
+    static let identifier: String = String(describing: PaginationCellItem.self)
+
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    ///Text color configuration for the element
+    private let textColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+    ///Pagination index label
+    private var indexLabel: Label = Label().with {
+        $0.translatesAutoresizingMaskIntoConstraints = false
+        $0.textAlignment = .center
+        $0.isAccessibilityElement = false
+        $0.numberOfLines = 1
+    }
+    
+    //--------------------------------------------------
+    // MARK: - Initializers
+    //--------------------------------------------------
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setUp()
+    }
+    
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setUp()
+    }
+    
+    ///Configuring the cell with default setup
+    private func setUp() {
+        let containerView = View()
+        containerView.translatesAutoresizingMaskIntoConstraints = false
+        containerView.addSubview(indexLabel)
+        contentView.addSubview(containerView)
+        containerView.pinToSuperView()
+        indexLabel.pinToSuperView()
+        indexLabel.widthGreaterThanEqualTo(VDSLayout.Spacing.space5X.value)
+        contentView.backgroundColor = .clear
+        containerView.backgroundColor = .clear
+        indexLabel.backgroundColor = .clear
+    }
+    
+    ///Updating UI based on selected index, current index along with surface
+    func update(_ selectedIndex: Int, currentIndex: Int, surface: Surface) {
+        indexLabel.textStyle = selectedIndex == currentIndex ? .boldBodySmall : .bodySmall
+        indexLabel.text = "\(currentIndex + 1)"
+        indexLabel.textColor = textColorConfiguration.getColor(surface)
+    }
+}

VDS/Components/Pagination/PaginationChangeLog.txt

@@ -0,0 +1,34 @@
+MM/DD/YYYY
+----------------
+
+Initial Brand 3.0 handoff
+
+12/17/2021
+----------------
+- Replaced focusring colors (previously interactive/onlight/ondark) with accessibility/onlight/ondark colors
+- Updated focus border name (previously interactive.focusring.onlight) with focusring.onlight/ondark
+
+02/28/2022
+----------------
+- Change Page Item Active to Page Item Selected. All Active references changed to Selected.
+
+03/01/2022
+----------------
+- Replaced Left and Right Arrow Non-Scaling icons with VDS Icon.
+- Removed “weight” and “vector effect” from Anatomy frame.
+
+08/10/2022
+----------------
+- Updated default and inverted prop to  light and dark surface.
+
+11/30/2022
+----------------
+- Added "(web only)" to any instance of "keyboard focus"
+
+12/13/2022
+----------------
+- Replaced focus border pixel and style & spacing values with tokens.
+
+01/12/2023
+----------------
+- Removed “Page Item Selected” from Anatomy.

VDS/Components/Pagination/PaginationContainer.swift

@@ -0,0 +1,45 @@
+//
+//  PaginationContainerView.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 12/03/24.
+//
+
+import UIKit
+    
+///PaginationCollectionView is a container view that holds collectionview for displaying page indexes
+final class PaginationContainer: View {
+    
+    //--------------------------------------------------
+    // MARK: - Internal Properties
+    //--------------------------------------------------
+    ///Notifies when accessibility increment is happend when user swipes up
+    var onAccessibilityIncrement: (() -> Void)?
+    ///Notifies when accessibility decrement is happend when user swipes down
+    var onAccessibilityDecrement: (() -> Void)?
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    ///Accessibilty traits for the Pagination view
+    override var accessibilityTraits: UIAccessibilityTraits {
+        get { [.adjustable] }
+        set { }
+    }
+    
+    ///Accessibilty increment
+    override func accessibilityIncrement() {
+        onAccessibilityIncrement?()
+    }
+    
+    ///Accessibilty decrement
+    override func accessibilityDecrement() {
+        onAccessibilityDecrement?()
+    }
+    
+    /// Executed on initialization for this View.
+    override func setup() {
+        super.setup()
+        isAccessibilityElement = true
+    }
+}

VDS/Components/Pagination/PaginationFlowLayout.swift

@@ -0,0 +1,91 @@
+//
+//  PaginationFlowLayout.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 06/03/24.
+//
+
+import Foundation
+import UIKit
+
+///Customised flow layout for Pagination view
+final class PaginationFlowLayout : UICollectionViewLayout {
+    //--------------------------------------------------
+    // MARK: - Private Properties
+    //--------------------------------------------------
+    ///Spacing between the pagination cells
+    private let spacingBetweenCell: CGFloat = VDSLayout.Spacing.space1X.value
+    ///Pre-defined sizes of the pagination cell based on number of digits.
+    private var upperLimitSize: CGSize {
+        switch upperLimitDigits {
+        case 1, 2: .init(width: 20, height: 16)
+        case 3: .init(width: 28, height: 16)
+        default: .init(width: 34, height: 16)
+        }
+    }
+    ///Property to store the defined layout attributes.
+    private var itemCache : [UICollectionViewLayoutAttributes] = []
+
+    //--------------------------------------------------
+    // MARK: - Internal Properties
+    //--------------------------------------------------
+    ///Maximum number of page indexes shown on UI
+    let maxNumberOfColumns: Int = 4
+    ///Number of digits of the maximum page index.
+    var upperLimitDigits: Int = 0
+    ///Number of page indexes shown on UI.
+    var numberOfColumns: Int = 4
+    ///A property that publishes when there is change in collection view width.
+    @Published var collectionViewWidth: CGFloat = 0
+    
+    //--------------------------------------------------
+    // MARK: - Overrides
+    //--------------------------------------------------
+    ///Preparing the layout collection attributes for pagination and updating the collectionview width.
+    override func prepare() {
+
+        guard let collectionView else { return }
+
+        itemCache.removeAll()
+        var xPos : CGFloat = 0
+        for item in 0..<collectionView.numberOfItems(inSection: 0) {
+            let indexPath = IndexPath(item: item, section: 0)
+            let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
+            attributes.frame = .init(origin: .init(x: xPos, y: 0), size: upperLimitSize)
+            xPos += (spacingBetweenCell + upperLimitSize.width)
+            itemCache.append(attributes)
+        }
+        guard !itemCache.isEmpty else { return }
+        var rightMostVisibleItem: UICollectionViewLayoutAttributes?
+        if numberOfColumns < itemCache.count {
+            rightMostVisibleItem = itemCache[max(numberOfColumns - 1, 0)]
+        } else {
+            rightMostVisibleItem = itemCache.last
+        }
+        if let rightMostVisibleItem {
+            collectionViewWidth = rightMostVisibleItem.frame.minX + rightMostVisibleItem.frame.width
+        }
+    }
+    
+    ///This will return the layout attributes for the elements in the defined rect
+    override func layoutAttributesForElements(in rect: CGRect)-> [UICollectionViewLayoutAttributes]? {
+        var visibleLayoutAttributes: [UICollectionViewLayoutAttributes] = []
+        for attributes in itemCache {
+            if attributes.frame.intersects(rect) {
+                visibleLayoutAttributes.append(attributes)
+            }
+        }
+        return visibleLayoutAttributes
+    }
+    
+    ///This will return the layout attributes at particular indexPath
+    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
+        return itemCache[indexPath.row]
+    }
+    
+    ///Returns the collectionview content size
+    override var collectionViewContentSize: CGSize {
+        guard let lastAttribute = itemCache.last else { return super.collectionViewContentSize }
+        return .init(width: lastAttribute.frame.width + lastAttribute.frame.origin.x, height: 16)
+    }
+}

VDS/Components/Tabs/Tabs.swift

@@ -264,7 +264,6 @@ open class Tabs: View {
                     model.onClick?(tab.index)
                     self.selectedIndex = tab.index
                     self.onTabDidSelect?(tab.index)
-                    let t = tabViews[tab.index]
                 }
             }
         }

VDS/Extensions/UIImage+Helper.swift

@@ -23,4 +23,17 @@ extension UIImage {
         
         return image.withTintColor(color, renderingMode: renderingMode)
     }
+    
+    /// Resizes image to a specific Size
+    /// - Parameter size: Size to resize
+    /// - Returns: Image that is resized
+    public func resized(to size: CGSize) -> UIImage? {
+        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
+        
+        defer { UIGraphicsEndImageContext() }
+        draw(in: .init(origin: .zero, size: size))
+        
+        return UIGraphicsGetImageFromCurrentImageContext()
+    }
+    
 }

VDS/Protocols/LayoutConstraintable.swift

@@ -478,7 +478,159 @@ extension LayoutConstraintable {
     }
 }
 
+//--------------------------------------------------
+// MARK: - Center X Constraints
+//--------------------------------------------------
+extension LayoutConstraintable {
     
+    @discardableResult
+    /// Adds a centerXAnchor.
+    /// - Parameter constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterX(_ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterX(nil, constant)
+    }
+
+    @discardableResult
+    /// Adds a centerXAnchor to a specific XAxisAnchor.
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor.
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterX(_ anchor: NSLayoutXAxisAnchor? = nil, _ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterX(anchor: anchor, constant: constant)
+        return self
+    }
+    
+    @discardableResult
+    /// Adds a centerXAnchor to a specific XAxisAnchor passed in using a lessThanOrEqualTo Constraint
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterXLessThanOrEqualTo(_ anchor: NSLayoutXAxisAnchor? = nil, _ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterXLessThanOrEqualTo(anchor: anchor, constant: constant)
+        return self
+    }
+
+    @discardableResult
+    /// Adds a centerXAnchor to a specific XAxisAnchor passed in using a greaterThanOrEqualTo Constraint
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterXGreaterThanOrEqualTo(_ anchor: NSLayoutXAxisAnchor? = nil, _ constant: CGFloat = 0.0) -> Self {
+        pinCenterXGreaterThanOrEqualTo(anchor: anchor, constant: constant)
+        return self
+    }
+    
+    @discardableResult
+    /// Adds a centerXAnchor for the constant passed into the method.
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterX(anchor: NSLayoutXAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutXAxisAnchor? = anchor ?? superview?.centerXAnchor
+        guard let found else { return nil }
+        return centerXAnchor.constraint(equalTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+    
+    @discardableResult
+    /// Adds a centerXAnchor with the constant passed in using a lessThanOrEqualTo Constraint.
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterXLessThanOrEqualTo(anchor: NSLayoutXAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutXAxisAnchor? = anchor ?? superview?.centerXAnchor
+        guard let found else { return nil }
+        return centerXAnchor.constraint(lessThanOrEqualTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+
+    @discardableResult
+    /// Adds a centerXAnchor with the constant passed in using a greaterThanOrEqualTo Constraint.
+    /// - Parameter anchor:The anchor in which to attach the centerXAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterXGreaterThanOrEqualTo(anchor: NSLayoutXAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutXAxisAnchor? = anchor ?? superview?.centerXAnchor
+        guard let found else { return nil }
+        return centerXAnchor.constraint(greaterThanOrEqualTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+}
+
+//--------------------------------------------------
+// MARK: - Center Y Constraints
+//--------------------------------------------------
+extension LayoutConstraintable {
+    
+    @discardableResult
+    /// Adds a centerYAnchor.
+    /// - Parameter constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterY(_ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterY(nil, constant)
+    }
+
+    @discardableResult
+    /// Adds a centerYAnchor to a specific YAxisAnchor.
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor.
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterY(_ anchor: NSLayoutYAxisAnchor? = nil, _ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterY(anchor: anchor, constant: constant)
+        return self
+    }
+    
+    @discardableResult
+    /// Adds a centerYAnchor to a specific YAxisAnchor passed in using a lessThanOrEqualTo Constraint
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterYLessThanOrEqualTo(_ anchor: NSLayoutYAxisAnchor? = nil, _ constant: CGFloat = 0.0, _ priority: UILayoutPriority = .required) -> Self {
+        pinCenterYLessThanOrEqualTo(anchor: anchor, constant: constant)
+        return self
+    }
+
+    @discardableResult
+    /// Adds a centerYAnchor to a specific YAxisAnchor passed in using a greaterThanOrEqualTo Constraint
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor
+    /// - constant: Constant size.
+    /// - Returns: Yourself.
+    public func pinCenterYGreaterThanOrEqualTo(_ anchor: NSLayoutXAxisAnchor? = nil, _ constant: CGFloat = 0.0) -> Self {
+        pinCenterXGreaterThanOrEqualTo(anchor: anchor, constant: constant)
+        return self
+    }
+    
+    @discardableResult
+    /// Adds a centerYAnchor for the constant passed into the method.
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterY(anchor: NSLayoutYAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutYAxisAnchor? = anchor ?? superview?.centerYAnchor
+        guard let found else { return nil }
+        return centerYAnchor.constraint(equalTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+    
+    @discardableResult
+    /// Adds a centerYAnchor with the constant passed in using a lessThanOrEqualTo Constraint.
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterYLessThanOrEqualTo(anchor: NSLayoutYAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutYAxisAnchor? = anchor ?? superview?.centerYAnchor
+        guard let found else { return nil }
+        return centerYAnchor.constraint(lessThanOrEqualTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+
+    @discardableResult
+    /// Adds a centerYAnchor with the constant passed in using a greaterThanOrEqualTo Constraint.
+    /// - Parameter anchor:The anchor in which to attach the centerYAnchor
+    /// -  constant: Constant size.
+    /// - Returns: The Constraint that was created.
+    public func pinCenterYGreaterThanOrEqualTo(anchor: NSLayoutYAxisAnchor?, constant: CGFloat = 0.0, priority: UILayoutPriority = .required) -> NSLayoutConstraint? {
+        let found: NSLayoutYAxisAnchor? = anchor ?? superview?.centerYAnchor
+        guard let found else { return nil }
+        return centerYAnchor.constraint(greaterThanOrEqualTo: found, constant: -constant).with { $0.priority = priority; $0.isActive = true }
+    }
+}
 //--------------------------------------------------
 // MARK: - Implementations
 //--------------------------------------------------

VDS/Utilities/Clamping.swift

@@ -0,0 +1,24 @@
+//
+//  Clamping.swift
+//  VDS
+//
+//  Created by Bandaru, Krishna Kishore on 05/03/24.
+//
+
+import Foundation
+
+@propertyWrapper public struct Clamping<Value: Comparable> {
+    
+    private var value: Value
+    private let range: ClosedRange<Value>
+    
+    public init(range: ClosedRange<Value>) {
+        self.value = range.lowerBound
+        self.range = range
+    }
+
+    public var wrappedValue: Value {
+        get { value }
+        set { value = min(max(range.lowerBound, newValue), range.upperBound) }
+    }
+}

VDS/VDS.docc/VDS.md

@@ -34,6 +34,7 @@ Using the system allows designers and developers to collaborate more easily and
 - ``Line``
 - ``Loader``
 - ``Notification``
+- ``Pagination``
 - ``RadioBoxItem``
 - ``RadioBoxGroup``
 - ``RadioButton``