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.

Sign up for GitHub

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

feat(DataCard): LATCH-1334 Now DataCard allows color customization #345

Merged
merged 5 commits into from
Mar 19, 2024
Merged

feat(DataCard): LATCH-1334 Now DataCard allows color customization #345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2be5f87
feat(DataCard): LATCH-1334 Now DataCard allows color customization
salavert Mar 19, 2024
108974c
Run swiftformat
salavert Mar 19, 2024
ad812dc
feat(DataCard): LATCH-1334 Fixing tests
salavert Mar 19, 2024
7e6ae2b
feat(DataCard): LATCH-1334 Adding test
salavert Mar 19, 2024
fa56521
Run swiftformat
salavert Mar 19, 2024
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
115 changes: 90 additions & 25 deletions Sources/MisticaSwiftUI/Components/Cards/DataCard.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,28 @@ public enum DataCardAssetType {
case image(image: Image)
}

public struct DataCardColorsConfiguration {
var primaryTextColor: Color
var secondaryTextColor: Color
var backgroundColor: Color
var borderColor: Color
var dismissColor: Color

public init(
primaryTextColor: Color = .textPrimary,
secondaryTextColor: Color = .textSecondary,
backgroundColor: Color = .backgroundContainer,
borderColor: Color = .border,
dismissColor: Color = .neutralHigh
) {
self.primaryTextColor = primaryTextColor
self.secondaryTextColor = secondaryTextColor
self.backgroundColor = backgroundColor
self.borderColor = borderColor
self.dismissColor = dismissColor
}
}

public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, LinkButton: View>: View {
private let assetType: DataCardAssetType
private let headline: Headline?
Expand All @@ -25,6 +47,7 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
private let primaryButton: PrimaryButton
private let linkButton: LinkButton

private var colorsConfiguration: DataCardColorsConfiguration
private var titleLineLimit: Int? = 1
private var subtitleLineLimit: Int? = 2
private var descriptionLineLimit: Int? = 3
Expand All @@ -49,7 +72,8 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
dismissAction: (() -> Void)?,
primaryButton: PrimaryButton,
linkButton: LinkButton,
fragmentView: Fragment
fragmentView: Fragment,
colorsConfiguration: DataCardColorsConfiguration = .init()
) {
self.assetType = assetType
self.headline = headline
Expand All @@ -60,6 +84,7 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
self.primaryButton = primaryButton
self.linkButton = linkButton
self.fragmentView = fragmentView
self.colorsConfiguration = colorsConfiguration
}

