LMN-966 Create image gallery grid (#1841)

* LMN-966 Create image gallery grid

* Updated snapshots for 'rtl'

* Updated snapshots for 'default'

* LMN-966 Update docs

* Updated snapshots for 'dm'

* Updated snapshots for 'rtl'

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

app/src/androidTest/java/net/skyscanner/backpack/compose/imagegallery/BpkImageGalleryTest.kt

@@ -24,6 +24,8 @@ import androidx.test.platform.app.InstrumentationRegistry
 import androidx.test.uiautomator.UiDevice
 import net.skyscanner.backpack.compose.BpkSnapshotTest
 import net.skyscanner.backpack.demo.compose.ImageGalleryCarouselStory
+import net.skyscanner.backpack.demo.compose.ImageGalleryChipGridStory
+import net.skyscanner.backpack.demo.compose.ImageGalleryImageGridStory
 import net.skyscanner.backpack.demo.compose.ImageGallerySlideshowStory
 import org.junit.Test
 
@@ -48,8 +50,13 @@ class BpkImageGalleryTest : BpkSnapshotTest() {
     }
 
     @Test
-    fun slideshow_second_page() {
-        recordModal { ImageGallerySlideshowStory(initialPage = 2) }
+    fun image_grid() {
+        recordModal { ImageGalleryImageGridStory() }
+    }
+
+    @Test
+    fun chip_grid() {
+        recordModal { ImageGalleryChipGridStory() }
     }
 
     private fun recordModal(content: @Composable () -> Unit) {

app/src/main/java/net/skyscanner/backpack/demo/compose/ImageGalleryStory.kt

@@ -18,6 +18,7 @@
 
 package net.skyscanner.backpack.demo.compose
 
+import android.content.Context
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
@@ -29,15 +30,20 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.launch
 import net.skyscanner.backpack.compose.button.BpkButton
 import net.skyscanner.backpack.compose.carousel.rememberBpkCarouselState
-import net.skyscanner.backpack.compose.imagegallery.BpkImageGallery
+import net.skyscanner.backpack.compose.imagegallery.BpkImageGallerySlideshow
+import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImageGrid
+import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryChipGrid
 import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryCarousel
+import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryChipCategory
 import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImage
+import net.skyscanner.backpack.compose.imagegallery.BpkImageGalleryImageCategory
 import net.skyscanner.backpack.compose.modal.rememberBpkModalState
 import net.skyscanner.backpack.demo.R
 import net.skyscanner.backpack.demo.components.ImageGalleryComponent
@@ -74,6 +80,72 @@ fun ImageGalleryCarouselStory(
     }
 }
 
+@Composable
+@ImageGalleryComponent
+@ComposeStory(name = "Image Grid")
+fun ImageGalleryImageGridStory(
+    modifier: Modifier = Modifier,
+    initialPage: Int = 0,
+) {
+    val context = LocalContext.current
+    val showModal = rememberSaveable { mutableStateOf(true) }
+
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        BpkButton(
+            text = stringResource(R.string.generic_show),
+            onClick = { showModal.value = true },
+        )
+    }
+
+    if (showModal.value) {
+        val modalState = rememberBpkModalState()
+        val coroutineScope = rememberCoroutineScope()
+
+        BpkImageGalleryImageGrid(
+            modifier = modifier,
+            state = modalState,
+            initialCategory = initialPage,
+            closeContentDescription = stringResource(R.string.navigation_close),
+            onCloseClicked = { coroutineScope.launch { modalState.hide() } },
+            onDismiss = { showModal.value = false },
+            categories = ImageGalleryData.imageCategories(context),
+        )
+    }
+}
+
+@Composable
+@ImageGalleryComponent
+@ComposeStory(name = "Chip Grid")
+fun ImageGalleryChipGridStory(
+    modifier: Modifier = Modifier,
+    initialPage: Int = 0,
+) {
+    val context = LocalContext.current
+    val showModal = rememberSaveable { mutableStateOf(true) }
+
+    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
+        BpkButton(
+            text = stringResource(R.string.generic_show),
+            onClick = { showModal.value = true },
+        )
+    }
+
+    if (showModal.value) {
+        val modalState = rememberBpkModalState()
+        val coroutineScope = rememberCoroutineScope()
+
+        BpkImageGalleryChipGrid(
+            modifier = modifier,
+            state = modalState,
+            initialCategory = initialPage,
+            closeContentDescription = stringResource(R.string.navigation_close),
+            onCloseClicked = { coroutineScope.launch { modalState.hide() } },
+            onDismiss = { showModal.value = false },
+            categories = ImageGalleryData.chipCategories(context),
+        )
+    }
+}
+
 @Composable
 @ImageGalleryComponent
 @ComposeStory(name = "Slideshow")
