From 663b1b1fede334e29432a5c02e882a6f2115ecc6 Mon Sep 17 00:00:00 2001 From: vasavk Date: Wed, 13 Mar 2024 16:41:21 +0530 Subject: [PATCH] Digital ACT-191 ONEAPP-6827 story: added Breadcrumbs change log, modified BreadcrumbCellItem --- VDS.xcodeproj/project.pbxproj | 4 + .../Breadcrumbs/BreadcrumbCellItem.swift | 68 +++++++++++++- VDS/Components/Breadcrumbs/Breadcrumbs.swift | 94 +++++++++++++++++++ .../Breadcrumbs/BreadcrumbsChangeLog.txt | 36 +++++++ 4 files changed, 201 insertions(+), 1 deletion(-) create mode 100644 VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt diff --git a/VDS.xcodeproj/project.pbxproj b/VDS.xcodeproj/project.pbxproj index 66ac0ba3..c86f3116 100644 --- a/VDS.xcodeproj/project.pbxproj +++ b/VDS.xcodeproj/project.pbxproj @@ -8,6 +8,7 @@ /* Begin PBXBuildFile section */ 1832AC572BA0791D008AE476 /* BreadcrumbCellItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */; }; + 18450CF12BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */; }; 186B2A8A2B88DA7F001AB71F /* TextAreaChangeLog.txt in Resources */ = {isa = PBXBuildFile; fileRef = 186B2A892B88DA7F001AB71F /* TextAreaChangeLog.txt */; }; 18792A902B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */; }; 18A65A022B96E848006602CC /* Breadcrumbs.swift in Sources */ = {isa = PBXBuildFile; fileRef = 18A65A012B96E848006602CC /* Breadcrumbs.swift */; }; @@ -179,6 +180,7 @@ /* Begin PBXFileReference section */ 1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BreadcrumbCellItem.swift; sourceTree = ""; }; + 18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = BreadcrumbsChangeLog.txt; sourceTree = ""; }; 186B2A892B88DA7F001AB71F /* TextAreaChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = TextAreaChangeLog.txt; sourceTree = ""; }; 18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconBadgeIndicatorModel.swift; sourceTree = ""; }; 18A65A012B96E848006602CC /* Breadcrumbs.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Breadcrumbs.swift; sourceTree = ""; }; @@ -368,6 +370,7 @@ 18A65A012B96E848006602CC /* Breadcrumbs.swift */, 18A65A032B96F050006602CC /* BreadcrumbItem.swift */, 1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */, + 18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */, ); path = Breadcrumbs; sourceTree = ""; @@ -982,6 +985,7 @@ 18BDEE822B75316E00452358 /* ButtonIconChangeLog.txt in Resources */, EA3362062891E14D0071C351 /* VerizonNHGeTX-Regular.otf in Resources */, EA3362052891E14D0071C351 /* VerizonNHGeDS-Bold.otf in Resources */, + 18450CF12BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt in Resources */, EAEEECA02B1F908200531FC2 /* BadgeIndicatorChangeLog.txt in Resources */, EAA5EEB928ECD24B003B3210 /* Icons.xcassets in Resources */, EAEEECA92B1F969700531FC2 /* TooltipChangeLog.txt in Resources */, diff --git a/VDS/Components/Breadcrumbs/BreadcrumbCellItem.swift b/VDS/Components/Breadcrumbs/BreadcrumbCellItem.swift index 5bb6b03a..91cd9945 100644 --- a/VDS/Components/Breadcrumbs/BreadcrumbCellItem.swift +++ b/VDS/Components/Breadcrumbs/BreadcrumbCellItem.swift @@ -11,7 +11,73 @@ import VDSColorTokens ///This is customised view for Breadcrumb cell item final class BreadcrumbCellItem: UICollectionViewCell { - ///Identifier for the PaginationCellItem + ///Identifier for the BreadcrumbCellItem static let identifier: String = String(describing: BreadcrumbCellItem.self) + + //-------------------------------------------------- + // MARK: - Private Properties + //-------------------------------------------------- + + internal var stackView: UIStackView = { + return UIStackView().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.axis = .horizontal + $0.distribution = .fill + $0.alignment = .top + } + }() + + internal var breadcrumb = BreadcrumbItem().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.titleLabel?.numberOfLines = 0 + } + + ///separator label + private var separator: Label = Label().with { + $0.translatesAutoresizingMaskIntoConstraints = false + $0.textAlignment = .left + $0.numberOfLines = 0 + $0.text = "/" + } + + private let textColorConfiguration = SurfaceColorConfiguration(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark) + //-------------------------------------------------- + // 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() { + //add stackview + //this is the horizontal stack that contains breadcrumb and separator + stackView.addArrangedSubview(breadcrumb) + stackView.addArrangedSubview(separator) + stackView.setCustomSpacing(VDSLayout.Spacing.space1X.value, after: breadcrumb) + stackView + .pinTop() + .pinLeading() + .pinTrailing(0, .defaultHigh) + .pinBottom(0, .defaultHigh) + contentView.addSubview(stackView) + separator.backgroundColor = .clear + + stackView.backgroundColor = .red + breadcrumb.backgroundColor = .green + separator.backgroundColor = .yellow + } + + ///Updating UI based on selected index, current index along with surface + func update(_ selectedIndex: Int, currentIndex: Int, surface: Surface, showSlash: Bool) { + separator.textColor = textColorConfiguration.getColor(surface) + separator.isHidden = showSlash + } } diff --git a/VDS/Components/Breadcrumbs/Breadcrumbs.swift b/VDS/Components/Breadcrumbs/Breadcrumbs.swift index a8269ac9..4777d3c6 100644 --- a/VDS/Components/Breadcrumbs/Breadcrumbs.swift +++ b/VDS/Components/Breadcrumbs/Breadcrumbs.swift @@ -15,4 +15,98 @@ import Combine @objc(VDSBreadcrumbs) open class Breadcrumbs: View { + //-------------------------------------------------- + // MARK: - Private Properties + //-------------------------------------------------- + ///Collectionview width anchor + private var collectionViewWidthAnchor: NSLayoutConstraint? + ///Selected page index + private var _selectedPageIndex: Int = 0 + ///A root view for the Breadcrumbs + private let containerView: View = View().with { + $0.translatesAutoresizingMaskIntoConstraints = false + } + + let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout() + + ///Collectionview to render Breadcrumbs indexes + private lazy var collectionView: UICollectionView = { + let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout) + layout.itemSize = CGSize(width: 50, height: 25) + layout.minimumInteritemSpacing = VDSLayout.Spacing.space1X.value + collectionView.isScrollEnabled = false + collectionView.translatesAutoresizingMaskIntoConstraints = false + collectionView.delegate = self + collectionView.dataSource = self + collectionView.showsHorizontalScrollIndicator = false + collectionView.showsVerticalScrollIndicator = false + collectionView.register(BreadcrumbCellItem.self, forCellWithReuseIdentifier: BreadcrumbCellItem.identifier) + collectionView.backgroundColor = .clear + return collectionView + }() + + + //-------------------------------------------------- + // MARK: - Public Properties + //-------------------------------------------------- +// /// Array of Breadcrumb Items Titles that are shown as Breadcrumbs. +// open var breadcrumbs: [String?] = [] { didSet { setNeedsUpdate() } } + + /// Array of Breadcrumb Items that are shown in the group. + open var breadcrumbItems: [ButtonBase] = [] { didSet { setNeedsUpdate() } } + + /// Whether this object is enabled or not + open var selected: Bool = false { didSet { setNeedsUpdate() } } + + /// Current Surface and this is used to pass down to child objects that implement Surfacable + override open var surface: Surface { + didSet { + breadcrumbItems.forEach { $0.surface = surface } + } + } + + //-------------------------------------------------- + // MARK: - Overrides + //-------------------------------------------------- + /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations. + open override func setup() { + super.setup() + } + + /// Executed on initialization for this View. + open override func initialSetup() { + super.initialSetup() + } + + /// Resets to default settings. + open override func reset() { + super.reset() + setNeedsUpdate() + } + + /// Used to make changes to the View based off a change events or from local properties. + open override func updateView() { + super.updateView() + } +} + +extension Breadcrumbs: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout { + //-------------------------------------------------- + // MARK: - UICollectionView Delegate & Datasource + //-------------------------------------------------- + public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { breadcrumbItems.count } + + public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { + guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: BreadcrumbCellItem.identifier, for: indexPath) as? BreadcrumbCellItem else { return UICollectionViewCell() } + + var showSlash = (indexPath.row == (breadcrumbItems.count - 1)) + cell.update(_selectedPageIndex, currentIndex: indexPath.row, surface: surface, showSlash: showSlash) + return cell + } + + public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { +// _selectedPageIndex = indexPath.row +// updateSelection() +// onPageDidSelect?(selectedPage) + } } diff --git a/VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt b/VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt new file mode 100644 index 00000000..3fae7754 --- /dev/null +++ b/VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt @@ -0,0 +1,36 @@ +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 + +2/28/2022 +---------------- +- Changed Last Breadcrumb Item to Selected Item + +03/08/2022 +---------------- +- Added dev note for Active and Hover states. + +08/04/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/03/2022 +---------------- +- Updated Specs to use new SPEC Templates and SPEC DOC Components. + +01/06/2023 +---------------- +- Tweaked anatomy element naming to align with design doc and dev doc