From 482127c8b4185583af11aa532c8c69471329c0c9 Mon Sep 17 00:00:00 2001 From: Winnie Teichmann <4530+thatswinnie@users.noreply.github.com> Date: Wed, 8 Nov 2023 17:11:42 +0100 Subject: [PATCH] Refactor FXIOS-7642 [v120] Update of Fakespot design and string to accomodate for localizations (#17131) * Update string * Update layout to allow for taller buttons * Update string comment * Fix layout in LinkButton (cherry picked from commit f0af8ae65ff54578aa1aa1c1cc7053f6ab3e7fe2) --- .../ComponentLibrary/Buttons/LinkButton.swift | 11 +++--- .../Views/FakespotOptInCardView.swift | 38 ++++++++++++------- Client/Frontend/Strings.swift | 6 +-- 3 files changed, 32 insertions(+), 23 deletions(-) diff --git a/BrowserKit/Sources/ComponentLibrary/Buttons/LinkButton.swift b/BrowserKit/Sources/ComponentLibrary/Buttons/LinkButton.swift index bec6503b80cf..d9e6ba9c20ff 100644 --- 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 index 0cb8317a27e9..bfa4b333c0be 100644 --- 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,7 +207,7 @@ final class FakespotOptInCardView: UIView, ThemeApplicable { title: viewModel.termsOfUseButtonText, a11yIdentifier: viewModel.termsOfUseButtonA11yId, fontSize: UX.termsOfUseButtonTitleFontSize, - contentInsets: UX.disclaimerBlockInsets + contentInsets: UX.termsOfUseButtonInsets ) termsOfUseButton.configure(viewModel: termsOfUseButtonViewModel) @@ -205,7 +215,7 @@ final class FakespotOptInCardView: UIView, ThemeApplicable { 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 index d5d33330a6b7..f8b67db2e0d1 100644 --- 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",