💲[Native Checkout] Shipping Location Cell 1/3 (UI)

[dusi]

📲 What

Implements UI of the shipping location cell

🛠 How

In the same manner as we've added pledge amount cell we're continuing with shipping location cell.

Please note that this PR only considers visual appearance of the cell and that some values are hard coded + this work still misses user interaction.

This PR is the 1st out of 3 which will also address (passing correct data, formatting shipping amount correctly).

📍Note

In order to being able to see the screen you can navigate to ProjectPamphletContentViewController and change the behaviour of goToRewardsPledge function to the following

let vc = PledgeViewController.instantiate()
vc.configureWith(project: project, reward: reward)

let nc = UINavigationController(rootViewController: vc)
self.present(nc, animated: true)

👀 See

Before 🐛	After 🦋

♿️ Accessibility

Dynamic Type

Note how the country title truncates tail (there's an issue with multi-line labels/buttons in stack views) so currently we're simply using 1 line and might fix this in the future.

Default	Large	Accessibility Large

VoiceOver

Shipping location cell exposes 3 accessible elements: title, button and label and reads them as follows

• Title is read by VO like: Your shipping location, heading and is localized
• Button is read by VO like: {Country name}, button
• Label is read by VO like: +$7.5 (for now)

✅ Acceptance criteria

• Visual style matches design specs

(please note that the button doesn't use the small disclosure indicator, I'd suggest against this design approach due to it being mostly web pattern, not a mobile one)

[dusi]

These values are currently hard coded in order for this PR to be smaller. I'll be passing them from the VM in the next PR.

[dusi]

I must have copy-pasted this from a different data source test forgetting about the fact that we're actually dealing with UITableView.

[dusi]

For consistency with other views

[dusi]

These styles are now shared so I extracted these to common styles file

[ifbarrera]

Nice work, couple comments!

[ifbarrera]

Wondering if we can do something like this with stack views:

    _ = ([self.countryButton, self.spacer, self.amountLabel], self.adaptableStackView)
      |> ksr_addArrangedSubviews()

By defining:

public func ksr_addArrangedSubviews() -> (([UIView], UIStackView) -> UIStackView) {
  return { (subviews, stackView) in
    subviews.forEach { subview in
      stackView.addArrangedSubview(subview)
    }

    return stackView
  }
}

[dusi]

I like this! ❤️

[dusi]

I've slightly tweaked the naming so that it more resembles our other functions on UIView

i.e. just like when you're reading this from left to right

_ = (subview, parent)
  |> ksr_addSubviewToParent() // subview to parent (same order)
  |> ksr_constrainViewToEdgesInParent() // view to parent (same order)

we now do

_ = ([firstView, secondView, thirdView], stackView)
      |> ksr_addArrangedSubviewsToStackView()

[ifbarrera]

Should we consider adding a hint to this button? "Tap to change your shipping location"?

[dusi]

I'm undecided on this one. On one hand, that button looks like a button (so it should be treated like a button - Title, button (a11Y-title + a11y-trait)...on the other hand we currently use a different pattern for this with more descriptive action steps Double tap to (which in my opinion goes slightly against HIG).

Maybe we can talk about this offline?

[ifbarrera]

Should these values go into a view model? Not sure if a VM is out of the scope of this work.

[dusi]

Do you mean into cell's VM? That might be out of scope and again, I'd prefer to use these cells as a thin UI layer. I'm not really sure which direction do we want to go :/

[ifbarrera]

Looking at the abstract files, I think the title labels are meant to have a font size of 15pts.

[ifbarrera]

(the default for ksr_headline() is 17pts)

[dusi]

Good eye! Thanks for pointing this out.

[ifbarrera]

If these margins are standard for all of the cells in the pledge VC, I wonder if it might make sense to put them on the cell's contentViews shared checkout style instead, so other cells can also have the same layout margins?

[dusi]

Do you mean simply moving layoutMargins to its own style (checkoutCellContentViewStyle) and removing it from here?

I'm not sure if I'm doing it wrong but it doesn't work for me :/

[ifbarrera]

Hmm I wonder if you need to set preservesSuperviewLayoutMargins on the stack view? 🤔or alternatively you might need to constraint the stack view to the contentViews margins. This isn't super important but I just wanted to see if there was a way to share layout margins among all the pledge cells.

[justinswart]

What does adaptable mean here? Might help to name it based on what it contains for quicker reference.

[dusi]

It adapts its axis based on the accessibility font size...for regular sizes it uses horizontal axes..for a11y sizes it uses vertical

[dusi]

I've used to call it inputStackView but renamed it to this because it spans between multiple cells and always acts as the a11y adaptable container.

[justinswart]

😬

subviews.forEach(stackView.addArrangedSubview)

[ifbarrera]

👍 lgtm!