diff --git a/Prezel/app/src/main/AndroidManifest.xml b/Prezel/app/src/main/AndroidManifest.xml index 639a913..e4f3541 100644 --- a/Prezel/app/src/main/AndroidManifest.xml +++ b/Prezel/app/src/main/AndroidManifest.xml @@ -1,6 +1,8 @@ + + 48.dp - PrezelAvatarSize.SMALL -> 24.dp + PrezelAvatarSize.REGULAR -> 64.dp + PrezelAvatarSize.SMALL -> 32.dp } @Composable @@ -105,7 +105,7 @@ private fun DefaultAvatarIcon( painter = painterResource(R.drawable.ic_person), contentDescription = contentDescription, modifier = Modifier.size(prezelAvatarIconSize(size)), - tint = PrezelTheme.colors.borderMedium, + tint = PrezelTheme.colors.iconDisabled, ) } diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt new file mode 100644 index 0000000..b5ceffc --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelBadge.kt @@ -0,0 +1,164 @@ +package com.team.prezel.core.designsystem.component + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.RowScope +import androidx.compose.foundation.layout.defaultMinSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.theme.PrezelColorScheme +import com.team.prezel.core.designsystem.theme.PrezelTheme + +enum class PrezelBadgeSize { + SMALL, + REGULAR, +} + +@Composable +fun PrezelBadge( + active: Boolean, + count: Int, + modifier: Modifier = Modifier, + size: PrezelBadgeSize = PrezelBadgeSize.REGULAR, + disabled: Boolean = false, +) { + val (backgroundColor, textColor) = prezelBadgeColors( + disabled = disabled, + active = active, + ) + + when (size) { + PrezelBadgeSize.SMALL -> PrezelDotBadge(modifier = modifier, backgroundColor = backgroundColor) + + PrezelBadgeSize.REGULAR -> PrezelNumberBadge( + modifier = modifier, + count = count, + backgroundColor = backgroundColor, + textColor = textColor, + ) + } +} + +@Composable +private fun PrezelDotBadge( + backgroundColor: Color, + modifier: Modifier = Modifier, +) { + Box( + modifier = modifier + .size(8.dp) + .background( + color = backgroundColor, + shape = PrezelTheme.shapes.V1000, + ), + ) +} + +@Composable +private fun PrezelNumberBadge( + count: Int, + backgroundColor: Color, + textColor: Color, + modifier: Modifier = Modifier, +) { + Box( + contentAlignment = Alignment.Center, + modifier = modifier + .defaultMinSize(minWidth = 20.dp, minHeight = 20.dp) + .background( + color = backgroundColor, + shape = PrezelTheme.shapes.V1000, + ).padding(horizontal = PrezelTheme.spacing.V4, vertical = PrezelTheme.spacing.V2), + ) { + Text( + text = count.toString(), + color = textColor, + style = PrezelTextStyles.Caption2Regular.toTextStyle(), + ) + } +} + +@Composable +private fun prezelBadgeColors( + disabled: Boolean, + active: Boolean, +): Pair = + when { + disabled -> PrezelTheme.colors.bgLarge to PrezelTheme.colors.textDisabled + active -> PrezelTheme.colors.interactiveRegular to PrezelColorScheme.Dark.textLarge + else -> PrezelTheme.colors.solidBlack to PrezelColorScheme.Dark.textLarge + } + +@ThemePreview +@Composable +private fun PrezelSmallBadgePreview() { + PrezelTheme { + Column( + modifier = Modifier + .background(PrezelTheme.colors.bgRegular) + .padding(16.dp), + ) { + BadgeRowPreview(title = "Small Badge Active") { + PrezelBadge(active = false, count = 0, size = PrezelBadgeSize.SMALL, disabled = false) + PrezelBadge(active = true, count = 0, size = PrezelBadgeSize.SMALL, disabled = false) + } + + BadgeRowPreview(title = "Small Badge Disabled") { + PrezelBadge(active = false, count = 0, size = PrezelBadgeSize.SMALL, disabled = false) + PrezelBadge(active = false, count = 0, size = PrezelBadgeSize.SMALL, disabled = true) + } + } + } +} + +@ThemePreview +@Composable +private fun PrezelRegularBadgePreview() { + PrezelTheme { + Column( + modifier = Modifier + .background(PrezelTheme.colors.bgRegular) + .padding(16.dp), + ) { + BadgeRowPreview(title = "Regular Badge Active") { + PrezelBadge(count = 0, active = false, disabled = false) + PrezelBadge(count = 1, active = true, disabled = false) + } + + BadgeRowPreview(title = "Regular Badge Disabled") { + PrezelBadge(count = 10, active = false, disabled = false) + PrezelBadge(count = 999, active = false, disabled = true) + } + } + } +} + +@Composable +private fun BadgeRowPreview( + title: String, + content: @Composable RowScope.() -> Unit, +) { + Column(modifier = Modifier.padding(bottom = 16.dp)) { + Text( + text = title, + style = PrezelTextStyles.Caption2Regular.toTextStyle(), + color = PrezelTheme.colors.textLarge, + modifier = Modifier.padding(bottom = 4.dp), + ) + Row( + horizontalArrangement = Arrangement.spacedBy(8.dp), + content = content, + ) + } +}