Skip to content

Commit

Permalink
feat: add DesignSystem CheckBox
Browse files Browse the repository at this point in the history
  • Loading branch information
murjune committed Jan 30, 2025
1 parent 810c50c commit c822f74
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ import com.chipichipi.dobedobe.core.database.fixtures.fakeGoalEntities
import com.chipichipi.dobedobe.core.database.fixtures.fakeGoalEntity
import io.kotest.matchers.booleans.shouldBeTrue
import io.kotest.matchers.collections.shouldHaveSize
import io.kotest.matchers.nulls.shouldNotBeNull
import io.kotest.matchers.shouldBe
import kotlinx.coroutines.flow.first
import kotlinx.coroutines.flow.firstOrNull
import kotlinx.coroutines.test.runTest
import kotlinx.datetime.Instant
import org.junit.Before
Expand Down Expand Up @@ -66,7 +68,8 @@ class GoalDaoTest {
goalDao.insertGoal(goal)
goalDao.updateGoal(goal.copy(isCompleted = true, completedAt = Instant.DISTANT_FUTURE))
// then
val retrievedGoal: GoalEntity = goalDao.getGoal(1L).first()
val retrievedGoal: GoalEntity? = goalDao.getGoal(1L).firstOrNull()
retrievedGoal.shouldNotBeNull()
retrievedGoal.isCompleted.shouldBeTrue()
}
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,49 @@
package com.chipichipi.dobedobe.core.designsystem.component

import androidx.compose.material3.Checkbox
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.role
import androidx.compose.ui.semantics.semantics
import com.chipichipi.dobedobe.core.designsystem.icon.DobeDobeIcons
import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme

// TODO: CheckBox 컴포넌트 단순 Wrapper 임시 처리, 각 상태 디자인 정의 필요
@Composable
fun DobeDobeCheckBox(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)? = null,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
Checkbox(
checked = checked,
onCheckedChange = onCheckedChange,
IconButton(
onClick = { onCheckedChange?.invoke(!checked) },
modifier = modifier.semantics {
role = Role.Checkbox
},
enabled = enabled,
modifier = modifier,
)
) {
val iconRes = if (checked) DobeDobeIcons.Checked else DobeDobeIcons.Unchecked
Icon(
imageVector = ImageVector.vectorResource(iconRes),
contentDescription = "checked",
tint = Color.Unspecified,
)
}
}

@ThemePreviews
@Composable
private fun DobeDobeCheckBoxPreview() {
DobeDobeTheme {
Column {
DobeDobeCheckBox(checked = true, enabled = true)
DobeDobeCheckBox(checked = false, enabled = true)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ private fun DetailGoalContent(
onCheckedChange = {
onTogglePinned()
},
checkedIcon = ImageVector.vectorResource(DobeDobeIcons.Bookmark),
checkedIcon = ImageVector.vectorResource(R.drawable.ic_bookmark_gray900),
modifier = Modifier.weight(1f),
)
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,14 @@ fun GoalRow(
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 14.dp, vertical = 16.dp),
.padding(start = 6.dp, end = 14.dp),
verticalAlignment = Alignment.CenterVertically,
) {
DobeDobeCheckBox(
modifier = Modifier.size(29.dp),
checked = goal.isCompleted,
onCheckedChange = { onToggleCompleted() },
)
Spacer(modifier = Modifier.width(11.dp))
Spacer(modifier = Modifier.width(3.dp))
Text(
text = goal.title,
style = DobeDobeTheme.typography.heading2,
Expand All @@ -66,7 +65,7 @@ fun GoalRow(
modifier = Modifier
.size(24.dp, 30.dp)
.align(Alignment.Top)
.offset(x = (-10).dp, y = (-16).dp),
.offset(x = (-10).dp),
contentDescription = stringResource(R.string.feature_goal_row_check_icon_content_description),
tint = Color.Unspecified,
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.defaultMinSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
Expand All @@ -23,10 +22,12 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.unit.dp
import com.chipichipi.dobedobe.core.designsystem.component.DobeDobeCheckBox
import com.chipichipi.dobedobe.core.designsystem.component.ThemePreviews
import com.chipichipi.dobedobe.core.designsystem.icon.DobeDobeIcons
import com.chipichipi.dobedobe.core.designsystem.theme.DobeDobeTheme

@Composable
Expand All @@ -39,31 +40,27 @@ internal fun GoalToggleChip(
) {
Column(
modifier = modifier
.defaultMinSize(80.dp)
.defaultMinSize(minHeight = 90.dp)
.clip(RoundedCornerShape(8.dp))
.background(DobeDobeTheme.colors.gray100)
.clickable { onCheckedChange(!isChecked) }
.padding(8.dp),
.clickable { onCheckedChange(!isChecked) },
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
if (isChecked) {
Icon(
modifier = Modifier.size(24.dp),
imageVector = checkedIcon,
tint = DobeDobeTheme.colors.gray900,
contentDescription = "checked",
)
}
if (isChecked.not()) {
DobeDobeCheckBox(
modifier = Modifier.size(24.dp),
checked = false,
enabled = false,
)
}
val icon =
if (isChecked) {
checkedIcon
} else {
ImageVector.vectorResource(DobeDobeIcons.Unchecked)
}

Spacer(modifier = Modifier.height(11.dp))
Icon(
modifier = Modifier.size(24.dp),
imageVector = icon,
tint = Color.Unspecified,
contentDescription = "checked",
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = text,
style = DobeDobeTheme.typography.heading2,
Expand Down
9 changes: 9 additions & 0 deletions feature/goal/src/main/res/drawable/ic_bookmark_gray900.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="30dp"
android:viewportWidth="24"
android:viewportHeight="30">
<path
android:pathData="M0,0H24V26.308C24,27.896 22.238,28.851 20.907,27.983L13.092,22.886C12.429,22.453 11.571,22.453 10.908,22.886L3.093,27.983C1.762,28.851 0,27.896 0,26.308V0Z"
android:fillColor="#262C36"/>
</vector>

0 comments on commit c822f74

Please sign in to comment.