[MOB-1757] FloatingBanner 추가 (#54)

* outlineBorder 추가 * outlineBorder 1px 보정 추가 * url 오버로딩 추가 * 컨플릭트 잘못 수정된 부분 수정 * url 오버로딩 추가 * rebase 수정 * BezierFloatingBanner 추가 * ActionType 안보이던 현상 수정 * Icon이 아니라 IconColor를 변경할 수 있도록 변경 * onAction 스펙 추가
channel-io · Aug 26, 2024 · bb4cb4c · bb4cb4c
1 parent cc056a1
commit bb4cb4c
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/...src/main/java/io/channel/bezier/compose/component/floating_banner/BezierFloatingBanner.kt b/...src/main/java/io/channel/bezier/compose/component/floating_banner/BezierFloatingBanner.kt
@@ -0,0 +1,115 @@
+package io.channel.bezier.compose.component.floating_banner
+
+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.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+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 io.channel.bezier.BezierIcon
+import io.channel.bezier.BezierIcons
+import io.channel.bezier.BezierTheme
+import io.channel.bezier.compose.color_v2.BezierColor
+import io.channel.bezier.compose.component.floating_banner.properties.BezierFloatingBannerActionType
+import io.channel.bezier.compose.component.icon_button.BezierIconButton
+import io.channel.bezier.compose.component.icon_button.properties.BezierIconButtonColor
+import io.channel.bezier.compose.component.icon_button.properties.BezierIconButtonShape
+import io.channel.bezier.compose.component.icon_button.properties.BezierIconButtonSize
+import io.channel.bezier.compose.component.icon_button.properties.BezierIconButtonVariant
+import io.channel.bezier.compose.component.inner_banner.properties.BezierInnerBannerActionType
+import io.channel.bezier.compose.foundation.ShadowStyle
+import io.channel.bezier.compose.foundation.bezierShadow
+import io.channel.bezier.icon.InfoFilled
+
+@Composable
+fun BezierFloatingBanner(
+        description: String,
+        onAction: () -> Unit,
+        actionType: BezierFloatingBannerActionType,
+        modifier: Modifier = Modifier,
+        iconColor: BezierColor = BezierTheme.colorSchemes.fgBlackDark,
+) {
+    val shape = RoundedCornerShape(14.dp)
+
+    Row(
+            modifier = modifier
+                    .bezierShadow(
+                            style = ShadowStyle.Shadow3,
+                            shape = shape,
+                    )
+                    .clip(shape)
+                    .background(BezierTheme.colorSchemes.bgGreyLighter.color)
+                    .clickable(enabled = actionType == BezierFloatingBannerActionType.ChevronIcon) {
+                        onAction()
+                    }
+                    .padding(8.dp),
+    ) {
+        Row(
+                modifier = Modifier
+                        .weight(1f)
+                        .padding(horizontal = 6.dp),
+                horizontalArrangement = Arrangement.spacedBy(6.dp),
+        ) {
+            Icon(
+                    modifier = Modifier
+                            .padding(vertical = 6.dp)
+                            .size(20.dp),
+                    imageVector = BezierIcons.InfoFilled.imageVector,
+                    contentDescription = BezierIcons.InfoFilled.imageVector.name,
+                    tint = iconColor.color,
+            )
+
+            Text(
+                    modifier = Modifier
+                            .weight(1f)
+                            .padding(vertical = 5.dp),
+                    text = description,
+                    style = BezierTheme.typography.body2Regular,
+                    color = BezierTheme.colorSchemes.fgBlackDarkest.color,
+            )
+        }
+
+        BezierIconButton(
+                icon = actionType.icon,
+                size = BezierIconButtonSize.Small,
+                variant = BezierIconButtonVariant.Tertiary,
+                color = BezierIconButtonColor.LightGrey,
+                shape = BezierIconButtonShape.Rectangle,
+                onClick = if (actionType == BezierFloatingBannerActionType.CloseButton) {
+                    { onAction() }
+                } else {
+                    null
+                },
+        )
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+fun BezierFloatingBannerPreview() {
+    BezierTheme {
+        Box(
+                modifier = Modifier.background(Color.White),
+        ) {
+            BezierFloatingBanner(
+                    modifier = Modifier
+                            .fillMaxWidth()
+                            .padding(16.dp),
+                    description = "description",
+                    onAction = {},
+                    actionType = BezierFloatingBannerActionType.CloseButton,
+            )
+        }
+    }
+}
diff --git a/...nel/bezier/compose/component/floating_banner/properties/BezierFloatingBannerActionType.kt b/...nel/bezier/compose/component/floating_banner/properties/BezierFloatingBannerActionType.kt
@@ -0,0 +1,17 @@
+package io.channel.bezier.compose.component.floating_banner.properties
+
+import io.channel.bezier.BezierIcon
+import io.channel.bezier.BezierIcons
+import io.channel.bezier.icon.CancelSmall
+import io.channel.bezier.icon.ChevronSmallRight
+
+enum class BezierFloatingBannerActionType(
+        internal val icon: BezierIcon,
+) {
+    CloseButton(
+            icon = BezierIcons.CancelSmall,
+    ),
+    ChevronIcon(
+            icon = BezierIcons.ChevronSmallRight,
+    ),
+}