feat: create component - navigation bar

NOTICE.txt

@@ -12,6 +12,7 @@ app/src/alpha/res/drawable-v24/ic_launcher_background.xml
 app/src/alpha/res/drawable/ic_launcher_foreground.xml
 app/src/beta/res/drawable-v24/ic_launcher_background.xml
 app/src/beta/res/drawable/ic_launcher_foreground.xml
+app/src/main/res/drawable/ic_avatar.xml
 app/src/main/res/drawable/ic_border.xml
 app/src/main/res/drawable/ic_call.xml
 app/src/main/res/drawable/ic_chevron_down.xml
@@ -22,11 +23,15 @@ app/src/main/res/drawable/ic_dimension.xml
 app/src/main/res/drawable/ic_filters.xml
 app/src/main/res/drawable/ic_filter_effects.xml
 app/src/main/res/drawable/ic_heart.xml
+app/src/main/res/drawable/ic_home.xml
 app/src/main/res/drawable/ic_info.xml
 app/src/main/res/drawable/ic_layers.xml
 app/src/main/res/drawable/ic_menu_grid.xml
+app/src/main/res/drawable/ic_notification_alert.xml
 app/src/main/res/drawable/ic_palette.xml
+app/src/main/res/drawable/ic_settings.xml
 app/src/main/res/drawable/ic_sms_message.xml
+app/src/main/res/drawable/ic_shop_store.xml
 app/src/main/res/drawable/ic_solar_palette.xml
 app/src/main/res/drawable/ic_typography.xml
 app/src/main/res/drawable/ic_ui_dark_mode.xml

THIRD_PARTY.md

