Merge pull request #8728 from woocommerce/issue/8674-IPP-banner-UI

[IPPInAppFeedback] UI banner component design tweaks

Author: iamgabrielma

WooCommerce/Classes/Extensions/UIImage+Woo.swift

@@ -210,6 +210,12 @@ extension UIImage {
         return UIImage.gridicon(.comment)
     }
 
+    /// Comment Content Icon
+    ///
+    static var commentContent: UIImage {
+        return UIImage(named: "icon-comment-content") ?? UIImage.gridicon(.comment)
+    }
+
     /// Credit Card Icon
     ///
     static var creditCardImage: UIImage {

WooCommerce/Classes/Extensions/UIView+Border.swift

@@ -1,9 +1,10 @@
 import UIKit
 
 extension UIView {
-    /// Creates a border view with the given height and color.
+    /// Creates a border view with the given height, and color.
     /// - Parameter height: height of the border. Default to be 0.5px.
     /// - Parameter color: background color of the border. Default to be the divider color.
+    ///
     static func createBorderView(height: CGFloat = 0.5,
                                  color: UIColor = .systemColor(.separator)) -> UIView {
         let view = UIView(frame: .zero)
@@ -14,4 +15,22 @@ extension UIView {
             ])
         return view
     }
+
+    /// Creates an empty view with the given height, width, and color
+    /// - Parameter height: height of the separator. Default to be 0.5px.
+    /// - Parameter width: width of the separator. Default to be 0.5px.
+    /// - Parameter color: background color of the separator. Default to be `.clear`
+    /// 
+    static func createSeparatorView(height: CGFloat = 0.5,
+                                width: CGFloat = 0.5,
+                                color: UIColor = .clear) -> UIView {
+        let view = UIView(frame: .zero)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.backgroundColor = color
+        NSLayoutConstraint.activate([
+            view.heightAnchor.constraint(equalToConstant: height),
+            view.widthAnchor.constraint(equalToConstant: width)
+        ])
+        return view
+    }
 }

WooCommerce/Classes/ViewRelated/Orders/OrderListViewController.swift

@@ -836,7 +836,7 @@ private extension OrderListViewController {
         let viewModel = TopBannerViewModel(
             title: bannerTitle,
             infoText: bannerText,
-            icon: UIImage.gridicon(.comment),
+            icon: UIImage.commentContent,
             isExpanded: true,
             topButton: .dismiss(handler: {
                 self.showIPPFeedbackDismissAlert(survey: survey, campaign: campaign)

WooCommerce/Classes/ViewRelated/Top Banner/TopBannerView.swift

@@ -50,6 +50,12 @@ final class TopBannerView: UIView {
         return stackView
     }()
 
+    private let labelHolderStackView: UIStackView = {
+        let stackView = UIStackView()
+        stackView.axis = .horizontal
+        return stackView
+    }()
+
     // StackView to hold the action buttons. Needed to change the axis on larger accessibility traits
     private let buttonsStackView = UIStackView()
 
@@ -114,6 +120,10 @@ private extension TopBannerView {
 
         zip(viewModel.actionButtons, actionButtons).forEach { buttonInfo, button in
             button.setTitle(buttonInfo.title, for: .normal)
+            button.titleLabel?.font = .boldSystemFont(ofSize: titleLabel.font.pointSize)
+            // Overrides the general .applyLinkButtonStyle() with pink color
+            // pecCkj-fa-p2
+            button.setTitleColor(UIColor.withColorStudio(.pink), for: .normal)
             button.on(.touchUpInside, call: { _ in buttonInfo.action(button) })
         }
     }
@@ -141,7 +151,7 @@ private extension TopBannerView {
 
     func createMainStackView(with viewModel: TopBannerViewModel) -> UIStackView {
         let iconInformationStackView = createIconInformationStackView(with: viewModel)
-        let mainStackView = UIStackView(arrangedSubviews: [iconInformationStackView, createBorderView()])
+        let mainStackView = UIStackView(arrangedSubviews: [createBorderView(), iconInformationStackView, createBorderView()])
         if isActionEnabled {
             configureActionStackView(with: viewModel)
             mainStackView.addArrangedSubview(actionStackView)
@@ -167,6 +177,18 @@ private extension TopBannerView {
         return iconInformationStackView
     }
 
+    func createLabelHolderStackView() -> UIStackView {
+        labelHolderStackView.addArrangedSubviews([
+            createSeparatorView(height: Constants.labelHolderHeight, width: Constants.labelHolderLeftMargin),
+            infoLabel,
+            createSeparatorView(height: Constants.labelHolderHeight, width: Constants.labelHolderRightMargin)
+        ])
+        labelHolderStackView.spacing = Constants.labelHolderSpacing
+        infoLabel.adjustsFontSizeToFitWidth = true
+
+        return labelHolderStackView
+    }
+
     func createInformationStackView(with viewModel: TopBannerViewModel) -> UIStackView {
         let topActionButton = topButton(for: viewModel.topButton)
         titleStackView.addArrangedSubviews([titleLabel, topActionButton].compactMap { $0 })
@@ -179,7 +201,8 @@ private extension TopBannerView {
         // titleStackView will hidden if there is no title
         titleStackView.isHidden = viewModel.title == nil || viewModel.title?.isEmpty == true
 
-        let informationStackView = UIStackView(arrangedSubviews: [titleStackView, infoLabel])
+        let informationStackView = UIStackView(arrangedSubviews: [titleStackView, createLabelHolderStackView()])
+
         informationStackView.axis = .vertical
         informationStackView.spacing = 9
 
@@ -225,6 +248,10 @@ private extension TopBannerView {
         return UIView.createBorderView()
     }
 
+    func createSeparatorView(height: CGFloat, width: CGFloat) -> UIView {
+        return UIView.createSeparatorView(height: height, width: width)
+    }
+
     func topButton(for buttonType: TopBannerViewModel.TopButtonType) -> UIButton? {
         switch buttonType {
         case .chevron:
@@ -293,14 +320,14 @@ private extension TopBannerView {
     func updateExpandCollapseState(isExpanded: Bool) {
         let image = isExpanded ? UIImage.chevronUpImage: UIImage.chevronDownImage
         expandCollapseButton.setImage(image, for: .normal)
-        infoLabel.isHidden = !isExpanded
+        labelHolderStackView.isHidden = !isExpanded
         if isActionEnabled {
             actionStackView.isHidden = !isExpanded
         }
         titleStackView.accessibilityHint = isExpanded ? Localization.collapseHint : Localization.expandHint
         titleStackView.accessibilityValue = isExpanded ? Localization.expanded : Localization.collapsed
 
-        let accessibleView = isExpanded ? infoLabel : nil
+        let accessibleView = isExpanded ? labelHolderStackView : nil
         UIAccessibility.post(notification: .layoutChanged, argument: accessibleView)
     }
 }
@@ -316,3 +343,14 @@ private extension TopBannerView {
         static let dismissHint = NSLocalizedString("Double-tap to dismiss", comment: "Accessibility hint to dismiss a banner")
     }
 }
+
+// MARK: - Constants
+//
+private extension TopBannerView {
+    enum Constants {
+        static let labelHolderHeight: CGFloat = 48.0
+        static let labelHolderLeftMargin: CGFloat = 0.0
+        static let labelHolderRightMargin: CGFloat = 24.0
+        static let labelHolderSpacing: CGFloat = 1.0
+    }
+}

WooCommerce/Resources/Images.xcassets/icon-comment-content.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "icon-comment-content.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}