Add chevron option to title link (#371)

* Add chevron option to title link * Update readmes * Remove 'm' typo * Add arguments * Do Jesus comments * Replace to use right icon * Add margin 2dp
Telefonica · Jul 5, 2024 · 8ce15d8 · 8ce15d8
1 parent 95cbd41
commit 8ce15d8
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 46 deletions.
diff --git a/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt b/catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Titles.kt
@@ -81,4 +81,12 @@ private fun TitlesWithStyleOverridden(
         text = "Some title $style that can get really long and almost fill the whole line",
         onLinkClicked = {}
     )
+    Title(
+        modifier = Modifier.padding(bottom = 8.dp),
+        style = style,
+        linkText = "Some link",
+        withChevron = true,
+        text = "Some title $style with chevron",
+        onLinkClicked = {}
+    )
 }
diff --git a/catalog/src/main/res/layout/title_catalog.xml b/catalog/src/main/res/layout/title_catalog.xml
@@ -109,5 +109,26 @@
 				app:titleStyle="title2"
 				app:title="Some title 2 that can get really long and almost fill the whole line" />
 
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_1_with_link_and_chevron"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:linkWithChevron="true"
+				app:titleStyle="title1"
+				app:title="Some title 1 with chevron" />
+
+		<com.telefonica.mistica.title.TitleView
+				android:id="@+id/short_title_with_style_2_with_link_and_chevron"
+				android:layout_width="match_parent"
+				android:layout_height="wrap_content"
+				android:layout_marginBottom="8dp"
+				app:link="Some link"
+				app:linkWithChevron="true"
+				app:titleStyle="title2"
+				app:title="Some title 2 with chevron" />
+
 	</LinearLayout>
-</ScrollView>
+
+</ScrollView>
diff --git a/library/src/main/java/com/telefonica/mistica/compose/title/README.md b/library/src/main/java/com/telefonica/mistica/compose/title/README.md
@@ -16,5 +16,6 @@ Title(
     style = TitleStyle.TITLE_1,
     linkText = "Some link", // Nullable
     onLinkClicked = {} // Nullable
+    withChevron = true // Nullable
 )
-```
+```
diff --git a/library/src/main/java/com/telefonica/mistica/compose/title/Title.kt b/library/src/main/java/com/telefonica/mistica/compose/title/Title.kt
@@ -1,16 +1,28 @@
 package com.telefonica.mistica.compose.title
 
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.aspectRatio
+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.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.heading
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.R
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
 @Composable
