ANDROID-17239 Compose MediaCard imagePosition left/right

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/MediaCards.kt

@@ -3,11 +3,14 @@ package com.telefonica.mistica.catalog.ui.compose.components
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+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
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Button as MaterialButton
 import androidx.compose.material.Checkbox
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
@@ -25,6 +28,7 @@ import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.compose.card.Action
 import com.telefonica.mistica.compose.card.mediacard.MediaCard
 import com.telefonica.mistica.compose.card.mediacard.MediaCardImage.MediaCardImageResource
+import com.telefonica.mistica.compose.card.mediacard.MediaCardImagePosition
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.tag.TagView.Companion.TYPE_PROMO
 
@@ -53,6 +57,9 @@ fun MediaCards() {
 
     var withAdditionalContent: Boolean by remember { mutableStateOf(false) }
 
+    var imagePosition: MediaCardImagePosition by remember { mutableStateOf(MediaCardImagePosition.Top) }
+    var imagePositionExpanded: Boolean by remember { mutableStateOf(false) }
+
     Column(
         modifier = Modifier
             .fillMaxSize()
@@ -63,6 +70,11 @@ fun MediaCards() {
     ) {
 
         OutlinedTextField(value = tag, onValueChange = { tag = it }, label = { Text("Tag") })
+        MaterialButton(
+            onClick = { tagTypeDropDownExpanded = true }
+        ) {
+            Text("Select Tag Type: ${tagTypeItems[tagType]}")
+        }
         DropdownMenu(expanded = tagTypeDropDownExpanded, onDismissRequest = { tagTypeDropDownExpanded = false }) {
             tagTypeItems.forEachIndexed { index, s ->
                 DropdownMenuItem(onClick = {
@@ -89,6 +101,23 @@ fun MediaCards() {
             Checkbox(checked = withAdditionalContent, onCheckedChange = { withAdditionalContent = !withAdditionalContent })
         }
 
+        MaterialButton(
+            onClick = { imagePositionExpanded = true }
+        ) {
+            Text("Image Position: ${imagePosition.name}")
+        }
+        DropdownMenu(expanded = imagePositionExpanded, onDismissRequest = { imagePositionExpanded = false }) {
+            MediaCardImagePosition.entries.forEach { position ->
+                DropdownMenuItem(onClick = {
+                    imagePosition = position
+                    imagePositionExpanded = false
+                }) {
+                    Text(position.name)
+                }
+            }
+        }
+        Spacer(Modifier.height(16.dp))
+
         MediaCard(
             modifier = Modifier
                 .padding(24.dp)
@@ -103,6 +132,7 @@ fun MediaCards() {
 
             primaryButton = if (primaryAction.isNotEmpty()) Action(primaryAction) { } else null,
             linkButton = if (secondaryAction.isNotEmpty()) Action(secondaryAction) { } else null,
+            imagePosition = imagePosition,
             customContent = if (withAdditionalContent) {
                 { Text("Additional content") }
             } else {

library/src/main/java/com/telefonica/mistica/compose/card/Card.kt

@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
@@ -21,11 +20,13 @@ import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.button.ButtonStyle
 import com.telefonica.mistica.compose.tag.Tag
 import com.telefonica.mistica.compose.theme.MisticaTheme
+import com.telefonica.mistica.util.applyLinkTextFix
 
 @Composable
-fun Card(
+public fun Card(
     modifier: Modifier = Modifier,
     header: @Composable () -> Unit = {},
+    invalidatePaddings: Boolean = false,
     content: @Composable () -> Unit = {},
 ) {
 
@@ -41,12 +42,16 @@ fun Card(
         Column {
             header()
             Column(
-                modifier = Modifier.padding(
-                    start = 16.dp,
-                    top = 16.dp,
-                    end = 16.dp,
-                    bottom = 24.dp,
-                ),
+                modifier = if (!invalidatePaddings)
+                    Modifier.padding(
+                        start = 16.dp,
+                        top = 16.dp,
+                        end = 16.dp,
+                        bottom = 24.dp,
+                    )
+                else {
+                    Modifier
+                },
             ) {
                 content()
             }
@@ -55,30 +60,32 @@ fun Card(
 }
 
 @Composable
-internal fun CardActions(primaryButton: Action?, linkButton: Action?) {
+internal fun CardActions(
+    primaryButton: Action?,
+    linkButton: Action?,
+    orientation: CardActionsOrientation = CardActionsOrientation.Horizontal,
+) {
     if (primaryButton != null || linkButton != null) {
-        Row(
-            modifier = Modifier
-                .padding(top = 16.dp)
-                .width(IntrinsicSize.Max),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Start,
-
-            ) {
-            primaryButton?.let {
-                Button(
-                    text = it.text,
-                    onClickListener = it.onTapped,
-                    buttonStyle = ButtonStyle.PRIMARY_SMALL,
-                )
+        when (orientation) {
+            CardActionsOrientation.Horizontal -> {
+                Row(
+                    modifier = Modifier
+                        .padding(top = 16.dp)
+                        .width(IntrinsicSize.Max),
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.Start,
+                ) {
+                    CardActionButtons(primaryButton, linkButton, orientation)
+                }
             }
-            linkButton?.let {
-                Button(
-                    modifier = if (primaryButton == null) Modifier.offset(x = (-8).dp) else Modifier,
-                    text = it.text,
-                    onClickListener = it.onTapped,
-                    buttonStyle = ButtonStyle.LINK,
-                )
+            CardActionsOrientation.Vertical -> {
+                Column(
+                    modifier = Modifier.padding(top = 16.dp),
+                    verticalArrangement = Arrangement.spacedBy(8.dp),
+                    horizontalAlignment = Alignment.Start,
+                ) {
+                    CardActionButtons(primaryButton, linkButton, orientation)
+                }
             }
         }
     }
@@ -135,7 +142,42 @@ internal fun CardContent(
     }
 }
 
-data class Action(
+@Composable
+private fun CardActionButtons(
+    primaryButton: Action?,
+    linkButton: Action?,
+    orientation: CardActionsOrientation,
+) {
+    primaryButton?.let {
+        Button(
+            text = it.text,
+            onClickListener = it.onTapped,
+            buttonStyle = ButtonStyle.PRIMARY_SMALL,
+        )
+    }
+    linkButton?.let {
+        Button(
+            modifier = if (primaryButton != null && orientation == CardActionsOrientation.Horizontal) {
+                Modifier.padding(start = 16.dp)
+            } else {
+                Modifier
+            },
+            text = it.text.applyLinkTextFix(),
+            onClickListener = it.onTapped,
+            buttonStyle = ButtonStyle.LINK,
+            invalidatePaddings = true,
+            invalidateMinWidth = true,
+        )
+    }
+}
+
+
+public enum class CardActionsOrientation {
+    Horizontal,
+    Vertical,
+}
+
+public data class Action(
     val text: String,
     val onTapped: () -> Unit,
 )

library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt

@@ -37,6 +37,7 @@ import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.button.ButtonStyle
 import com.telefonica.mistica.compose.theme.MisticaTheme
 import androidx.compose.ui.platform.LocalResources
+import com.telefonica.mistica.util.applyLinkTextFix
 
 @Composable
 fun HighLightedCard(
@@ -229,7 +230,7 @@ private fun HighLightCardButton(
             val isLink = buttonStyle == ButtonStyle.LINK || buttonStyle == ButtonStyle.LINK_INVERSE
             Button(
                 modifier = modifier,
-                text = if (isLink) applyLinkTextFix(buttonConfig.buttonText) else buttonConfig.buttonText,
+                text = if (isLink) buttonConfig.buttonText.applyLinkTextFix() else buttonConfig.buttonText,
                 buttonStyle = buttonStyle,
                 invalidatePaddings = isLink,
                 invalidateMinWidth = isLink,
@@ -241,9 +242,6 @@ private fun HighLightCardButton(
     }
 }
 
-private fun applyLinkTextFix(text: String): String {
-    return text.padEnd(18, ' ')
-}
 
 enum class HighLightCardImageConfig {
     FIT,