diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt index f1c0cbca2..1dba32b95 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/sheets/ComponentSheetBottom.kt @@ -10,24 +10,33 @@ package com.orange.ods.demo.ui.components.sheets +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.rememberBottomSheetScaffoldState 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.res.stringResource +import androidx.compose.ui.unit.dp +import com.orange.ods.compose.component.OdsComponent import com.orange.ods.compose.component.chip.OdsChoiceChip import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow import com.orange.ods.compose.component.list.OdsListItem -import com.orange.ods.compose.text.OdsTextCaption -import com.orange.ods.compose.text.OdsTextH6 +import com.orange.ods.compose.component.list.OdsListItemIcon +import com.orange.ods.compose.component.list.OdsListItemIconType +import com.orange.ods.compose.component.list.iconType +import com.orange.ods.compose.text.OdsTextBody1 +import com.orange.ods.compose.text.OdsTextSubtitle1 import com.orange.ods.demo.R import com.orange.ods.demo.domain.recipes.LocalRecipes import com.orange.ods.demo.ui.components.utilities.ComponentCustomizationBottomSheetScaffold import com.orange.ods.demo.ui.utilities.composable.CodeImplementationColumn -import com.orange.ods.demo.ui.utilities.composable.FloatingActionButtonTechnicalTextColumn +import com.orange.ods.demo.ui.utilities.composable.CommonTechnicalTextColumn +import com.orange.ods.demo.ui.utilities.composable.TechnicalText @OptIn(ExperimentalMaterialApi::class) @@ -40,49 +49,51 @@ fun ComponentSheetBottom() { ComponentCustomizationBottomSheetScaffold( + titleResId = R.string.component_sheet_recipes, bottomSheetScaffoldState = rememberBottomSheetScaffoldState(), bottomSheetContent = { when (content.value) { SheetsbottomCustomizationState.Content.Empty -> { - OdsListItem( - text = "" - ) + Box(modifier = Modifier.height(200.dp)) } SheetsbottomCustomizationState.Content.Example -> { val recipes = LocalRecipes.current - recipes.forEach { recipe -> + recipes.take(3).forEach { recipe -> OdsListItem( - //icon = recipe.iconResId?.let { iconRes -> - // { - // OdsListItemIcon( - // painter = painterResource(id = iconRes), - // contentDescription = null - // ) - //} - //}, + Modifier.iconType(OdsListItemIconType.Icon), + icon = recipe.iconResId?.let { iconRes -> + { + OdsListItemIcon( + painterResource(id = iconRes) + ) + } + }, text = recipe.title ) } - } - } } ) { - Column() { + Column { Column( modifier = Modifier .padding(top = dimensionResource(id = R.dimen.screen_vertical_margin)) .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)) ) { - OdsTextH6(text = stringResource(id = R.string.component_sheet_customize)) - OdsTextCaption(text = stringResource(id = R.string.component_content)) + OdsTextBody1(text = stringResource(id = R.string.component_sheet_customize)) + + OdsTextSubtitle1( + text = stringResource(id = R.string.component_content), + modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_s)) + ) OdsChoiceChipsFlowRow( selectedChip = content, - outlinedChips = true + outlinedChips = true, + modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_xs)) ) { OdsChoiceChip(textRes = R.string.component_sheet_empty, value = SheetsbottomCustomizationState.Content.Empty) OdsChoiceChip(textRes = R.string.component_sheet_example, value = SheetsbottomCustomizationState.Content.Example) @@ -90,9 +101,13 @@ fun ComponentSheetBottom() { } CodeImplementationColumn { - FloatingActionButtonTechnicalTextColumn( - componentName = "" - ) + CommonTechnicalTextColumn( + componentName = OdsComponent.OdsBottomSheetScaffold.name + ) { + TechnicalText(text = "sheetContent = {") + TechnicalText(text = " // add your content here") + TechnicalText(text = "}") + } } } } diff --git a/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt b/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt index 96ee79dfc..4f4ee56a9 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/components/utilities/ComponentCustomizationBottomSheet.kt @@ -21,7 +21,6 @@ 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.material.BottomSheetScaffold import androidx.compose.material.BottomSheetScaffoldState import androidx.compose.material.BottomSheetValue import androidx.compose.material.ExperimentalMaterialApi @@ -39,6 +38,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.semantics.semantics import androidx.compose.ui.semantics.stateDescription import androidx.compose.ui.unit.dp +import com.orange.ods.compose.component.bottomsheet.OdsBottomSheetScaffold import com.orange.ods.compose.component.list.OdsListItem import com.orange.ods.compose.theme.OdsTheme import com.orange.ods.demo.R @@ -50,6 +50,7 @@ import kotlinx.coroutines.launch fun ComponentCustomizationBottomSheetScaffold( bottomSheetScaffoldState: BottomSheetScaffoldState, snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(hostState = it) }, + titleResId: Int = R.string.component_customize, floatingActionButton: (@Composable () -> Unit)? = null, floatingActionButtonPosition: FabPosition = FabPosition.End, bottomSheetContent: @Composable () -> Unit, @@ -65,8 +66,7 @@ fun ComponentCustomizationBottomSheetScaffold( bottomSheetScaffoldState.bottomSheetState.collapse() } } - BottomSheetScaffold( - sheetBackgroundColor = OdsTheme.colors.surface, + OdsBottomSheetScaffold( scaffoldState = bottomSheetScaffoldState, floatingActionButton = floatingActionButton, floatingActionButtonPosition = floatingActionButtonPosition, @@ -87,17 +87,17 @@ fun ComponentCustomizationBottomSheetScaffold( .semantics { stateDescription = bottomSheetHeaderStateDescription }, - text = stringResource(id = R.string.component_customize) - ) { - val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f - val angle by animateFloatAsState(targetValue = degrees) - Icon( - modifier = Modifier.rotate(angle), - painter = painterResource(id = R.drawable.ic_chevron_down), - contentDescription = null, - tint = OdsTheme.colors.onSurface - ) - } + text = stringResource(id = titleResId), + icon = { + val degrees = if (bottomSheetScaffoldState.bottomSheetState.isExpanded) 0f else -180f + val angle by animateFloatAsState(targetValue = degrees) + Icon( + modifier = Modifier.rotate(angle), + painter = painterResource(id = R.drawable.ic_chevron_down), + contentDescription = null, + tint = OdsTheme.colors.onSurface + ) + }) Column(modifier = Modifier.verticalScroll(rememberScrollState())) { bottomSheetContent() diff --git a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt index 3a3868754..6122060aa 100644 --- a/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt +++ b/demo/src/main/java/com/orange/ods/demo/ui/utilities/composable/CodeImplementation.kt @@ -90,21 +90,33 @@ fun RowSurroundedTechnicalText(content: @Composable () -> Unit) { } @Composable -private fun CommonButtonTechnicalTextColumn( +fun CommonTechnicalTextColumn( componentName: String, - fullScreenWidth: Boolean?, modifier: Modifier = Modifier, content: @Composable () -> Unit = {} ) { Column(modifier = modifier) { TechnicalText(text = "$componentName(") Column(modifier = Modifier.padding(start = dimensionResource(id = R.dimen.spacing_s))) { - if (fullScreenWidth == true) { - TechnicalText(text = "modifier = Modifier.fillMaxWidth(),") - } content() - TechnicalText(text = "//...") } TechnicalText(text = ")") } +} + +@Composable +private fun CommonButtonTechnicalTextColumn( + componentName: String, + fullScreenWidth: Boolean?, + modifier: Modifier = Modifier, + content: @Composable () -> Unit = {} +) { + CommonTechnicalTextColumn(componentName = componentName, modifier = modifier){ + if (fullScreenWidth == true) { + TechnicalText(text = "modifier = Modifier.fillMaxWidth(),") + } + content() + TechnicalText(text = "//...") + } + } \ No newline at end of file diff --git a/demo/src/main/res/values/strings.xml b/demo/src/main/res/values/strings.xml index 6bb8fc00d..f311a0092 100644 --- a/demo/src/main/res/values/strings.xml +++ b/demo/src/main/res/values/strings.xml @@ -250,6 +250,7 @@ Customize the bottom sheet Empty Example + Recipes Snackbars diff --git a/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt b/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheetScaffold.kt similarity index 73% rename from lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt rename to lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheetScaffold.kt index dbc86031c..fa1b074ef 100644 --- a/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheet.kt +++ b/lib/src/main/java/com/orange/ods/compose/component/bottomsheet/OdsBottomSheetScaffold.kt @@ -17,15 +17,11 @@ import androidx.compose.material.BottomSheetScaffoldDefaults import androidx.compose.material.BottomSheetScaffoldState import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.FabPosition -import androidx.compose.material.MaterialTheme import androidx.compose.material.SnackbarHost import androidx.compose.material.SnackbarHostState -import androidx.compose.material.contentColorFor import androidx.compose.material.rememberBottomSheetScaffoldState import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.Shape import androidx.compose.ui.unit.Dp import com.orange.ods.compose.component.OdsComponentApi import com.orange.ods.compose.theme.OdsTheme @@ -33,7 +29,7 @@ import com.orange.ods.compose.theme.OdsTheme @Composable @ExperimentalMaterialApi @OdsComponentApi -fun OdsBottomSheet( +fun OdsBottomSheetScaffold( sheetContent: @Composable ColumnScope.() -> Unit, modifier: Modifier = Modifier, scaffoldState: BottomSheetScaffoldState = rememberBottomSheetScaffoldState(), @@ -42,13 +38,7 @@ fun OdsBottomSheet( floatingActionButton: (@Composable () -> Unit)? = null, floatingActionButtonPosition: FabPosition = FabPosition.End, sheetGesturesEnabled: Boolean = true, - sheetShape: Shape = MaterialTheme.shapes.large, - sheetElevation: Dp = BottomSheetScaffoldDefaults.SheetElevation, - sheetBackgroundColor: Color = MaterialTheme.colors.surface, - sheetContentColor: Color = contentColorFor(sheetBackgroundColor), sheetPeekHeight: Dp = BottomSheetScaffoldDefaults.SheetPeekHeight, - backgroundColor: Color = OdsTheme.colors.surface, - contentColor: Color = contentColorFor(backgroundColor), content: @Composable (PaddingValues) -> Unit ) { @@ -60,14 +50,13 @@ fun OdsBottomSheet( snackbarHost = snackbarHost, floatingActionButton = floatingActionButton, floatingActionButtonPosition = floatingActionButtonPosition, - sheetElevation = sheetElevation, sheetGesturesEnabled = sheetGesturesEnabled, - sheetShape = sheetShape, - sheetBackgroundColor = MaterialTheme.colors.surface, - sheetContentColor = sheetContentColor, + sheetShape = OdsTheme.shapes.large, + sheetBackgroundColor = OdsTheme.colors.surface, + sheetContentColor = OdsTheme.colors.onSurface, sheetPeekHeight = sheetPeekHeight, backgroundColor = OdsTheme.colors.surface, - contentColor = contentColor, + contentColor = OdsTheme.colors.onSurface, content = content ) } \ No newline at end of file