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

…ystem Add entry point for Design System
wordpress-mobile · Jan 21, 2024 · 0a46d08 · 0a46d08
2 parents 3d14c7a + e3ca2f4
commit 0a46d08
Show file tree

Hide file tree

Showing 8 changed files with 168 additions and 0 deletions.
diff --git a/WordPress/jetpackJalapeno/release/org.wordpress.android-jetpack-jalapeno-release.aab b/WordPress/jetpackJalapeno/release/org.wordpress.android-jetpack-jalapeno-release.aab
diff --git a/WordPress/src/main/AndroidManifest.xml b/WordPress/src/main/AndroidManifest.xml
@@ -196,6 +196,11 @@
             android:configChanges="locale|orientation|screenSize"
             android:label="@string/me_btn_app_settings"
             android:theme="@style/WordPress.NoActionBar" />
+        <activity
+            android:name=".designsystem.DesignSystemActivity"
+            android:configChanges="locale|orientation|screenSize"
+            android:label="@string/preference_design_system"
+            android:theme="@style/WordPress.NoActionBar" />
         <activity
             android:name=".ui.prefs.notifications.NotificationsSettingsActivity"
             android:configChanges="orientation|screenSize"

diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemActivity.kt
@@ -0,0 +1,31 @@
+package org.wordpress.android.designsystem
+
+import android.content.res.Configuration
+import android.os.Bundle
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import org.wordpress.android.ui.LocaleAwareActivity
+import org.wordpress.android.util.extensions.setContent
+
+class DesignSystemActivity : LocaleAwareActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContent {
+            DesignSystem()
+        }
+    }
+
+    @Preview(name = "Light Mode")
+    @Preview(
+        uiMode = Configuration.UI_MODE_NIGHT_YES,
+        showBackground = true,
+        name = "Dark Mode"
+    )
+
+    @Composable
+    fun PreviewDesignSystemActivity() {
+        DesignSystem()
+    }
+}
+
+
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemDataSource.kt
@@ -0,0 +1,10 @@
+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
+    )
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt b/WordPress/src/main/java/org/wordpress/android/designsystem/DesignSystemScreen.kt
@@ -0,0 +1,86 @@
+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.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 org.wordpress.android.R
+import org.wordpress.android.designsystem.DesignSystemDataSource.buttonOptions
+
+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 = {}
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun SelectOptionButton(
+    @StringRes labelResourceId: Int,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+){
+    Button(
+        onClick = onClick,
+        modifier = modifier.widthIn(min = 250.dp),
+        colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary)
+    ) {
+        Text(stringResource(labelResourceId))
+    }
+}
+
+@Preview
+@Composable
+fun StartDesignSystemPreview() {
+    DesignSystemStartScreen(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.button_container_shadow_height))
+    )
+}
+@Composable
+fun DesignSystem() {
+    DesignSystemStartScreen(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(dimensionResource(R.dimen.button_container_shadow_height))
+    )
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt
@@ -37,6 +37,7 @@ import org.wordpress.android.analytics.AnalyticsTracker.Stat.ME_GRAVATAR_SHOT_NE
 import org.wordpress.android.analytics.AnalyticsTracker.Stat.ME_GRAVATAR_TAPPED
 import org.wordpress.android.analytics.AnalyticsTracker.Stat.ME_GRAVATAR_UPLOADED
 import org.wordpress.android.databinding.MeFragmentBinding
+import org.wordpress.android.designsystem.DesignSystemActivity
 import org.wordpress.android.fluxc.Dispatcher
 import org.wordpress.android.fluxc.store.AccountStore
 import org.wordpress.android.fluxc.store.AccountStore.OnAccountChanged
@@ -208,6 +209,11 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
             rowDebugSettings.setOnClickListener {
                 requireContext().startActivity(Intent(requireContext(), DebugSettingsActivity::class.java))
             }
+            rowDesignSystem.isVisible = true
+            designSystemDivider.isVisible = true
+            rowDesignSystem.setOnClickListener {
+                requireContext().startActivity(Intent(requireContext(), DesignSystemActivity::class.java))
+            }
         }
 
         rowAboutTheApp.setOnClickListener {

diff --git a/WordPress/src/main/res/layout/me_fragment.xml b/WordPress/src/main/res/layout/me_fragment.xml
@@ -222,6 +222,31 @@
                 style="@style/MeListSectionDividerView"
                 tools:visibility="visible"/>
 
+            <LinearLayout
+                android:id="@+id/row_design_system"
+                android:visibility="gone"
+                style="@style/MeListRowLayout"
+                tools:visibility="visible">
+
+                <ImageView
+                    android:id="@+id/me_design_system_icon"
+                    style="@style/MeListRowIcon"
+                    android:contentDescription="@null"
+                    android:src="@drawable/ic_customize_white_24dp" />
+
+                <org.wordpress.android.util.widgets.AutoResizeTextView
+                    android:id="@+id/me_design_system_settings"
+                    style="@style/MeListRowTextView"
+                    android:text="@string/preference_design_system" />
+
+            </LinearLayout>
+
+            <View
+                android:id="@+id/design_system_divider"
+                android:visibility="gone"
+                style="@style/MeListSectionDividerView"
+                tools:visibility="visible"/>
+
             <LinearLayout
                 android:id="@+id/row_support"
                 style="@style/MeListRowLayout">

diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -954,6 +954,11 @@
     <string name="debug_cookies_cookie_name_hint" translatable="false">cookie_name</string>
     <string name="debug_cookies_cookie_value_hint" translatable="false">cookie_value</string>
 
+    <!-- Design System -->
+    <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>
+
     <!-- stats -->
     <string name="stats">Stats</string>
     <string name="stats_jetpack_connection_setup_info">To use Stats on your WordPress site, you\'ll need to install the Jetpack plugin.</string>