Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IOS-10491 Update Title component #397

Merged
merged 5 commits into from
Aug 23, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,15 @@ private enum Constants {
Style(titleStyle: .title2, title: "Title2 with link", linkTitle: "Text link"),
Style(titleStyle: .title2, title: "Title2 with no link", linkTitle: nil),
Style(titleStyle: .title2, title: "Title2 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title2, title: "Title2 with no link and some large title using 2 lines", linkTitle: nil)
Style(titleStyle: .title2, title: "Title2 with no link and some large title using 2 lines", linkTitle: nil),
Style(titleStyle: .title3, title: "Title3 with link", linkTitle: "Text link"),
Style(titleStyle: .title3, title: "Title3 with no link", linkTitle: nil),
Style(titleStyle: .title3, title: "Title3 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title3, title: "Title3 with no link and some large title using 2 lines", linkTitle: nil),
Style(titleStyle: .title4, title: "Title4 with link", linkTitle: "Text link"),
Style(titleStyle: .title4, title: "Title4 with no link", linkTitle: nil),
Style(titleStyle: .title4, title: "Title4 with link and some large title using 2 lines", linkTitle: "Text link"),
Style(titleStyle: .title4, title: "Title4 with no link and some large title using 2 lines", linkTitle: nil)
]
}
}
Expand Down
16 changes: 13 additions & 3 deletions Sources/Mistica/Components/Title/TitleView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,29 @@ public class TitleView: UIView {
public enum Style {
case title1
case title2
case title3
case title4
Comment on lines +22 to +23
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

new ones!


var font: UIFont {
switch self {
case .title1:
return .textPreset1(weight: .title1)
case .title2:
return .textPreset5()
return .textPreset3(weight: .title2)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How can we migrate this @aweell ??? Checking this, where we used title2, now we have to use... title3 right?
Captura de pantalla 2024-08-21 a las 15 38 41

case .title3:
return .textTitle3()
case .title4:
return .textPreset6()
}
}

var textColor: UIColor {
switch self {
case .title1:
return .textSecondary
case .title2:
case .title2,
.title3,
.title4:
return .textPrimary
}
}
Expand All @@ -42,7 +50,9 @@ public class TitleView: UIView {
switch self {
case .title1:
return text?.uppercased()
case .title2:
case .title2,
.title3,
.title4:
return text
}
}
Expand Down
4 changes: 3 additions & 1 deletion Sources/MisticaCommon/Fonts/FontStyle+Weights.swift
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ public extension FontStyle {
}

enum TextPreset3Weight: CaseIterable {
case light, regular, medium, button, link
case light, regular, medium, button, link, title2, title3
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a little bit weird. textPreset3 can have title2 weight 🤷🏻

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we're messing and reusing fonts and weights namings, we should use bold, heavy, light, medium, regular, semibold, thin, ultralight

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's due to bold is bold, light is light but title2 is a custom weight which depends on the brand.
For example:


var value: MisticaFontWeightType {
switch self {
Expand All @@ -49,6 +49,8 @@ public extension FontStyle {
case .medium: return .medium
case .button: return MisticaConfig.currentFontWeights.button
case .link: return MisticaConfig.currentFontWeights.link
case .title2: return MisticaConfig.currentFontWeights.title2
case .title3: return MisticaConfig.currentFontWeights.title3
}
}
}
Expand Down
11 changes: 9 additions & 2 deletions Sources/MisticaCommon/Fonts/FontStyle.swift
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import UIKit
case textPreset9
case textPreset10
case textPresetTabsLabel
case textTitle3

func preferredFont(
weight: Font.Weight,
Expand Down Expand Up @@ -78,6 +79,8 @@ import UIKit
return "TextPreset10"
case .textPresetTabsLabel:
return "TextPresetTabsLabel"
case .textTitle3:
return "TextPresetTitle3"
}
}
}
Expand Down Expand Up @@ -130,6 +133,8 @@ private extension FontStyle {
return 48
case .textPresetTabsLabel:
return MisticaConfig.currentFontSizes.tabsLabel
case .textTitle3:
return MisticaConfig.currentFontSizes.title3
}
}

