[ONL-6702] - migrate navigation component to vue3 (#1289)

* [ONL-6702] - ref - migrated component props

* [ONL-6702] - ref - removed script

* [ONL-6702] - ref - rm unecessary props attributes

* [ONL-6702] - updated unit tests

* 2.1.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-navigation/ec-navigation.spec.js

@@ -20,10 +20,8 @@ describe('EcNavigation', () => {
     withMockedConsole((errorSpy, warnSpy) => {
       mount(EcNavigation);
 
-      expect(warnSpy).toHaveBeenCalledTimes(3);
-      expect(warnSpy.mock.calls[0][0]).toContain('Missing required prop: "isCollapsed"');
-      expect(warnSpy.mock.calls[1][0]).toContain('Missing required prop: "isCollapsable"');
-      expect(warnSpy.mock.calls[2][0]).toContain('Missing required prop: "branding"');
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(warnSpy.mock.calls[0][0]).toContain('Missing required prop: "isCollapsable"');
     });
   });
 

src/components/ec-navigation/ec-navigation.vue

@@ -53,30 +53,25 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'EcNavigation',
-  props: {
-    isCollapsed: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    isCollapsable: {
-      type: Boolean,
-      required: true,
-    },
-    branding: {
-      type: Object,
-      default: () => ({}),
-      required: true,
-    },
-    showBrandingLogo: {
-      type: Boolean,
-      default: true,
-    },
+<script setup>
+defineProps({
+  isCollapsed: {
+    type: Boolean,
+    default: false,
   },
-};
+  isCollapsable: {
+    type: Boolean,
+    required: true,
+  },
+  branding: {
+    type: Object,
+    default: () => ({}),
+  },
+  showBrandingLogo: {
+    type: Boolean,
+    default: true,
+  },
+});
 </script>
 
 <style>