diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt new file mode 100644 index 000000000..d263ad91d --- /dev/null +++ b/core/src/main/java/com/terning/core/designsystem/component/item/ColorPalette.kt @@ -0,0 +1,98 @@ +package com.terning.core.designsystem.component.item + +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +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.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import com.terning.core.R +import com.terning.core.designsystem.theme.CalBlue1 +import com.terning.core.designsystem.theme.CalBlue2 +import com.terning.core.designsystem.theme.CalGreen1 +import com.terning.core.designsystem.theme.CalGreen2 +import com.terning.core.designsystem.theme.CalOrange1 +import com.terning.core.designsystem.theme.CalOrange2 +import com.terning.core.designsystem.theme.CalPink +import com.terning.core.designsystem.theme.CalPurple +import com.terning.core.designsystem.theme.CalRed +import com.terning.core.designsystem.theme.CalYellow +import com.terning.core.extension.noRippleClickable + +@Composable +fun ColorPalette( + modifier: Modifier = Modifier, + onColorSelected:(Color) -> Unit = {} +) { + val colorList = listOf( + CalRed, + CalOrange2, + CalGreen1, + CalBlue1, + CalPurple, + CalOrange1, + CalYellow, + CalGreen2, + CalBlue2, + CalPink + ) + + RadioButtonGroups( + modifier = modifier.size(251.dp, 84.dp), + options = colorList, + gridCellCount = 5, + onOptionSelected = { color -> + onColorSelected(color) + }, + buttonComposable = { + color, isSelected, onOptionSelected -> + ColorButton( + color = color, + isSelected = isSelected, + onColorSelected = onOptionSelected) + }, + verticalArrangementSpace = 6.dp, + horizontalArrangementSpace = 14.dp, + ) +} + +@Composable +internal fun ColorButton( + modifier: Modifier = Modifier, + color: Color, + isSelected: Boolean, + onColorSelected: (Color) -> Unit +) { + Box(modifier = modifier.size(39.dp)) { + Box( + modifier = Modifier + .size(39.dp) + .background(shape = CircleShape, color = color) + .noRippleClickable { + onColorSelected(color) + }, + contentAlignment = Alignment.Center + ) { + if (isSelected) { + Image( + painter = painterResource(id = R.drawable.ic_color_check), + contentDescription = "" + ) + } + } + } +} + + +@Preview(showBackground = true) +@Composable +fun ColorPalettePreview() { + ColorPalette() +} + diff --git a/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt b/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt new file mode 100644 index 000000000..3ed2d3919 --- /dev/null +++ b/core/src/main/java/com/terning/core/designsystem/component/item/RadioButtonGroups.kt @@ -0,0 +1,45 @@ +package com.terning.core.designsystem.component.item + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.lazy.grid.GridCells +import androidx.compose.foundation.lazy.grid.LazyVerticalGrid +import androidx.compose.foundation.lazy.grid.items +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.Modifier +import androidx.compose.ui.unit.Dp + +@Composable +fun RadioButtonGroups( + options: List, + buttonComposable: @Composable (T, Boolean, (T) -> Unit) -> Unit, + gridCellCount: Int, + verticalArrangementSpace: Dp, + horizontalArrangementSpace: Dp, + modifier: Modifier = Modifier, + onOptionSelected: (T) -> Unit = {}, + +) { + var selectedOption by remember { mutableStateOf(options[0]) } + + LazyVerticalGrid( + columns = GridCells.Fixed(gridCellCount), + verticalArrangement = Arrangement.spacedBy(verticalArrangementSpace), + horizontalArrangement = Arrangement.spacedBy(horizontalArrangementSpace), + modifier = modifier + ) { + items(options) { option -> + buttonComposable( + option, + (selectedOption == option), + ) { + selectedOption = option + onOptionSelected(option) + } + } + } +} + diff --git a/core/src/main/java/com/terning/core/designsystem/theme/Color.kt b/core/src/main/java/com/terning/core/designsystem/theme/Color.kt index e9ed4d1be..32839d476 100644 --- a/core/src/main/java/com/terning/core/designsystem/theme/Color.kt +++ b/core/src/main/java/com/terning/core/designsystem/theme/Color.kt @@ -31,12 +31,12 @@ val ToastGrey = Color(0XFF666666) // Calendar Color val CalRed = Color(0xFFED4E54) val CalOrange1 = Color(0xFFEE7647) -val CalOrange2 = Color(0xFF5397F3) +val CalOrange2 = Color(0xFFF3A649) val CalYellow = Color(0xFFF5E660) val CalGreen1 = Color(0xFFC4E953) val CalGreen2 = Color(0xFF84D558) val CalBlue1 = Color(0xFF45D0CC) -val CalBlue2 = Color(0xFF4119F2) +val CalBlue2 = Color(0xFF4AA9F2) val CalPurple = Color(0xFF9B64E2) val CalPink = Color(0xFFF260AC) diff --git a/core/src/main/res/drawable/ic_color_check.xml b/core/src/main/res/drawable/ic_color_check.xml new file mode 100644 index 000000000..7f91e1bdc --- /dev/null +++ b/core/src/main/res/drawable/ic_color_check.xml @@ -0,0 +1,9 @@ + + +