Skip to content

Commit bef1719

Browse files
jihee-devjihee-dev
committed
[NDGL-51] chore: NDGLCTAButton 추가
1 parent c0983fb commit bef1719

1 file changed

Lines changed: 215 additions & 0 deletions

File tree

‎core/ui/src/main/java/com/yapp/ndgl/core/ui/designSystem/NDGLCTAButton.kt‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
package com.yapp.ndgl.core.ui.designsystem
2+
3+
import androidx.annotation.DrawableRes
4+
import androidx.compose.foundation.background
5+
import androidx.compose.foundation.clickable
6+
import androidx.compose.foundation.layout.Arrangement
7+
import androidx.compose.foundation.layout.Row
8+
import androidx.compose.foundation.layout.fillMaxWidth
9+
import androidx.compose.foundation.layout.height
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.foundation.layout.size
12+
import androidx.compose.foundation.shape.RoundedCornerShape
13+
import androidx.compose.material3.Icon
14+
import androidx.compose.material3.Text
15+
import androidx.compose.runtime.Composable
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.graphics.vector.ImageVector
21+
import androidx.compose.ui.res.vectorResource
22+
import androidx.compose.ui.text.TextStyle
23+
import androidx.compose.ui.tooling.preview.Preview
24+
import androidx.compose.ui.unit.Dp
25+
import androidx.compose.ui.unit.dp
26+
import com.yapp.ndgl.core.ui.R
27+
import com.yapp.ndgl.core.ui.theme.NDGLTheme
28+
29+
object NDGLCTAButtonAttr {
30+
enum class Type {
31+
PRIMARY,
32+
SECONDARY,
33+
DESTRUCTIVE,
34+
}
35+
36+
enum class Size(
37+
val height: Dp,
38+
val horizontalPadding: Dp,
39+
val horizontalSpacing: Dp,
40+
val iconSize: Dp,
41+
) {
42+
LARGE(
43+
height = 56.dp,
44+
horizontalPadding = 24.dp,
45+
horizontalSpacing = 8.dp,
46+
iconSize = 24.dp,
47+
),
48+
MEDIUM(
49+
height = 40.dp,
50+
horizontalPadding = 24.dp,
51+
horizontalSpacing = 8.dp,
52+
iconSize = 20.dp,
53+
),
54+
SMALL(
55+
height = 32.dp,
56+
horizontalPadding = 12.dp,
57+
horizontalSpacing = 4.dp,
58+
iconSize = 16.dp,
59+
),
60+
}
61+
62+
enum class Status {
63+
ACTIVE,
64+
DISABLED,
65+
}
66+
}
67+
68+
@Composable
69+
fun NDGLCTAButton(
70+
type: NDGLCTAButtonAttr.Type,
71+
size: NDGLCTAButtonAttr.Size,
72+
status: NDGLCTAButtonAttr.Status,
73+
label: String,
74+
onClick: () -> Unit,
75+
modifier: Modifier = Modifier,
76+
@DrawableRes leadingIcon: Int? = null,
77+
@DrawableRes trailingIcon: Int? = null,
78+
) {
79+
val contentColor = type.contentColor(status)
80+
81+
Row(
82+
modifier = modifier
83+
.height(size.height)
84+
.clip(RoundedCornerShape(8.dp))
85+
.background(type.containerColor(status))
86+
.clickable(
87+
enabled = status != NDGLCTAButtonAttr.Status.DISABLED,
88+
onClick = onClick,
89+
)
90+
.padding(horizontal = size.horizontalPadding, vertical = 8.dp),
91+
horizontalArrangement = Arrangement.spacedBy(
92+
space = size.horizontalSpacing,
93+
alignment = Alignment.CenterHorizontally,
94+
),
95+
verticalAlignment = Alignment.CenterVertically,
96+
) {
97+
leadingIcon?.let { icon ->
98+
Icon(
99+
imageVector = ImageVector.vectorResource(icon),
100+
contentDescription = null,
101+
modifier = Modifier.size(size.iconSize),
102+
tint = contentColor,
103+
)
104+
}
105+
106+
Text(
107+
text = label,
108+
style = size.labelStyle(),
109+
color = contentColor,
110+
)
111+
112+
trailingIcon?.let { icon ->
113+
Icon(
114+
imageVector = ImageVector.vectorResource(icon),
115+
contentDescription = null,
116+
modifier = Modifier.size(size.iconSize),
117+
tint = contentColor,
118+
)
119+
}
120+
}
121+
}
122+
123+
@Composable
124+
private fun NDGLCTAButtonAttr.Type.containerColor(
125+
status: NDGLCTAButtonAttr.Status,
126+
): Color {
127+
if (status == NDGLCTAButtonAttr.Status.DISABLED) return NDGLTheme.colors.black100
128+
return when (this) {
129+
NDGLCTAButtonAttr.Type.PRIMARY -> NDGLTheme.colors.black900
130+
NDGLCTAButtonAttr.Type.SECONDARY -> NDGLTheme.colors.black50
131+
NDGLCTAButtonAttr.Type.DESTRUCTIVE -> NDGLTheme.colors.red50
132+
}
133+
}
134+
135+
@Composable
136+
private fun NDGLCTAButtonAttr.Type.contentColor(
137+
status: NDGLCTAButtonAttr.Status,
138+
): Color {
139+
if (status == NDGLCTAButtonAttr.Status.DISABLED) return NDGLTheme.colors.black300
140+
return when (this) {
141+
NDGLCTAButtonAttr.Type.PRIMARY -> NDGLTheme.colors.white
142+
NDGLCTAButtonAttr.Type.SECONDARY -> NDGLTheme.colors.black700
143+
NDGLCTAButtonAttr.Type.DESTRUCTIVE -> NDGLTheme.colors.red500
144+
}
145+
}
146+
147+
@Composable
148+
private fun NDGLCTAButtonAttr.Size.labelStyle(): TextStyle {
149+
return when (this) {
150+
NDGLCTAButtonAttr.Size.LARGE -> NDGLTheme.typography.bodyLgSemiBold
151+
NDGLCTAButtonAttr.Size.MEDIUM -> NDGLTheme.typography.bodyMdSemiBold
152+
NDGLCTAButtonAttr.Size.SMALL -> NDGLTheme.typography.bodySmSemiBold
153+
}
154+
}
155+
156+
@Preview(showBackground = true)
157+
@Composable
158+
private fun NDGLCTAButtonPrimaryLargePreview() {
159+
NDGLTheme {
160+
NDGLCTAButton(
161+
type = NDGLCTAButtonAttr.Type.PRIMARY,
162+
size = NDGLCTAButtonAttr.Size.LARGE,
163+
status = NDGLCTAButtonAttr.Status.ACTIVE,
164+
label = "Primary Large",
165+
leadingIcon = R.drawable.ic_24_pin,
166+
onClick = {},
167+
)
168+
}
169+
}
170+
171+
@Preview
172+
@Composable
173+
private fun NDGLCTAButtonSecondaryMediumPreview() {
174+
NDGLTheme {
175+
NDGLCTAButton(
176+
type = NDGLCTAButtonAttr.Type.SECONDARY,
177+
size = NDGLCTAButtonAttr.Size.MEDIUM,
178+
status = NDGLCTAButtonAttr.Status.ACTIVE,
179+
label = "Secondary Medium",
180+
leadingIcon = R.drawable.ic_20_tv,
181+
onClick = {},
182+
)
183+
}
184+
}
185+
186+
@Preview
187+
@Composable
188+
private fun NDGLCTAButtonDestructiveSmallPreview() {
189+
NDGLTheme {
190+
NDGLCTAButton(
191+
type = NDGLCTAButtonAttr.Type.DESTRUCTIVE,
192+
size = NDGLCTAButtonAttr.Size.SMALL,
193+
status = NDGLCTAButtonAttr.Status.ACTIVE,
194+
label = "Destructive Small",
195+
leadingIcon = R.drawable.ic_20_tv,
196+
onClick = {},
197+
modifier = Modifier.fillMaxWidth(),
198+
)
199+
}
200+
}
201+
202+
@Preview
203+
@Composable
204+
private fun NDGLCTAButtonDisabledPreview() {
205+
NDGLTheme {
206+
NDGLCTAButton(
207+
type = NDGLCTAButtonAttr.Type.PRIMARY,
208+
size = NDGLCTAButtonAttr.Size.LARGE,
209+
status = NDGLCTAButtonAttr.Status.DISABLED,
210+
label = "Disabled",
211+
leadingIcon = R.drawable.ic_24_pin,
212+
onClick = {},
213+
)
214+
}
215+
}

0 commit comments

Comments
 (0)