Refactor FXIOS-7642 [v120] Update of Fakespot design and string to ac…

…comodate for localizations (#17131) * Update string * Update layout to allow for taller buttons * Update string comment * Fix layout in LinkButton (cherry picked from commit f0af8ae)
mozilla-mobile · Nov 9, 2023 · 482127c · 482127c
1 parent 0e28dbc
commit 482127c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/LinkButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/LinkButton.swift
@@ -5,22 +5,21 @@
 import Common
 import UIKit
 
-public class LinkButton: ResizableButton, ThemeApplicable {
-    private struct UX {
-        static let buttonCornerRadius: CGFloat = 13
-    }
-
+public class LinkButton: UIButton, ThemeApplicable {
     override init(frame: CGRect) {
         super.init(frame: frame)
 
         configuration = UIButton.Configuration.plain()
         backgroundColor = .clear
         titleLabel?.adjustsFontForContentSizeCategory = true
+        titleLabel?.numberOfLines = 0
+        titleLabel?.lineBreakMode = .byWordWrapping
     }
 
     public func configure(viewModel: LinkButtonViewModel) {
         accessibilityIdentifier = viewModel.a11yIdentifier
-        setTitle(viewModel.title, for: .normal)
+
+        configuration?.title = viewModel.title
         configuration?.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
             var outgoing = incoming
             outgoing.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,

diff --git a/Client/Frontend/Fakespot/Views/FakespotOptInCardView.swift b/Client/Frontend/Fakespot/Views/FakespotOptInCardView.swift
@@ -13,16 +13,22 @@ final class FakespotOptInCardView: UIView, ThemeApplicable {
         static let headerLabelFontSize: CGFloat = 28
         static let bodyLabelFontSize: CGFloat = 15
         static let learnMoreButtonFontSize: CGFloat = 15
-        static let termsOfUseButtonInsets = UIEdgeInsets(top: 0, left: 16, bottom: 0, right: 16)
         static let disclaimerTextLabelFontSize: CGFloat = 13
-        static let disclaimerBlockInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16)
-        static let learnMoreInsets = NSDirectionalEdgeInsets(top: -10, leading: 0, bottom: 10, trailing: 0)
         static let termsOfUseButtonTitleFontSize: CGFloat = 13
         static let privacyPolicyButtonTitleFontSize: CGFloat = 13
         static let secondaryButtonFontSize: CGFloat = 13
-        static let contentStackViewSpacing: CGFloat = 12
-        static let contentStackViewPadding: CGFloat = 16
-        static let disclaimerStackViewSpacing: CGFloat = 3
+
+        static let privacyButtonInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 8, trailing: 16)
+        static let termsOfUseButtonInsets = NSDirectionalEdgeInsets(top: 8, leading: 16, bottom: 16, trailing: 16)
+        static let learnMoreInsets = NSDirectionalEdgeInsets(top: 16, leading: 0, bottom: 8, trailing: 0)
+        static let secondaryButtonInsets = NSDirectionalEdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16)
+        static let contentStackViewSpacing: CGFloat = 16
+        static let contentStackHorizontalPadding: CGFloat = 16
+        static let contentStackTopPadding: CGFloat = 16
+        static let contentStackBottomPadding: CGFloat = 8
+        static let disclaimerStackViewSpacing: CGFloat = 0
+        static let buttonAdjustedVerticalSpacing: CGFloat = 0
+        static let disclaimerAdjustedSpacing: CGFloat = 8
         static let optInImageViewIpadTopSpace: CGFloat = 30
         static let optInImageViewIpadBottomSpace: CGFloat = 40
     }
@@ -117,8 +123,8 @@ final class FakespotOptInCardView: UIView, ThemeApplicable {
         disclaimerStackView.addArrangedSubview(disclaimerTextLabel)
         disclaimerStackView.addArrangedSubview(privacyPolicyButton)
         disclaimerStackView.addArrangedSubview(termsOfUseButton)
-        contentStackView.addArrangedSubview(disclaimerStackView)
 
+        contentStackView.addArrangedSubview(disclaimerStackView)
         contentStackView.addArrangedSubview(mainButton)
         contentStackView.addArrangedSubview(secondaryButton)
 
@@ -129,14 +135,18 @@ final class FakespotOptInCardView: UIView, ThemeApplicable {
             cardContainer.bottomAnchor.constraint(equalTo: bottomAnchor),
 
             contentStackView.topAnchor.constraint(equalTo: mainView.topAnchor,
-                                                  constant: UX.contentStackViewPadding),
+                                                  constant: UX.contentStackTopPadding),
             contentStackView.bottomAnchor.constraint(equalTo: mainView.bottomAnchor,
-                                                     constant: -UX.contentStackViewPadding),
+                                                     constant: -UX.contentStackBottomPadding),
             contentStackView.leadingAnchor.constraint(equalTo: mainView.leadingAnchor,
-                                                      constant: UX.contentStackViewPadding),
+                                                      constant: UX.contentStackHorizontalPadding),
             contentStackView.trailingAnchor.constraint(equalTo: mainView.trailingAnchor,
-                                                       constant: -UX.contentStackViewPadding),
+                                                       constant: -UX.contentStackHorizontalPadding),
         ])
