added container code

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
Matt Bruce 2023-09-05 11:04:05 -05:00
parent 36761e50cb
commit 39833d47ba
22 changed files with 46 additions and 98 deletions

View File

@ -219,6 +219,6 @@ extension BadgeIndicatorViewController: ComponentSampleable {
component.number = 23
component.kind = .simple
component.size = .medium
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .left, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -115,6 +115,6 @@ extension BadgeViewController: ComponentSampleable {
component.text = "Terms and conditions"
component.maxWidth = 70
component.numberOfLines = 3
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -175,6 +175,6 @@ extension ButtonIconViewController: ComponentSampleable {
let component = Self.makeComponent()
component.iconName = .addToFavorite
component.size = .large
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .left, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -106,6 +106,6 @@ extension ButtonViewController: ComponentSampleable {
component.onClick = { c in print("\(c.text!) Click")}
component.use = .primary
component.size = .large
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .left, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -138,6 +138,6 @@ extension CheckboxGroupViewController: ComponentSampleable {
component.selectorModels = [checkbox1, checkbox2]
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -101,6 +101,6 @@ extension CheckboxItemViewController: ComponentSampleable {
component.childText = "I agree to Verizon's terms and conditions click here"
component.errorText = "Error Text"
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -65,6 +65,6 @@ class CheckboxViewController: BaseViewController<Checkbox> {
extension CheckboxViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -96,6 +96,6 @@ extension IconViewController: ComponentSampleable {
component.color = color.uiColor
component.name = name
component.customSize = 50
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual, bottomPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -179,6 +179,6 @@ extension InputFieldViewController: ComponentSampleable {
component.successText = "Good job entering a valid address!"
component.tooltipTitle = "Check the formatting of your address"
component.tooltipContent = "House/Building number then street name"
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -131,6 +131,6 @@ extension RadioBoxGroupViewController: ComponentSampleable {
component.selectorModels = [radioBox1, radioBox2]
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -133,6 +133,6 @@ extension RadioButtonGroupViewController: ComponentSampleable {
component.selectorModels = [radioButton1, radioButton2, radioButton3]
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -105,6 +105,6 @@ extension RadioButtonItemViewController: ComponentSampleable {
component.childText = "I agree to Verizon's terms and conditions click here"
component.errorText = "Error Text"
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -69,6 +69,6 @@ class RadioButtonViewController: BaseViewController<RadioButton> {
extension RadioButtonViewController: ComponentSampleable {
static func makeSample() -> ComponentSample {
let component = Self.makeComponent()
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -11,78 +11,18 @@ import VDSColorTokens
public typealias ComponentSampleView = UIView & Surfaceable
public struct ComponentSample {
public class ComponentSample {
public var component: ComponentSampleView
public enum GreaterThanPinningType: String {
case none, equalTo, greaterThanOrEqual
}
public enum LessThanPinningType: String {
case none, equalTo, lessThanOrEqual
}
public var top: GreaterThanPinningType = .equalTo
public var leading: GreaterThanPinningType = .equalTo
public var trailing: LessThanPinningType = .equalTo
public var bottom: LessThanPinningType = .equalTo
public var model: LayoutAnchorModel
public init(component: ComponentSampleView,
topPinningType: GreaterThanPinningType = .equalTo,
leadingPinningType: GreaterThanPinningType = .equalTo,
trailingPinningType: LessThanPinningType = .equalTo,
bottomPinningType: LessThanPinningType = .equalTo) {
model: LayoutAnchorModel = .init()) {
self.model = model
self.component = component
self.top = topPinningType
self.leading = leadingPinningType
self.trailing = trailingPinningType
self.bottom = bottomPinningType
}
public func pin(edgeInset: UIEdgeInsets = .zero) {
guard let superview = component.superview else { return }
switch top {
case .equalTo:
component.pinTop(anchor: superview.topAnchor, constant: edgeInset.top)
case .greaterThanOrEqual:
component.pinTopGreaterThanOrEqualTo(anchor: superview.topAnchor, constant: edgeInset.top)
case .none: break
}
switch leading {
case .equalTo:
component.pinLeading(anchor: superview.leadingAnchor, constant: edgeInset.left)
case .greaterThanOrEqual:
component.pinLeadingGreaterThanOrEqualTo(anchor: superview.leadingAnchor, constant: edgeInset.left)
case .none: break
}
switch trailing {
case .equalTo:
component.pinTrailing(anchor: superview.trailingAnchor, constant: edgeInset.right)
case .lessThanOrEqual:
component.pinTrailingLessThanOrEqualTo(anchor: superview.trailingAnchor, constant: edgeInset.right)
case .none: break
}
switch bottom {
case .equalTo:
component.pinBottom(anchor: superview.bottomAnchor, constant: edgeInset.bottom)
case .lessThanOrEqual:
component.pinBottomLessThanOrEqualTo(anchor: superview.bottomAnchor, constant: edgeInset.bottom)
case .none: break
}
public func pin(){
component.pinToSuperview(with: model)
}
}
@ -126,10 +66,17 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
}
}
let toggleSample = ComponentSample(component: toggle, leadingPinningType: .none)
let model = ContainerManager.ContainerModel(horizontal: .init(alignment: .trailing,
leading: .init(),
trailing: .init(padding: 16)),
vertical: .init(alignment: .fill,
top: .init(padding: 5),
bottom: .init(padding: 5)))
let toggleSample = ComponentSample(component: toggle, model: .init(layoutType: .right, insets: .init(top: 5, left: 0, bottom: 5, right: 16), priorities: [.bottom: .defaultLow]))
let wrapper = UIView().with { $0.translatesAutoresizingMaskIntoConstraints = false }
wrapper.addSubview(toggle)
toggleSample.pin(edgeInset: .init(top: 5, left: 0, bottom: 5, right: 16))
toggleSample.pin()
let stackView = UIStackView(arrangedSubviews: [wrapper, tableView]).with {
$0.translatesAutoresizingMaskIntoConstraints = false
@ -140,13 +87,8 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
view.backgroundColor = Surface.light.color
view.addSubview(stackView)
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor)
])
stackView.pin(to: view.safeAreaLayoutGuide, with: .fill)
items.forEach { menuItem in
if let componentable = menuItem.viewController as? ComponentSampleable.Type {
components.append(componentable.makeSample())
@ -212,10 +154,16 @@ extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {
let sample = components[indexPath.row]
var component = sample.component
component.surface = surface
let insets = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
let cell = UITableViewCell()
cell.contentView.addSubview(component)
sample.pin(edgeInset: .init(top: 16, left: 16, bottom: 16, right: 16))
component.pinToSuperview(with: sample.model.layoutType, edgeInsets: insets, priorities: sample.model.priorities)
// if let model = sample.model, let horizontal = model.horizontalAlignment, let vertical = model.verticalAlignment {
// sample.model = ContainerManager.model(for: horizontal.alignment, vertical: vertical.alignment, inset: .init(top: 16, left: 16, bottom: 16, right: 16))
// sample.pin()
// } else {
// component.pinToSuperView()
// }
cell.backgroundColor = surface.color
cell.layoutIfNeeded()
return cell

View File

@ -148,6 +148,6 @@ extension TextAreaViewController: ComponentSampleable {
component.errorText = "Enter a valid address."
component.tooltipTitle = "Check the formatting of your address"
component.tooltipContent = "House/Building number then street name"
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -78,6 +78,6 @@ extension TextLinkCaretViewController: ComponentSampleable {
let component = Self.makeComponent()
component.text = "Text Link Caret"
component.onClick = { c in print("\(c.text!) Click")}
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -80,6 +80,6 @@ extension TextLinkViewController: ComponentSampleable {
let component = Self.makeComponent()
component.text = "Text Link"
component.onClick = { c in print("\(c.text!) Click")}
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -153,6 +153,6 @@ extension TileContainerViewController: ComponentSampleable {
let component = Self.makeComponent()
component.width = 150
component.color = .black
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -240,6 +240,6 @@ extension TileletViewController: ComponentSampleable {
component.titleModel = titleModel
component.subTitleModel = subTitleModel
component.width = 250
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -121,6 +121,6 @@ extension ToggleViewController: ComponentSampleable {
let component = Self.makeComponent()
component.showText = true
component.textPosition = .right
return ComponentSample(component: component)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -106,7 +106,7 @@ extension TooltipViewController: ComponentSampleable {
let component = Self.makeComponent()
component.title = "5G Ultra Wideband is available in your area."
component.content = "$799.99 (128 GB only) "
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual, bottomPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}

View File

@ -174,7 +174,7 @@ extension TrailingTooltipLabelViewController: ComponentSampleable {
component.labelText = "5G Ultra Wideband is available in your area"
component.tooltipTitle = "5G Ultra Wideband is available in your area."
component.tooltipContent = "$799.99 (128 GB only)"
return ComponentSample(component: component, trailingPinningType: .lessThanOrEqual)
return ComponentSample(component: component, model: .init(layoutType: .topLeft, priorities: [.bottom: .defaultLow]))
}
}