Feature/chips label component

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiColorChip.kt

@@ -1,24 +1,40 @@
 package com.suwiki.core.designsystem.component.chips
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.suwiki.core.designsystem.R
 
 @Composable
 fun SuwikiColorChip(
   isChecked: Boolean,
   onClick: () -> Unit = {},
 ) {
-  when (isChecked) {
-    true -> {
-      SuwikiCheckedColorChip(onClick = onClick)
-    }
-    false -> {
-      SuwikiNonCheckedColorChip(onClick = onClick)
-    }
+  Box(
+    modifier = Modifier.size(40.dp),
+  ) {
+    Image(
+      painter = when (isChecked) {
+        true -> {
+          painterResource(id = R.drawable.ic_color_checked_chip)
+        }
+        false -> {
+          painterResource(id = R.drawable.ic_color_chip)
+        }
+      },
+      contentDescription = "",
+      modifier = Modifier.clickable(onClick = onClick),
+    )
   }
 }
 

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiContainedChip.kt

@@ -2,16 +2,18 @@ package com.suwiki.core.designsystem.component.chips
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 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.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -22,7 +24,6 @@ enum class SuwikiChipType {
   ORANGE,
   BLUE,
   GREEN,
-//  DISABLE
 }
 
 @Composable
@@ -32,46 +33,36 @@ fun SuwikiContainedChip(
   type: SuwikiChipType,
   text: String,
 ) {
-  val backgroundColor: Color
-  val contentColor: Color
-
-  when (isChecked) {
-    true -> {
+  val (backgroundColor, contentColor) = when {
+    isChecked -> {
       when (type) {
-        SuwikiChipType.ORANGE -> {
-          backgroundColor = Color(0xFFFFF3EB)
-          contentColor = Color(0xFFFD873B)
-        }
-        SuwikiChipType.BLUE -> {
-          backgroundColor = Color(0xFFECEDFF)
-          contentColor = Color(0xFF3D4EFB)
-        }
-        SuwikiChipType.GREEN -> {
-          backgroundColor = Color(0xFFEAF8EC)
-          contentColor = Color(0xFF2DB942)
-        }
+        SuwikiChipType.ORANGE -> Color(0xFFFFF3EB) to Color(0xFFFD873B)
+        SuwikiChipType.BLUE -> Color(0xFFECEDFF) to Color(0xFF3D4EFB)
+        SuwikiChipType.GREEN -> Color(0xFFEAF8EC) to Color(0xFF2DB942)
       }
     }
-    false -> {
-      backgroundColor = Color(0xFFF6F6F6)
-      contentColor = Color(0xFF959595)
-    }
+    else -> Color(0xFFF6F6F6) to Color(0xFF959595)
   }
 
   Box(
     modifier = Modifier
       .clip(RoundedCornerShape(5.dp))
       .background(color = backgroundColor)
       .clickable(onClick = onClick)
-      .size(41.dp, 26.dp),
+      .height(26.dp)
   ) {
-    Text(
-      text = text,
-      color = contentColor,
+    Column(
       modifier = Modifier
-        .align(Alignment.Center),
-      fontSize = 12.sp,
-    )
+        .padding(top = 4.dp, bottom = 4.dp, start = 6.dp, end = 6.dp)
+        .height(18.dp),
+      verticalArrangement = Arrangement.Center,
+    ) {
+      Text(
+        text = text,
+        color = contentColor,
+        fontSize = 12.sp,
+      )
+    }
   }
 }
 

core/designsystem/src/main/java/com/suwiki/core/designsystem/component/chips/SuwikiOutlinedChip.kt

@@ -3,16 +3,18 @@ package com.suwiki.core.designsystem.component.chips
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 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.draw.clip
 import androidx.compose.ui.graphics.Color
@@ -44,17 +46,22 @@ fun SuwikiOutlinedChip(
     modifier = Modifier
       .clip(RoundedCornerShape(5.dp))
       .clickable(onClick = onClick)
-      .size(41.dp, 26.dp)
+      .height(26.dp)
       .background(color = Color(0xFFFFFFFF))
       .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp)),
   ) {
-    Text(
-      text = text,
-      color = contentColor,
+    Column(
       modifier = Modifier
-        .align(Alignment.Center),
-      fontSize = 12.sp,
-    )
+        .padding(top = 4.dp, bottom = 4.dp, start = 6.dp, end = 6.dp)
+        .height(18.dp),
+      verticalArrangement = Arrangement.Center,
+    ) {
+      Text(
+        text = text,
+        color = contentColor,
+        fontSize = 12.sp,
+      )
+    }
   }
 }