Feature/chips label component

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

@@ -0,0 +1,50 @@
+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 = {},
+) {
+  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),
+    )
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiColorChipPreview() {
+  var isChecked by rememberSaveable { mutableStateOf(false) }
+
+  SuwikiColorChip(
+    isChecked = isChecked,
+    onClick = { isChecked = !isChecked }
+  )
+}

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

@@ -0,0 +1,80 @@
+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.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.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+enum class SuwikiChipType {
+  ORANGE,
+  BLUE,
+  GREEN,
+}
+
+@Composable
+fun SuwikiContainedChip(
+  isChecked: Boolean,
+  onClick: () -> Unit = {},
+  type: SuwikiChipType,
+  text: String,
+) {
+  val (backgroundColor, contentColor) = when {
+    isChecked -> {
+      when (type) {
+        SuwikiChipType.ORANGE -> Color(0xFFFFF3EB) to Color(0xFFFD873B)
+        SuwikiChipType.BLUE -> Color(0xFFECEDFF) to Color(0xFF3D4EFB)
+        SuwikiChipType.GREEN -> Color(0xFFEAF8EC) to Color(0xFF2DB942)
+      }
+    }
+    else -> Color(0xFFF6F6F6) to Color(0xFF959595)
+  }
+
+  Box(
+    modifier = Modifier
+      .clip(RoundedCornerShape(5.dp))
+      .background(color = backgroundColor)
+      .clickable(onClick = onClick)
+      .height(26.dp)
+  ) {
+    Column(
+      modifier = Modifier
+        .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,
+      )
+    }
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiContainedChipPreview() {
+  var isChecked by remember { mutableStateOf(false) }
+
+  SuwikiContainedChip(
+    isChecked = isChecked,
+    onClick = { isChecked = !isChecked },
+    type = SuwikiChipType.GREEN,
+    text = "label",
+  )
+}

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

@@ -0,0 +1,78 @@
+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.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.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun SuwikiOutlinedChip(
+  text: String,
+  isChecked: Boolean,
+  onClick: () -> Unit = {},
+) {
+  val borderLineColor: Color
+  val contentColor: Color
+
+  when (isChecked) {
+    false -> {
+      borderLineColor = Color(0xFFDADADA)
+      contentColor = Color(0xFF959595)
+    }
+    true -> {
+      borderLineColor = Color(0xFF346CFD)
+      contentColor = Color(0xFF346CFD)
+    }
+  }
+
+  Box(
+    modifier = Modifier
+      .clip(RoundedCornerShape(5.dp))
+      .clickable(onClick = onClick)
+      .height(26.dp)
+      .background(color = Color(0xFFFFFFFF))
+      .border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp)),
+  ) {
+    Column(
+      modifier = Modifier
+        .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,
+      )
+    }
+  }
+}
+
+@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
+@Composable
+fun SuwikiOutlinedChipPreview() {
+  var isChecked by remember { mutableStateOf(false) }
+
+  SuwikiOutlinedChip(
+    text = "label",
+    isChecked = isChecked,
+    onClick = { isChecked = !isChecked },
+  )
+}

core/designsystem/src/main/res/drawable/ic_color_checked_chip.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M20,0L20,0A20,20 0,0 1,40 20L40,20A20,20 0,0 1,20 40L20,40A20,20 0,0 1,0 20L0,20A20,20 0,0 1,20 0z"
+      android:fillColor="#346CFD"/>
+  <path
+      android:pathData="M26.643,14.234C27.066,14.59 27.121,15.22 26.766,15.643L18.366,25.643C18.18,25.865 17.906,25.995 17.617,26C17.328,26.005 17.05,25.884 16.857,25.669L13.257,21.669C12.887,21.258 12.92,20.626 13.331,20.257C13.742,19.887 14.374,19.92 14.743,20.331L17.574,23.476L25.234,14.357C25.59,13.934 26.22,13.879 26.643,14.234Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>

core/designsystem/src/main/res/drawable/ic_color_chip.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M20,0L20,0A20,20 0,0 1,40 20L40,20A20,20 0,0 1,20 40L20,40A20,20 0,0 1,0 20L0,20A20,20 0,0 1,20 0z"
+      android:fillColor="#346CFD"/>
+</vector>

presentation/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
     <string name="title_activity_main">MainActivity</string>
-</resources>
+</resources>