Merge pull request #724 from Orange-OpenSource/722-small-card-avoid-t…

…ext-truncation-if-the-card-isnt-clickable

722 - Small card - Display full title and subtitle if the card isn't clickable for accessibility reasons

changelog.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - \[Lib\] Update `OdsChip` API to use a unique leading parameter ([#705](https://github.com/Orange-OpenSource/ods-android/issues/705))
 - \[Lib\] Update most API types to be clearer for v1 launch ([#701](https://github.com/Orange-OpenSource/ods-android/issues/701))
 - \[Lib\] Update `OdsBanner` to allow banner without button and avoid text truncation in banner for accessibility purpose ([#643](https://github.com/Orange-OpenSource/ods-android/issues/643))
+- \[Lib\] Update `OdsSmallCard` to show full title and subtitle when the card is not clickable for accessibility purpose ([#722](https://github.com/Orange-OpenSource/ods-android/issues/722))
 
 ### Fixed
 

docs/components/Cards.md

@@ -168,10 +168,10 @@ Row(
 
 Parameter | Default value | Description
 -- | -- | --
-`title: String` | | Title displayed into the card
+`title: String` | | Title displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons.
 `image: OdsCard.Image` | | Image displayed into the card
 `modifier: Modifier` | `Modifier` | `Modifier` applied to the layout of the card
-`subtitle: String?` | `null` | Subtitle displayed into the card
+`subtitle: String?` | `null` | Subtitle displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for accessibility reasons.
 `onClick: (() -> Unit)?` | `null` | Callback invoked on card click
 {:.table}
 

lib/src/main/java/com/orange/ods/compose/component/card/OdsSmallCard.kt

@@ -14,14 +14,19 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
 import com.orange.ods.R
 import com.orange.ods.compose.component.OdsComposable
+import com.orange.ods.compose.component.utilities.BasicPreviewParameterProvider
 import com.orange.ods.compose.component.utilities.Preview
 import com.orange.ods.compose.component.utilities.UiModePreviews
 import com.orange.ods.compose.theme.OdsTheme
@@ -31,10 +36,12 @@ import com.orange.ods.compose.theme.OdsTheme
  *
  * Cards contain content and actions about a single subject.
  *
- * @param title Title displayed into the card.
+ * @param title Title displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed entirely for
+ * accessibility reasons.
  * @param image [OdsCard.Image] displayed into the card.
  * @param modifier [Modifier] applied to the layout of the card.
- * @param subtitle Subtitle displayed into the card.
+ * @param subtitle Subtitle displayed into the card. If the card is clickable, it will be truncated to fit on one line otherwise it will be displayed
+ * entirely for accessibility reasons.
  * @param onClick Callback invoked on card click.
  */
 @Composable
@@ -60,29 +67,56 @@ fun OdsSmallCard(
                 modifier = Modifier
                     .padding(dimensionResource(id = R.dimen.spacing_m))
             ) {
-                Text(
-                    text = title,
-                    style = OdsTheme.typography.h6,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
-                )
+                SmallCardText(text = title, style = OdsTheme.typography.h6, isClickableCard = onClick != null)
                 subtitle?.let {
-                    Text(
-                        text = it,
-                        style = OdsTheme.typography.subtitle2
-                    )
+                    SmallCardText(text = it, style = OdsTheme.typography.subtitle2, isClickableCard = onClick != null)
                 }
             }
         }
     }
 }
 
+@Composable
+private fun SmallCardText(text: String, style: TextStyle, isClickableCard: Boolean) {
+    Text(
+        text = text,
+        style = style,
+        maxLines = if (isClickableCard) 1 else Int.MAX_VALUE,
+        overflow = if (isClickableCard) TextOverflow.Ellipsis else TextOverflow.Clip
+    )
+}
+
 @UiModePreviews.Default
 @Composable
-private fun PreviewOdsSmallCard() = Preview {
+private fun PreviewOdsSmallCard(@PreviewParameter(OdsSmallCardPreviewParameterProvider::class) parameter: OdsSmallCardPreviewParameter) = Preview {
     OdsSmallCard(
-        title = "Title",
-        subtitle = "Subtitle",
-        image = OdsCard.Image(painterResource(id = R.drawable.placeholder), "")
+        modifier = Modifier.width(200.dp),
+        title = parameter.title,
+        subtitle = parameter.subtitle,
+        image = OdsCard.Image(painterResource(id = R.drawable.placeholder), ""),
+        onClick = parameter.onClick
     )
 }
+
+internal data class OdsSmallCardPreviewParameter(
+    val title: String,
+    val subtitle: String?,
+    val onClick: (() -> Unit)? = {}
+)
+
+private class OdsSmallCardPreviewParameterProvider :
+    BasicPreviewParameterProvider<OdsSmallCardPreviewParameter>(*previewParameterValues.toTypedArray())
+
+private val previewParameterValues: List<OdsSmallCardPreviewParameter>
+    get() {
+        val shortTitle = "Title"
+        val longTitle = "Here is a long title that don't fit"
+        val shortSubtitle = "Subtitle"
+        val longSubtitle = "Here is a very very very long subtitle"
+
+        return listOf(
+            OdsSmallCardPreviewParameter(shortTitle, shortSubtitle),
+            OdsSmallCardPreviewParameter(longTitle, longSubtitle),
+            OdsSmallCardPreviewParameter(longTitle, longSubtitle, null),
+        )
+    }