added container code
Signed-off-by: Matt Bruce <matt.bruce@verizon.com>
This commit is contained in:
parent
36761e50cb
commit
39833d47ba
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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]))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user