@@ -20,6 +32,7 @@ fun Title(
     style: TitleStyle = MisticaTheme.values.titleStyle,
     text: String,
     linkText: String? = null,
+    withChevron: Boolean = false,
     onLinkClicked: (() -> Unit)? = null,
 ) {
     Row(
@@ -46,6 +59,7 @@ fun Title(
                     .padding(start = 16.dp)
                     .alignByBaseline(),
                 text = it,
+                withChevron = withChevron,
                 onClick = onLinkClicked
             )
         }
@@ -68,6 +82,7 @@ private fun TitleText(
             textColor = MisticaTheme.colors.textSecondary
             isAllCaps = true
         }
+
         TitleStyle.TITLE_2 -> {
             preset = MisticaTheme.typography.preset5
             textColor = MisticaTheme.colors.textPrimary
@@ -87,20 +102,32 @@ private fun TitleText(
 private fun Link(
     modifier: Modifier,
     text: String,
+    withChevron: Boolean,
     onClick: (() -> Unit)? = null,
 ) {
     val linkModifier = if (onClick != null) {
         modifier.then(Modifier.clickable { onClick() })
     } else {
         modifier
     }
-
-    Text(
+    Row(
         modifier = linkModifier,
-        text = text,
-        style = MisticaTheme.typography.presetLink,
-        color = MisticaTheme.colors.textLink
-    )
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(
+            text = text,
+            style = MisticaTheme.typography.presetLink,
+            color = MisticaTheme.colors.textLink
+        )
+        if (withChevron) {
+            Image(
+                painter = painterResource(id = R.drawable.icn_chevron),
+                contentDescription = null,
+                modifier = Modifier.padding(start = dimensionResource(id = R.dimen.button_chevron_padding)),
+                colorFilter = ColorFilter.tint(MisticaTheme.colors.textLink),
+            )
+        }
+    }
 }
 
 enum class TitleStyle {

diff --git a/library/src/main/java/com/telefonica/mistica/title/README.md b/library/src/main/java/com/telefonica/mistica/title/README.md
@@ -15,3 +15,4 @@ It has these attributes:
 - `titleStyle`: to configure the appearance of the title text. Values supported: `title1`, `title2`.
 - `link`: to set the label of an optional link
 - `linkOnClick`: listener that will be invoked when link is clicked
+- `linkWithChevron`: to show a chevron icon at the end of the link
diff --git a/library/src/main/java/com/telefonica/mistica/title/TitleView.kt b/library/src/main/java/com/telefonica/mistica/title/TitleView.kt
@@ -3,13 +3,16 @@ package com.telefonica.mistica.title
 import android.content.Context
 import android.util.AttributeSet
 import android.view.LayoutInflater
+import android.widget.ImageView
+import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.annotation.AttrRes
 import androidx.annotation.IntDef
 import androidx.annotation.StyleRes
 import androidx.annotation.VisibleForTesting
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.core.view.ViewCompat
+import androidx.core.view.isVisible
 import androidx.databinding.BindingMethod
 import androidx.databinding.BindingMethods
 import com.telefonica.mistica.R
@@ -58,13 +61,17 @@ class TitleView @JvmOverloads constructor(
     annotation class TitleStyle
 
     private var linkTextView: TextView
+    private var linkLayout: LinearLayout
+    private var linkChevron: ImageView
     private var titleTextView: TextView
 
     init {
         LayoutInflater.from(context).inflate(R.layout.title, this, true)
 
         titleTextView = findViewById(R.id.title_text)
         linkTextView = findViewById(R.id.link_text)
+        linkLayout = findViewById(R.id.link_layout)
+        linkChevron = findViewById(R.id.link_chevron)
 
         if (attrs != null) {
             val styledAttrs =
@@ -84,8 +91,10 @@ class TitleView @JvmOverloads constructor(
             )
                 .takeIf { it }
                 ?.let { setTitleHeading() }
-
-            linkTextView.setTextAndVisibility(styledAttrs.getText(R.styleable.TitleView_link))
+            val linkText = styledAttrs.getText(R.styleable.TitleView_link)
+            linkTextView.setTextAndVisibility(linkText)
+            linkLayout.isVisible = linkText?.isNotBlank() == true
+            linkChevron.isVisible = styledAttrs.getBoolean(R.styleable.TitleView_linkWithChevron, false)
 
             styledAttrs.recycle()
         }
@@ -118,12 +127,17 @@ class TitleView @JvmOverloads constructor(
 
     fun getLink(): String = linkTextView.text.toString()
 
-    fun setLink(text: CharSequence?) {
+    fun setLink(
+        text: CharSequence?,
+        withChevron: Boolean = false
+    ) {
+        linkLayout.isVisible = text?.isNotBlank() == true
         linkTextView.setTextAndVisibility(text)
+        linkChevron.isVisible = withChevron
     }
 
     fun setOnLinkClickedListener(listener: () -> Unit) {
-        linkTextView.setOnClickListener { listener.invoke() }
+        linkLayout.setOnClickListener { listener.invoke() }
     }
 
     companion object {
@@ -148,4 +162,4 @@ private data class TitleStyleConfig(
     @StyleRes val preset: Int,
     @AttrRes val colorAttrRes: Int,
     val isAllCaps: Boolean,
-)
+)
diff --git a/library/src/main/res/layout/title.xml b/library/src/main/res/layout/title.xml
@@ -1,37 +1,58 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+	xmlns:tools="http://schemas.android.com/tools"
+	xmlns:app="http://schemas.android.com/apk/res-auto"
+	android:layout_width="match_parent"
+	android:layout_height="match_parent"
+	tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
 
-    <com.google.android.material.textview.MaterialTextView
-        android:id="@+id/title_text"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:layout_constrainedWidth="true"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/link_text"
-        app:layout_constraintTop_toTopOf="parent"
-        android:textAppearance="@style/AppTheme.TextAppearance.Preset1.Medium"
-        android:textColor="?colorTextSecondary"
-        tools:text="Some title that can get really long and almost fill the whole line" />
+	<com.google.android.material.textview.MaterialTextView
+		android:id="@+id/title_text"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		app:layout_constrainedWidth="true"
+		app:layout_constraintHorizontal_bias="0.0"
+		app:layout_constraintStart_toStartOf="parent"
+		app:layout_constraintBottom_toBottomOf="parent"
+		app:layout_constraintEnd_toStartOf="@id/link_layout"
+		app:layout_constraintTop_toTopOf="parent"
+		android:textAppearance="@style/AppTheme.TextAppearance.Preset1.Medium"
+		android:textColor="?colorTextSecondary"
+		tools:text="Some title that can get really long and almost fill the whole line"/>
 
-    <com.google.android.material.textview.MaterialTextView
-        android:id="@+id/link_text"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:paddingStart="16dp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:textAppearance="@style/AppTheme.TextAppearance.PresetLink"
-        app:layout_constraintBaseline_toBaselineOf="@id/title_text"
-        android:textColor="?colorTextLink"
-        android:visibility="gone"
-        tools:text="Some link"
-        tools:visibility="visible"
-        tools:ignore="RtlSymmetry" />
-</merge>
+	<LinearLayout
+		android:id="@+id/link_layout"
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		app:layout_constraintEnd_toEndOf="parent"
+		app:layout_constraintTop_toTopOf="parent"
+		app:layout_constraintBaseline_toBaselineOf="@id/title_text"
+		android:gravity="center"
+		android:visibility="gone"
+		tools:visibility="visible">
+
+		<com.google.android.material.textview.MaterialTextView
+			android:id="@+id/link_text"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:textAppearance="@style/AppTheme.TextAppearance.PresetLink"
+			android:textColor="?colorTextLink"
+			android:visibility="gone"
+			tools:visibility="visible"
+			android:paddingStart="16dp"
+			tools:text="Some link"
+			tools:ignore="RtlSymmetry"/>
+
+		<ImageView
+			android:id="@+id/link_chevron"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:importantForAccessibility="no"
+			android:src="@drawable/icn_chevron"
+			android:layout_marginStart="2dp"
+			android:visibility="gone"
+			tools:visibility="visible"
+			app:tint="?attr/colorTextLink"/>
+	</LinearLayout>
+
+</merge>
diff --git a/library/src/main/res/values/attrs_components.xml b/library/src/main/res/values/attrs_components.xml
@@ -133,6 +133,7 @@
         </attr>
         <attr name="link" format="string" />
         <attr name="linkOnClick" format="string" />
+        <attr name="linkWithChevron" format="boolean"/>
     </declare-styleable>
 
     <declare-styleable name="HighlightedCardView">