@@ -23,5 +23,6 @@ requirements of the relevant license of the Third Party software they are using.
 |-----------------------------------------------------------------------|-----------------------|--------------------|
 | [Firebase](https://github.com/firebase/firebase-android-sdk)          | © 2019 Google LLC     | Apache License 2.0 |
 | [Git Changelog Lib](https://github.com/tomasbjerre/git-changelog-lib) |                       | Apache License 2.0 |
+| [Haze](https://github.com/chrisbanes/haze)                            | © 2024 Chris Banes    | Apache License 2.0 |
 | [OUDS Android](https://github.com/Orange-OpenSource/ouds-android)     | © 2024-2025 Orange SA | MIT License        |
 | [ZXing](https://github.com/zxing/zxing)                               | © ZXing authors       | Apache License 2.0 |

app/build.gradle.kts

@@ -138,6 +138,7 @@ dependencies {
     implementation(libs.androidx.navigation.compose)
     implementation(platform(libs.firebase.bom))
     implementation(libs.firebase.crashlytics)
+    implementation(libs.haze)
     implementation(libs.hilt.android)
     kapt(libs.hilt.compiler)
     implementation(libs.kotlin.reflect)

app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt

@@ -31,56 +31,46 @@ import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.only
 import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.windowInsetsPadding
-import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.NavigationBar
-import androidx.compose.material3.NavigationBarItem
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.R
+import com.orange.ouds.core.component.OudsNavigationBar
+import com.orange.ouds.core.component.OudsNavigationBarItem
+import com.orange.ouds.core.component.OudsNavigationBarItemIcon
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.utilities.OudsPreview
 
 @Composable
-fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, visible: Boolean = true) {
+fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, modifier: Modifier = Modifier, visible: Boolean = true) {
     Column(modifier = Modifier.windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))) {
-        val navigationBarBackgroundColor = OudsTheme.colorScheme.background.secondary //TODO Temporary color. Waiting for Material colors from Maxime.
+        val systemNavigationBackgroundColor = OudsTheme.colorScheme.background.secondary //TODO Temporary color. Waiting for Material colors from Maxime.
         AnimatedVisibility(
             visible = visible,
             enter = fadeIn(tween(100)),
             exit = fadeOut(tween(100))
         ) {
             val items = BottomBarItem.entries.toTypedArray()
-            NavigationBar(
-                modifier = Modifier.consumeWindowInsets(WindowInsets.navigationBars),
-                containerColor = navigationBarBackgroundColor,
-                content = {
-                    items.forEach { item ->
-                        NavigationBarItem(
-                            selected = currentRoute == item.route,
-                            icon = {
-                                Icon(painterResource(item.iconRes), null)
-                            },
-                            label = {
-                                Text(
-                                    text = stringResource(item.titleRes),
-                                    maxLines = 1,
-                                    overflow = TextOverflow.Ellipsis,
-                                )
-                            },
-                            onClick = { navigateToRoute(item.route) }
-                        )
-                    }
+            OudsNavigationBar(
+                modifier = modifier.consumeWindowInsets(WindowInsets.navigationBars),
+                translucent = true
+            ) {
+                items.forEach { item ->
+                    OudsNavigationBarItem(
+                        modifier = Modifier.weight(1f),
+                        selected = currentRoute == item.route,
+                        icon = OudsNavigationBarItemIcon(painter = painterResource(item.iconRes), ""),
+                        label = stringResource(item.titleRes),
+                        onClick = { navigateToRoute(item.route) }
+                    )
                 }
-            )
+            }
         }
-        val systemNavigationBarBackgroundColor by animateColorAsState(if (visible) navigationBarBackgroundColor else MaterialTheme.colorScheme.surface)
+        val systemNavigationBarBackgroundColor by animateColorAsState(if (visible) systemNavigationBackgroundColor else MaterialTheme.colorScheme.surface)
         Spacer(
             modifier = Modifier
                 .background(systemNavigationBarBackgroundColor)

app/src/main/java/com/orange/ouds/app/ui/MainScreen.kt

@@ -23,8 +23,10 @@ import androidx.activity.enableEdgeToEdge
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.displayCutout
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.union
 import androidx.compose.material3.Scaffold
@@ -37,6 +39,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.unit.dp
 import androidx.core.content.getSystemService
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
 import androidx.navigation.compose.NavHost
@@ -46,6 +49,10 @@ import com.orange.ouds.core.utilities.OudsPreview
 import com.orange.ouds.foundation.extensions.orElse
 import com.orange.ouds.theme.OudsThemeSettings
 import com.orange.ouds.theme.orange.ORANGE_THEME_NAME
+import dev.chrisbanes.haze.HazeStyle
+import dev.chrisbanes.haze.hazeEffect
+import dev.chrisbanes.haze.hazeSource
+import dev.chrisbanes.haze.rememberHazeState
 
 @Composable
 fun MainScreen(mainViewModel: MainViewModel = hiltViewModel()) {
@@ -85,6 +92,8 @@ fun MainScreen(
     var changeThemeDialogVisible by rememberSaveable { mutableStateOf(false) }
     var changeThemeSettingsDialogVisible by rememberSaveable { mutableStateOf(false) }
 
+    val hazeState = rememberHazeState(blurEnabled = true)
+
     OudsTheme(
         theme = mainState.themeState.currentTheme,
         darkThemeEnabled = isSystemInDarkTheme,
@@ -107,6 +116,10 @@ fun MainScreen(
             },
             bottomBar = {
                 BottomBar(
+                    modifier = Modifier.hazeEffect(
+                        state = hazeState,
+                        style = HazeStyle(tint = null, blurRadius = OudsTheme.navigationBarBlur.dp)
+                    ),
                     currentRoute = mainState.navigationState.currentRoute.orEmpty(),
                     navigateToRoute = { route ->
                         mainState.navigationState.navigateToBottomBarRoute(route)
@@ -120,7 +133,8 @@ fun MainScreen(
                 startDestination = BottomBarItem.Tokens.route,
                 modifier = Modifier
                     .consumeWindowInsets(innerPadding)
-                    .padding(innerPadding)
+                    .padding(top = innerPadding.calculateTopPadding(), bottom = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding())
+                    .hazeSource(state = hazeState)
             ) {
                 appNavGraph(mainState)
             }

app/src/main/java/com/orange/ouds/app/ui/about/AboutScreen.kt

@@ -22,6 +22,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ListItem
@@ -41,6 +43,7 @@ import com.orange.ouds.app.BuildConfig
 import com.orange.ouds.app.R
 import com.orange.ouds.app.ui.utilities.composable.Screen
 import com.orange.ouds.app.ui.utilities.listItemHorizontalPadding
+import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.utilities.OudsPreview
 
@@ -122,6 +125,9 @@ fun AboutScreen(onMenuItemClick: (id: Int) -> Unit) {
                     headlineContent = { Text(text = stringResource(id = item.labelRes), style = OudsTheme.typography.body.strong.large) }
                 )
             }
+            item {
+                Spacer(modifier = Modifier.height(OudsNavigationBarHeight))
+            }
         }
     }
 }

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

@@ -25,6 +25,7 @@ import com.orange.ouds.app.ui.components.chip.SuggestionChipDemoScreen
 import com.orange.ouds.app.ui.components.coloredbackground.ColoredBackgroundDemoScreen
 import com.orange.ouds.app.ui.components.divider.DividerDemoScreen
 import com.orange.ouds.app.ui.components.link.LinkDemoScreen
+import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoScreen
 import com.orange.ouds.app.ui.components.radiobutton.RadioButtonDemoScreen
 import com.orange.ouds.app.ui.components.radiobutton.RadioButtonItemDemoScreen
 import com.orange.ouds.app.ui.components.switch.SwitchDemoScreen
@@ -100,6 +101,13 @@ sealed class Component(
         demoScreen = { LinkDemoScreen() }
     )
 
+    data object NavigationBar : Component(
+        R.string.app_components_navigationBar_label,
+        R.string.app_components_navigationBar_description_text,
+        { NavigationBarIllustration() },
+        demoScreen = { NavigationBarDemoScreen() }
+    )
+
     data object RadioButton : Component(
         R.string.app_components_radioButton_label,
         R.string.app_components_radioButton_description_text,

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

@@ -23,6 +23,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
@@ -40,6 +41,9 @@ import com.orange.ouds.core.component.OudsFilterChip
 import com.orange.ouds.core.component.OudsHorizontalDivider
 import com.orange.ouds.core.component.OudsLink
 import com.orange.ouds.core.component.OudsLinkArrow
+import com.orange.ouds.core.component.OudsNavigationBar
+import com.orange.ouds.core.component.OudsNavigationBarItem
+import com.orange.ouds.core.component.OudsNavigationBarItemIcon
 import com.orange.ouds.core.component.OudsRadioButton
 import com.orange.ouds.core.component.OudsSwitch
 import com.orange.ouds.core.component.OudsTag
@@ -127,6 +131,24 @@ fun LinkIllustration() = ComponentIllustration {
     )
 }
 
+@Composable
+fun NavigationBarIllustration() = ComponentIllustration {
+    OudsNavigationBar(modifier = Modifier.padding(horizontal = 12.dp)) {
+        for (index in 0..2) {
+            OudsNavigationBarItem(
+                modifier = Modifier.weight(1f),
+                selected = index == 0,
+                onClick = {},
+                icon = OudsNavigationBarItemIcon(
+                    painter = painterResource(R.drawable.ic_heart),
+                    contentDescription = ""
+                ),
+                label = stringResource(R.string.app_components_common_label_label)
+            )
+        }
+    }
+}
+
 @Composable
 fun RadioButtonIllustration() = ComponentIllustration {
     Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {

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

@@ -14,7 +14,9 @@ package com.orange.ouds.app.ui.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
@@ -24,6 +26,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import com.orange.ouds.app.ui.utilities.composable.LargeCard
 import com.orange.ouds.app.ui.utilities.composable.Screen
+import com.orange.ouds.core.component.OudsNavigationBarHeight
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.utilities.OudsPreview
 
@@ -52,6 +55,7 @@ private fun ComponentsScreen(components: List<Component>, onComponentClick: (Lon
                     onClick = { onComponentClick(component.id) }
                 )
             }
+            Spacer(modifier = Modifier.height(OudsNavigationBarHeight))
         }
     }
 }

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

@@ -128,7 +128,7 @@ private fun BadgeDemoContent(state: BadgeDemoState) {
             val modifier = Modifier.alpha(alpha)
             when (type) {
                 BadgeDemoState.Type.Standard -> {
-                    val contentDescription = stringResource(id = R.string.app_components_badge_unreadNotifications_a11y)
+                    val contentDescription = stringResource(id = R.string.app_components_common_unreadNotificationsBadge_a11y)
                     OudsBadge(
                         modifier = modifier.semantics { this.contentDescription = contentDescription },
                         status = status,
@@ -137,7 +137,7 @@ private fun BadgeDemoContent(state: BadgeDemoState) {
                     )
                 }
                 BadgeDemoState.Type.Count -> {
-                    val contentDescription = pluralStringResource(id = R.plurals.app_components_badge_unreadMessageCount_a11y, count = count, count)
+                    val contentDescription = pluralStringResource(id = R.plurals.app_components_common_unreadMessageCountBadge_a11y, count = count, count)
                     OudsBadge(
                         modifier = modifier.semantics { this.contentDescription = contentDescription },
                         count = count,