Implement selected domain UI

WordPress/src/main/java/org/wordpress/android/ui/compose/theme/AppColor.kt

@@ -46,7 +46,7 @@ object AppColor {
 
     // Jetpack Greens (Automattic Color Studio)
     @Stable
-    val JetpackGreen40 = Color(0xFF069E08)
+    val JetpackGreen30 = Color(0xFF2FB41F)
 
     @Stable
     val JetpackGreen50 = Color(0xFF008710)

WordPress/src/main/java/org/wordpress/android/ui/compose/theme/JetpackColors.kt

@@ -9,9 +9,9 @@ import androidx.compose.runtime.Composable
 @SuppressLint("ConflictingOnColor")
 val JpLightColorPalette = lightColors(
     primary = AppColor.JetpackGreen50,
-    primaryVariant = AppColor.JetpackGreen40,
+    primaryVariant = AppColor.JetpackGreen30,
     secondary = AppColor.JetpackGreen50,
-    secondaryVariant = AppColor.JetpackGreen40,
+    secondaryVariant = AppColor.JetpackGreen30,
     background = AppColor.White,
     surface = AppColor.White,
     error = AppColor.Red50,
@@ -24,9 +24,9 @@ val JpLightColorPalette = lightColors(
 
 @SuppressLint("ConflictingOnColor")
 val JpDarkColorPalette = darkColors(
-    primary = AppColor.JetpackGreen40,
+    primary = AppColor.JetpackGreen30,
     primaryVariant = AppColor.JetpackGreen50,
-    secondary = AppColor.JetpackGreen40,
+    secondary = AppColor.JetpackGreen30,
     secondaryVariant = AppColor.JetpackGreen50,
     background = AppColor.DarkGray,
     surface = AppColor.DarkGray,

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/domains/SiteCreationDomainsViewModel.kt

@@ -122,6 +122,7 @@ class SiteCreationDomainsViewModel @Inject constructor(
                 result.isError -> {
                     AppLog.e(AppLog.T.DOMAIN_REGISTRATION, "Error while fetching domain products: ${result.error}")
                 }
+
                 else -> {
                     AppLog.d(AppLog.T.DOMAIN_REGISTRATION, result.products.toString())
                     products = result.products.orEmpty().associateBy { it.productId }
@@ -323,6 +324,7 @@ class SiteCreationDomainsViewModel @Inject constructor(
                         product.isOnSale() -> Cost.OnSale(product?.combinedSaleCostDisplay.orEmpty(), domain.cost)
                         else -> Cost.Paid(domain.cost)
                     },
+                    isSelected = domain.domainName == selectedDomain?.domainName,
                     onClick = { onDomainSelected(domain) },
                     variant = when {
                         index == 0 -> Variant.Recommended
@@ -332,6 +334,7 @@ class SiteCreationDomainsViewModel @Inject constructor(
                     },
                 )
             }
+
             else -> {
                 Old.DomainUiState.AvailableDomain(
                     domainSanitizer.getName(domain.domainName),
@@ -468,6 +471,7 @@ class SiteCreationDomainsViewModel @Inject constructor(
             data class DomainUiState(
                 val domainName: String,
                 val cost: Cost,
+                val isSelected: Boolean = false,
                 val onClick: () -> Unit,
                 val variant: Variant? = null,
             ) : New(Type.DOMAIN_V2) {

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/domains/compose/DomainItem.kt

@@ -1,25 +1,36 @@
 package org.wordpress.android.ui.sitecreation.domains.compose
 
 import android.content.res.Configuration
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.Divider
+import androidx.compose.material.Icon
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color.Companion.Unspecified
 import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import org.wordpress.android.R.string
 import org.wordpress.android.ui.compose.components.SolidCircle
 import org.wordpress.android.ui.compose.theme.AppColor
 import org.wordpress.android.ui.compose.theme.AppTheme
@@ -32,26 +43,42 @@ import org.wordpress.android.ui.sitecreation.domains.SiteCreationDomainsViewMode
 import org.wordpress.android.ui.sitecreation.domains.SiteCreationDomainsViewModel.ListItemUiState.New.DomainUiState.Variant.Sale
 import org.wordpress.android.ui.sitecreation.domains.SiteCreationDomainsViewModel.ListItemUiState.New.DomainUiState.Variant.Unavailable
 
-private val SecondaryTextColor @Composable get() = MaterialTheme.colors.onSurface.copy(alpha = 0.46f)
+private val HighlightBgColor @Composable get() = MaterialTheme.colors.primary.copy(0.1f)
+private val SecondaryTextColor @Composable get() = MaterialTheme.colors.onSurface.copy(0.46f)
 private val SecondaryFontSize = 13.sp
 private val PrimaryFontSize = 17.sp
+private val StartPadding = 40.dp
+private val TitleBottomPadding = 2.dp
 
 @Composable
 fun DomainItem(uiState: DomainUiState) = with(uiState) {
-    Column {
+    Column(Modifier.background(if (isSelected) HighlightBgColor else Unspecified)) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
             modifier = Modifier
-                .clickable { onClick.invoke() }
+                .clickable(
+                    interactionSource = remember(::MutableInteractionSource),
+                    indication = rememberRipple(color = HighlightBgColor),
+                    onClick = onClick::invoke,
+                )
                 .padding(vertical = Margin.ExtraLarge.value)
                 .padding(end = Margin.ExtraLarge.value)
         ) {
             Box(
                 contentAlignment = Alignment.Center,
-                modifier = Modifier.width(Margin.ExtraMediumLarge.value)
+                modifier = Modifier.width(StartPadding)
             ) {
-                variant?.dotColor?.let {
-                    SolidCircle(size = 8.dp, colorResource(it))
+                if (isSelected) {
+                    Icon(
+                        imageVector = Icons.Default.Check,
+                        contentDescription = stringResource(string.selected),
+                        tint = MaterialTheme.colors.primary,
+                        modifier = Modifier.size(16.dp),
+                    )
+                } else {
+                    variant?.dotColor?.let {
+                        SolidCircle(size = 8.dp, colorResource(it))
+                    }
                 }
             }
             Column(verticalArrangement = Arrangement.spacedBy(2.dp), modifier = Modifier.weight(1f)) {
@@ -61,6 +88,7 @@ fun DomainItem(uiState: DomainUiState) = with(uiState) {
                     fontSize = PrimaryFontSize,
                     overflow = TextOverflow.Ellipsis,
                     maxLines = 1,
+                    modifier = Modifier.padding(bottom = TitleBottomPadding)
                 )
                 variant?.run {
                     Text(
@@ -141,6 +169,7 @@ private fun DomainItemPreview() {
                 5 -> Sale
                 else -> null
             },
+            isSelected = it == 5,
             onClick = {}
         )
     }

WordPress/src/test/java/org/wordpress/android/ui/sitecreation/domains/SiteCreationDomainsViewModelTest.kt

@@ -342,7 +342,7 @@ class SiteCreationDomainsViewModelTest : BaseUnitTest() {
 
         val suggestions = List(size) {
             DomainSuggestionResponse().apply {
-                domain_name = "$query-$it.com"
+                domain_name = if (it == 0) query else  "$query-$it.com"
                 is_free = it % 2 == 0
                 cost = if (is_free) "Free" else "$$it.00"
                 product_id = it
@@ -476,6 +476,17 @@ class SiteCreationDomainsViewModelTest : BaseUnitTest() {
         assertThat(uiDomains.map { it.variant }).containsOnlyOnce(Variant.BestAlternative)
     }
 
+    @Test
+    fun `verify selected domain is propagated to UI on click`() = testWithSuccessResultNewUi { (query) ->
+        viewModel.start()
+
+        viewModel.onQueryChanged(query)
+        advanceUntilIdle()
+        viewModel.onDomainSelected(mockDomain(query))
+
+        assertThat(uiDomains.map { it.isSelected }).containsOnlyOnce(true)
+    }
+
     // endregion
 
     // region Helpers