Digital ACT-191 ONEAPP-6827 story: added Breadcrumbs change log, modified BreadcrumbCellItem
This commit is contained in:
parent
28e9f79f40
commit
663b1b1fed
@ -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 */,
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
36
VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt
Normal file
36
VDS/Components/Breadcrumbs/BreadcrumbsChangeLog.txt
Normal 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
|
||||
Loading…
Reference in New Issue
Block a user