From c7f7f78be5df9363f57f126f5555f35e22e527d8 Mon Sep 17 00:00:00 2001
From: Arnau Giralt <arnau.giralt@cloudblue.com>
Date: Tue, 27 Feb 2024 13:50:14 +0100
Subject: [PATCH] Add "fullWidth" prop to the Menu widget - Update Menu
 widget's story

---
 components/src/stories/Menu.stories.js     |  8 +++++--
 components/src/widgets/menu/widget.spec.js | 28 ++++++++++++++++++++++
 components/src/widgets/menu/widget.vue     | 14 ++++++++++-
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/components/src/stories/Menu.stories.js b/components/src/stories/Menu.stories.js
index d412190b..57122aa3 100644
--- a/components/src/stories/Menu.stories.js
+++ b/components/src/stories/Menu.stories.js
@@ -16,8 +16,8 @@ export const Component = {
           slot="trigger" 
           text="open menu" 
         />
-        <div style="padding:8px 16px; width:300px; border:1px solid black;" slot="content">
-          <p>item</p>
+        <div style="padding:8px 16px; border:1px solid black;" slot="content">
+          <p>Lorem ipsum dolor sit amet</p>
         </div>
       </ui-menu>
     `
@@ -25,6 +25,8 @@ export const Component = {
 
   args: {
     align: 'left',
+    closeOnClickInside: false,
+    fullWidth: false,
   },
 };
 
@@ -36,6 +38,8 @@ export default {
   },
 
   argTypes: {
+    closeOnClickInside: 'boolean',
+    fullWidth: 'boolean',
     align: {
       options: ['right', 'left'],
       control: {
diff --git a/components/src/widgets/menu/widget.spec.js b/components/src/widgets/menu/widget.spec.js
index 4f788d37..076e8549 100644
--- a/components/src/widgets/menu/widget.spec.js
+++ b/components/src/widgets/menu/widget.spec.js
@@ -119,6 +119,34 @@ describe('Menu component', () => {
     });
   });
 
+  describe('fullWidth class', () => {
+    it('adds the "menu-content_full-width" class if fullWidth is true', async () => {
+      const wrapper = mount(Menu, {
+        props: {
+          fullWidth: true,
+        },
+      });
+
+      // Open menu
+      await wrapper.find('.menu-trigger').trigger('click');
+
+      expect(wrapper.find('.menu-content_full-width').exists()).toEqual(true);
+    });
+
+    it('does not add the "menu-content_full-width" class fullWidth is false', async () => {
+      const wrapper = mount(Menu, {
+        props: {
+          fullWidth: false,
+        },
+      });
+
+      // Open menu
+      await wrapper.find('.menu-trigger').trigger('click');
+
+      expect(wrapper.find('.menu-content_full-width').exists()).toEqual(false);
+    });
+  });
+
   describe('align prop validator', () => {
     it.each([
       // expected, value
diff --git a/components/src/widgets/menu/widget.vue b/components/src/widgets/menu/widget.vue
index 2f04e682..426e6e47 100644
--- a/components/src/widgets/menu/widget.vue
+++ b/components/src/widgets/menu/widget.vue
@@ -14,7 +14,7 @@
       <div
         v-if="showMenu"
         class="menu-content"
-        :class="alignmentClass"
+        :class="[alignmentClass, fullWidthClass]"
         @click.stop="onClickInside"
       >
         <slot name="content" />
@@ -38,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  fullWidth: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const showMenu = ref(false);
@@ -48,6 +52,8 @@ const alignmentClass = computed(() => (props.align === 'left'
   : 'menu-content_align-right'
 ));
 
+const fullWidthClass = computed(() => (props.fullWidth ? 'menu-content_full-width' : ''));
+
 const toggle = () => {
   showMenu.value = !showMenu.value;
 };
@@ -80,12 +86,18 @@ onUnmounted(() => {
 .menu-content {
   position: absolute;
   top: 0;
+  width: max-content;
 
   &_align-right {
     right: 0;
   }
+
   &_align-left {
     left: 0;
   }
+
+  &_full-width {
+    width: 100%;
+  }
 }
 </style>