Suggestions UI - Add Article items

BUG=679369

Review-Url: https://codereview.chromium.org/2618333005
Cr-Commit-Position: refs/heads/master@{#443266}

ios/chrome/browser/ui/suggestions/BUILD.gn

@@ -5,6 +5,8 @@
 source_set("suggestions") {
   configs += [ "//build/config/compiler:enable_arc" ]
   sources = [
+    "suggestions_article_item.h",
+    "suggestions_article_item.mm",
     "suggestions_collection_updater.h",
     "suggestions_collection_updater.mm",
     "suggestions_commands.h",
@@ -24,3 +26,15 @@ source_set("suggestions") {
     "//ios/third_party/material_components_ios",
   ]
 }
+
+source_set("unit_tests") {
+  testonly = true
+  sources = [
+    "suggestions_article_item_unittest.mm",
+  ]
+  deps = [
+    ":suggestions",
+    "//ios/chrome/browser/ui/collection_view",
+    "//testing/gtest",
+  ]
+}

ios/chrome/browser/ui/suggestions/suggestions_article_item.h

+// 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.
+
+#ifndef IOS_CHROME_BROWSER_UI_SUGGESTIONS_SUGGESTIONS_ARTICLE_ITEM_H_
+#define IOS_CHROME_BROWSER_UI_SUGGESTIONS_SUGGESTIONS_ARTICLE_ITEM_H_
+
+#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
+#import "ios/third_party/material_components_ios/src/components/CollectionCells/src/MaterialCollectionCells.h"
+
+// Item for an article in the suggestions.
+@interface SuggestionsArticleItem : CollectionViewItem
+
+// Initialize an article with a |title|, a |subtitle| and an |image|. |type| is
+// the type of the item.
+- (instancetype)initWithType:(NSInteger)type
+                       title:(NSString*)title
+                    subtitle:(NSString*)subtitle
+                       image:(UIImage*)image NS_DESIGNATED_INITIALIZER;
+
+- (instancetype)initWithType:(NSInteger)type NS_UNAVAILABLE;
+
+@end
+
+// Corresponding cell for an article in the suggestions.
+@interface SuggestionsArticleCell : MDCCollectionViewCell
+
+@property(nonatomic, readonly, strong) UILabel* titleLabel;
+@property(nonatomic, readonly, strong) UILabel* subtitleLabel;
+@property(nonatomic, readonly, strong) UIImageView* imageView;
+
+@end
+
+#endif  // IOS_CHROME_BROWSER_UI_SUGGESTIONS_SUGGESTIONS_ARTICLE_ITEM_H_

ios/chrome/browser/ui/suggestions/suggestions_article_item.mm

+// 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/ui/suggestions/suggestions_article_item.h"
+
+#import "ios/chrome/browser/ui/uikit_ui_util.h"
+
+#if !defined(__has_feature) || !__has_feature(objc_arc)
+#error "This file requires ARC support."
+#endif
+
+namespace {
+const CGFloat kImageSize = 100;
+}
+
+@interface SuggestionsArticleItem ()
+
+@property(nonatomic, copy) NSString* title;
+@property(nonatomic, copy) NSString* subtitle;
+@property(nonatomic, strong) UIImage* image;
+
+@end
+
+@implementation SuggestionsArticleItem
+
+@synthesize title = _title;
+@synthesize subtitle = _subtitle;
+@synthesize image = _image;
+
+- (instancetype)initWithType:(NSInteger)type
+                       title:(NSString*)title
+                    subtitle:(NSString*)subtitle
+                       image:(UIImage*)image {
+  self = [super initWithType:type];
+  if (self) {
+    self.cellClass = [SuggestionsArticleCell class];
+    _title = [title copy];
+    _subtitle = [subtitle copy];
+    _image = image;
+  }
+  return self;
+}
+
+- (void)configureCell:(SuggestionsArticleCell*)cell {
+  [super configureCell:cell];
+  cell.titleLabel.text = _title;
+  cell.subtitleLabel.text = _subtitle;
+  cell.imageView.image = _image;
+}
+
+@end
+
+@implementation SuggestionsArticleCell
+
+@synthesize titleLabel = _titleLabel;
+@synthesize subtitleLabel = _subtitleLabel;
+@synthesize imageView = _imageView;
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  self = [super initWithFrame:frame];
+  if (self) {
+    _titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _subtitleLabel = [[UILabel alloc] initWithFrame:CGRectZero];
+    _imageView = [[UIImageView alloc] initWithFrame:CGRectZero];
+    UIView* imageContainer = [[UIView alloc] initWithFrame:CGRectZero];
+
+    _subtitleLabel.numberOfLines = 0;
+
+    imageContainer.translatesAutoresizingMaskIntoConstraints = NO;
+    _imageView.translatesAutoresizingMaskIntoConstraints = NO;
+    _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+    _subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
+
+    [imageContainer addSubview:_imageView];
+    [self.contentView addSubview:imageContainer];
+    [self.contentView addSubview:_titleLabel];
+    [self.contentView addSubview:_subtitleLabel];
+
+    ApplyVisualConstraintsWithMetrics(
+        @[
+          @"H:|-[title]-[imageContainer(imageSize)]-|",
+          @"H:|[image(imageSize)]", @"H:|-[text]-[imageContainer]",
+          @"V:|[image(imageSize)]", @"V:|-[title]-[text]-|",
+          @"V:|-[imageContainer(>=imageSize)]-|"
+        ],
+        @{
+          @"image" : _imageView,
+          @"imageContainer" : imageContainer,
+          @"title" : _titleLabel,
+          @"text" : _subtitleLabel
+        },
+        @{ @"imageSize" : @(kImageSize) });
+  }
+  return self;
+}
+
+#pragma mark - UIView
+
+// Implements -layoutSubviews as per instructions in documentation for
+// +[MDCCollectionViewCell cr_preferredHeightForWidth:forItem:].
+- (void)layoutSubviews {
+  [super layoutSubviews];
+
+  // Adjust the text label preferredMaxLayoutWidth when the parent's width
+  // changes, for instance on screen rotation.
+  CGFloat parentWidth = CGRectGetWidth(self.contentView.bounds);
+  self.subtitleLabel.preferredMaxLayoutWidth = parentWidth - kImageSize - 3 * 8;
+
+  // Re-layout with the new preferred width to allow the label to adjust its
+  // height.
+  [super layoutSubviews];
+}
+
+@end

ios/chrome/browser/ui/suggestions/suggestions_article_item_unittest.mm

+// 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/ui/suggestions/suggestions_article_item.h"
+
+#import "ios/chrome/browser/ui/collection_view/cells/collection_view_item.h"
+#include "testing/gtest/include/gtest/gtest.h"
+
+namespace {
+
+TEST(SuggestionsArticleItemTest, CellIsConfigured) {
+  NSString* title = @"testTitle";
+  NSString* subtitle = @"testSubtitle";
+  UIImage* image = [[UIImage alloc] init];
+  SuggestionsArticleItem* item =
+      [[SuggestionsArticleItem alloc] initWithType:0
+                                             title:title
+                                          subtitle:subtitle
+                                             image:image];
+  SuggestionsArticleCell* cell = [[[item cellClass] alloc] init];
+  EXPECT_TRUE([cell isMemberOfClass:[SuggestionsArticleCell class]]);
+
+  [item configureCell:cell];
+  EXPECT_EQ(title, cell.titleLabel.text);
+  EXPECT_EQ(subtitle, cell.subtitleLabel.text);
+  EXPECT_EQ(image, cell.imageView.image);
+}
+
+}  // namespace

ios/chrome/browser/ui/suggestions/suggestions_collection_updater.mm

@@ -6,6 +6,7 @@
 
 #import "ios/chrome/browser/ui/collection_view/collection_view_controller.h"
 #import "ios/chrome/browser/ui/collection_view/collection_view_model.h"
+#import "ios/chrome/browser/ui/suggestions/suggestions_article_item.h"
 #import "ios/chrome/browser/ui/suggestions/suggestions_item.h"
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
@@ -39,6 +40,14 @@ typedef NS_ENUM(NSInteger, ItemType) {
                                                      title:@"The title"
                                                   subtitle:@"The subtitle"]
           toSectionWithIdentifier:sectionIdentifier];
+      [model addItem:
+                 [[SuggestionsArticleItem alloc]
+                     initWithType:ItemTypeArticle
+                            title:@"Title of an Article"
+                         subtitle:@"This is the subtitle of an article, can "
+                                  @"spawn on multiple lines"
+                            image:[UIImage imageNamed:@"distillation_success"]]
+          toSectionWithIdentifier:sectionIdentifier];
       sectionIdentifier++;
     }
   }

ios/chrome/test/BUILD.gn

@@ -172,6 +172,7 @@ test("ios_chrome_unittests") {
     "//ios/chrome/browser/ui/side_swipe:unit_tests",
     "//ios/chrome/browser/ui/stack_view:unit_tests",
     "//ios/chrome/browser/ui/static_content:unit_tests",
+    "//ios/chrome/browser/ui/suggestions:unit_tests",
     "//ios/chrome/browser/ui/tab_switcher:unit_tests",
     "//ios/chrome/browser/ui/tabs:unit_tests",
     "//ios/chrome/browser/ui/toolbar:unit_tests",