[CHUX-461] ec navigation link light mode (#1949)

* [CHUX-461] add light mode prop

* [CHUX-461] add missing images snapshots

src/components/ec-navigation-link/__snapshots__/ec-navigation-link.spec.ts.snap

@@ -96,6 +96,38 @@ exports[`EcNavigationLink > as regular anchor > should be expanded by default 1`
 </a>
 `;
 
+exports[`EcNavigationLink > as regular anchor > should be use light styles when isInLightMode is passed into 1`] = `
+<a
+  class="ec-navigation-link ec-navigation-link--light-mode"
+  data-test="ec-navigation-link"
+  href="#/balances"
+>
+  <svg
+    class="ec-icon ec-navigation-link__icon"
+    data-test="ec-navigation-link__icon"
+    height="24"
+    width="24"
+  >
+    <use
+      xlink:href="#ec-simple-check"
+    />
+  </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"
+    >
+      Link
+    </span>
+  </transition-stub>
+</a>
+`;
+
 exports[`EcNavigationLink > as regular anchor > should hide the text when is collapsed 1`] = `
 <a
   class="ec-navigation-link ec-navigation-link--is-collapsed"
@@ -331,6 +363,41 @@ exports[`EcNavigationLink > as router-link > should be expanded by default 1`] =
 </ec-stub>
 `;
 
+exports[`EcNavigationLink > as router-link > should be use light styles when isInLightMode is passed into 1`] = `
+<ec-stub
+  active-class="ec-navigation-link--is-active"
+  class="ec-navigation-link ec-navigation-link--light-mode"
+  data-test="ec-navigation-link ec-stub router-link-stub"
+  to="/balances"
+>
+  
+  <svg
+    class="ec-icon ec-navigation-link__icon"
+    data-test="ec-navigation-link__icon"
+    height="24"
+    width="24"
+  >
+    <use
+      xlink:href="#ec-simple-check"
+    />
+  </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"
+    >
+      Link
+    </span>
+  </transition-stub>
+  
+</ec-stub>
+`;
+
 exports[`EcNavigationLink > as router-link > should hide the text when is collapsed 1`] = `
 <ec-stub
   active-class="ec-navigation-link--is-active"

src/components/ec-navigation-link/ec-navigation-link.spec.ts

@@ -55,6 +55,12 @@ describe('EcNavigationLink', () => {
       expect(wrapper.findByDataTest('ec-navigation-link').classes('ec-navigation-link--is-compact')).toBe(true);
     });
 
+    it('should be use light styles when isInLightMode is passed into', () => {
+      const wrapper = mountAsRouterLink({ isInLightMode: true });
+      expect(wrapper.element).toMatchSnapshot();
+      expect(wrapper.findByDataTest('ec-navigation-link').classes('ec-navigation-link--light-mode')).toBe(true);
+    });
+
     it('should pass listeners from parent to the root', () => {
       const clickSpy = vi.fn();
       const wrapper = mountAsRouterLink({}, {
@@ -127,6 +133,12 @@ describe('EcNavigationLink', () => {
       expect(wrapper.findByDataTest('ec-navigation-link').classes('ec-navigation-link--is-compact')).toBe(true);
     });
 
+    it('should be use light styles when isInLightMode is passed into', () => {
+      const wrapper = mountAsAnchor({ isInLightMode: true });
+      expect(wrapper.element).toMatchSnapshot();
+      expect(wrapper.findByDataTest('ec-navigation-link').classes('ec-navigation-link--light-mode')).toBe(true);
+    });
+
     it('should pass listeners from parent to the root', () => {
       const clickSpy = vi.fn();
       const wrapper = mountAsAnchor({}, {

src/components/ec-navigation-link/ec-navigation-link.story.ts

@@ -35,3 +35,21 @@ basic.args = {
 basic.parameters = {
   backgrounds: { default: DARK_THEME.name, values: [DARK_THEME] },
 };
+
+export const lightMode: StoryFn<typeof EcNavigationLink> = args => ({
+  components: { EcNavigationLink },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ec-navigation-link v-bind="args" />
+  `,
+});
+
+lightMode.args = {
+  text: 'Trade Finance',
+  iconName: IconName.SIMPLE_TRADE_FINANCE,
+  iconSize: 30,
+  url: '/trade-finance',
+  isInLightMode: true,
+};

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

@@ -12,6 +12,7 @@
       'ec-navigation-link--is-active': isActive,
       'ec-navigation-link--is-compact': isCompact,
       'ec-navigation-link--is-collapsed': isCollapsed,
+      'ec-navigation-link--light-mode': isInLightMode,
     }"
     :to="url"
   >
@@ -43,6 +44,7 @@
       'ec-navigation-link--is-active': isActive,
       'ec-navigation-link--is-compact': isCompact,
       'ec-navigation-link--is-collapsed': isCollapsed,
+      'ec-navigation-link--light-mode': isInLightMode,
     }"
     :href="url"
     :target="target"
@@ -108,6 +110,14 @@ withDefaults(defineProps<NavigationLinkProps>(), {
     @apply tw-py-12 tw-px-28;
   }
 
+  &--light-mode {
+    @apply tw-text-gray-3;
+
+    &:hover {
+      @apply tw-text-gray-2;
+    }
+  }
+
   &__icon {
     @apply tw-fill-current;
     @apply tw-flex-shrink-0;

src/components/ec-navigation-link/types.ts

@@ -12,4 +12,5 @@ export interface NavigationLinkProps {
   isCollapsed?: boolean,
   isCompact?: boolean,
   target?: string,
+  isInLightMode?: boolean,
 }