[Payment Request] Accepted credit card type icons in the credit card editor

ios/chrome/browser/payments/cells/accepted_payment_methods_item.mm

Index: ios/chrome/browser/payments/cells/accepted_payment_methods_item.mm
diff --git a/ios/chrome/browser/payments/cells/accepted_payment_methods_item.mm b/ios/chrome/browser/payments/cells/accepted_payment_methods_item.mm
new file mode 100644
index 0000000000000000000000000000000000000000..714575e4f14b9e1c59eab3a5e19611e66b109327
--- /dev/null
+++ b/ios/chrome/browser/payments/cells/accepted_payment_methods_item.mm
@@ -0,0 +1,165 @@
+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#import "ios/chrome/browser/payments/cells/accepted_payment_methods_item.h"
+
+#import "ios/chrome/browser/ui/colors/MDCPalette+CrAdditions.h"
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+#import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+// Padding of the leading and trailing edges of the cell.
+const CGFloat kHorizontalPadding = 16;
+
+// Padding of the top and bottom edges of the cell.
+const CGFloat kVerticalPadding = 12;
+
+// Spacing between the icons.
+const CGFloat kHorizontalSpacingBetweenIcons = 8;
+}  // namespace
+
+@implementation AcceptedPaymentMethodsItem
+
+@synthesize message = _message;
+@synthesize methodTypeIcons = _methodTypeIcons;
+
+#pragma mark CollectionViewItem
+
+- (instancetype)initWithType:(NSInteger)type {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [AcceptedPaymentMethodsCell class];
+  }
+  return self;
+}
+
+- (void)configureCell:(AcceptedPaymentMethodsCell*)cell {
+  [super configureCell:cell];
+  cell.messageLabel.text = self.message;
+
+  NSMutableArray* methodTypeIconViews = [NSMutableArray array];
+  for (UIImage* methodTypeIcon in self.methodTypeIcons) {
+    UIImageView* methodTypeIconView =
+        [[UIImageView alloc] initWithFrame:CGRectZero];
+    methodTypeIconView.image = methodTypeIcon;
+    methodTypeIconView.layer.borderColor =
+        [UIColor colorWithWhite:0.9 alpha:1.0].CGColor;
+    methodTypeIconView.layer.borderWidth = 1.0;
+    [methodTypeIconViews addObject:methodTypeIconView];
+  }
+  cell.methodTypeIconViews = methodTypeIconViews;
+}
+
+@end
+
+@implementation AcceptedPaymentMethodsCell {
+  UIStackView* _stackView;

[lpromero, 2017/04/20 16:59:51]

How does the stack view behave if there are more elements than the screen can
fit?

[Moe, 2017/04/21 14:14:14]

It would squeeze the ones that don't fit. I adjusted the sizes and paddings so
that maximum number of supported cards (i.e., 8) would fit on the smallest
supported screen size (i.e., iPhone 5)
That's what's done on other platform too. It's just not worth the effort to have
multiple rows of icons.
http://imgur.com/a/QqLLW

+}
+
+@synthesize messageLabel = _messageLabel;
+@synthesize methodTypeIconViews = _methodTypeIconViews;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    self.isAccessibilityElement = YES;
+    [self addSubviews];
+    [self setDefaultViewStyling];
+    [self setViewConstraints];
+  }
+  return self;
+}
+
+// Create and add subviews.
+- (void)addSubviews {
+  UIView* contentView = self.contentView;
+  contentView.clipsToBounds = YES;
+
+  _messageLabel = [[UILabel alloc] init];
+  _messageLabel.translatesAutoresizingMaskIntoConstraints = NO;
+  [contentView addSubview:_messageLabel];
+
+  _stackView = [[UIStackView alloc] initWithArrangedSubviews:@[]];
+  _stackView.axis = UILayoutConstraintAxisHorizontal;
+  _stackView.layoutMarginsRelativeArrangement = YES;
+  _stackView.layoutMargins =
+      UIEdgeInsetsMake(kVerticalPadding, kHorizontalPadding, kVerticalPadding,
+                       kHorizontalPadding);
+  _stackView.spacing = kHorizontalSpacingBetweenIcons;
+  _stackView.translatesAutoresizingMaskIntoConstraints = NO;
+  [contentView addSubview:_stackView];
+}
+
+// Set default font and text colors for labels.
+- (void)setDefaultViewStyling {
+  _messageLabel.font = [MDCTypography body2Font];
+  _messageLabel.textColor = [[MDCPalette greyPalette] tint600];
+  _messageLabel.numberOfLines = 0;
+  _messageLabel.lineBreakMode = NSLineBreakByWordWrapping;
+}
+
+// Set constraints on subviews.
+- (void)setViewConstraints {
+  [NSLayoutConstraint activateConstraints:@[
+    [_messageLabel.topAnchor constraintEqualToAnchor:self.contentView.topAnchor
+                                            constant:kVerticalPadding],
+    [_messageLabel.leadingAnchor
+        constraintEqualToAnchor:self.contentView.leadingAnchor
+                       constant:kHorizontalPadding],
+    [_messageLabel.trailingAnchor
+        constraintEqualToAnchor:self.contentView.trailingAnchor
+                       constant:-kHorizontalPadding],
+    [_messageLabel.bottomAnchor constraintEqualToAnchor:_stackView.topAnchor],
+    [_stackView.leadingAnchor
+        constraintEqualToAnchor:self.contentView.leadingAnchor],
+    [_stackView.trailingAnchor
+        constraintLessThanOrEqualToAnchor:self.contentView.trailingAnchor],
+    [_stackView.bottomAnchor
+        constraintEqualToAnchor:self.contentView.bottomAnchor],
+  ]];
+}
+
+#pragma mark - UIView
+
+// Implement -layoutSubviews as per instructions in documentation for
+// +[MDCCollectionViewCell cr_preferredHeightForWidth:forItem:].
+- (void)layoutSubviews {
+  for (UIImageView* methodTypeIconView in _methodTypeIconViews) {
+    [_stackView addArrangedSubview:methodTypeIconView];

[lpromero, 2017/04/20 16:59:51]

This might be very costly to add views here. I think it would be best to add
them in the methodTypeIconViews's setter.

[Moe, 2017/04/21 14:14:14]

Done.

+  }
+
+  [super layoutSubviews];
+
+  // Adjust preferredMaxLayoutWidth of _messageLabel when the parent's width
+  // changes, for instance on screen rotation.
+  CGFloat parentWidth = CGRectGetWidth(self.contentView.frame);
+  CGFloat preferredMaxLayoutWidth = parentWidth - (2 * kHorizontalPadding);
+  _messageLabel.preferredMaxLayoutWidth = preferredMaxLayoutWidth;
+
+  // Re-layout with the new preferred width to allow the label to adjust its
+  // height.
+  [super layoutSubviews];
+}
+
+#pragma mark - UICollectionReusableView
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+  self.messageLabel.text = nil;
+  for (UIImageView* methodTypeIconView in self.methodTypeIconViews)
+    [methodTypeIconView removeFromSuperview];

[lpromero, 2017/04/20 16:59:51]

If you override the setter, you could do this there, and here you'd only call
self.methodTypeIconViews = nil;.

[Moe, 2017/04/21 14:14:14]

Done.

+  self.methodTypeIconViews = nil;
+}
+
+#pragma mark - NSObject(Accessibility)
+
+- (NSString*)accessibilityLabel {
+  return [NSString stringWithFormat:@"%@", self.messageLabel.text];

[lpromero, 2017/04/20 16:59:51]

This is insufficient for accessibility. To fix, you should set an accessibility
label on the images (UIImages passed to the item). I think the UIImage's
accessibility label will be forwarded to the UIImageView that displays them
automatically. So you might be able to create a concatenated string with
self.messageLabel.text and all methodTypeIconView.accessibilityLabel.

(You might use componentsJoinedByString to deal with the commas between the
cards.)

[Moe, 2017/04/21 14:14:14]

Done.
PS. UIImage's accessibility label doesn't seem to get forwarded to the
UIImageView.

[lpromero, 2017/04/21 14:49:41]

Good to know. Thank you for the warning.

+}
+
+@end