Skip to content

Commit efce6ab

Browse files
BEEEAM-JBEEEAM-J
authored
Merge pull request #41 from uswLectureEvaluation/refactor/DesignSystem-ChipsAndLabel
Feature/chips label component
2 parents 6760c45 + 0b0d704 commit efce6ab

File tree

6 files changed

+213
-1
lines changed

6 files changed

+213
-1
lines changed

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package com.suwiki.core.designsystem.component.chips
2+
3+
import androidx.compose.foundation.Image
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.size
7+
import androidx.compose.runtime.Composable
8+
import androidx.compose.runtime.getValue
9+
import androidx.compose.runtime.mutableStateOf
10+
import androidx.compose.runtime.saveable.rememberSaveable
11+
import androidx.compose.runtime.setValue
12+
import androidx.compose.ui.Modifier
13+
import androidx.compose.ui.res.painterResource
14+
import androidx.compose.ui.tooling.preview.Preview
15+
import androidx.compose.ui.unit.dp
16+
import com.suwiki.core.designsystem.R
17+
18+
@Composable
19+
fun SuwikiColorChip(
20+
isChecked: Boolean,
21+
onClick: () -> Unit = {},
22+
) {
23+
Box(
24+
modifier = Modifier.size(40.dp),
25+
) {
26+
Image(
27+
painter = painterResource(id = if (isChecked) R.drawable.ic_color_checked_chip else R.drawable.ic_color_chip),
28+
contentDescription = "",
29+
modifier = Modifier.clickable(onClick = onClick),
30+
)
31+
}
32+
}
33+
34+
@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
35+
@Composable
36+
fun SuwikiColorChipPreview() {
37+
var isChecked by rememberSaveable { mutableStateOf(false) }
38+
39+
SuwikiColorChip(
40+
isChecked = isChecked,
41+
onClick = { isChecked = !isChecked },
42+
)
43+
}

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
package com.suwiki.core.designsystem.component.chips
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.clickable
5+
import androidx.compose.foundation.layout.Box
6+
import androidx.compose.foundation.layout.height
7+
import androidx.compose.foundation.layout.padding
8+
import androidx.compose.foundation.shape.RoundedCornerShape
9+
import androidx.compose.material3.Text
10+
import androidx.compose.runtime.Composable
11+
import androidx.compose.runtime.getValue
12+
import androidx.compose.runtime.mutableStateOf
13+
import androidx.compose.runtime.remember
14+
import androidx.compose.runtime.setValue
15+
import androidx.compose.ui.Alignment
16+
import androidx.compose.ui.Modifier
17+
import androidx.compose.ui.draw.clip
18+
import androidx.compose.ui.graphics.Color
19+
import androidx.compose.ui.tooling.preview.Preview
20+
import androidx.compose.ui.unit.dp
21+
import androidx.compose.ui.unit.sp
22+
enum class SuwikiChipType {
23+
ORANGE,
24+
BLUE,
25+
GREEN,
26+
}
27+
28+
@Composable
29+
fun SuwikiContainedChip(
30+
isChecked: Boolean,
31+
onClick: () -> Unit = {},
32+
type: SuwikiChipType,
33+
text: String,
34+
) {
35+
val (backgroundColor, contentColor) = if (isChecked) {
36+
when (type) {
37+
SuwikiChipType.ORANGE -> Color(0xFFFFF3EB) to Color(0xFFFD873B)
38+
SuwikiChipType.BLUE -> Color(0xFFECEDFF) to Color(0xFF3D4EFB)
39+
SuwikiChipType.GREEN -> Color(0xFFEAF8EC) to Color(0xFF2DB942)
40+
}
41+
} else {
42+
Color(0xFFF6F6F6) to Color(0xFF959595)
43+
}
44+
45+
Box(
46+
modifier = Modifier
47+
.clip(RoundedCornerShape(5.dp))
48+
.background(color = backgroundColor)
49+
.clickable(onClick = onClick)
50+
.height(26.dp),
51+
) {
52+
Box(
53+
modifier = Modifier
54+
.padding(vertical = 4.dp, horizontal = 6.dp)
55+
.height(18.dp),
56+
) {
57+
Text(
58+
text = text,
59+
color = contentColor,
60+
fontSize = 12.sp,
61+
modifier = Modifier.align(Alignment.Center),
62+
)
63+
}
64+
}
65+
}
66+
67+
@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
68+
@Composable
69+
fun SuwikiContainedChipPreview() {
70+
var isChecked by remember { mutableStateOf(false) }
71+
72+
SuwikiContainedChip(
73+
isChecked = isChecked,
74+
onClick = { isChecked = !isChecked },
75+
type = SuwikiChipType.GREEN,
76+
text = "label",
77+
)
78+
}

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
package com.suwiki.core.designsystem.component.chips
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.border
5+
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.Box
7+
import androidx.compose.foundation.layout.height
8+
import androidx.compose.foundation.layout.padding
9+
import androidx.compose.foundation.shape.RoundedCornerShape
10+
import androidx.compose.material3.Text
11+
import androidx.compose.runtime.Composable
12+
import androidx.compose.runtime.getValue
13+
import androidx.compose.runtime.mutableStateOf
14+
import androidx.compose.runtime.remember
15+
import androidx.compose.runtime.setValue
16+
import androidx.compose.ui.Alignment
17+
import androidx.compose.ui.Modifier
18+
import androidx.compose.ui.draw.clip
19+
import androidx.compose.ui.graphics.Color
20+
import androidx.compose.ui.tooling.preview.Preview
21+
import androidx.compose.ui.unit.dp
22+
import androidx.compose.ui.unit.sp
23+
24+
@Composable
25+
fun SuwikiOutlinedChip(
26+
text: String,
27+
isChecked: Boolean,
28+
onClick: () -> Unit = {},
29+
) {
30+
val (borderLineColor, contentColor) = if (isChecked) {
31+
Color(0xFFDADADA) to Color(0xFF959595)
32+
} else {
33+
Color(0xFF346CFD) to Color(0xFF346CFD)
34+
}
35+
36+
Box(
37+
modifier = Modifier
38+
.clip(RoundedCornerShape(5.dp))
39+
.clickable(onClick = onClick)
40+
.height(26.dp)
41+
.background(color = Color(0xFFFFFFFF))
42+
.border(width = 1.dp, color = borderLineColor, shape = RoundedCornerShape(5.dp)),
43+
) {
44+
Box(
45+
modifier = Modifier
46+
.padding(vertical = 4.dp, horizontal = 6.dp)
47+
.height(18.dp),
48+
) {
49+
Text(
50+
text = text,
51+
color = contentColor,
52+
fontSize = 12.sp,
53+
modifier = Modifier.align(Alignment.Center),
54+
)
55+
}
56+
}
57+
}
58+
59+
@Preview(showBackground = true, backgroundColor = 0xFFFFFF)
60+
@Composable
61+
fun SuwikiOutlinedChipPreview() {
62+
var isChecked by remember { mutableStateOf(false) }
63+
64+
SuwikiOutlinedChip(
65+
text = "label",
66+
isChecked = isChecked,
67+
onClick = { isChecked = !isChecked },
68+
)
69+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="40dp"
3+
android:height="40dp"
4+
android:viewportWidth="40"
5+
android:viewportHeight="40">
6+
<path
7+
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"
8+
android:fillColor="#346CFD"/>
9+
<path
10+
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"
11+
android:fillColor="#ffffff"
12+
android:fillType="evenOdd"/>
13+
</vector>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
2+
android:width="40dp"
3+
android:height="40dp"
4+
android:viewportWidth="40"
5+
android:viewportHeight="40">
6+
<path
7+
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"
8+
android:fillColor="#346CFD"/>
9+
</vector>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<resources>
22
<string name="title_activity_main">MainActivity</string>
3-
</resources>
3+
</resources>

0 commit comments

Comments
 (0)