[CHUX-697] Navigation increase nav delimiters width (#1992)

* CHUX-697:feat:navigation increase delimiters width

* CHUX-697:chore:snapshots

* CHUX-697:chore:change active state

* CHUX-697:chore:update snaps

* 2.8.13

package.json

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

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

@@ -12,7 +12,7 @@ exports[`EcMenu > @events > should propagate the event from the navigation link
   >
     <ec-stub
       active-class="ec-navigation-link--is-active"
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link test-router-link ec-navigation-link ec-stub router-link-stub"
       to="/bat"
     >
@@ -58,7 +58,7 @@ exports[`EcMenu > should attach custom listeners passed in the link definition 1
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-collapsed"
+      class="ec-navigation-link ec-navigation-link--is-collapsed"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -103,7 +103,7 @@ exports[`EcMenu > should not render all items as compact when horizontal is not
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -137,7 +137,7 @@ exports[`EcMenu > should not render all items as compact when horizontal is not
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link ec-navigation-link"
       href="/bar"
     >
@@ -171,7 +171,7 @@ exports[`EcMenu > should not render all items as compact when horizontal is not
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link baz ec-navigation-link"
       href="/baz"
     >
@@ -205,7 +205,7 @@ exports[`EcMenu > should not render all items as compact when horizontal is not
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link ec-navigation-link"
       href="/bat"
     >
@@ -253,7 +253,7 @@ exports[`EcMenu > should render all items as compact when is horizontal 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -287,7 +287,7 @@ exports[`EcMenu > should render all items as compact when is horizontal 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link ec-navigation-link"
       href="/bar"
     >
@@ -321,7 +321,7 @@ exports[`EcMenu > should render all items as compact when is horizontal 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link baz ec-navigation-link"
       href="/baz"
     >
@@ -355,7 +355,7 @@ exports[`EcMenu > should render all items as compact when is horizontal 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link ec-navigation-link"
       href="/bat"
     >
@@ -399,7 +399,7 @@ exports[`EcMenu > should render as collapsed when isCollapsed is passed into 1`]
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-collapsed"
+      class="ec-navigation-link ec-navigation-link--is-collapsed"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -434,7 +434,7 @@ exports[`EcMenu > should render as collapsed when isCollapsed is passed into 1`]
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-collapsed"
+      class="ec-navigation-link ec-navigation-link--is-collapsed"
       data-test="ec-menu__link ec-navigation-link"
       href="/bar"
     >
@@ -469,7 +469,7 @@ exports[`EcMenu > should render as collapsed when isCollapsed is passed into 1`]
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-collapsed"
+      class="ec-navigation-link ec-navigation-link--is-collapsed"
       data-test="ec-menu__link baz ec-navigation-link"
       href="/baz"
     >
@@ -504,7 +504,7 @@ exports[`EcMenu > should render as collapsed when isCollapsed is passed into 1`]
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-collapsed"
+      class="ec-navigation-link ec-navigation-link--is-collapsed"
       data-test="ec-menu__link ec-navigation-link"
       href="/bat"
     >
@@ -549,7 +549,7 @@ exports[`EcMenu > should render as expanded by default 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -583,7 +583,7 @@ exports[`EcMenu > should render as expanded by default 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link ec-navigation-link"
       href="/bar"
     >
@@ -617,7 +617,7 @@ exports[`EcMenu > should render as expanded by default 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link baz ec-navigation-link"
       href="/baz"
     >
@@ -651,7 +651,7 @@ exports[`EcMenu > should render as expanded by default 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link ec-navigation-link"
       href="/bat"
     >
@@ -695,7 +695,7 @@ exports[`EcMenu > should render as expected when set to horizontal 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -739,7 +739,7 @@ exports[`EcMenu > should render as expected when set to isReverse 1`] = `
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link"
+      class="ec-navigation-link"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >
@@ -783,7 +783,7 @@ exports[`EcMenu > should render as expected when set to isReverse and horizontal
     data-test="ec-menu__item"
   >
     <a
-      class="ec-menu__link ec-navigation-link ec-navigation-link--is-compact"
+      class="ec-navigation-link ec-navigation-link--is-compact"
       data-test="ec-menu__link foo ec-navigation-link"
       href="/foo"
     >

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

@@ -13,6 +13,7 @@
       v-for="(link, index) of validLinks"
       :key="index"
       class="ec-menu__item"
+      :class="{ 'ec-menu__item--light-mode': isInLightMode }"
       data-test="ec-menu__item"
     >
       <ec-navigation-link
@@ -22,7 +23,6 @@
           dataTest: null,
           'data-test': getLinkDataTest(link),
         }"
-        class="ec-menu__link"
         :is-collapsed="isCollapsed"
         :is-compact="horizontal"
         :is-in-light-mode="isInLightMode"
@@ -93,6 +93,10 @@ function getLinkDataTest(link: MenuLink): string {
       }
       /* stylelint-enable */
     }
+
+    &--light-mode {
+      @apply tw-mt-16;
+    }
   }
 }
 </style>

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

@@ -148,28 +148,27 @@ withDefaults(defineProps<NavigationLinkProps>(), {
     }
 
     &:focus {
-      background-color: hsla(var(--ec-key-color-level-4), 0.9);
+      @apply tw-text-key-4;
     }
 
     &.ec-navigation-link--light-mode {
       @apply tw-bg-transparent;
       @apply tw-small-strong;
-
-      &:hover,
-      &:focus {
-        @apply tw-text-gray-2;
-      }
+      @apply tw-text-gray-2;
     }
   }
 
   &--light-mode {
     @apply tw-small-text;
-    @apply tw-px-0 tw-py-16;
+    @apply tw-p-8;
     @apply tw-text-gray-3;
     @apply tw-bg-transparent;
     @apply tw-capitalize;
 
-    &:hover {
+    &:hover,
+    &:focus {
+      @apply tw-small-strong;
+      @apply tw-bg-transparent;
       @apply tw-text-gray-2;
     }
   }

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

@@ -41,7 +41,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__header"
+    class=""
   >
     <div
       class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
@@ -127,7 +127,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__header"
+    class=""
   >
     <div
       class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
@@ -216,7 +216,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
   data-test="ec-navigation"
 >
   <div
-    class="ec-navigation__header"
+    class=""
   >
     <div
       class="ec-navigation__branding--mobile-menu-open ec-navigation__branding"
@@ -302,7 +302,7 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
   data-test="ec-navigation"
 >
   <div
-    class=""
+    class="ec-navigation__header"
   >
     <div
       class="ec-navigation__branding--light-mode ec-navigation__branding"
@@ -323,7 +323,7 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
   />
   <!--v-if-->
   <div
-    class="ec-navigation__block ec-navigation__menu"
+    class="ec-navigation__block--light-mode ec-navigation__menu--light-mode ec-navigation__block ec-navigation__menu"
     data-test="ec-navigation__block ec-navigation__menu"
   >