public var body: some View {
Expand All @@ -78,7 +103,7 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
.padding(.top, 8)
.lineLimit(titleLineLimit)
.font(.textPreset4(weight: .cardTitle))
.foregroundColor(.textPrimary)
.foregroundColor(colorsConfiguration.primaryTextColor)
.accessibilityLabel(titleAccessibilityLabel)
.accessibilityIdentifier(titleAccessibilityIdentifier)
.fixedSize(horizontal: false, vertical: true)
Expand All @@ -89,7 +114,7 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
.padding(.top, 4)
.lineLimit(subtitleLineLimit)
.font(.textPreset2(weight: .regular))
.foregroundColor(.textPrimary)
.foregroundColor(colorsConfiguration.primaryTextColor)
.accessibilityLabel(subtitleAccessibilityLabel)
.accessibilityIdentifier(subtitleAccessibilityIdentifier)
.fixedSize(horizontal: false, vertical: true)
Expand All @@ -100,7 +125,7 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
.padding(.top, 8)
.lineLimit(descriptionLineLimit)
.font(.textPreset2(weight: .regular))
.foregroundColor(.textSecondary)
.foregroundColor(colorsConfiguration.secondaryTextColor)
.accessibilityLabel(descriptionAccessibilityLabel)
.accessibilityIdentifier(descriptionAccessibilityIdentifier)
.fixedSize(horizontal: false, vertical: true)
Expand Down Expand Up @@ -134,8 +159,8 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
.padding(.top, 24)
.padding(.bottom, 24)
.expandHorizontally(alignment: .leading)
.background(Color.backgroundContainer)
.border(radiusStyle: .container, borderColor: Color.border, lineWidth: 1)
.background(colorsConfiguration.backgroundColor)
.border(radiusStyle: .container, borderColor: colorsConfiguration.borderColor, lineWidth: 1)
.fixedSize(horizontal: false, vertical: fixedVerticalContentSize)
.overlay(dismissView)
}
Expand All @@ -150,8 +175,9 @@ public struct DataCard<Headline: View, Fragment: View, PrimaryButton: View, Link
dismissAction()
} label: {
Image.closeButtonBlackSmallIcon
.renderingMode(.template)
.frame(width: 40, height: 40)
.foregroundColor(.neutralHigh)
.foregroundColor(colorsConfiguration.dismissColor)
}
}
Spacer()
Expand Down Expand Up @@ -301,7 +327,8 @@ public extension DataCard {
dismissAction: (() -> Void)? = nil,
@ViewBuilder primaryButton: () -> PrimaryButton,
@ViewBuilder linkButton: () -> LinkButton,
@ViewBuilder fragmentView: () -> Fragment
@ViewBuilder fragmentView: () -> Fragment,
colorsConfiguration: DataCardColorsConfiguration = .init()
) {
self.init(
assetType: assetType,
Expand All @@ -312,7 +339,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: primaryButton(),
linkButton: linkButton(),
fragmentView: fragmentView()
fragmentView: fragmentView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -324,7 +352,8 @@ public extension DataCard {
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder primaryButton: () -> PrimaryButton,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where Fragment == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -335,7 +364,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: primaryButton(),
linkButton: linkButton(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -346,7 +376,8 @@ public extension DataCard {
subtitle: String? = nil,
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where PrimaryButton == EmptyView, Fragment == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -357,7 +388,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: linkButton(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -369,7 +401,8 @@ public extension DataCard {
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder fragmentView: () -> Fragment,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where PrimaryButton == EmptyView, LinkButton == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -380,7 +413,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: linkButton(),
fragmentView: fragmentView()
fragmentView: fragmentView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -390,7 +424,8 @@ public extension DataCard {
title: String? = nil,
subtitle: String? = nil,
description: String? = nil,
dismissAction: (() -> Void)? = nil
dismissAction: (() -> Void)? = nil,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where LinkButton == EmptyView, PrimaryButton == EmptyView, Fragment == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -401,7 +436,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: EmptyView(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -414,7 +450,8 @@ public extension DataCard {
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder primaryButton: () -> PrimaryButton,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where Fragment == EmptyView, Headline == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -425,7 +462,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: primaryButton(),
linkButton: linkButton(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -435,7 +473,8 @@ public extension DataCard {
subtitle: String? = nil,
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where PrimaryButton == EmptyView, Fragment == EmptyView, Headline == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -446,7 +485,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: linkButton(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -457,7 +497,8 @@ public extension DataCard {
description: String? = nil,
dismissAction: (() -> Void)? = nil,
@ViewBuilder fragmentView: () -> Fragment,
@ViewBuilder linkButton: () -> LinkButton
@ViewBuilder linkButton: () -> LinkButton,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where PrimaryButton == EmptyView, LinkButton == EmptyView, Headline == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -468,7 +509,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: linkButton(),
fragmentView: fragmentView()
fragmentView: fragmentView(),
colorsConfiguration: colorsConfiguration
)
}

Expand All @@ -477,7 +519,8 @@ public extension DataCard {
title: String? = nil,
subtitle: String? = nil,
description: String? = nil,
dismissAction: (() -> Void)? = nil
dismissAction: (() -> Void)? = nil,
colorsConfiguration: DataCardColorsConfiguration = .init()
) where PrimaryButton == EmptyView, LinkButton == EmptyView, Fragment == EmptyView, Headline == EmptyView {
self.init(
assetType: assetType,
Expand All @@ -488,7 +531,8 @@ public extension DataCard {
dismissAction: dismissAction,
primaryButton: EmptyView(),
linkButton: EmptyView(),
fragmentView: EmptyView()
fragmentView: EmptyView(),
colorsConfiguration: colorsConfiguration
)
}
}
Expand All @@ -500,6 +544,27 @@ public extension DataCard {
struct DataCard_Previews: PreviewProvider {
static var previews: some View {
Preview {
DataCard(
assetType: .icon(
image: Image(systemName: "plus"),
foregroundColor: .neutralMedium,
backgroundColor: .neutralLow
),
title: "title",
subtitle: "subtitle",
description: nil,
dismissAction: {},
colorsConfiguration: .init(
primaryTextColor: .textPrimaryInverse,
secondaryTextColor: .textSecondaryInverse,
backgroundColor: .backgroundBrand,
borderColor: .border,
dismissColor: .neutralLow
)
)
.frame(width: 350)
.previewDisplayName("Colors")

DataCard(
assetType: .image(image: Image(systemName: "photo")),
headline: { Tag(style: .promo, text: "headline") },
Expand Down
28 changes: 28 additions & 0 deletions Tests/MisticaSwiftUITests/UI/DataCardTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,34 @@ final class DataCardTests: XCTestCase {
isRecording = false
}

func testAlternativeColors() {
let dataCard = DataCard(
assetType: .icon(
image: Image(systemName: "plus"),
foregroundColor: .neutralMedium,
backgroundColor: .neutralLow
),
title: "title",
subtitle: "subtitle",
description: nil,
dismissAction: {},
colorsConfiguration: .init(
primaryTextColor: .textPrimaryInverse,
secondaryTextColor: .textSecondaryInverse,
backgroundColor: .backgroundBrand,
borderColor: .border,
dismissColor: .neutralLow
)
)
.frame(width: 300)
.padding(16)

assertSnapshot(
matching: dataCard,
as: .image
)
}

func testSingleline() {
let dataCard = DataCard(
headline: { Tag(style: .promo, text: Constants.headline) },
Expand Down
Binary file added .../MisticaSwiftUITests/UI/__Snapshots__/DataCardTests/testAlternativeColors.1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified Tests/MisticaSwiftUITests/UI/__Snapshots__/DataCardTests/testDismissAction.1.png
View file
Open in desktop
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 seems the cross now has the correct color

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.