Chrome Empties: Create new TableViewIllustratedItem/Cell

The new TableViewIllustratedItem and Cell duo will be used in the Recent Tabs view.

The new cell will contain an image, a title label, a subtitle label, a button and a SignInPromoView, of which only the buttons will be visible.

All elements of this cell are optional.

The following states are going to be used in the Recent Tabs view:

- image+title+subtitle
- image+title+subtitle+button
- image+title+subtitle+signinpromo(cold state)
- image+title+subtitle+signinpromo(warm state)

(Googlers only links)
Design Doc for Chrome Empties: https://docs.google.com/document/d/1JM2sKT4oghkol51U7_3xv9sfaB26C89CCGa2uwYBgsI/edit?usp=sharing
Mocks of the new Chrome Empties look: https://docs.google.com/presentation/d/1x1lSTOSQ1zkJu87SoigiUhX2f9oHACglR22yYg-lSHo/edit?usp=sharing

Bug: 1098328
Change-Id: Ic47c867aebbb33d8d49cb729f0512e403c9c84c5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2288483
Commit-Queue: Maxime Charland <mcharland@google.com>
Reviewed-by: Sergio Collazos <sczs@chromium.org>
Reviewed-by: Tommy Martino <tmartino@chromium.org>
Cr-Commit-Position: refs/heads/master@{#787948}

ios/chrome/browser/ui/table_view/cells/BUILD.gn

@@ -16,6 +16,8 @@ source_set("cells") {
     "table_view_disclosure_header_footer_item.mm",
     "table_view_header_footer_item.h",
     "table_view_header_footer_item.mm",
+    "table_view_illustrated_item.h",
+    "table_view_illustrated_item.mm",
     "table_view_image_item.h",
     "table_view_image_item.mm",
     "table_view_info_button_cell.h",

ios/chrome/browser/ui/table_view/cells/table_view_illustrated_item.h

+// Copyright 2020 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ILLUSTRATED_ITEM_H_
+#define IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ILLUSTRATED_ITEM_H_
+
+#import <UIKit/UIKit.h>
+
+#import "ios/chrome/browser/ui/table_view/cells/table_view_cell.h"
+#import "ios/chrome/browser/ui/table_view/cells/table_view_item.h"
+
+// TableViewItem for the TableView Illustrated Cell.
+@interface TableViewIllustratedItem : TableViewItem
+// Image being displayed.
+@property(nonatomic, strong) UIImage* image;
+// Title being displayed under the image.
+@property(nonatomic, copy) NSString* title;
+// Subtitle being displayed under the title.
+@property(nonatomic, copy) NSString* subtitle;
+// Text of the button displayed under the subtitle.
+@property(nonatomic, copy) NSString* buttonText;
+@end
+
+// TableViewCell that displays an image, title, subtitle and button.
+@interface TableViewIllustratedCell : TableViewCell
+// The imageview that will display the image at the top of the cell.
+@property(nonatomic, readonly, strong) UIImageView* illustratedImageView;
+// Label displaying the title, underneath the image.
+@property(nonatomic, readonly, strong) UILabel* titleLabel;
+// Label displaying the subtitle, underneath the title.
+@property(nonatomic, readonly, strong) UILabel* subtitleLabel;
+// Button that will be displayed under the subtitle.
+@property(nonatomic, readonly, strong) UIButton* button;
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_TABLE_VIEW_CELLS_TABLE_VIEW_ILLUSTRATED_ITEM_H_

ios/chrome/browser/ui/table_view/cells/table_view_illustrated_item.mm

+// Copyright 2020 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/ui/table_view/cells/table_view_illustrated_item.h"
+
+#include "base/mac/foundation_util.h"
+#import "ios/chrome/browser/ui/table_view/chrome_table_view_styler.h"
+#import "ios/chrome/common/ui/colors/semantic_color_names.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+// The insets of the View content and additional margin for some of its items.
+const CGFloat kStackMargin = 32.0;
+const CGFloat kItemMargin = 16.0;
+// Spacing within stackView.
+const CGFloat kStackViewSpacing = 13.0;
+// Height of the image.
+const CGFloat kImageViewHeight = 150.0;
+// Horizontal Inset between button contents and edge.
+const CGFloat kButtonTitleHorizontalContentInset = 40.0;
+// Vertical Inset between button contents and edge.
+const CGFloat kButtonTitleVerticalContentInset = 8.0;
+// Button corner radius.
+const CGFloat kButtonCornerRadius = 8.0;
+}
+
+#pragma mark - TableViewIllustratedItem
+
+@implementation TableViewIllustratedItem
+
+- (instancetype)initWithType:(NSInteger)type {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [TableViewIllustratedCell class];
+  }
+  return self;
+}
+
+- (void)configureCell:(TableViewCell*)tableCell
+           withStyler:(ChromeTableViewStyler*)styler {
+  [super configureCell:tableCell withStyler:styler];
+  TableViewIllustratedCell* cell =
+      base::mac::ObjCCastStrict<TableViewIllustratedCell>(tableCell);
+  [cell setSelectionStyle:UITableViewCellSelectionStyleNone];
+  if (self.image) {
+    cell.illustratedImageView.image = self.image;
+  } else {
+    cell.illustratedImageView.hidden = YES;
+  }
+  if ([self.title length]) {
+    cell.titleLabel.text = self.title;
+  } else {
+    cell.titleLabel.hidden = YES;
+  }
+  if ([self.subtitle length]) {
+    cell.subtitleLabel.text = self.subtitle;
+  } else {
+    cell.subtitleLabel.hidden = YES;
+  }
+  if ([self.buttonText length]) {
+    [cell.button setTitle:self.buttonText forState:UIControlStateNormal];
+  } else {
+    cell.button.hidden = YES;
+  }
+
+  if (styler.cellTitleColor) {
+    cell.titleLabel.textColor = styler.cellTitleColor;
+  }
+  if (styler.tintColor) {
+    cell.button.backgroundColor = styler.tintColor;
+  }
+  if (styler.solidButtonTextColor) {
+    [cell.button setTitleColor:styler.solidButtonTextColor
+                      forState:UIControlStateNormal];
+  }
+}
+
+@end
+
+#pragma mark - TableViewIllustratedCell
+
+@implementation TableViewIllustratedCell
+
+- (instancetype)initWithStyle:(UITableViewCellStyle)style
+              reuseIdentifier:(NSString*)reuseIdentifier {
+  self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
+  if (self) {
+    _illustratedImageView = [[UIImageView alloc] initWithImage:nil];
+    _illustratedImageView.contentMode = UIViewContentModeScaleAspectFit;
+    _illustratedImageView.translatesAutoresizingMaskIntoConstraints = NO;
+    _illustratedImageView.clipsToBounds = YES;
+
+    _titleLabel = [[UILabel alloc] init];
+    _titleLabel.textColor = [UIColor colorNamed:kTextPrimaryColor];
+    _titleLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleTitle2];
+    _titleLabel.textAlignment = NSTextAlignmentCenter;
+    _titleLabel.numberOfLines = 0;
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _subtitleLabel = [[UILabel alloc] init];
+    _subtitleLabel.textColor = [UIColor colorNamed:kTextSecondaryColor];
+    _subtitleLabel.font =
+        [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
+    _subtitleLabel.textAlignment = NSTextAlignmentCenter;
+    _subtitleLabel.numberOfLines = 0;
+    _subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    _button = [[UIButton alloc] init];
+    _button.backgroundColor = [UIColor colorNamed:kBlueColor];
+    [_button.titleLabel
+        setFont:[UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]];
+    _button.layer.cornerRadius = kButtonCornerRadius;
+    _button.translatesAutoresizingMaskIntoConstraints = NO;
+    _button.contentEdgeInsets = UIEdgeInsetsMake(
+        kButtonTitleVerticalContentInset, kButtonTitleHorizontalContentInset,
+        kButtonTitleVerticalContentInset, kButtonTitleHorizontalContentInset);
+
+    UIStackView* stackView = [[UIStackView alloc] initWithArrangedSubviews:@[
+      _illustratedImageView, _titleLabel, _subtitleLabel, _button
+    ]];
+    stackView.axis = UILayoutConstraintAxisVertical;
+    stackView.alignment = UIStackViewAlignmentCenter;
+    stackView.spacing = kStackViewSpacing;
+    stackView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [self.contentView addSubview:stackView];
+
+    // Set and activate constraints.
+    [NSLayoutConstraint activateConstraints:@[
+      [_illustratedImageView.heightAnchor
+          constraintEqualToConstant:kImageViewHeight],
+      [_illustratedImageView.leadingAnchor
+          constraintEqualToAnchor:stackView.leadingAnchor],
+      [_illustratedImageView.trailingAnchor
+          constraintEqualToAnchor:stackView.trailingAnchor],
+
+      [_titleLabel.leadingAnchor
+          constraintEqualToAnchor:stackView.leadingAnchor],
+      [_titleLabel.trailingAnchor
+          constraintEqualToAnchor:stackView.trailingAnchor],
+
+      // Subtitle and button should have additional margins on both sides
+      [_subtitleLabel.leadingAnchor
+          constraintEqualToAnchor:stackView.leadingAnchor
+                         constant:kItemMargin],
+      [_subtitleLabel.trailingAnchor
+          constraintEqualToAnchor:stackView.trailingAnchor
+                         constant:-kItemMargin],
+      [_button.leadingAnchor constraintEqualToAnchor:stackView.leadingAnchor
+                                            constant:kItemMargin],
+      [_button.trailingAnchor constraintEqualToAnchor:stackView.trailingAnchor
+                                             constant:-kItemMargin],
+
+      [stackView.leadingAnchor
+          constraintEqualToAnchor:self.contentView.leadingAnchor
+                         constant:kStackMargin],
+      [stackView.trailingAnchor
+          constraintEqualToAnchor:self.contentView.trailingAnchor
+                         constant:-kStackMargin],
+      [stackView.topAnchor constraintEqualToAnchor:self.contentView.topAnchor],
+      [stackView.bottomAnchor
+          constraintEqualToAnchor:self.contentView.bottomAnchor],
+    ]];
+  }
+  return self;
+}
+
+- (void)prepareForReuse {
+  [super prepareForReuse];
+
+  self.illustratedImageView.hidden = NO;
+  self.titleLabel.hidden = NO;
+  self.subtitleLabel.hidden = NO;
+  self.button.hidden = NO;
+
+  [self.button removeTarget:nil
+                     action:nil
+           forControlEvents:UIControlEventAllEvents];
+}
+
+@end