From cc2c19ed2f06ff04b4b027116a40330b486a9d00 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 11 Sep 2024 17:34:02 +0200
Subject: [PATCH] docs: update OnyxFlyoutMenu example (#1847)

The example for the OnyxFlyoutMenu had a missing `label` property.
I also changed the example to a more realistic use case (language
selection) so its easier for projects to check when the flyout menu can
be used.
---
 .../OnyxFlyoutMenu/OnyxFlyoutMenu.stories.ts  | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.stories.ts b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.stories.ts
index de105afe2..5dcd1d8d9 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxFlyoutMenu/OnyxFlyoutMenu.stories.ts
@@ -1,3 +1,4 @@
+import globe from "@sit-onyx/icons/globe.svg?raw";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { h } from "vue";
 import OnyxButton from "../../../OnyxButton/OnyxButton.vue";
@@ -32,25 +33,19 @@ const meta: Meta<typeof OnyxFlyoutMenu> = {
 export default meta;
 type Story = StoryObj<typeof OnyxFlyoutMenu>;
 
-const listAnimals = [
-  { label: "Cat" },
-  { label: "Dog" },
-  { label: "Tiger" },
-  { label: "Reindeer" },
-  { label: "Racoon" },
-  { label: "Dolphin" },
-  { label: "Flounder" },
-  { label: "Eel" },
-  { label: "Falcon" },
-  { label: "Owl" },
-];
-
 /**
  * This example shows a basic OnyxFlyoutMenu
  */
 export const Default = {
   args: {
-    default: () => [h(OnyxButton, { label: "Hover me" })],
-    options: () => listAnimals.map(({ label }) => h(OnyxMenuItem, () => label)),
+    label: "Choose application language",
+    default: () => [
+      h(OnyxButton, { label: "English", mode: "plain", color: "neutral", icon: globe }),
+    ],
+    options: () => [
+      h(OnyxMenuItem, { active: true }, () => "English"),
+      h(OnyxMenuItem, () => "German"),
+      h(OnyxMenuItem, () => "Spanish"),
+    ],
   },
 } satisfies Story;