Skip to content

Commit

Permalink
Merge pull request #31 from mash-up-kr/feature/button-toast-dialog-컴포…
Browse files Browse the repository at this point in the history 
…넌트-만들기

Button, Dialog 컴포넌트 작업
  • Loading branch information
@fbghgus123
fbghgus123 authored Jun 25, 2024
2 parents 55c4935 + 5aa97dd commit a342b06
Show file tree
Hide file tree
Showing 5 changed files with 283 additions and 4 deletions.
90 changes: 90 additions & 0 deletions ...stem/src/main/java/com/mashup/dorabangs/core/designsystem/component/buttons/ButtonType.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
package com.mashup.dorabangs.core.designsystem.component.buttons

import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.mashup.dorabangs.core.designsystem.theme.BtnMaxColorTokens
import com.mashup.dorabangs.core.designsystem.theme.BtnMaxRoundTokens
import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens

object DoraButtons : ButtonType {

@Composable
override fun DoraBtnMaxFull(
modifier: Modifier,
buttonText: String,
enabled: Boolean,
onClickButton: () -> Unit,
) = DoraButton(
modifier = modifier,
buttonText = buttonText,
textStyle = DoraTypoTokens.base2Medium,
enabled = enabled,
radius = BtnMaxRoundTokens.FullButtonWidthRadius,
containerColor = BtnMaxColorTokens.ContainerColor1,
contentColor = BtnMaxColorTokens.ContentColor1,
disabledContainerColor = BtnMaxColorTokens.ContainerColor1_Off,
disabledContentColor = BtnMaxColorTokens.ContentColor_1Off,
onClickButton = onClickButton,
)

@Composable
override fun DoraMediumConfirmBtn(
modifier: Modifier,
buttonText: String,
onClickButton: () -> Unit,
) = DoraButton(
modifier = modifier,
buttonText = buttonText,
textStyle = DoraTypoTokens.caption3Medium,
enabled = true,
radius = BtnMaxRoundTokens.MediumButtonWidthRadius,
containerColor = BtnMaxColorTokens.ContainerColor1,
contentColor = BtnMaxColorTokens.ContentColor1,
disabledContainerColor = BtnMaxColorTokens.ContainerColor1_Off,
disabledContentColor = BtnMaxColorTokens.ContentColor_1Off,
onClickButton = onClickButton,
)

@Composable
override fun DoraMediumDismissBtn(
modifier: Modifier,
buttonText: String,
onClickButton: () -> Unit,
) = DoraButton(
modifier = modifier,
buttonText = buttonText,
textStyle = DoraTypoTokens.caption3Medium,
enabled = true,
radius = BtnMaxRoundTokens.MediumButtonWidthRadius,
containerColor = BtnMaxColorTokens.ContainerColor2,
contentColor = BtnMaxColorTokens.ContentColor2,
disabledContainerColor = BtnMaxColorTokens.ContainerColor1_Off,
disabledContentColor = BtnMaxColorTokens.ContentColor_1Off,
onClickButton = onClickButton,
)
}

sealed interface ButtonType {

@Composable
fun DoraBtnMaxFull(
modifier: Modifier,
buttonText: String,
enabled: Boolean,
onClickButton: () -> Unit,
)

@Composable
fun DoraMediumConfirmBtn(
modifier: Modifier,
buttonText: String,
onClickButton: () -> Unit,
)

@Composable
fun DoraMediumDismissBtn(
modifier: Modifier,
buttonText: String,
onClickButton: () -> Unit,
)
}
86 changes: 86 additions & 0 deletions ...stem/src/main/java/com/mashup/dorabangs/core/designsystem/component/buttons/DoraButton.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
package com.mashup.dorabangs.core.designsystem.component.buttons

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview

@Composable
internal fun DoraButton(
modifier: Modifier,
buttonText: String,
textStyle: TextStyle,
enabled: Boolean,
radius: RoundedCornerShape,
containerColor: Color,
contentColor: Color,
disabledContainerColor: Color,
disabledContentColor: Color,
onClickButton: () -> Unit,
) {
Button(
modifier = modifier,
colors = ButtonColors(
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor,
),
enabled = enabled,
shape = radius,
onClick = onClickButton,
) {
Text(
text = buttonText,
style = textStyle,
)
}
}

@Preview
@Composable
fun PreviewEnabledDoraBtnMax() {
DoraButtons.DoraBtnMaxFull(
modifier = Modifier.fillMaxWidth(),
enabled = true,
buttonText = "버튼",
onClickButton = {},
)
}

@Preview
@Composable
fun PreviewDisabledDoraBtnMax() {
DoraButtons.DoraBtnMaxFull(
modifier = Modifier.fillMaxWidth(),
enabled = false,
buttonText = "버튼",
onClickButton = {},
)
}

