Add AccountChip (#1590)

auth/composables/api/current.api

@@ -1,6 +1,11 @@
 // Signature format: 4.0
 package com.google.android.horologist.auth.composables.chips {
 
+  public final class AccountChipKt {
+    method @androidx.compose.runtime.Composable public static void AccountChip(com.google.android.horologist.auth.composables.model.AccountUiModel account, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? defaultAvatar, optional boolean largeAvatar, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
+    method @androidx.compose.runtime.Composable public static void AccountChip(String email, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? avatar, optional Object? defaultAvatar, optional boolean largeAvatar, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
+  }
+
   public final class CreateAccountChipKt {
     method @androidx.compose.runtime.Composable public static void CreateAccountChip(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional String label, optional boolean largeIconSpace, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
   }

auth/composables/src/debug/java/com/google/android/horologist/auth/composables/chips/AccountChipPreview.kt

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.android.horologist.auth.composables.chips
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+
+@Preview(
+    backgroundColor = 0xff000000,
+    showBackground = true
+)
+@Composable
+fun AccountChipPreview() {
+    AccountChip(
+        email = "[email protected]",
+        onClick = {}
+    )
+}
+
+@Preview(
+    backgroundColor = 0xff000000,
+    showBackground = true
+)
+@Composable
+fun AccountChipPreviewNoAvatar() {
+    AccountChip(
+        email = "[email protected]",
+        onClick = {},
+        defaultAvatar = null
+    )
+}

auth/composables/src/main/java/com/google/android/horologist/auth/composables/chips/AccountChip.kt

@@ -0,0 +1,99 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.android.horologist.auth.composables.chips
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.AccountCircle
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.style.LineBreak
+import androidx.wear.compose.material.ChipColors
+import androidx.wear.compose.material.ChipDefaults
+import androidx.wear.compose.material.MaterialTheme
+import com.google.android.horologist.auth.composables.model.AccountUiModel
+import com.google.android.horologist.compose.material.Chip
+
+/**
+ * A [Chip] to display the [AccountUiModel]'s email address and avatar.
+ *
+ * The email text has optimised line break parameters, in order to display as much text as it can.
+ */
+@Composable
+public fun AccountChip(
+    account: AccountUiModel,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    defaultAvatar: Any? = Icons.Default.AccountCircle,
+    largeAvatar: Boolean = true,
+    placeholder: Painter? = null,
+    colors: ChipColors = ChipDefaults.primaryChipColors(),
+    enabled: Boolean = true
+) {
+    AccountChip(
+        email = account.email,
+        onClick = onClick,
+        modifier = modifier,
+        avatar = account.avatar,
+        defaultAvatar = defaultAvatar,
+        largeAvatar = largeAvatar,
+        placeholder = placeholder,
+        colors = colors,
+        enabled = enabled
+    )
+}
+
+/**
+ * A [Chip] to display an email address and avatar.
+ *
+ * The email text has optimised line break parameters, in order to display as much text as it can.
+ */
+@Composable
+public fun AccountChip(
+    email: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    avatar: Any? = null,
+    defaultAvatar: Any? = Icons.Default.AccountCircle,
+    largeAvatar: Boolean = true,
+    placeholder: Painter? = null,
+    colors: ChipColors = ChipDefaults.primaryChipColors(),
+    enabled: Boolean = true
+) {
+    MaterialTheme(
+        typography = MaterialTheme.typography.copy(
+            button = MaterialTheme.typography.button.copy(
+                lineBreak = LineBreak(
+                    strategy = LineBreak.Strategy.Balanced,
+                    strictness = LineBreak.Strictness.Normal,
+                    wordBreak = LineBreak.WordBreak.Default
+                )
+            )
+        )
+    ) {
+        Chip(
+            label = email,
+            onClick = onClick,
+            modifier = modifier,
+            icon = avatar ?: defaultAvatar,
+            largeIcon = largeAvatar,
+            placeholder = placeholder,
+            colors = colors,
+            enabled = enabled
+        )
+    }
+}

auth/composables/src/main/java/com/google/android/horologist/auth/composables/screens/SelectAccountScreen.kt

@@ -24,13 +24,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.LineBreak
 import androidx.compose.ui.unit.dp
 import androidx.wear.compose.material.ChipDefaults
+import androidx.wear.compose.material.MaterialTheme
 import com.google.android.horologist.auth.composables.R
+import com.google.android.horologist.auth.composables.chips.AccountChip
 import com.google.android.horologist.auth.composables.model.AccountUiModel
 import com.google.android.horologist.compose.layout.ScalingLazyColumn
 import com.google.android.horologist.compose.layout.ScalingLazyColumnState
-import com.google.android.horologist.compose.material.Chip
 import com.google.android.horologist.compose.material.Title
 
 private const val HORIZONTAL_PADDING_SCREEN_PERCENTAGE = 0.052
@@ -62,14 +64,24 @@ public fun SelectAccountScreen(
 
         items(accounts.size) { index ->
             val account = accounts[index]
-
-            Chip(
-                label = account.email,
-                icon = account.avatar ?: defaultAvatar,
-                largeIcon = true,
-                onClick = { onAccountClicked(index, account) },
-                colors = ChipDefaults.secondaryChipColors()
-            )
+            MaterialTheme(
+                typography = MaterialTheme.typography.copy(
+                    button = MaterialTheme.typography.button.copy(
+                        lineBreak = LineBreak(
+                            strategy = LineBreak.Strategy.Balanced,
+                            strictness = LineBreak.Strictness.Normal,
+                            wordBreak = LineBreak.WordBreak.Default
+                        )
+                    )
+                )
+            ) {
+                AccountChip(
+                    account = account,
+                    onClick = { onAccountClicked(index, account) },
+                    colors = ChipDefaults.secondaryChipColors(),
+                    defaultAvatar = defaultAvatar
+                )
+            }
         }
     }
 }

auth/composables/src/test/java/com/google/android/horologist/auth/composables/chips/AccountChipTest.kt

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2022 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.android.horologist.auth.composables.chips
+
+import androidx.wear.compose.material.ChipDefaults
+import com.google.android.horologist.screenshots.ScreenshotBaseTest
+import org.junit.Test
+
+class AccountChipTest : ScreenshotBaseTest() {
+
+    @Test
+    fun default() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {}
+            )
+        }
+    }
+
+    @Test
+    fun disabled() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {},
+                enabled = false
+            )
+        }
+    }
+
+    @Test
+    fun withSmallAvatar() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {},
+                largeAvatar = false
+            )
+        }
+    }
+
+    @Test
+    fun withSecondaryChipType() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {},
+                colors = ChipDefaults.secondaryChipColors()
+            )
+        }
+    }
+
+    @Test
+    fun withLongEmailAddress() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {}
+            )
+        }
+    }
+
+    @Test
+    fun withEmailAddressStartingWithSingleLetterAndDot() {
+        screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
+            AccountChip(
+                email = "[email protected]",
+                onClick = {}
+            )
+        }
+    }
+}

