Add filter chip component

Co-Authored-By: Boban Sijuk <49131853+boki91@users.noreply.github.com>

3 files changed, 84 insertions, 0 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
new file mode 100644
index 0000000000..0443a7267e
--- /dev/null
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/FilterChip.kt
@@ -0,0 +1,65 @@
+package net.mullvad.mullvadvpn.compose.component
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.FilterChipDefaults
+import androidx.compose.material3.MaterialTheme
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import net.mullvad.mullvadvpn.R
+import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue
+import net.mullvad.mullvadvpn.lib.theme.shape.chipShape
+
+@Preview
+@Composable
+private fun PreviewMullvadFilterChip() {
+    AppTheme {
+        MullvadFilterChip(
+            text = stringResource(id = R.string.number_of_providers),
+            onRemoveClick = {}
+        )
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun MullvadFilterChip(text: String, onRemoveClick: () -> Unit) {
+    FilterChip(
+        modifier = Modifier.padding(vertical = Dimens.chipVerticalPadding),
+        shape = MaterialTheme.shapes.chipShape,
+        colors = FilterChipDefaults.filterChipColors(containerColor = MullvadBlue),
+        border =
+            FilterChipDefaults.filterChipBorder(
+                borderColor = Color.Transparent,
+                disabledBorderColor = Color.Transparent
+            ),
+        selected = false,
+        onClick = {},
+        label = {
+            Text(
+                text = text,
+                color = MaterialTheme.colorScheme.onPrimary,
+                style = MaterialTheme.typography.labelMedium
+            )
+            Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))
+            Image(
+                painter = painterResource(id = R.drawable.icon_close),
+                contentDescription = null,
+                modifier = Modifier.size(Dimens.smallIconSize).clickable { onRemoveClick() }
+            )
+        }
+    )
+}
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
index f0eea30fa6..7022607416 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/dimensions/Dimensions.kt
@@ -18,7 +18,10 @@ data class Dimensions(
     val cellStartPadding: Dp = 22.dp,
     val cellTopPadding: Dp = 6.dp,
     val cellVerticalSpacing: Dp = 14.dp,
+    val checkBoxSize: Dp = 24.dp,
     val chevronMargin: Dp = 4.dp,
+    val chipSpace: Dp = 8.dp,
+    val chipVerticalPadding: Dp = 4.dp,
     val circularProgressBarLargeSize: Dp = 44.dp,
     val circularProgressBarLargeStrokeWidth: Dp = 6.dp,
     val circularProgressBarMediumSize: Dp = 32.dp,
@@ -32,6 +35,7 @@ data class Dimensions(
     val dialogIconHeight: Dp = 44.dp,
     val dialogIconSize: Dp = 48.dp,
     val expandableCellChevronSize: Dp = 30.dp,
+    val filterTittlePadding: Dp = 4.dp,
     val iconFailSuccessTopMargin: Dp = 30.dp,
     val iconHeight: Dp = 44.dp,
     val indentedCellStartPadding: Dp = 38.dp,
@@ -58,9 +62,11 @@ data class Dimensions(
     val searchFieldHeight: Dp = 42.dp,
     val searchFieldHorizontalPadding: Dp = 22.dp,
     val searchIconSize: Dp = 24.dp,
+    val selectFilterTitlePadding: Dp = 12.dp,
     val selectLocationTitlePadding: Dp = 12.dp,
     val selectableCellTextMargin: Dp = 12.dp,
     val sideMargin: Dp = 22.dp,
+    val smallIconSize: Dp = 16.dp,
     val smallPadding: Dp = 8.dp,
     val spacingAboveButton: Dp = 22.dp,
     val successIconVerticalPadding: Dp = 26.dp,
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt
new file mode 100644
index 0000000000..501cb72946
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/shape/Shape.kt
@@ -0,0 +1,13 @@
+package net.mullvad.mullvadvpn.lib.theme.shape
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Shapes
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.dp
+
+val Shapes.chipShape: Shape
+    @Composable
+    get() {
+        return RoundedCornerShape(8.dp)
+    }