@Preview
@Composable
fun PreviewMediumPositiveBtn() {
DoraButtons.DoraMediumConfirmBtn(
modifier = Modifier.fillMaxWidth(0.5f),
buttonText = "버튼",
onClickButton = {},
)
}

@Preview
@Composable
fun PreviewMediumNegativeBtn() {
DoraButtons.DoraMediumDismissBtn(
modifier = Modifier.fillMaxWidth(0.5f),
buttonText = "버튼",
onClickButton = {},
)
}
92 changes: 92 additions & 0 deletions ...ystem/src/main/java/com/mashup/dorabangs/core/designsystem/component/dialog/DoraDialog.kt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
package com.mashup.dorabangs.core.designsystem.component.dialog

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import com.mashup.dorabangs.core.designsystem.component.buttons.DoraButtons
import com.mashup.dorabangs.core.designsystem.theme.DialogColorTokens
import com.mashup.dorabangs.core.designsystem.theme.DialogRoundTokens
import com.mashup.dorabangs.core.designsystem.theme.DoraTypoTokens

@Composable
fun DoraDialog(
modifier: Modifier = Modifier,
dialogProperties: DialogProperties = DialogProperties(),
title: String,
content: String,
confirmBtnText: String,
disMissBtnText: String,
onDisMissRequest: () -> Unit = {},
onClickConfirmBtn: () -> Unit = {},
) {
Dialog(
properties = dialogProperties,
onDismissRequest = onDisMissRequest,
) {
Column(
modifier = modifier
.background(
color = DialogColorTokens.BackgroundColor,
shape = DialogRoundTokens.Radius,
),
) {
Column(
modifier = Modifier.padding(
horizontal = 16.dp,
vertical = 30.dp,
),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
Text(
modifier = Modifier.padding(top = 30.dp),
text = title,
style = DoraTypoTokens.base1Bold,
color = DialogColorTokens.TitleColor,
)
Text(
modifier = Modifier.padding(top = 8.dp),
text = content,
style = DoraTypoTokens.caption3Medium,
color = DialogColorTokens.ContentColor,
)
}
Row(
modifier = Modifier
.padding(horizontal = 20.dp)
.padding(bottom = 20.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
DoraButtons.DoraMediumDismissBtn(
modifier = Modifier.weight(1f),
buttonText = disMissBtnText,
onClickButton = onDisMissRequest,
)
DoraButtons.DoraMediumConfirmBtn(
modifier = Modifier.weight(1f),
buttonText = confirmBtnText,
onClickButton = onClickConfirmBtn,
)
}
}
}
}

@Preview(showBackground = true)
@Composable
fun PreviewDoraDialog() = DoraDialog(
title = "Title",
content = "Text Field Text Field Text Field Text Field Text Field Text Field, Text Field Text Field Text Field",
confirmBtnText = "버튼",
disMissBtnText = "버튼",
)
14 changes: 10 additions & 4 deletions core/designsystem/src/main/java/com/mashup/dorabangs/core/designsystem/theme/Colors.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,24 @@ object DoraColorTokens {
val G3 = Color(0xFFDEE2E6)
val G2 = Color(0xFFE9ECEF)
val G1 = Color(0xFFF4F6F8)
val White = Color(0xFF000000)
val White = Color(0xFFFFFFFF)
val Alert = Color(0xFFFF5D47)
val Dimend = Color(0xB2121212)
}

object BtnMaxColorTokens {
val ContainerColor1 = DoraColorTokens.G9
val OnContainerColor1 = DoraColorTokens.G1
val ContentColor1 = DoraColorTokens.G1
val ContainerColor1_Off = DoraColorTokens.G2
val OnContainerColor_1Off = DoraColorTokens.G4
val ContentColor_1Off = DoraColorTokens.G4
val ContainerColor2 = DoraColorTokens.G1
val OnContainerColor2 = DoraColorTokens.G9
val ContentColor2 = DoraColorTokens.G9
}

object DialogColorTokens {
val BackgroundColor = DoraColorTokens.P1
val TitleColor = DoraColorTokens.G8
val ContentColor = DoraColorTokens.G5
}

object TopBarColorTokens {
Expand Down
5 changes: 5 additions & 0 deletions core/designsystem/src/main/java/com/mashup/dorabangs/core/designsystem/theme/Radius.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import androidx.compose.ui.unit.dp

object DoraRoundTokens {
val Round99 = RoundedCornerShape(99.dp)
val Round16 = RoundedCornerShape(16.dp)
val Round12 = RoundedCornerShape(12.dp)
val Round8 = RoundedCornerShape(8.dp)
val Round4 = RoundedCornerShape(4.dp)
Expand All @@ -14,3 +15,7 @@ object BtnMaxRoundTokens {
val FullButtonWidthRadius = DoraRoundTokens.Round99
val MediumButtonWidthRadius = DoraRoundTokens.Round12
}

object DialogRoundTokens {
val Radius = DoraRoundTokens.Round16
}

0 comments on commit a342b06

Please sign in to comment.