feat: add WireSwitch

app/src/main/kotlin/com/wire/android/ui/common/WireSwitch.kt

@@ -0,0 +1,87 @@
+package com.wire.android.ui.common
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchColors
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import com.wire.android.ui.theme.wireColorScheme
+
+@Composable
+fun WireSwitch(
+    checked: Boolean,
+    onCheckedChange: ((Boolean) -> Unit)?,
+    modifier: Modifier = Modifier,
+    thumbContent: @Composable () -> Unit = { },
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    colors: SwitchColors = wireSwitchColors()
+) {
+    Switch(checked, onCheckedChange, modifier, thumbContent, enabled, interactionSource, colors)
+}
+
+@Composable
+fun wireSwitchColors(
+    checkedThumbColor: Color = MaterialTheme.wireColorScheme.switchEnabledThumb,
+    checkedTrackColor: Color = MaterialTheme.wireColorScheme.switchEnabledChecked,
+    checkedBorderColor: Color = Color.Transparent,
+    checkedIconColor: Color = MaterialTheme.wireColorScheme.switchEnabledChecked,
+    uncheckedThumbColor: Color = MaterialTheme.wireColorScheme.switchEnabledThumb,
+    uncheckedTrackColor: Color = MaterialTheme.wireColorScheme.switchEnabledUnchecked,
+    uncheckedBorderColor: Color = Color.Transparent,
+    uncheckedIconColor: Color = MaterialTheme.wireColorScheme.switchEnabledUnchecked,
+    disabledCheckedThumbColor: Color = MaterialTheme.wireColorScheme.switchDisabledThumb,
+    disabledCheckedTrackColor: Color = MaterialTheme.wireColorScheme.switchDisabledChecked,
+    disabledCheckedBorderColor: Color = Color.Transparent,
+    disabledCheckedIconColor: Color = MaterialTheme.wireColorScheme.switchDisabledChecked,
+    disabledUncheckedThumbColor: Color = MaterialTheme.wireColorScheme.switchDisabledThumb,
+    disabledUncheckedTrackColor: Color = MaterialTheme.wireColorScheme.switchDisabledUnchecked,
+    disabledUncheckedBorderColor: Color = Color.Transparent,
+    disabledUncheckedIconColor: Color = MaterialTheme.wireColorScheme.switchDisabledUnchecked,
+): SwitchColors = SwitchDefaults.colors(
+    checkedThumbColor = checkedThumbColor,
+    checkedTrackColor = checkedTrackColor,
+    checkedBorderColor = checkedBorderColor,
+    checkedIconColor = checkedIconColor,
+    uncheckedThumbColor = uncheckedThumbColor,
+    uncheckedTrackColor = uncheckedTrackColor,
+    uncheckedBorderColor = uncheckedBorderColor,
+    uncheckedIconColor = uncheckedIconColor,
+    disabledCheckedThumbColor = disabledCheckedThumbColor,
+    disabledCheckedTrackColor = disabledCheckedTrackColor,
+    disabledCheckedBorderColor = disabledCheckedBorderColor,
+    disabledCheckedIconColor = disabledCheckedIconColor,
+    disabledUncheckedThumbColor = disabledUncheckedThumbColor,
+    disabledUncheckedTrackColor = disabledUncheckedTrackColor,
+    disabledUncheckedBorderColor = disabledUncheckedBorderColor,
+    disabledUncheckedIconColor = disabledUncheckedIconColor
+)
+
+@Preview("Wire switch on")
+@Composable
+fun WireSwitchOnPreview() {
+    WireSwitch(checked = true, onCheckedChange = {})
+}
+
+@Preview("Wire switch off")
+@Composable
+fun WireSwitchOffPreview() {
+    WireSwitch(checked = false, onCheckedChange = {})
+}
+
+@Preview("Wire switch disabled on")
+@Composable
+fun WireSwitchDisabledOnPreview() {
+    WireSwitch(checked = true, enabled = false, onCheckedChange = {})
+}
+
+@Preview("Wire switch disabled off")
+@Composable
+fun WireSwitchDisabledOffPreview() {
+    WireSwitch(checked = false, enabled = false, onCheckedChange = {})
+}

app/src/main/kotlin/com/wire/android/ui/home/conversations/details/options/GroupConversationOptionsItem.kt

@@ -22,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import com.wire.android.R
 import com.wire.android.model.Clickable
 import com.wire.android.ui.common.ArrowRightIcon
+import com.wire.android.ui.common.WireSwitch
 import com.wire.android.ui.common.button.WireSecondaryButton
 import com.wire.android.ui.common.clickable
 import com.wire.android.ui.theme.wireColorScheme
@@ -35,7 +36,7 @@ fun GroupConversationOptionsItem(
     label: String? = null,
     titleTrailingItem: (@Composable () -> Unit)? = null,
     footer: (@Composable () -> Unit)? = null,
-    enabled: Boolean? = null,
+    switchState: SwitchState = SwitchState.None,
     titleStyle: TextStyle = MaterialTheme.wireTypography.body02,
     arrowType: ArrowType = ArrowType.CENTER_ALIGNED,
     clickable: Clickable = Clickable(enabled = false, onClick = { /* not handled */ }, onLongClick = { /* not handled */ })
@@ -64,13 +65,19 @@ fun GroupConversationOptionsItem(
                 )
                 if (titleTrailingItem != null)
                     Box(modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.spacing8x)) { titleTrailingItem() }
