feat: create component - bottom sheet

app/src/main/java/com/orange/ouds/app/ui/components/Component.kt

@@ -19,6 +19,8 @@ import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.components.alert.AlertMessageDemoScreen
 import com.orange.ouds.app.ui.components.alert.InlineAlertDemoScreen
 import com.orange.ouds.app.ui.components.badge.BadgeDemoScreen
+import com.orange.ouds.app.ui.components.bottomsheet.StandardBottomSheetDemoScreen
+import com.orange.ouds.app.ui.components.bottomsheet.ModalBottomSheetDemoScreen
 import com.orange.ouds.app.ui.components.bulletlist.BulletListDemoScreen
 import com.orange.ouds.app.ui.components.button.ButtonDemoScreen
 import com.orange.ouds.app.ui.components.checkbox.CheckboxDemoScreen
@@ -73,6 +75,13 @@ sealed class Component(
         demoScreen = { BadgeDemoScreen() }
     )
 
+    data object BottomSheet : Component(
+        R.string.app_components_bottomSheet_tech,
+        R.string.app_components_bottomSheet_description_text,
+        { BottomSheetIllustration() },
+        listOf(Variant.StandardBottomSheet, Variant.ModalBottomSheet)
+    )
+
     data object BulletList : Component(
         R.string.app_components_bulletList_tech,
         R.string.app_components_bulletList_description_text,
@@ -201,6 +210,10 @@ sealed class Variant(
     data object AlertMessage : Variant(R.string.app_components_alert_alertMessage_tech, { AlertMessageDemoScreen() })
     data object InlineAlert : Variant(R.string.app_components_alert_inlineAlert_tech, { InlineAlertDemoScreen() })
 
+    // Bottom sheet
+    data object StandardBottomSheet : Variant(R.string.app_components_bottomSheet_standardBottomSheet_tech, { StandardBottomSheetDemoScreen() })
+    data object ModalBottomSheet : Variant(R.string.app_components_bottomSheet_modalBottomSheet_tech, { ModalBottomSheetDemoScreen() })
+
     // Checkbox
     data object Checkbox : Variant(R.string.app_components_checkbox_checkbox_tech, { CheckboxDemoScreen() })
     data object CheckboxItem : Variant(R.string.app_components_checkbox_checkboxItem_tech, { CheckboxItemDemoScreen() })

app/src/main/java/com/orange/ouds/app/ui/components/ComponentIllustrations.kt

@@ -24,6 +24,9 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalCursorBlinkEnabled
 import androidx.compose.ui.platform.LocalDensity
@@ -40,6 +43,7 @@ import com.orange.ouds.core.component.OudsAlertMessage
 import com.orange.ouds.core.component.OudsBadge
 import com.orange.ouds.core.component.OudsBadgeSize
 import com.orange.ouds.core.component.OudsBadgeStatus
+import com.orange.ouds.core.component.OudsBottomSheetScaffold
 import com.orange.ouds.core.component.OudsBulletList
 import com.orange.ouds.core.component.OudsBulletListType
 import com.orange.ouds.core.component.OudsButton
@@ -87,6 +91,20 @@ fun BadgeIllustration() = ComponentIllustration {
     )
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun BottomSheetIllustration() = ComponentIllustration {
+    OudsBottomSheetScaffold(
+        modifier = Modifier
+            .clip(RectangleShape)
+            .padding(horizontal = 16.dp),
+        sheetPeekHeight = 120.dp,
+        sheetSwipeEnabled = false,
+        sheetContent = {},
+        containerColor = Color.Transparent
+    ) {}
+}
+
 @Composable
 fun BulletListIllustration() = ComponentIllustration {
     val label = stringResource(id = R.string.app_components_common_label_label)

app/src/main/java/com/orange/ouds/app/ui/components/ComponentsScreen.kt

@@ -66,7 +66,7 @@ private fun ComponentsScreen(components: List<Component>, onComponentClick: (Lon
 @Composable
 private fun PreviewComponentsScreen() = AppPreview {
     ComponentsScreen(
-        components = listOf(Component.Button, Component.BulletList),
+        components = listOf(Component.Button, Component.BottomSheet),
         onComponentClick = {}
     )
 }

app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/BottomSheetDemoContent.kt

@@ -0,0 +1,49 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.bottomsheet
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import com.orange.ouds.app.R
+import com.orange.ouds.core.component.OudsButton
+import com.orange.ouds.core.theme.OudsTheme
+
+@Composable
+fun BottomSheetDemoContent(dragHandle: Boolean, buttonLabel: String, onButtonClick: () -> Unit) {
+    val scrollState = rememberScrollState()
+    Column(
+        modifier = Modifier
+            .verticalScroll(scrollState)
+            .padding(top = if (dragHandle) 0.dp else OudsTheme.spaces.fixed.medium)
+    ) {
+        Text(
+            modifier = Modifier.padding(horizontal = OudsTheme.grids.margin),
+            text = stringResource(R.string.app_components_bottomSheet_sheetContent_text)
+        )
+        OudsButton(
+            modifier = Modifier.padding(
+                vertical = OudsTheme.spaces.fixed.medium,
+                horizontal = OudsTheme.grids.margin
+            ),
+            label = buttonLabel,
+            onClick = onButtonClick
+        )
+    }
+}

app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/ModalBottomSheetDemoScreen.kt

@@ -0,0 +1,132 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.bottomsheet
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.utilities.Code
+import com.orange.ouds.app.ui.utilities.composable.AppPreview
+import com.orange.ouds.app.ui.utilities.composable.CodeSnippet
+import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
+import com.orange.ouds.app.ui.utilities.composable.DetailScreenDescription
+import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.app.ui.utilities.consumeTopBarsTopWindowInsets
+import com.orange.ouds.app.ui.utilities.topBarsTopPadding
+import com.orange.ouds.core.component.OudsButton
+import com.orange.ouds.core.component.OudsModalBottomSheet
+import com.orange.ouds.core.theme.OudsTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ModalBottomSheetDemoScreen() {
+    val state = rememberModalBottomSheetDemoState()
+    var modalBottomSheetVisible by rememberSaveable { mutableStateOf(false) }
+    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    with(state) {
+        Screen {
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .verticalScroll(rememberScrollState())
+                    .consumeTopBarsTopWindowInsets()
+                    .padding(top = topBarsTopPadding)
+            ) {
+                DetailScreenDescription(
+                    modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.medium),
+                    description = stringResource(id = R.string.app_components_bottomSheet_modalBottomSheet_description_text)
+                )
+                ModalBottomSheetDemoCustomization(
+                    state = state,
+                    onButtonClick = { modalBottomSheetVisible = true }
+                )
+                CodeSnippet(
+                    modifier = Modifier
+                        .padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.medium)
+                        .padding(top = OudsTheme.spaces.fixed.medium),
+                    init = { modalBottomSheetDemoCodeSnippet(state = state) }
+                )
+                if (modalBottomSheetVisible) {
+                    OudsModalBottomSheet(
+                        dragHandle = dragHandle,
+                        sheetGesturesEnabled = sheetGesturesEnabled,
+                        onDismissRequest = { modalBottomSheetVisible = false },
+                        sheetState = sheetState
+                    ) {
+                        BottomSheetDemoContent(
+                            dragHandle = dragHandle,
+                            buttonLabel = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_close_label)
+                        ) {
+                            modalBottomSheetVisible = false
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ModalBottomSheetDemoCustomization(state: ModalBottomSheetDemoState, onButtonClick: () -> Unit) {
+    with(state) {
+        CustomizationSwitchItem(
+            label = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_dragHandle_tech),
+            checked = dragHandle,
+            onCheckedChange = { dragHandle = it },
+        )
+        CustomizationSwitchItem(
+            label = stringResource(R.string.app_components_bottomSheet_modalBottomSheet_sheetGesturesEnabled_tech),
+            checked = sheetGesturesEnabled,
+            onCheckedChange = { sheetGesturesEnabled = it },
+        )
+        OudsButton(
+            modifier = Modifier.padding(horizontal = OudsTheme.grids.margin, vertical = OudsTheme.spaces.fixed.small),
+            label = "Show bottom sheet",
+            onClick = onButtonClick
+        )
+    }
+}
+
+private fun Code.Builder.modalBottomSheetDemoCodeSnippet(state: ModalBottomSheetDemoState) {
+    functionCall("OudsModalBottomSheet") {
+        trailingLambda = true
+        typedArgument("dragHandle", state.dragHandle)
+        typedArgument("sheetGesturesEnabled", state.sheetGesturesEnabled)
+        functionCallArgument("sheetState", "rememberModalBottomSheetState")
+        lambdaArgument("onDismissRequest") {
+            comment("do something on dismiss")
+        }
+        lambdaArgument(null) {
+            comment("sheet content")
+        }
+    }
+}
+
+@PreviewLightDark
+@Composable
+private fun PreviewModalBottomSheetDemoScreen() = AppPreview {
+    ModalBottomSheetDemoScreen()
+}

app/src/main/java/com/orange/ouds/app/ui/components/bottomsheet/ModalBottomSheetDemoState.kt

@@ -0,0 +1,55 @@
+/*
+ * Software Name: OUDS Android
+ * SPDX-FileCopyrightText: Copyright (c) Orange SA
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT license,
+ * the text of which is available at https://opensource.org/license/MIT/
+ * or see the "LICENSE" file for more details.
+ *
+ * Software description: Android library of reusable graphical components
+ */
+
+package com.orange.ouds.app.ui.components.bottomsheet
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.listSaver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+
+@Composable
+fun rememberModalBottomSheetDemoState(
+    dragHandle: Boolean = true,
+    sheetGesturesEnabled: Boolean = true
+) = rememberSaveable(dragHandle, sheetGesturesEnabled, saver = ModalBottomSheetDemoState.Saver) {
+    ModalBottomSheetDemoState(dragHandle, sheetGesturesEnabled)
+}
+
+class ModalBottomSheetDemoState(
+    dragHandle: Boolean,
+    sheetGesturesEnabled: Boolean
+) {
+    companion object {
+        val Saver = listSaver(
+            save = { state ->
+                with(state) {
+                    listOf(
+                        dragHandle,
+                        sheetGesturesEnabled
+                    )
+                }
+            },
+            restore = { list: List<Any?> ->
+                ModalBottomSheetDemoState(
+                    list[0] as Boolean,
+                    list[1] as Boolean
+                )
+            }
+        )
+    }
+
+    var dragHandle: Boolean by mutableStateOf(dragHandle)
+    var sheetGesturesEnabled: Boolean by mutableStateOf(sheetGesturesEnabled)
+}