+
+        contentStackView.setCustomSpacing(UX.buttonAdjustedVerticalSpacing, after: bodyLabel)
+        contentStackView.setCustomSpacing(UX.disclaimerAdjustedSpacing, after: disclaimerStackView)
+        contentStackView.setCustomSpacing(UX.buttonAdjustedVerticalSpacing, after: mainButton)
     }
 
     private func addVerticalSpaceToImageView() {
@@ -197,15 +207,15 @@ final class FakespotOptInCardView: UIView, ThemeApplicable {
             title: viewModel.termsOfUseButtonText,
             a11yIdentifier: viewModel.termsOfUseButtonA11yId,
             fontSize: UX.termsOfUseButtonTitleFontSize,
-            contentInsets: UX.disclaimerBlockInsets
+            contentInsets: UX.termsOfUseButtonInsets
         )
         termsOfUseButton.configure(viewModel: termsOfUseButtonViewModel)
 
         let privacyButtonViewModel = LinkButtonViewModel(
             title: viewModel.privacyPolicyButtonText,
             a11yIdentifier: viewModel.privacyPolicyButtonA11yId,
             fontSize: UX.privacyPolicyButtonTitleFontSize,
-            contentInsets: UX.disclaimerBlockInsets
+            contentInsets: UX.privacyButtonInsets
         )
         privacyPolicyButton.configure(viewModel: privacyButtonViewModel)
 
@@ -219,7 +229,7 @@ final class FakespotOptInCardView: UIView, ThemeApplicable {
             title: viewModel.secondaryButtonText,
             a11yIdentifier: viewModel.secondaryButtonA11yId,
             fontSize: UX.secondaryButtonFontSize,
-            contentInsets: .zero,
+            contentInsets: UX.secondaryButtonInsets,
             contentHorizontalAlignment: .center
         )
         secondaryButton.configure(viewModel: secondaryButtonViewModel)

diff --git a/Client/Frontend/Strings.swift b/Client/Frontend/Strings.swift
@@ -3897,10 +3897,10 @@ extension String {
             value: "Learn more",
             comment: "Label for the Learn more button in the Shopping Experience Opt In onboarding Card (Fakespot)")
         public static let OptInCardDisclaimerText = MZLocalizedString(
-            key: "Shopping.OptInCard.Disclaimer.Title.v120",
+            key: "Shopping.OptInCard.Disclaimer.Text.v120",
             tableName: "Shopping",
-            value: "By selecting “Yes, Try It” you agree to the %@:",
-            comment: "Text for the disclaimer that appears beneath the rating image of the Shopping Experience Opt In onboarding Card (Fakespot). The parameter will be replaced by the Fakespot app name.")
+            value: "By selecting “Yes, Try It” you agree to the following from %@:",
+            comment: "Text for the disclaimer that appears underneath the rating image of the Shopping Experience Opt In onboarding Card (Fakespot). The parameter will be replaced by the Fakespot app name. After the colon, what appears are two links, each on their own line. The first link is to a Privacy policy. The second link is to Terms of use.")
         public static let OptInCardPrivacyPolicy = MZLocalizedString(
             key: "Shopping.OptInCard.PrivacyPolicy.Button.Title.v120",
             tableName: "Shopping",