Create reusable supporting content composable (#6075)

app/src/main/kotlin/com/x8bit/bitwarden/ui/auth/feature/vaultunlock/VaultUnlockScreen.kt

@@ -34,7 +34,6 @@ import androidx.compose.ui.unit.dp
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.bitwarden.ui.platform.base.util.EventsEffect
-import com.bitwarden.ui.platform.base.util.cardStyle
 import com.bitwarden.ui.platform.base.util.standardHorizontalMargin
 import com.bitwarden.ui.platform.components.account.BitwardenAccountActionItem
 import com.bitwarden.ui.platform.components.account.BitwardenAccountSwitcher
@@ -49,6 +48,7 @@ import com.bitwarden.ui.platform.components.dialog.BitwardenLoadingDialog
 import com.bitwarden.ui.platform.components.field.BitwardenPasswordField
 import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.components.scaffold.BitwardenScaffold
+import com.bitwarden.ui.platform.components.support.BitwardenSupportingContent
 import com.bitwarden.ui.platform.resource.BitwardenString
 import com.bitwarden.ui.platform.theme.BitwardenTheme
 import com.x8bit.bitwarden.ui.auth.feature.vaultunlock.util.inputFieldVisibilityToggleTestTag
@@ -284,33 +284,40 @@ fun VaultUnlockScreen(
                             { viewModel.trySendAction(VaultUnlockAction.UnlockClick) }
                         },
                     ),
-                    supportingText = state.vaultUnlockType.unlockScreenMessage(),
                     passwordFieldTestTag = state.vaultUnlockType.unlockScreenInputTestTag,
-                    cardStyle = CardStyle.Top(hasDivider = false),
+                    cardStyle = CardStyle.Top(),
                     modifier = Modifier
                         .standardHorizontalMargin()
                         .fillMaxWidth(),
                 )
             }