@@ -93,58 +165,126 @@ fun ImageGallerySlideshowStory(
     if (showModal.value) {
         val modalState = rememberBpkModalState()
         val coroutineScope = rememberCoroutineScope()
+        val context = LocalContext.current
 
-        BpkImageGallery(
+        BpkImageGallerySlideshow(
             modifier = modifier,
             state = modalState,
             closeContentDescription = stringResource(R.string.navigation_close),
             initialImage = initialPage,
             onCloseClicked = { coroutineScope.launch { modalState.hide() } },
             onDismiss = { showModal.value = false },
+            images = ImageGalleryData.slideshowImages(context),
+        )
+    }
+}
+
+object ImageGalleryData {
+
+    fun slideshowImages(context: Context) =
+        listOf(
+            BpkImageGalleryImage(
+                title = context.getString(R.string.image_gallery_title_1),
+                description = context.getString(R.string.image_gallery_description_1),
+                credit = context.getString(R.string.image_gallery_photographer_1),
+                content = { contentDescription, contentScale ->
+                    Image(
+                        modifier = Modifier.fillMaxSize(),
+                        painter = placeholder(1),
+                        contentDescription = contentDescription,
+                        contentScale = contentScale,
+                    )
+                },
+            ),
+            galleryImageItem(context, 2),
+            galleryImageItem(context, 3),
+            galleryImageItem(context, 4),
+        )
+
+    fun imageCategories(context: Context) =
+        listOf(
+            imageCategory(context, context.getString(R.string.image_gallery_category_1), 1),
+            imageCategory(context, context.getString(R.string.image_gallery_category_2), 2),
+            imageCategory(context, context.getString(R.string.image_gallery_category_3), 3),
+            imageCategory(context, context.getString(R.string.image_gallery_category_4), 4),
+        )
+
+    fun chipCategories(context: Context) =
+        listOf(
+            chipCategory(context, context.getString(R.string.image_gallery_category_1), 1),
+            chipCategory(context, context.getString(R.string.image_gallery_category_2), 2),
+            chipCategory(context, context.getString(R.string.image_gallery_category_3), 3),
+            chipCategory(context, context.getString(R.string.image_gallery_category_4), 4),
+        )
+
+    fun galleryImageItem(context: Context, index: Int) =
+        BpkImageGalleryImage(
+            title = context.getString(R.string.image_gallery_title_x, index),
+            content = { contentDescription, contentScale ->
+                Image(
+                    modifier = Modifier.fillMaxSize(),
+                    painter = placeholder(index),
+                    contentDescription = contentDescription,
+                    contentScale = contentScale,
+                )
+            },
+        )
+
+    private fun imageCategory(context: Context, title: String, position: Int) =
+        BpkImageGalleryImageCategory(
+            title = title,
             images = listOf(
-                BpkImageGalleryImage(
-                    title = stringResource(R.string.image_gallery_title_1),
-                    description = stringResource(R.string.image_gallery_description_1),
-                    credit = stringResource(R.string.image_gallery_photographer_1),
-                    content = { contentDescription ->
-                        Image(
-                            modifier = Modifier.fillMaxSize(),
-                            painter = painterResource(R.drawable.carousel_placeholder_1),
-                            contentDescription = contentDescription,
-                        )
-                    },
-                ),
-                BpkImageGalleryImage(
-                    title = stringResource(R.string.image_gallery_title_x, 2),
-                    content = { contentDescription ->
-                        Image(
-                            modifier = Modifier.fillMaxSize(),
-                            painter = painterResource(R.drawable.carousel_placeholder_2),
-                            contentDescription = contentDescription,
-                        )
-                    },
-                ),
-                BpkImageGalleryImage(
-                    title = stringResource(R.string.image_gallery_title_x, 3),
-                    content = { contentDescription ->
-                        Image(
-                            modifier = Modifier.fillMaxSize(),
-                            painter = painterResource(R.drawable.carousel_placeholder_3),
-                            contentDescription = contentDescription,
-                        )
-                    },
-                ),
-                BpkImageGalleryImage(
-                    title = stringResource(R.string.image_gallery_title_x, 4),
-                    content = { contentDescription ->
-                        Image(
-                            modifier = Modifier.fillMaxSize(),
-                            painter = painterResource(R.drawable.carousel_placeholder_4),
-                            contentDescription = contentDescription,
-                        )
-                    },
-                ),
+                galleryImageItem(context, 1 * position),
+                galleryImageItem(context, 2 * position),
+                galleryImageItem(context, 3 * position),
+                galleryImageItem(context, 4 * position),
+                galleryImageItem(context, 5 * position),
+                galleryImageItem(context, 6 * position),
+                galleryImageItem(context, 7 * position),
+                galleryImageItem(context, 8 * position),
+                galleryImageItem(context, 9 * position),
             ),
+            content = {
+                Image(
+                    modifier = Modifier.fillMaxSize(),
+                    painter = placeholder(position),
+                    contentDescription = title,
+                    contentScale = ContentScale.Crop,
+                )
+            },
+        )
+
+    private fun chipCategory(context: Context, title: String, position: Int) =
+        BpkImageGalleryChipCategory(
+            title = title,
+            images = listOf(
+                galleryImageItem(context, 1 * position),
+                galleryImageItem(context, 2 * position),
+                galleryImageItem(context, 3 * position),
+                galleryImageItem(context, 4 * position),
+                galleryImageItem(context, 5 * position),
+                galleryImageItem(context, 6 * position),
+                galleryImageItem(context, 7 * position),
+                galleryImageItem(context, 8 * position),
+                galleryImageItem(context, 9 * position),
+            ),
+        )
+
+    @Composable
+    private fun placeholder(index: Int) =
+        painterResource(
+            when (index % 10) {
+                0 -> R.drawable.carousel_placeholder_1
+                1 -> R.drawable.carousel_placeholder_2
+                2 -> R.drawable.carousel_placeholder_3
+                3 -> R.drawable.carousel_placeholder_4
+                4 -> R.drawable.canadian_rockies_canada
+                5 -> R.drawable.beach
+                6 -> R.drawable.city
+                7 -> R.drawable.sea
+                8 -> R.drawable.sunset
+                9 -> R.drawable.graphic_promo
+                else -> R.drawable.carousel_placeholder_1
+            },
         )
-    }
 }

app/src/main/java/net/skyscanner/backpack/demo/compose/SnippetStory.kt

@@ -19,6 +19,7 @@
 package net.skyscanner.backpack.demo.compose
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
@@ -91,6 +92,7 @@ internal fun DefaultSnippetSample(
         bodyText = bodyText,
     ) {
         Image(
+            modifier = Modifier.fillMaxSize(),
             painter = painterResource(R.drawable.snippet_placeholder_1),
             contentDescription = stringResource(R.string.snippet_image_content_description),
             contentScale = ContentScale.Crop,

app/src/main/res/values/strings.xml

@@ -371,4 +371,8 @@
     <string name="image_gallery_description_1">Walk deep into the fjord-like surrounds of Lake St Clair, explore the giant myrtle forests, tread softly on the moss-covered understory and forget the world you left behind</string>
     <string name="image_gallery_photographer_1">\@PhotographerName</string>
     <string name="image_gallery_title_x">Image %d</string>
+    <string name="image_gallery_category_1">Traveller photos (31)</string>
+    <string name="image_gallery_category_2">All photos (59)</string>
+    <string name="image_gallery_category_3">Official photos (43)</string>
+    <string name="image_gallery_category_4">Bedroom (13)</string>
 </resources>