[CHUX-467] futher tweaks in chameleon navigation (#1983)

* CHUX-467:chore:update snapshots * 2.8.11
Ebury · Jun 18, 2024 · cbb44f6 · cbb44f6
1 parent 9b3f82e
commit cbb44f6
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.8.10",
+  "version": "2.8.11",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

diff --git a/src/components/ec-menu/ec-menu.vue b/src/components/ec-menu/ec-menu.vue
@@ -25,6 +25,7 @@
         class="ec-menu__link"
         :is-collapsed="isCollapsed"
         :is-compact="horizontal"
+        :is-in-light-mode="isInLightMode"
         v-on="link.on || {}"
         @navigation-link-clicked="emit('navigation-link-clicked')"
       />

diff --git a/src/components/ec-menu/types.ts b/src/components/ec-menu/types.ts
@@ -11,4 +11,5 @@ export interface MenuProps {
   isCollapsed?: boolean,
   links?: MenuLink[],
   isReversed?: boolean,
+  isInLightMode?:boolean,
 }
diff --git a/src/components/ec-navigation-link/ec-navigation-link.vue b/src/components/ec-navigation-link/ec-navigation-link.vue
@@ -87,7 +87,7 @@ withDefaults(defineProps<NavigationLinkProps>(), {
 @import '../../styles/tools/transitions.css';
 
 .ec-navigation-link {
-  @apply tw-h6;
+  @apply tw-small-text;
   @apply tw-py-12 tw-px-24;
   @apply tw-flex tw-items-center;
   @apply tw-no-underline;
@@ -99,6 +99,11 @@ withDefaults(defineProps<NavigationLinkProps>(), {
   &:hover {
     @apply tw-text-key-4;
     @apply tw-no-underline;
+    @apply tw-small-strong;
+
+    &.ec-navigation-link--light-mode {
+      @apply tw-text-gray-2;
+    }
   }
 
   &:focus {
@@ -115,14 +120,6 @@ 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;
@@ -153,6 +150,26 @@ withDefaults(defineProps<NavigationLinkProps>(), {
     &:focus {
       background-color: hsla(var(--ec-key-color-level-4), 0.9);
     }
+
+    &.ec-navigation-link--light-mode {
+      @apply tw-bg-transparent;
+      @apply tw-small-strong;
+
+      &:hover,
+      &:focus {
+        @apply tw-text-gray-2;
+      }
+    }
+  }
+
+  &--light-mode {
+    @apply tw-px-0 tw-py-16;
+    @apply tw-text-gray-3;
+    @apply tw-bg-transparent;
+
+    &:hover {
+      @apply tw-text-gray-2;
+    }
   }
 }
 </style>
diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
@@ -82,6 +82,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -170,6 +171,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -255,6 +257,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -302,7 +305,7 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
     class=""
   >
     <div
-      class="ec-navigation__branding"
+      class="ec-navigation__branding--light-mode ec-navigation__branding"
       data-test="ec-navigation__branding"
     >
       <img
@@ -326,6 +329,9 @@ exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" p
     
     
   </div>
+  <hr
+    class="ec-navigation__separator"
+  />
   <!--v-if-->
   <!--v-if-->
 </div>
@@ -364,6 +370,7 @@ exports[`EcNavigation > should be collapsable when isCollapsable is set 1`] = `
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -400,6 +407,7 @@ exports[`EcNavigation > should be collapsed when isCollapsed is set to true 1`]
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -436,6 +444,7 @@ exports[`EcNavigation > should be expanded when isCollapsed is set to false 1`]
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -462,6 +471,7 @@ exports[`EcNavigation > should not render branding if logo is given in branding
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -488,6 +498,7 @@ exports[`EcNavigation > should not render branding if no logo is given in brandi
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -524,6 +535,7 @@ exports[`EcNavigation > should only render mandatory slot if no other slots were
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -579,6 +591,7 @@ exports[`EcNavigation > should render all given slots 1`] = `
     </div>
     
   </div>
+  <!--v-if-->
   <div
     class="ec-navigation__block ec-navigation__footer-menu"
     data-test="ec-navigation__block ec-navigation__footer-menu"
@@ -649,6 +662,7 @@ exports[`EcNavigation > should render branding logo and name when given 1`] = `
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
 
@@ -686,5 +700,6 @@ exports[`EcNavigation > should render with custom attributes 1`] = `
   </div>
   <!--v-if-->
   <!--v-if-->
+  <!--v-if-->
 </div>
 `;
diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
@@ -31,6 +31,7 @@
         v-if="showBrandingLogo && branding.logo"
         :class="{
           'ec-navigation__branding--mobile-menu-open': isMobileMenuOpen,
+          'ec-navigation__branding--light-mode': isInLightMode,
         }"
         class="ec-navigation__branding"
         data-test="ec-navigation__branding"
@@ -61,10 +62,11 @@
 
     <div
       v-if="$slots['user-info']"
+      :class="{ 'ec-navigation__block ec-navigation__user-info--light-mode': isInLightMode }"
       class="ec-navigation__block ec-navigation__user-info"
       data-test="ec-navigation__block ec-navigation__user-info"
     >
-      <slot name="user-info" v-bind="{ onNavigationLinkClicked }" />
+      <slot name="user-info" v-bind="{ onNavigationLinkClicked, isInLightMode }" />
     </div>
 
     <hr
@@ -77,30 +79,35 @@
       class="ec-navigation__block ec-navigation__call-to-action"
       data-test="ec-navigation__block ec-navigation__call-to-action"
     >
-      <slot name="call-to-action" v-bind="{ onNavigationLinkClicked }" />
+      <slot name="call-to-action" v-bind="{ onNavigationLinkClicked, isInLightMode }" />
     </div>
 
     <div
       class="ec-navigation__block ec-navigation__menu"
       data-test="ec-navigation__block ec-navigation__menu"
     >
-      <slot name="menu" v-bind="{ onNavigationLinkClicked }" />
+      <slot name="menu" v-bind="{ onNavigationLinkClicked, isInLightMode }" />
     </div>
 
+    <hr
+      v-if="isInLightMode"
+      class="ec-navigation__separator"
+    />
+
     <div
       v-if="$slots['footer-menu']"
       class="ec-navigation__block ec-navigation__footer-menu"
       data-test="ec-navigation__block ec-navigation__footer-menu"
     >
-      <slot name="footer-menu" v-bind="{ onNavigationLinkClicked }" />
+      <slot name="footer-menu" v-bind="{ onNavigationLinkClicked, isInLightMode }" />
     </div>
 
     <div
-      v-if="$slots.copyright"
+      v-if="$slots.copyright && !isInLightMode"
       class="ec-navigation__block ec-navigation__copyright"
       data-test="ec-navigation__block ec-navigation__copyright"
     >
-      <slot name="copyright" v-bind="{ onNavigationLinkClicked }" />
+      <slot name="copyright" v-bind="{ onNavigationLinkClicked, isInLightMode }" />
     </div>
   </div>
 </template>
@@ -153,15 +160,18 @@ function onNavigationLinkClicked() {
     @apply tw-flex tw-justify-between tw-items-center;
   }
 
+  &__block {
+    @apply tw-mt-8;
+  }
+
+  &__user-info--light-mode {
+    @apply tw-mt-16 tw-mb-24;
+  }
+
   &--light-mode {
     @apply tw-bg-gray-7;
     @apply tw-text-gray-3;
-    @apply tw-py-16 tw-px-24;
-
-    .ec-navigation__branding {
-      @apply tw-m-0 tw-p-0;
-      @apply tw-text-left;
-    }
+    @apply tw-pt-32 tw-px-32 tw-pb-24;
   }
 
   &--is-collapsable {
@@ -176,7 +186,8 @@ function onNavigationLinkClicked() {
   }
 
   &--mobile-mode {
-    @apply tw-w-screen;
+    @apply tw-w-full;
+    @apply tw-pt-16 tw-px-24 tw-pb-8;
   }
 
   &__mobile-menu-close-button {
@@ -204,26 +215,21 @@ function onNavigationLinkClicked() {
     @apply tw-text-center;
   }
 
-  &__branding-logo {
-    @apply tw-align-top;
-
-    &--responsive {
-      @apply tw-w-88;
-    }
+  &__branding--light-mode {
+    @apply tw-m-0 tw-p-0;
+    @apply tw-text-left;
   }
 
-  &__block {
-    @apply tw-mt-16;
-
-    &:last-child {
-      @apply tw-mb-16;
-    }
+  &__branding-logo {
+    @apply tw-align-top;
+    @apply tw-w-88;
   }
 
   &__separator {
     @apply tw-w-full;
-    @apply tw-mt-24 tw-mb-0;
+    @apply tw-my-8;
     @apply tw-border-solid tw-border-gray-6;
+    @apply tw-border-b-0;
   }
 
   &__menu {