Merge pull request #20031 from wordpress-mobile/feature/19802-designs…

…ystem-part2 Add screen navigation for Design System
wordpress-mobile · Jan 29, 2024 · 3c64c53 · 3c64c53
2 parents f8a6a7c + 08f82a7
commit 3c64c53
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 51 deletions.
diff --git a/WordPress/build.gradle b/WordPress/build.gradle
@@ -343,6 +343,7 @@ kapt {
 
 dependencies {
     implementation 'androidx.webkit:webkit:1.7.0'
+    implementation "androidx.navigation:navigation-compose:$androidxComposeNavigationVersion"
     compileOnly project(path: ':libs:annotations')
     kapt project(':libs:processors')
     implementation (project(path:':libs:networking')) {

diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt
@@ -11,7 +11,7 @@ class DesignSystemActivity : LocaleAwareActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            DesignSystem()
+            DesignSystem(onBackPressedDispatcher::onBackPressed)
         }
     }
 
@@ -24,7 +24,7 @@ class DesignSystemActivity : LocaleAwareActivity() {
 
     @Composable
     fun PreviewDesignSystemActivity() {
-        DesignSystem()
+        DesignSystem(onBackPressedDispatcher::onBackPressed)
     }
 }
 

diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemComponentsScreen.kt
@@ -0,0 +1,45 @@
+package org.wordpress.android.designsystem
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.tooling.preview.Preview
+import org.wordpress.android.R
+
+@Composable
+fun DesignSystemComponentsScreen(
+    modifier: Modifier = Modifier
+) {
+    LazyColumn (
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(
+            dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top)
+        )
+    ) {
+        item {
+            DesignSystemDataSource.componentsScreenButtonOptions.forEach { item ->
+                SelectOptionButton(
+                    labelResourceId = item,
+                    onClick = {}
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun StartDesignSystemComponentsScreenPreview(){
+    DesignSystemComponentsScreen(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.button_container_shadow_height))
+    )
+}
+
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt
@@ -3,8 +3,16 @@ package org.wordpress.android.designsystem
 import org.wordpress.android.R
 
 object DesignSystemDataSource {
-    val buttonOptions = listOf(
-        R.string.design_system_foundation,
-        R.string.design_system_components
+    val startScreenButtonOptions = listOf(
+        Pair(R.string.design_system_foundation, DesignSystemScreen.Foundation.name),
+        Pair(R.string.design_system_components, DesignSystemScreen.Components.name),
+    )
+    val foundationScreenButtonOptions = listOf(
+        R.string.design_system_foundation_colors,
+        R.string.design_system_foundation_fonts,
+        R.string.design_system_foundation_lengths
+    )
+    val componentsScreenButtonOptions = listOf(
+        R.string.design_system_components_dsbutton
     )
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemFoundationScreen.kt
@@ -0,0 +1,45 @@
+package org.wordpress.android.designsystem
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.tooling.preview.Preview
+import org.wordpress.android.R
+
+@Composable
+fun DesignSystemFoundationScreen(
+    modifier: Modifier = Modifier
+) {
+    LazyColumn (
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(
+            dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top)
+        )
+    ) {
+        item {
+            DesignSystemDataSource.foundationScreenButtonOptions.forEach { item ->
+                SelectOptionButton(
+                    labelResourceId = item,
+                    onClick = {}
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun StartDesignSystemFoundationScreenPreview(){
+    DesignSystemFoundationScreen(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.button_container_shadow_height))
+    )
+}
+
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt
@@ -1,55 +1,31 @@
 package org.wordpress.android.designsystem
 
 import androidx.annotation.StringRes
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 import org.wordpress.android.R
-import org.wordpress.android.designsystem.DesignSystemDataSource.buttonOptions
+import org.wordpress.android.ui.compose.components.MainTopAppBar
+import org.wordpress.android.ui.compose.components.NavigationIcons
 
 enum class DesignSystemScreen {
-    Start
-}
-@Composable
-fun DesignSystemStartScreen(
-    modifier: Modifier = Modifier
-){
-    Column(
-        modifier = modifier,
-        verticalArrangement = Arrangement.SpaceBetween
-    ) {
-        Row(modifier = Modifier.weight(1f, false)) {
-            Column(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.spacedBy(
-                    dimensionResource(id = R.dimen.button_container_shadow_height)
-                )
-            ) {
-                buttonOptions.forEach { item ->
-                    SelectOptionButton(
-                        labelResourceId = item,
-                        onClick = {}
-                    )
-                }
-            }
-        }
-    }
+    Start,
+    Foundation,
+    Components
 }
 
 @Composable
@@ -69,18 +45,54 @@ fun SelectOptionButton(
 
 @Preview
 @Composable
-fun StartDesignSystemPreview() {
-    DesignSystemStartScreen(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(dimensionResource(R.dimen.button_container_shadow_height))
-    )
+fun StartDesignSystemPreview(){
+    DesignSystem {}
 }
+
 @Composable
-fun DesignSystem() {
-    DesignSystemStartScreen(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(dimensionResource(R.dimen.button_container_shadow_height))
-    )
+fun DesignSystem(
+    onBackTapped: () -> Unit
+    ) {
+    val navController: NavHostController = rememberNavController()
+    Scaffold(
+        topBar = {
+            MainTopAppBar(
+                title = stringResource(R.string.preference_design_system),
+                navigationIcon = NavigationIcons.BackIcon,
+                onNavigationIconClick = { onBackTapped() },
+                backgroundColor = MaterialTheme.colorScheme.surface,
+                contentColor = MaterialTheme.colorScheme.onSurface,
+            )
+        },
+    ) { innerPadding ->
+        NavHost(
+            navController = navController,
+            startDestination = DesignSystemScreen.Start.name
+        ) {
+            composable(route = DesignSystemScreen.Start.name) {
+                DesignSystemStartScreen(
+                    onNextButtonClicked = {
+                        navController.navigate(it)
+                    },
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding)
+                )
+            }
+            composable(route = DesignSystemScreen.Foundation.name) {
+                DesignSystemFoundationScreen(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding)
+                )
+            }
+            composable(route = DesignSystemScreen.Components.name) {
+                DesignSystemComponentsScreen(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding)
+                )
+            }
+        }
+    }
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemStartScreen.kt
@@ -0,0 +1,47 @@
+package org.wordpress.android.designsystem
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.tooling.preview.Preview
+import org.wordpress.android.R
+
+@Composable
+fun DesignSystemStartScreen(
+    onNextButtonClicked: (String) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    LazyColumn (
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(
+            dimensionResource(id = R.dimen.reader_follow_sheet_button_margin_top)
+        )
+    ) {
+        item {
+            DesignSystemDataSource.startScreenButtonOptions.forEach { item ->
+                SelectOptionButton(
+                    labelResourceId = item.first,
+                    onClick = { onNextButtonClicked(item.second) }
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun StartDesignSystemStartScreenPreview(){
+    DesignSystemStartScreen(
+        onNextButtonClicked = {},
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.button_container_shadow_height))
+    )
+}
+
diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -958,6 +958,10 @@
     <string name="preference_design_system" translatable="false">Design System</string>
     <string name="design_system_foundation" translatable="false">Foundation</string>
     <string name="design_system_components" translatable="false">Components</string>
+    <string name="design_system_foundation_colors" translatable="false">Colors</string>
+    <string name="design_system_foundation_fonts" translatable="false">Fonts</string>
+    <string name="design_system_foundation_lengths" translatable="false">Lengths</string>
+    <string name="design_system_components_dsbutton" translatable="false">DSButton</string>
 
     <!-- stats -->
     <string name="stats">Stats</string>

diff --git a/build.gradle b/build.gradle
@@ -42,6 +42,7 @@ ext {
     androidxArchCoreVersion = '2.2.0'
     androidxComposeBomVersion = '2023.10.00'
     androidxComposeCompilerVersion = '1.5.3'
+    androidxComposeNavigationVersion = '2.7.6'
     androidxCardviewVersion = '1.0.0'
     androidxConstraintlayoutVersion = '2.1.4'
     androidxConstraintlayoutComposeVersion = '1.0.1'