Merge pull request #193 from tarkalabs/mohan/enhancement/mobile_overl…

…ay_footer

TUIMobileOverlayFooter Component updated as per Figma design.

tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIMobileOverlayFooterScreenShotTest.kt

@@ -1,9 +1,6 @@
-@file:OptIn(ExperimentalMaterial3Api::class)
-
 package com.tarkalabs.uicomponents.screenshots
 
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.ui.Modifier
 import com.tarkalabs.tarkaui.components.TUIMobileOverlayFooter
 import org.junit.Test
@@ -13,26 +10,21 @@ import org.junit.runners.Parameterized
 @RunWith(Parameterized::class)
 class TUIMobileOverlayFooterScreenShotTest(
   private val showMiddleDismiss: Boolean,
-  private val showLeftArrow: Boolean,
-  private val showRightArrow: Boolean,
   private val testName: String,
-  private val darkTheme: Boolean
+  private val darkTheme: Boolean,
 ) : ComposeScreenshotComparator() {
 
   companion object {
     @JvmStatic
     @Parameterized.Parameters
     fun data(): Collection<Array<Any>> {
       return mutableListOf<Array<Any>>().apply {
-        for (darkTheme in listOf(true, false))
-          for (showLeftArrow in listOf(true, false))
-            for (showMiddleDismiss in listOf(true, false))
-              for (showRightArrow in listOf(true, false)) {
-                if (!showLeftArrow && !showRightArrow && !showMiddleDismiss) continue
-                val testName = "showLeftArrow_${showLeftArrow}_showMiddleDismiss_${showMiddleDismiss}_showRightArrow_${showRightArrow}_darkTheme_${darkTheme}"
-                add(arrayOf(showMiddleDismiss, showLeftArrow, showRightArrow, testName, darkTheme))
-              }
-
+        for (darkTheme in listOf(true, false)) {
+          for (showMiddleDismiss in listOf(true, false)) {
+            val testName = "showMiddleDismiss_${showMiddleDismiss}_darkTheme_${darkTheme}"
+            add(arrayOf(showMiddleDismiss, testName, darkTheme))
+          }
+        }
       }
     }
   }
@@ -41,9 +33,7 @@ class TUIMobileOverlayFooterScreenShotTest(
     compareScreenshotFor(darkTheme, "_TestMobileFooter_$testName") {
       TUIMobileOverlayFooter(
         modifier = Modifier.fillMaxWidth(),
-        showLeftArrow = showLeftArrow,
         showMiddleDismiss = showMiddleDismiss,
-        showRightArrow = showRightArrow,
       )
     }
 }

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayFooter.kt

@@ -1,9 +1,13 @@
 package com.tarkalabs.tarkaui.components
 
+import android.content.res.Configuration
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -12,34 +16,32 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.ERROR
+import com.tarkalabs.tarkaui.components.base.ButtonStyle.OUTLINE
+import com.tarkalabs.tarkaui.components.base.IconButtonStyle
+import com.tarkalabs.tarkaui.components.base.TUIButton
+import com.tarkalabs.tarkaui.components.base.TUIIconButton
+import com.tarkalabs.tarkaui.icons.ArrowLeft24
 import com.tarkalabs.tarkaui.icons.ChevronLeft24
 import com.tarkalabs.tarkaui.icons.ChevronRight24
 import com.tarkalabs.tarkaui.icons.Dismiss24
 import com.tarkalabs.tarkaui.icons.TarkaIcons
-import com.tarkalabs.tarkaui.components.base.IconButtonStyle
-import com.tarkalabs.tarkaui.components.base.TUIIconButton
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
  * Composable function to create a mobile overlay footer.
- *
  * @param modifier The modifier for styling and layout customization.
- * @param showRightArrow Determines whether the right arrow icon is shown.
- * @param showLeftArrow Determines whether the left arrow icon is shown.
  * @param showMiddleDismiss Determines whether the middle dismiss icon is shown.
- * @param onRightArrowClick The click listener for the right arrow icon.
- * @param onLeftArrowClick The click listener for the left arrow icon.
  * @param onMiddleDismissClick The click listener for the middle dismiss icon.
  */
+
 @Composable
 fun TUIMobileOverlayFooter(
   modifier: Modifier = Modifier,
-  showRightArrow: Boolean = true,
-  showLeftArrow: Boolean = true,
   showMiddleDismiss: Boolean = true,
-  onRightArrowClick: (() -> Unit)? = null,
-  onLeftArrowClick: (() -> Unit)? = null,
   onMiddleDismissClick: (() -> Unit)? = null,
+  leftContent: (@Composable RowScope.() -> Unit)? = null,
+  rightContent: (@Composable RowScope.() -> Unit)? = null,
 ) {
   Row(
     modifier
@@ -48,59 +50,145 @@ fun TUIMobileOverlayFooter(
     verticalAlignment = Alignment.CenterVertically,
     horizontalArrangement = Arrangement.SpaceBetween
   ) {
-    if (showLeftArrow) TUIIconButton(
-      icon = TarkaIcons.Regular.ChevronLeft24,
-      iconButtonStyle = IconButtonStyle.GHOST,
-      onIconClick = { onLeftArrowClick?.invoke() }
-    )
+    leftContent?.invoke(this)
     Spacer(modifier = Modifier.weight(1f))
     if (showMiddleDismiss) TUIIconButton(
       icon = TarkaIcons.Regular.Dismiss24,
       iconButtonStyle = IconButtonStyle.GHOST,
       onIconClick = { onMiddleDismissClick?.invoke() }
     )
     Spacer(modifier = Modifier.weight(1f))
-    if (showRightArrow) TUIIconButton(
-      icon = TarkaIcons.Regular.ChevronRight24,
-      iconButtonStyle = IconButtonStyle.GHOST,
-      onIconClick = { onRightArrowClick?.invoke() }
-    )
+    rightContent?.invoke(this)
   }
 }
 
-@Preview(showBackground = true, showSystemUi = true)
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 fun TUIMobileOverlayFooterPreview() {
   TUITheme {
-    Column {
-      TUIMobileOverlayFooter(Modifier.fillMaxWidth())
+    Column(
+      modifier = Modifier
+        .background(TUITheme.colors.surface)
+        .fillMaxSize()
+    ) {
+      TUIMobileOverlayFooter(
+        modifier = Modifier.fillMaxWidth(),
+        leftContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronLeft24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        },
+        rightContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronRight24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        }
+      )
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
-        showRightArrow = false,
-        showLeftArrow = false,
-        showMiddleDismiss = true
+        showMiddleDismiss = true,
       )
-
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
-        showRightArrow = true,
-        showLeftArrow = true,
-        showMiddleDismiss = false
+        showMiddleDismiss = false,
+        leftContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronLeft24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        },
+        rightContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronRight24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        }
       )
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
-        showRightArrow = true,
-        showLeftArrow = false,
-        showMiddleDismiss = false
+        showMiddleDismiss = false,
+        rightContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronRight24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        }
       )
