Merge pull request #71 from guardian/ab/pager-phone-size

[Android] Adjustments to `PagerProgressBar`
guardian · Jul 25, 2024 · a25b8a7 · a25b8a7
2 parents 444900d + 624bb0a
commit a25b8a7
Show file tree

Hide file tree

Showing 24 changed files with 1,157 additions and 947 deletions.
diff --git a/android/README.md b/android/README.md
@@ -30,7 +30,7 @@ The design presets are available name spaced under the `com.gu.Source` object, e
 
 ### Typography presets
 
-Typography presets include `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `fontStyle` in a single token. [A rough preview of all typography styles is available here.](https://github.com/guardian/source-apps/blob/main/android/source/src/test/snapshots/images/com.gu.source.presets.typography_TypographyPreviewTest_snapshot.png)
+Typography presets include `fontFamily`, `fontSize`, `lineHeight`, `fontWeight`, `fontStyle` in a single token. [All typography tokens with their previews are listed here](/android/source/src/main/kotlin/com/gu/source/presets/typography/README.md)
 
 The library bundles app font files, so they are not separately required in consumer apps.
 

diff --git a/android/gradle/libs.versions.toml b/android/gradle/libs.versions.toml
@@ -1,6 +1,6 @@
 [versions]
 group = "com.gu.source"
-libraryVersion = "0.3.0"
+libraryVersion = "0.3.1"
 compilesdk = "34"
 minsdk = "26"
 targetsdk = "34"

diff --git a/android/source/src/main/kotlin/com/gu/source/components/pager/PagerProgressBar.kt b/android/source/src/main/kotlin/com/gu/source/components/pager/PagerProgressBar.kt
@@ -2,6 +2,7 @@
 
 package com.gu.source.components.pager
 
+import android.annotation.SuppressLint
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
@@ -62,13 +63,41 @@ private val DefaultButtonColours = ButtonColours(
     ),
 )
 
+private const val DisabledButtonAlpha = 0.2f
+private val DefaultDisabledButtonColours = ButtonColours(
+    border = AppColour(
+        light = Source.Palette.Neutral7.copy(alpha = DisabledButtonAlpha),
+        dark = Source.Palette.Neutral100.copy(alpha = DisabledButtonAlpha),
+    ),
+    container = AppColour.Transparent,
+    content = AppColour(
+        light = Source.Palette.Neutral7.copy(alpha = DisabledButtonAlpha),
+        dark = Source.Palette.Neutral100.copy(alpha = DisabledButtonAlpha),
+    ),
+)
+
+// The progress buttons get a min touch size padding of 12.dp, so we need to things by half that to
+// get the correct offset and padding
+private val ProgressButtonTouchAdjustment = 6.dp
+
+@Composable
+private fun getBarPadding() = if (isTabletDevice()) {
+    PaddingValues(
+        top = 8.dp - ProgressButtonTouchAdjustment,
+        bottom = 12.dp - ProgressButtonTouchAdjustment,
+    )
+} else {
+    PaddingValues(top = 8.dp, bottom = 12.dp)
+}
+
 /**
  * A progress bar that shows the current page of a [PagerState] and, on tablets, allows the user to
  * navigate between pages using next/prev buttons.
  *
  * @param pagerState The [PagerState] that this indicator should be bound to.
  * @param modifier
  * @param buttonColours The colours for the next/prev buttons.
+ * @param disabledButtonColours The colours for the next/prev buttons when they are disabled.
  * @param selectedIndicatorColour The colour of the selected indicator item.
  * @param unSelectedIndicatorColour The colour of the unselected indicators items.
  * @param prevButtonContentDescription The content description for the previous button.
@@ -82,6 +111,7 @@ fun PagerProgressBar(
     pagerState: PagerState,
     modifier: Modifier = Modifier,
     buttonColours: ButtonColours = DefaultButtonColours,
+    disabledButtonColours: ButtonColours? = DefaultDisabledButtonColours,
     selectedIndicatorColour: AppColour = SelectedIndicatorColour,
     unSelectedIndicatorColour: AppColour = UnSelectedIndicatorColour,
     prevButtonContentDescription: String? = null,
@@ -92,7 +122,7 @@ fun PagerProgressBar(
 
     Box(
         modifier = modifier
-            .height(56.dp)
+            .padding(getBarPadding())
             .fillMaxWidth(),
     ) {
         PagerProgressIndicator(
@@ -108,24 +138,24 @@ fun PagerProgressBar(
                     coroutineScope.launch {
                         val page = when (it) {
                             ProgressDirection.Previous -> {
-                                (pagerState.currentPage - 1)
-                                    .let { if (it < 0) pagerState.pageCount - 1 else it }
+                                (pagerState.currentPage - 1).coerceAtLeast(0)
                             }
 
                             ProgressDirection.Next -> {
-                                (pagerState.currentPage + 1) % pagerState.pageCount
+                                (pagerState.currentPage + 1).coerceAtMost(pagerState.pageCount - 1)
                             }
                         }
                         pagerState.animateScrollToPage(page)
                     }
                 },
-                // Offset the row so the buttons visually set at end of the progress bar despite the extra
-                // touch size padding.
+                isNextEnabled = pagerState.canScrollForward,
+                isPrevEnabled = pagerState.canScrollBackward,
                 prevButtonContentDescription = prevButtonContentDescription,
                 nextButtonContentDescription = nextButtonContentDescription,
                 modifier = Modifier
-                    .offset(x = 6.dp)
+                    .offset(x = ProgressButtonTouchAdjustment)
                     .align(Alignment.CenterEnd),
+                disabledButtonColours = disabledButtonColours,
             )
         }
     }
@@ -170,19 +200,29 @@ fun PagerProgressBar(
     )
 }
 
+@SuppressLint("DiscouragedApi")
 @Composable
 private fun ProgressButtons(
     buttonColours: ButtonColours,
     onClick: (progressDirection: ProgressDirection) -> Unit,
+    isNextEnabled: Boolean,
+    isPrevEnabled: Boolean,
     prevButtonContentDescription: String?,
     nextButtonContentDescription: String?,
     modifier: Modifier = Modifier,
+    disabledButtonColours: ButtonColours? = null,
 ) {
-    Row(modifier = modifier) {
+    Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
         SourceBaseIconButton(
             size = SourceButton.Size.Small,
             buttonColours = buttonColours,
+            disabledButtonColours = disabledButtonColours,
             onClick = { onClick(ProgressDirection.Previous) },
+            enabled = isPrevEnabled,
+            modifier = Modifier.offset(x = ProgressButtonTouchAdjustment * 2),
         ) {
             Icon(
                 imageVector = Source.Icons.Base.ChevronLeft,
@@ -193,7 +233,9 @@ private fun ProgressButtons(
         SourceBaseIconButton(
             size = SourceButton.Size.Small,
             buttonColours = buttonColours,
+            disabledButtonColours = disabledButtonColours,
             onClick = { onClick(ProgressDirection.Next) },
+            enabled = isNextEnabled,
         ) {
             Icon(
                 imageVector = Source.Icons.Base.ChevronRight,
@@ -221,7 +263,7 @@ private fun AnimatedPreview() {
 
         Column(
             modifier = Modifier
-                .padding(8.dp)
+                .padding(top = 8.dp, start = 8.dp, end = 8.dp)
                 .width(400.dp),
         ) {
             HorizontalPager(state = pagerState) {
@@ -246,9 +288,7 @@ private fun AnimatedPreview() {
             }
             PagerProgressBar(
                 pagerState = pagerState,
-                modifier = Modifier
-                    .padding(top = 8.dp)
-                    .align(Alignment.CenterHorizontally),
+                modifier = Modifier.align(Alignment.CenterHorizontally),
             )
         }
     }
@@ -260,17 +300,30 @@ private fun AnimatedPreview() {
 @Composable
 internal fun PagerProgressBarPreview() {
     AppColourMode {
-        val pagerState = rememberPagerState(1) { 10 }
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            Column(
+                modifier = Modifier
+                    .background(
+                        AppColour(Source.Palette.Neutral100, Source.Palette.Neutral10).current,
+                    )
+                    .width(600.dp),
+            ) {
+                val pagerState = rememberPagerState(2) { 10 }
+                HorizontalPager(state = pagerState) {}
+                PagerProgressBar(pagerState = pagerState)
+            }
 
-        Column(
-            modifier = Modifier
-                .background(
-                    AppColour(Source.Palette.Neutral100, Source.Palette.Neutral10).current,
-                )
-                .width(600.dp),
-        ) {
-            HorizontalPager(state = pagerState) {}
-            PagerProgressBar(pagerState = pagerState)
+            Column(
+                modifier = Modifier
+                    .background(
+                        AppColour(Source.Palette.Neutral100, Source.Palette.Neutral10).current,
+                    )
+                    .width(600.dp),
+            ) {
+                val pagerState = rememberPagerState(0) { 10 }
+                HorizontalPager(state = pagerState) {}
+                PagerProgressBar(pagerState = pagerState)
+            }
         }
     }
 }
diff --git a/android/source/src/main/kotlin/com/gu/source/presets/typography/README.md b/android/source/src/main/kotlin/com/gu/source/presets/typography/README.md
@@ -0,0 +1,19 @@
+# Typography tokens
+
+List of typography tokens and their previews are below. The tokens are namespaced under `Source.Typography`, e.g. `Source.Typography.TextSans14`
+
+
+| Grey boxes represent the drawn area for the text with vertical clipping enabled |
+|---|
+|![headlineBold](https://github.com/user-attachments/assets/4922b064-ee81-408d-9b43-3130d95c1fa0)|
+|![headlineLight](https://github.com/user-attachments/assets/ee8cf3ba-1d97-435f-b850-a51be89c2fcb)|
+|![headlineLightItalic](https://github.com/user-attachments/assets/7f82c14c-949e-44da-a430-f0c6c7cf9150)|
+|![headlineMedium](https://github.com/user-attachments/assets/4305a951-25f7-4263-9e47-1bded6eae452)|
+|![headlineMediumItalic](https://github.com/user-attachments/assets/b81f7e7f-bbdc-416b-8ba0-139bf48781f9)|
+|![headlineSemiBold](https://github.com/user-attachments/assets/e81de258-ffd9-4d2c-be3a-7dd3ad1dad9b)|
+|![textArticle](https://github.com/user-attachments/assets/049258f3-236c-4bae-8e4c-6eec57b12901)|
+|![textEgyptian](https://github.com/user-attachments/assets/20b8adac-e18f-471c-919e-ebc1447ad252)|
+|![textSans](https://github.com/user-attachments/assets/9538255f-2b23-4535-9882-6934a332aa5a)|
+|![textSansBold](https://github.com/user-attachments/assets/23c45ba9-1cba-44da-b258-69950281983e)|
+|![textSansItalic](https://github.com/user-attachments/assets/c7b3d3e5-bbb6-423b-b52d-cfa8ae0e0e16)|
+|![titlepiece](https://github.com/user-attachments/assets/6bc54bbd-968d-4b8e-ad72-d829d2f323bb)|