[gallery] Add missing component pages.

gallery/src/androidMain/kotlin/com/konyaco/fluent/gallery/screen/menus/MenuFlyoutScreen.android.kt

@@ -0,0 +1,3 @@
+package com.konyaco.fluent.gallery.screen.menus
+
+actual fun isMacOs(): Boolean = false

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/screen/basicinput/ComboBoxScreen.kt

@@ -11,14 +11,16 @@ import com.konyaco.fluent.gallery.annotation.Sample
 import com.konyaco.fluent.gallery.component.ComponentPagePath
 import com.konyaco.fluent.gallery.component.GalleryPage
 import com.konyaco.fluent.gallery.component.TodoComponent
+import com.konyaco.fluent.source.generated.FluentSourceFile
 
 @Component(index = 9, description = "A drop-down list of items a user can select from.")
 @Composable
 fun ComboBoxScreen() {
     GalleryPage(
         title = "ComboBox",
         description = "Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.",
-        galleryPath = ComponentPagePath.ComboBoxScreen
+        galleryPath = ComponentPagePath.ComboBoxScreen,
+        componentPath = FluentSourceFile.ComboBox
     ) {
         Section(
             title = "A ComboBox with its Items source set",

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/screen/datetime/DateTimeScreen.kt → gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/screen/datetime/CalendarScreen.kt

@@ -8,20 +8,25 @@ import com.konyaco.fluent.component.CalendarDatePicker
 import com.konyaco.fluent.component.CalendarView
 import com.konyaco.fluent.gallery.annotation.Component
 import com.konyaco.fluent.gallery.annotation.Sample
+import com.konyaco.fluent.gallery.component.ComponentPagePath
 import com.konyaco.fluent.gallery.component.GalleryPage
+import com.konyaco.fluent.source.generated.FluentSourceFile
 
-@Component
+@Component(description = "A control that presents a calendar for a user to " +
+        "choose a date from.")
 @Composable
-fun DateTimeScreen() {
+fun CalendarScreen() {
     GalleryPage(
-        title = "DateTime",
+        title = "Calendar",
         description = "Lets users pick a date value using a calendar.",
+        componentPath = FluentSourceFile.CalendarView,
+        galleryPath = ComponentPagePath.CalendarScreen
     ) {
         Section(
             title = "A CalendarDatePicker",
-            sourceCode = sourceCodeOfDatePickerSample
+            sourceCode = sourceCodeOfCalendarDatePickerSample
         ) {
-            DatePickerSample()
+            CalendarDatePickerSample()
         }
 
         Section(
@@ -35,7 +40,7 @@ fun DateTimeScreen() {
 
 @Sample
 @Composable
-private fun DatePickerSample() {
+private fun CalendarDatePickerSample() {
     CalendarDatePicker(onChoose = {})
 }
 

gallery/src/commonMain/kotlin/com/konyaco/fluent/gallery/screen/dialogs/FlyoutScreen.kt

@@ -0,0 +1,65 @@
+package com.konyaco.fluent.gallery.screen.dialogs
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import com.konyaco.fluent.FluentTheme
+import com.konyaco.fluent.component.Button
+import com.konyaco.fluent.component.FlyoutContainer
+import com.konyaco.fluent.component.Text
+import com.konyaco.fluent.gallery.annotation.Component
+import com.konyaco.fluent.gallery.annotation.Sample
+import com.konyaco.fluent.gallery.component.ComponentPagePath
+import com.konyaco.fluent.gallery.component.GalleryPage
+import com.konyaco.fluent.source.generated.FluentSourceFile
+
+@Component(description = "Shows contextual information and enables user interaction.")
+@Composable
+fun FlyoutScreen() {
+    GalleryPage(
+        title = "Flyout",
+        description = "A Flyout displays lightweight UI that is either information, " +
+                "or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping off of it. " +
+                "Use it to collect input from the user, show more details about an item, or ask the user to confirm an action.",
+        componentPath = FluentSourceFile.Flyout,
+        galleryPath = ComponentPagePath.FlyoutScreen
+    ) {
+        Section(
+            title = "A button with flyout",
+            sourceCode = sourceCodeOfBasicFlyoutSample,
+            content = { BasicFlyoutSample() }
+        )
+    }
+}
+
+@Sample
+@Composable
+private fun BasicFlyoutSample() {
+    FlyoutContainer(
+        flyout = {
+            Column {
+                Text(
+                    text = "All items will be removed. Do you want to continue?",
+                    style = FluentTheme.typography.bodyStrong,
+                    modifier = Modifier.padding(bottom = 12.dp)
+                )
+                Button(
+                    onClick = { isFlyoutVisible = false },
+                    content = {
+                        Text("Yes, empty my cart")
+                    }
+                )
+            }
+        },
+        content = {
+            Button(
+                onClick = { isFlyoutVisible = !isFlyoutVisible },
+                content = {
+                    Text("Empty cart")
+                }
+            )
+        }
+    )
+}