-
       TUIMobileOverlayFooter(
         Modifier.fillMaxWidth(),
-        showRightArrow = false,
-        showLeftArrow = true,
-        showMiddleDismiss = false
+        showMiddleDismiss = false,
+        leftContent = {
+          TUIIconButton(
+            icon = TarkaIcons.Regular.ChevronLeft24,
+            iconButtonStyle = IconButtonStyle.GHOST
+          )
+        }
       )
 
+      TUIMobileOverlayFooter(
+        Modifier.fillMaxWidth(),
+        showMiddleDismiss = true,
+        leftContent = {
+          TUIButton(
+            label = "Cancel",
+            onClick = {},
+            buttonStyle = OUTLINE
+          )
+        },
+        rightContent = {
+          TUIButton(
+            label = "Delete",
+            onClick = {},
+            buttonStyle = ERROR
+          )
+        }
+      )
+      TUIMobileOverlayFooter(
+        modifier = Modifier.fillMaxWidth(),
+      )
+      TUIMobileOverlayFooter(
+        Modifier.fillMaxWidth(),
+        showMiddleDismiss = false,
+        leftContent = {
+          TUIButton(
+            label = "Cancel",
+            onClick = {},
+            buttonStyle = OUTLINE
+          )
+        },
+        rightContent = {
+          TUIButton(
+            label = "Delete",
+            onClick = {},
+            buttonStyle = ERROR
+          )
+        }
+      )
+      TUIMobileOverlayFooter(
+        Modifier.fillMaxWidth(),
+        showMiddleDismiss = false,
+        rightContent = {
+          TUIButton(
+            label = "Delete",
+            onClick = {},
+            buttonStyle = ERROR
+          )
+        }
+      )
+      TUIMobileOverlayFooter(
+        Modifier.fillMaxWidth(),
+        showMiddleDismiss = false,
+        leftContent = {
+          TUIButton(
+            label = "Cancel",
+            onClick = {},
+            buttonStyle = OUTLINE
+          )
+        }
+      )
     }
   }
 }