-            Text(
+            BitwardenSupportingContent(
-                text = stringResource(
+                cardStyle = if (state.hideInput) CardStyle.Full else CardStyle.Bottom,
-                    id = BitwardenString.logged_in_as_on,
-                    state.email,
-                    state.environmentUrl,
-                ),
-                style = BitwardenTheme.typography.bodySmall,
-                color = BitwardenTheme.colorScheme.text.secondary,
                 modifier = Modifier
-                    .testTag("UserAndEnvironmentDataLabel")
                     .standardHorizontalMargin()
-                    .cardStyle(
-                        cardStyle = if (state.hideInput) CardStyle.Full else CardStyle.Bottom,
-                        paddingStart = 16.dp,
-                        paddingEnd = 16.dp,
-                        paddingTop = 0.dp,
-                    )
                     .fillMaxWidth(),
-            )
+            ) {
+                if (!state.hideInput) {
+                    Text(
+                        text = state.vaultUnlockType.unlockScreenMessage(),
+                        style = BitwardenTheme.typography.bodySmall,
+                        color = BitwardenTheme.colorScheme.text.secondary,
+                        modifier = Modifier.fillMaxWidth(),
+                    )
+                    Spacer(modifier = Modifier.height(height = 16.dp))
+                }
+                Text(
+                    text = stringResource(
+                        id = BitwardenString.logged_in_as_on,
+                        formatArgs = arrayOf(state.email, state.environmentUrl),
+                    ),
+                    style = BitwardenTheme.typography.bodySmall,
+                    color = BitwardenTheme.colorScheme.text.secondary,
+                    modifier = Modifier
+                        .testTag(tag = "UserAndEnvironmentDataLabel")
+                        .fillMaxWidth(),
+                )
+            }
             Spacer(modifier = Modifier.height(24.dp))
             if (state.showBiometricLogin && biometricsManager.isBiometricsSupported) {
                 BitwardenOutlinedButton(

ui/src/main/kotlin/com/bitwarden/ui/platform/components/field/BitwardenPasswordField.kt

@@ -1,7 +1,6 @@
 package com.bitwarden.ui.platform.components.field
 
 import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
@@ -56,6 +55,7 @@ import com.bitwarden.ui.platform.components.field.toolbar.BitwardenEmptyTextTool
 import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.components.model.TooltipData
 import com.bitwarden.ui.platform.components.row.BitwardenRowOfActions
+import com.bitwarden.ui.platform.components.support.BitwardenSupportingContent
 import com.bitwarden.ui.platform.components.util.nonLetterColorVisualTransformation
 import com.bitwarden.ui.platform.resource.BitwardenDrawable
 import com.bitwarden.ui.platform.resource.BitwardenString
@@ -240,11 +240,9 @@ fun BitwardenPasswordField(
                             .fillMaxWidth()
                             .padding(start = 16.dp),
                     )
-                    Column(
+                    BitwardenSupportingContent(
-                        verticalArrangement = Arrangement.Center,
+                        cardStyle = null,
-                        modifier = Modifier
+                        insets = supportingContentPadding,
-                            .defaultMinSize(minHeight = 48.dp)
-                            .padding(paddingValues = supportingContentPadding),
                         content = content,
                     )
                 }

ui/src/main/kotlin/com/bitwarden/ui/platform/components/field/BitwardenTextField.kt

@@ -1,7 +1,6 @@
 package com.bitwarden.ui.platform.components.field
 
 import androidx.compose.animation.core.animateDpAsState
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.PaddingValues
@@ -69,6 +68,7 @@ import com.bitwarden.ui.platform.components.icon.model.IconData
 import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.components.model.TooltipData
 import com.bitwarden.ui.platform.components.row.BitwardenRowOfActions
+import com.bitwarden.ui.platform.components.support.BitwardenSupportingContent
 import com.bitwarden.ui.platform.resource.BitwardenDrawable
 import com.bitwarden.ui.platform.theme.BitwardenTheme
 import kotlinx.collections.immutable.ImmutableList
@@ -389,11 +389,9 @@ fun BitwardenTextField(
                                 .fillMaxWidth()
                                 .padding(start = 16.dp),
                         )
-                        Column(
+                        BitwardenSupportingContent(
-                            verticalArrangement = Arrangement.Center,
+                            cardStyle = null,
-                            modifier = Modifier
+                            insets = supportingContentPadding,
-                                .defaultMinSize(minHeight = 48.dp)
-                                .padding(paddingValues = supportingContentPadding),
                             content = content,
                         )
                     }

ui/src/main/kotlin/com/bitwarden/ui/platform/components/support/BitwardenSupportingContent.kt

@@ -0,0 +1,48 @@
+package com.bitwarden.ui.platform.components.support
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.bitwarden.ui.platform.base.util.cardBackground
+import com.bitwarden.ui.platform.base.util.nullableClickable
+import com.bitwarden.ui.platform.components.model.CardStyle
+
+/**
+ * Component for displaying supporting content within a card, usually at the bottom.
+ *
+ * @param cardStyle The card style to be applied.
+ * @param modifier The modifier to be applied.
+ * @param insets Insets to be applied to within the card. This value will be applied even if the
+ * [CardStyle] is null.
+ * @param onClick The callback to be invoked when the supporting content is clicked.
+ * @param content The content to be displayed within the card.
+ */
+@Composable
+fun BitwardenSupportingContent(
+    cardStyle: CardStyle?,
+    modifier: Modifier = Modifier,
+    insets: PaddingValues = PaddingValues(
+        start = 16.dp,
+        end = 16.dp,
+        top = 12.dp,
+        bottom = 12.dp,
+    ),
+    onClick: (() -> Unit)? = null,
+    content: @Composable ColumnScope.() -> Unit,
+) {
+    Column(
+        content = content,
+        verticalArrangement = Arrangement.Center,
+        modifier = modifier
+            .defaultMinSize(minHeight = 48.dp)
+            .cardBackground(cardStyle = cardStyle)
+            .nullableClickable(onClick = onClick)
+            .padding(paddingValues = insets),
+    )
+}

ui/src/main/kotlin/com/bitwarden/ui/platform/components/support/BitwardenSupportingText.kt

@@ -0,0 +1,48 @@
+package com.bitwarden.ui.platform.components.support
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.bitwarden.ui.platform.components.model.CardStyle
+import com.bitwarden.ui.platform.theme.BitwardenTheme
+
+/**
+ * Component for displaying supporting text within a card, usually at the bottom.
+ *
+ * @param text Generic text to be displayed.
+ * @param cardStyle The card style to be applied.
+ * @param modifier The modifier to be applied.
+ * @param insets Insets to be applied to within the card. This value will be applied even if the
+ * [CardStyle] is null.
+ * @param onClick The callback to be invoked when the supporting content is clicked.
+ */
+@Composable
+fun BitwardenSupportingText(
+    text: String,
+    cardStyle: CardStyle?,
+    modifier: Modifier = Modifier,
+    insets: PaddingValues = PaddingValues(
+        start = 16.dp,
+        end = 16.dp,
+        top = 12.dp,
+        bottom = 12.dp,
+    ),
+    onClick: (() -> Unit)? = null,
+) {
+    BitwardenSupportingContent(
+        cardStyle = cardStyle,
+        modifier = modifier,
+        insets = insets,
+        onClick = onClick,
+    ) {
+        Text(
+            text = text,
+            style = BitwardenTheme.typography.bodySmall,
+            color = BitwardenTheme.colorScheme.text.secondary,
+            modifier = Modifier.fillMaxWidth(),
+        )
+    }
+}

ui/src/main/kotlin/com/bitwarden/ui/platform/components/toggle/BitwardenSwitch.kt

@@ -36,6 +36,7 @@ import com.bitwarden.ui.platform.components.divider.BitwardenHorizontalDivider
 import com.bitwarden.ui.platform.components.model.CardStyle
 import com.bitwarden.ui.platform.components.model.TooltipData
 import com.bitwarden.ui.platform.components.row.BitwardenRowOfActions
+import com.bitwarden.ui.platform.components.support.BitwardenSupportingContent
 import com.bitwarden.ui.platform.components.toggle.color.bitwardenSwitchColors
 import com.bitwarden.ui.platform.resource.BitwardenDrawable
 import com.bitwarden.ui.platform.theme.BitwardenTheme
@@ -345,11 +346,9 @@ private fun ColumnScope.SupportingContent(
             .fillMaxWidth()
             .padding(start = 16.dp),
     )
-    Column(
+    BitwardenSupportingContent(
-        modifier = Modifier
+        cardStyle = null,
-            .defaultMinSize(minHeight = 48.dp)
+        insets = paddingValues,
-            .padding(paddingValues = paddingValues),
-        verticalArrangement = Arrangement.Center,
         content = content,
     )
 }