Introduce pages in our design system.

.idea/dictionaries/shared.xml

@@ -2,6 +2,7 @@
     <dictionary name="shared">
         <words>
             <w>backstack</w>
+            <w>onboarding</w>
             <w>textfields</w>
         </words>
     </dictionary>

features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingScreen.kt

@@ -18,14 +18,11 @@ package io.element.android.features.onboarding.impl
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.QrCode
@@ -34,13 +31,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.atomic.pages.OnBoardingPage
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -58,40 +55,21 @@ fun OnBoardingScreen(
     onSignIn: () -> Unit = {},
     onCreateAccount: () -> Unit = {},
 ) {
-    Box(
+    OnBoardingPage(
-        modifier = modifier
+        modifier = modifier,
-            .fillMaxSize()
+        footer = {
-    ) {
-        // BG
-        Image(
-            modifier = modifier
-                .fillMaxSize(),
-            painter = painterResource(id = R.drawable.onboarding_bg),
-            contentScale = ContentScale.Crop,
-            contentDescription = null,
-        )
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .systemBarsPadding()
-                .padding(vertical = 16.dp),
-        ) {
-            Column(
-                modifier = Modifier
-                    .weight(1f)
-                    .padding(horizontal = 24.dp)
-                    .fillMaxWidth(),
-            ) {
-                Spacer(modifier = Modifier.weight(2f))
-                OnBoardingHeader()
-                Spacer(modifier = Modifier.weight(3f))
-            }
             OnBoardingButtons(
                 onSignInWithQrCode = onSignInWithQrCode,
                 onSignIn = onSignIn,
                 onCreateAccount = onCreateAccount,
             )
         }
+    ) {
+        Column(modifier.fillMaxWidth()) {
+            Spacer(modifier = Modifier.weight(2f))
+            OnBoardingHeader()
+            Spacer(modifier = Modifier.weight(3f))
+        }
     }
 }
 
@@ -128,11 +106,11 @@ private fun OnBoardingButtons(
     onSignInWithQrCode: () -> Unit,
     onSignIn: () -> Unit,
     onCreateAccount: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = Modifier
+        modifier = modifier
-            .fillMaxWidth()
+            .fillMaxWidth(),
-            .padding(horizontal = 16.dp),
         horizontalAlignment = CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(16.dp)
     ) {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt

@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.atomic.pages
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import io.element.android.libraries.designsystem.R
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Text
+
+/**
+ * Page for onboarding screens, with content and optional footer.
+ *
+ * Ref: https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=133-5427&t=5SHVppfYzjvkEywR-0
+ * @param modifier Classical modifier.
+ * @param footer optional footer.
+ * @param content main content.
+ */
+@Composable
+fun OnBoardingPage(
+    modifier: Modifier = Modifier,
+    footer: @Composable () -> Unit = {},
+    content: @Composable () -> Unit = {},
+) {
+    Box(
+        modifier = modifier
+            .fillMaxSize()
+    ) {
+        // BG
+        Image(
+            modifier = Modifier
+                .fillMaxSize(),
+            painter = painterResource(id = R.drawable.onboarding_bg),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+        )
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .systemBarsPadding()
+                .padding(vertical = 16.dp),
+        ) {
+            // Content
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .padding(horizontal = 24.dp)
+                    .fillMaxWidth(),
+            ) {
+                content()
+            }
+            // Footer
+            Box(modifier = Modifier.padding(horizontal = 16.dp)) {
+                footer()
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+internal fun OnBoardingPageLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun OnBoardingPageDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    OnBoardingPage(
+        content = {
+            Box(
+                Modifier
+                    .fillMaxSize(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = "Content",
+                    fontSize = 40.sp
+                )
+            }
+        },
+        footer = {
+            Box(
+                Modifier
+                    .fillMaxWidth(),
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = "Footer",
+                    fontSize = 40.sp
+                )
+            }
+        }
+    )
+}