[CHUX-467] ec-navigation mobile view (#1976)

* chux-467:feat:mobile-view

* chux-467:chore:mobile-view more updates

* chux-467:chore:mobile-view more updates

* CHUX-467:test:unit

* CHUX-467:test: more unit tests

* CHUX-467:chore:export letter icon

* CHUX-467:chore: adjust width of images and make menu close on navigation link clicked

* CHUX-467:chore:update snapshots

* CHUX-467:chore:update styles

src/components/ec-menu/__snapshots__/ec-menu.spec.ts.snap

@@ -1,5 +1,52 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`EcMenu > @events > should propagate the event from the navigation link 1`] = `
+<ul
+  class="ec-menu"
+  data-test="ec-menu"
+>
+  
+  <li
+    class="ec-menu__item"
+    data-test="ec-menu__item"
+  >
+    <ec-stub
+      active-class="ec-navigation-link--is-active"
+      class="ec-menu__link ec-navigation-link"
+      data-test="ec-menu__link test-router-link ec-navigation-link ec-stub router-link-stub"
+      to="/bat"
+    >
+      
+      <svg
+        class="ec-icon ec-navigation-link__icon"
+        data-test="ec-navigation-link__icon"
+        height="24"
+        width="24"
+      >
+        <use
+          xlink:href="#ec-simple-trade"
+        />
+      </svg>
+      <transition-stub
+        appear="false"
+        css="true"
+        name="ec-navigation-link__text-fade"
+        persisted="true"
+      >
+        <span
+          class="ec-navigation-link__text"
+          data-test="ec-navigation-link__text"
+        >
+          Bat
+        </span>
+      </transition-stub>
+      
+    </ec-stub>
+  </li>
+  
+</ul>
+`;
+
 exports[`EcMenu > should attach custom listeners passed in the link definition 1`] = `
 <ul
   class="ec-menu"

src/components/ec-menu/ec-menu.spec.ts

@@ -30,6 +30,14 @@ const links: MenuLink[] = [
   },
 ];
 
+const routerLink: MenuLink[] = [{
+  url: '/bat',
+  iconName: IconName.SIMPLE_TRADE,
+  text: 'Bat',
+  isRouterLink: true,
+  dataTest: 'test-router-link',
+}];
+
 describe('EcMenu', () => {
   function mountEcMenu(props?: Partial<MenuProps>, mountOpts?: ComponentMountingOptions<typeof EcMenu>) {
     return mount(EcMenu, {
@@ -112,4 +120,13 @@ describe('EcMenu', () => {
     await wrapper.findByDataTest('ec-menu__link').trigger('test');
     expect(testSpy).toHaveBeenCalledTimes(1);
   });
+
+  describe('@events', () => {
+    it('should propagate the event from the navigation link', async () => {
+      const wrapper = mountEcMenu({ links: routerLink });
+      expect(wrapper.element).toMatchSnapshot();
+      await wrapper.findByDataTest('test-router-link').trigger('click');
+      expect(wrapper.emitted('navigation-link-clicked')?.length).toBe(1);
+    });
+  });
 });

src/components/ec-menu/ec-menu.vue

@@ -26,6 +26,7 @@
         :is-collapsed="isCollapsed"
         :is-compact="horizontal"
         v-on="link.on || {}"
+        @navigation-link-clicked="emit('navigation-link-clicked')"
       />
     </li>
   </ul>
@@ -37,6 +38,10 @@ import { computed } from 'vue';
 import EcNavigationLink from '../ec-navigation-link';
 import type { MenuLink, MenuProps } from './types';
 
+const emit = defineEmits<{
+  'navigation-link-clicked': [],
+}>();
+
 const props = withDefaults(defineProps<MenuProps>(), {
   links: () => [],
 });

src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`EcMobileHeader > should render properly 1`] = `
   data-test="ec-mobile-header"
 >
   <div
-    class="ec-mobile-header__logo"
+    class="tw-leading-reset"
   >
     
     <img
@@ -16,6 +16,7 @@ exports[`EcMobileHeader > should render properly 1`] = `
   </div>
   <button
     class="ec-mobile-header__menu"
+    data-test="ec-mobile-header__menu"
     type="button"
   >
     <svg

src/components/ec-mobile-header/ec-mobile-header.spec.ts

@@ -19,4 +19,13 @@ describe('EcMobileHeader', () => {
     });
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  describe('@events', () => {
+    it('should emit an event when the mobile menu button is clicked', async () => {
+      const wrapper = mountMobileHeader();
+
+      await wrapper.findByDataTest('ec-mobile-header__menu').trigger('click');
+      expect(wrapper.emitted('open-mobile-menu')?.length).toBe(1);
+    });
+  });
 });

src/components/ec-mobile-header/ec-mobile-header.vue

@@ -3,10 +3,15 @@
     class="ec-mobile-header"
     data-test="ec-mobile-header"
   >
-    <div class="ec-mobile-header__logo">
+    <div class="tw-leading-reset">
       <slot name="logo" />
     </div>
-    <button type="button" class="ec-mobile-header__menu">
+    <button
+      type="button"
+      class="ec-mobile-header__menu"
+      data-test="ec-mobile-header__menu"
+      @click="emit('open-mobile-menu')"
+    >
       <ec-icon
         class="ec-mobile-header__menu__icon"
         :name="IconName.SIMPLE_MENU"
@@ -19,6 +24,10 @@
 <script setup lang="ts">
 import EcIcon from '../ec-icon';
 import { IconName } from '../ec-icon/types';
+
+const emit = defineEmits<{
+  'open-mobile-menu': [],
+}>();
 </script>
 
 <style>
@@ -28,17 +37,19 @@ import { IconName } from '../ec-icon/types';
   @apply tw-py-16 tw-px-24;
   @apply tw-bg-gray-7;
 
-  &__logo {
-    @apply tw-h-32;
-  }
-
   &__menu {
     @apply tw-flex tw-items-center;
-    @apply tw-border-0 tw-p-0 tw-bg-transparent;
+    @apply tw-border-0 tw-p-0;
+    @apply tw-bg-transparent;
 
     &__icon {
       @apply tw-fill-key-4;
     }
+
+    &:hover {
+      @apply tw-cursor-pointer;
+      @apply tw-fill-key-3;
+    }
   }
 }
 </style>

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

@@ -15,6 +15,7 @@
       'ec-navigation-link--light-mode': isInLightMode,
     }"
     :to="url"
+    @click="emit('navigation-link-clicked')"
   >
     <ec-icon
       class="ec-navigation-link__icon"
@@ -69,6 +70,10 @@
 import EcIcon from '../ec-icon/ec-icon.vue';
 import type { NavigationLinkProps } from './types';
 
+const emit = defineEmits<{
+  'navigation-link-clicked': [],
+}>();
+
 defineOptions({
   inheritAttrs: false,
 });