diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelCheckbox.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelCheckbox.kt new file mode 100644 index 0000000..cb3adb5 --- /dev/null +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/PrezelCheckbox.kt @@ -0,0 +1,156 @@ +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.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.selection.toggleable +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.Role +import androidx.compose.ui.unit.dp +import com.team.prezel.core.designsystem.R +import com.team.prezel.core.designsystem.foundation.typography.PrezelTextStyles +import com.team.prezel.core.designsystem.icon.PrezelIcons +import com.team.prezel.core.designsystem.preview.ThemePreview +import com.team.prezel.core.designsystem.theme.PrezelTheme + +enum class CheckboxSize { + REGULAR, + LARGE, +} + +@Composable +fun PrezelCheckbox( + checked: Boolean, + modifier: Modifier = Modifier, + size: CheckboxSize = CheckboxSize.REGULAR, + onCheckedChange: (Boolean) -> Unit, +) { + val checkboxSize = when (size) { + CheckboxSize.REGULAR -> 24.dp + CheckboxSize.LARGE -> 32.dp + } + + val iconRes = + if (checked) { + PrezelIcons.CheckCircleFilled + } else { + PrezelIcons.CheckCircleOutlined + } + + val iconColor = + if (checked) { + PrezelTheme.colors.interactiveRegular + } else { + PrezelTheme.colors.iconDisabled + } + + Box( + modifier = modifier + .size(48.dp) + .toggleable( + value = checked, + interactionSource = null, + indication = null, + role = Role.Checkbox, + onValueChange = onCheckedChange, + ), + contentAlignment = Alignment.Center, + ) { + Icon( + painter = painterResource(id = iconRes), + contentDescription = stringResource(R.string.core_designsystem_checkbox_desc), + modifier = Modifier.size(checkboxSize), + tint = iconColor, + ) + } +} + +@ThemePreview +@Composable +private fun PrezelRegularCheckboxPreview() { + PrezelTheme { + Column( + modifier = Modifier + .background(PrezelTheme.colors.bgRegular) + .padding(16.dp), + ) { + CheckboxRowPreview(title = "Regular Checkbox") { + var checkState by remember { mutableStateOf(true) } + + PrezelCheckbox( + size = CheckboxSize.REGULAR, + checked = checkState, + onCheckedChange = { checkState = it }, + ) + + PrezelCheckbox( + size = CheckboxSize.REGULAR, + checked = !checkState, + onCheckedChange = { checkState = it }, + ) + } + } + } +} + +@ThemePreview +@Composable +private fun PrezelLargeCheckboxPreview() { + PrezelTheme { + Column( + modifier = Modifier + .background(PrezelTheme.colors.bgRegular) + .padding(16.dp), + ) { + CheckboxRowPreview(title = "Large Checkbox") { + var checkState by remember { mutableStateOf(true) } + + PrezelCheckbox( + size = CheckboxSize.LARGE, + checked = checkState, + onCheckedChange = { checkState = it }, + ) + + PrezelCheckbox( + size = CheckboxSize.LARGE, + checked = !checkState, + onCheckedChange = { checkState = it }, + ) + } + } + } +} + +@Composable +private fun CheckboxRowPreview( + 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, + ) + } +} diff --git a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/button/floating/PrezelFloatingMenuButton.kt b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/button/floating/PrezelFloatingMenuButton.kt index d2c1002..5b1a4b4 100644 --- a/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/button/floating/PrezelFloatingMenuButton.kt +++ b/Prezel/core/designsystem/src/main/java/com/team/prezel/core/designsystem/component/button/floating/PrezelFloatingMenuButton.kt @@ -72,7 +72,14 @@ private fun PrezelMainFloatingButton( modifier: Modifier = Modifier, ) { val currentIconSource = - if (isExpanded) DrawableIcon(resId = PrezelIcons.Cancel, contentDescTextId = R.string.close_floating_btn_content_desc) else iconSource + if (isExpanded) { + DrawableIcon( + resId = PrezelIcons.Cancel, + contentDescTextId = R.string.core_designsystem_close_floating_btn_content_desc, + ) + } else { + iconSource + } PrezelFloatingButton( iconSource = currentIconSource, diff --git a/Prezel/core/designsystem/src/main/res/values/strings.xml b/Prezel/core/designsystem/src/main/res/values/strings.xml index 370c924..519ffa1 100644 --- a/Prezel/core/designsystem/src/main/res/values/strings.xml +++ b/Prezel/core/designsystem/src/main/res/values/strings.xml @@ -1,4 +1,5 @@ - 플로팅 버튼 닫기 + 플로팅 버튼 닫기 + 체크박스