Expand All @@ -144,7 +149,8 @@ private extension FontStyle {
return .body
case .textPreset4:
return .headline
case .textPreset5:
case .textPreset5,
.textTitle3:
Comment on lines +152 to +153
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've considered textTitle3 as a UIKit .title3 (checking the sizes)

return .title3
case .textPreset6:
return .title2
Expand All @@ -168,7 +174,8 @@ private extension FontStyle {
return .body
case .textPreset4:
return .headline
case .textPreset5:
case .textPreset5,
.textTitle3:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've considered textTitle3 as a UIKit .title3 (checking the sizes)

return .title3
case .textPreset6:
return .title2
Expand Down
7 changes: 7 additions & 0 deletions Sources/MisticaCommon/Fonts/FontToolkit+Font.swift
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,13 @@ public extension Font {
)
}

static func textTitle3(constrainedToPreferredSize: UIContentSizeCategory? = nil) -> Font {
FontStyle.textTitle3.preferredFont(
weight: MisticaConfig.currentFontWeights.title3.systemWeight,
constrainedToPreferredSize: constrainedToPreferredSize
)
}

static func preferredFont(for fontStyle: FontStyle, weight: Font.Weight, constrainedToPreferredSize constrainedPreferredSize: UIContentSizeCategory) -> Font {
fontStyle.preferredFont(weight: weight, constrainedToPreferredSize: constrainedPreferredSize)
}
Expand Down
7 changes: 7 additions & 0 deletions Sources/MisticaCommon/Fonts/FontToolkit+UIFont.swift
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,13 @@ public extension UIFont {
)
}

static func textTitle3(constrainedToPreferredSize: UIContentSizeCategory? = nil) -> UIFont {
FontStyle.textTitle3.preferredFont(
weight: MisticaConfig.currentFontWeights.title3.systemUIFontWeight,
constrainedToPreferredSize: constrainedToPreferredSize
)
}

static func preferredFont(for fontStyle: FontStyle, weight: UIFont.Weight, constrainedToPreferredSize constrainedPreferredSize: UIContentSizeCategory) -> UIFont {
fontStyle.preferredFont(weight: weight, constrainedToPreferredSize: constrainedPreferredSize)
}
Expand Down
72 changes: 72 additions & 0 deletions Tests/MisticaTests/UI/TitleHeaderFooterViewTests.swift
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,78 @@ final class TitleHeaderFooterViewTests: XCTestCase {
viewBuilder: makeSectionTitle(title: "This is a very long test text to check multiline", linkTitle: "Link text", style: .title2)
)
}

func testTitle3() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title 3 uses different presets depending on the brand so recording this for two brands is enough IMO

assertSnapshot(
for: [.vivoNew, .movistar],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "Title text", style: .title3)
)
}

func testTitle3WithLink() {
assertSnapshot(
for: [.vivoNew, .movistar],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "Title text", linkTitle: "Link text", style: .title3)
)
}

func testTitle3Multiline() {
assertSnapshot(
for: [.vivoNew, .movistar],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "This is a very long test text to check multiline", style: .title3)
)
}

func testTitle3MultilineAndLink() {
assertSnapshot(
for: [.vivoNew, .movistar],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "This is a very long test text to check multiline", linkTitle: "Link text", style: .title3)
)
}

func testTitle4() {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

title 4 uses the same text preset for any brand so recording this for one brand is enough IMO

assertSnapshot(
for: [.vivoNew],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "Title text", style: .title4)
)
}

func testTitle4WithLink() {
assertSnapshot(
for: [.vivoNew],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "Title text", linkTitle: "Link text", style: .title4)
)
}

func testTitle4Multiline() {
assertSnapshot(
for: [.vivoNew],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "This is a very long test text to check multiline", style: .title4)
)
}

func testTitle4MultilineAndLink() {
assertSnapshot(
for: [.vivoNew],
and: [.light],
as: .image(on: .iPhoneSe),
viewBuilder: makeSectionTitle(title: "This is a very long test text to check multiline", linkTitle: "Link text", style: .title4)
)
}
}

private extension TitleHeaderFooterViewTests {
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions Tests/MisticaTests/Utils/TestHelpers.swift
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,51 @@ func assertSnapshotForAllBrandsAndStyles<View: UserInterfaceStyling, Format>(
}
}

func assertSnapshot<View: UserInterfaceStyling, Format>(
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useful to select in which brand you want to record screenshots. It will save us a lot of screenshots, sizes, time,... (talked in our previous platform evolution meeting)

for brands: [BrandStyle] = BrandStyle.allCases,
and styles: [UIUserInterfaceStyle] = [.light, .dark],
as snapshotting: Snapshotting<View, Format>,
file: StaticString = #file,
testName: String = #function,
line: UInt = #line,
viewBuilder: @autoclosure () -> View
) {
for brand in brands {
MisticaConfig.brandStyle = brand

for style in styles {
var view = viewBuilder()
view.overrideUserInterfaceStyle = style
assertSnapshot(
matching: view,
as: snapshotting,
named: "with-\(brand)-\(style.testSuffix)-style",
file: file,
testName: testName,
line: line
)
}
}
}

protocol UserInterfaceStyling {
var overrideUserInterfaceStyle: UIUserInterfaceStyle { get set }
}

extension UIView: UserInterfaceStyling {}
extension UIViewController: UserInterfaceStyling {}

private extension UIUserInterfaceStyle {
var testSuffix: String {
switch self {
case .unspecified:
"unspecified"
case .light:
"light"
case .dark:
"dark"
@unknown default:
"unknown"
}
}
}
Loading