auth/composables/src/test/java/com/google/android/horologist/auth/composables/chips/CreateAccountChipTest.kt

@@ -44,9 +44,7 @@ class CreateAccountChipTest : ScreenshotBaseTest() {
         screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
             CreateAccountChip(
                 onClick = {},
-                largeIconSpace = true,
-                colors = ChipDefaults.secondaryChipColors(),
-                enabled = false
+                largeIconSpace = true
             )
         }
     }

compose-material/src/main/java/com/google/android/horologist/compose/material/Chip.kt

@@ -41,7 +41,6 @@ import androidx.wear.compose.material.ChipColors
 import androidx.wear.compose.material.ChipDefaults
 import androidx.wear.compose.material.Icon
 import androidx.wear.compose.material.LocalContentAlpha
-import androidx.wear.compose.material.MaterialTheme
 import androidx.wear.compose.material.Text
 import coil.compose.rememberAsyncImagePainter
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
@@ -180,8 +179,7 @@ public fun Chip(
                 modifier = Modifier.fillMaxWidth(),
                 textAlign = if (hasSecondaryLabel || hasIcon) TextAlign.Start else TextAlign.Center,
                 overflow = TextOverflow.Ellipsis,
-                maxLines = if (hasSecondaryLabel) 1 else 2,
-                style = MaterialTheme.typography.button
+                maxLines = if (hasSecondaryLabel) 1 else 2
             )
         }
 
@@ -191,8 +189,7 @@ public fun Chip(
                 Text(
                     text = secondaryLabel,
                     overflow = TextOverflow.Ellipsis,
-                    maxLines = 1,
-                    style = MaterialTheme.typography.caption2
+                    maxLines = 1
                 )
             }
         }