Digital ACT-191 ONEAPP-6827 story: added Breadcrumbs change log, modified BreadcrumbCellItem

This commit is contained in:
vasavk 2024-03-13 16:41:21 +05:30
parent 28e9f79f40
commit 663b1b1fed
4 changed files with 201 additions and 1 deletions

View File

@ -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 = "<group>"; };
18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = BreadcrumbsChangeLog.txt; sourceTree = "<group>"; };
186B2A892B88DA7F001AB71F /* TextAreaChangeLog.txt */ = {isa = PBXFileReference; lastKnownFileType = text; path = TextAreaChangeLog.txt; sourceTree = "<group>"; };
18792A8F2B7431F2008C0D29 /* ButtonIconBadgeIndicatorModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonIconBadgeIndicatorModel.swift; sourceTree = "<group>"; };
18A65A012B96E848006602CC /* Breadcrumbs.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Breadcrumbs.swift; sourceTree = "<group>"; };
@ -368,6 +370,7 @@
18A65A012B96E848006602CC /* Breadcrumbs.swift */,
18A65A032B96F050006602CC /* BreadcrumbItem.swift */,
1832AC562BA0791D008AE476 /* BreadcrumbCellItem.swift */,
18450CF02BA1B19C009FDF2A /* BreadcrumbsChangeLog.txt */,
);
path = Breadcrumbs;
sourceTree = "<group>";
@ -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 */,

View File

@ -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
}
}

View File

@ -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)
}
}

View File

@ -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