-                if (enabled != null)
+                if (switchState is SwitchState.Visible) {
                     Text(
-                        text = stringResource(if (enabled) R.string.label_on else R.string.label_off),
+                        text = stringResource(if (switchState.value) R.string.label_on else R.string.label_off),
                         style = MaterialTheme.wireTypography.body01,
                         color = MaterialTheme.wireColorScheme.onBackground,
                         modifier = Modifier.padding(horizontal = MaterialTheme.wireDimensions.spacing8x)
                     )
+                    WireSwitch(
+                        checked = switchState.value,
+                        enabled = switchState is SwitchState.Enabled,
+                        onCheckedChange = (switchState as? SwitchState.Enabled)?.onCheckedChange
+                    )
+                }
                 if (arrowType == ArrowType.TITLE_ALIGNED) ArrowRight()
             }
             if (subtitle != null)
@@ -96,6 +103,13 @@ enum class ArrowType {
     CENTER_ALIGNED, TITLE_ALIGNED, NONE
 }
 
+sealed class SwitchState {
+    object None : SwitchState()
+    sealed class Visible(open val value: Boolean = false) : SwitchState()
+    data class Enabled(override val value: Boolean = false, val onCheckedChange: (Boolean) -> Unit) : Visible(value)
+    data class Disabled(override val value: Boolean = false) : Visible(value)
+}
+
 @Composable
 @Preview(name = "Item with label and title")
 fun GroupConversationOptionsWithLabelAndTitlePreview() {
@@ -105,7 +119,11 @@ fun GroupConversationOptionsWithLabelAndTitlePreview() {
 @Composable
 @Preview(name = "Item with title and switch clickable")
 fun GroupConversationOptionsWithTitleAndSwitchClickablePreview() {
-    GroupConversationOptionsItem(title = "Services", enabled = true, clickable = Clickable(onClick = {}, onLongClick = {}))
+    GroupConversationOptionsItem(
+        title = "Services",
+        switchState = SwitchState.Enabled(value = true, onCheckedChange = {}),
+        clickable = Clickable(onClick = {}, onLongClick = {})
+    )
 }
 
 @Composable
@@ -131,7 +149,7 @@ fun GroupConversationOptionsWithTitleAndSubtitleAndSwitchAndFooterButtonPreview(
     GroupConversationOptionsItem(
         title = "Guests",
         subtitle = "Turn this option ON to open this conversation to people outside your team, even if they don't have Wire.",
-        enabled = false,
+        switchState = SwitchState.Disabled(false),
         footer = { WireSecondaryButton(text = "Copy link", onClick = {}, modifier = Modifier.height(32.dp), fillMaxWidth = false) },
         arrowType = ArrowType.TITLE_ALIGNED
     )

app/src/main/kotlin/com/wire/android/ui/theme/WireColorScheme.kt

@@ -32,6 +32,9 @@ data class WireColorScheme(
     val tertiaryButtonSelected: Color, val onTertiaryButtonSelected: Color,
     val tertiaryButtonSelectedOutline: Color,
     val tertiaryButtonRipple: Color,
+    val switchEnabledThumb: Color, val switchDisabledThumb: Color,
+    val switchEnabledChecked: Color, val switchDisabledChecked: Color,
+    val switchEnabledUnchecked: Color, val switchDisabledUnchecked: Color,
     val divider: Color,
     val secondaryText: Color,
     val labelText: Color,
@@ -105,6 +108,9 @@ private val LightWireColorScheme = WireColorScheme(
     tertiaryButtonSelected = WireColorPalette.LightBlue50,         onTertiaryButtonSelected = WireColorPalette.LightBlue500,
     tertiaryButtonSelectedOutline = WireColorPalette.LightBlue300,
     tertiaryButtonRipple = Color.Black,
+    switchEnabledThumb = Color.White,                               switchDisabledThumb = WireColorPalette.Gray20,
+    switchEnabledChecked = WireColorPalette.LightGreen500,          switchDisabledChecked = WireColorPalette.LightGreen200,
+    switchEnabledUnchecked = WireColorPalette.Gray70,               switchDisabledUnchecked = WireColorPalette.Gray50,
     divider = WireColorPalette.Gray40,
     secondaryText = WireColorPalette.Gray70,
     labelText = WireColorPalette.Gray80,
@@ -189,6 +195,9 @@ private val DarkWireColorScheme = WireColorScheme(
     tertiaryButtonSelected = WireColorPalette.DarkBlue50,          onTertiaryButtonSelected = WireColorPalette.DarkBlue500,
     tertiaryButtonSelectedOutline = WireColorPalette.DarkBlue300,
     tertiaryButtonRipple = Color.White,
+    switchEnabledThumb = Color.Black,                               switchDisabledThumb = WireColorPalette.Gray90,
+    switchEnabledChecked = WireColorPalette.DarkGreen500,          switchDisabledChecked = WireColorPalette.DarkGreen200,
+    switchEnabledUnchecked = WireColorPalette.Gray40,               switchDisabledUnchecked = WireColorPalette.Gray60,
     divider = WireColorPalette.Gray70,
     secondaryText = WireColorPalette.Gray40,
     labelText = WireColorPalette.Gray30,