Skip to content

Commit

Permalink
[CHUX-887] sticky mobile header (#2002)
Browse files Browse the repository at this point in the history 
* CHUX-887-sticky-navbar

* CHUX-887:fix:class name

* CHUX-887:chore:update-snapshot

* 2.8.14
  • Loading branch information
@stavros-tomas
stavros-tomas authored Jul 5, 2024
1 parent 85a7d88 commit d3739fb
Show file tree
Hide file tree
Showing 10 changed files with 154 additions and 128 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.8.13",
"version": "2.8.14",
"main": "src/main.ts",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
2 changes: 2 additions & 0 deletions src/components/ec-mobile-header/ec-mobile-header.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ const emit = defineEmits<{
@apply tw-w-full;
@apply tw-py-16 tw-px-24;
@apply tw-bg-gray-7;
@apply tw-z-navigation;
@apply tw-fixed;
&__menu {
@apply tw-flex tw-items-center;
Expand Down
240 changes: 128 additions & 112 deletions src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > after 1`] = `
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
<div
class="ec-navigation__mobile-header__container"
>
<div
class="tw-leading-reset"
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
>
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
<div
class="tw-leading-reset"
>
<use
xlink:href="#ec-simple-menu"
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</svg>
</button>
</header>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
>
<use
xlink:href="#ec-simple-menu"
/>
</svg>
</button>
</header>
</div>
`;

exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > before 1`] = `
Expand Down Expand Up @@ -87,38 +91,42 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
`;

exports[`EcNavigation > mobile navigation > should close the mobile navigation when the slot \`onNavigationLinkClicked\` binding is triggered > after 1`] = `
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
<div
class="ec-navigation__mobile-header__container"
>
<div
class="tw-leading-reset"
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
>
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
<div
class="tw-leading-reset"
>
<use
xlink:href="#ec-simple-menu"
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</svg>
</button>
</header>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
>
<use
xlink:href="#ec-simple-menu"
/>
</svg>
</button>
</header>
</div>
`;

exports[`EcNavigation > mobile navigation > should close the mobile navigation when the slot \`onNavigationLinkClicked\` binding is triggered > before 1`] = `
Expand Down Expand Up @@ -176,38 +184,42 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
`;

exports[`EcNavigation > mobile navigation > should render mobile header if "isResponsive" prop is true 1`] = `
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
<div
class="ec-navigation__mobile-header__container"
>
<div
class="tw-leading-reset"
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
>
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
<div
class="tw-leading-reset"
>
<use
xlink:href="#ec-simple-menu"
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</svg>
</button>
</header>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
>
<use
xlink:href="#ec-simple-menu"
/>
</svg>
</button>
</header>
</div>
`;

exports[`EcNavigation > mobile navigation > should show render the mobile navigation when the mobile header menu button is clicked > after 1`] = `
Expand Down Expand Up @@ -262,38 +274,42 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
`;

exports[`EcNavigation > mobile navigation > should show render the mobile navigation when the mobile header menu button is clicked > before 1`] = `
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
<div
class="ec-navigation__mobile-header__container"
>
<div
class="tw-leading-reset"
<header
class="ec-mobile-header"
data-test="ec-mobile-header"
>
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
<div
class="tw-leading-reset"
>
<use
xlink:href="#ec-simple-menu"
<img
alt="Test Brand"
class="ec-navigation__mobile-header__logo"
data-test="ec-navigation__mobile-header__logo"
src="/img/my-brand.png"
/>
</svg>
</button>
</header>
</div>
<button
class="ec-mobile-header__menu"
data-test="ec-mobile-header__menu"
type="button"
>
<svg
class="ec-icon ec-mobile-header__menu__icon"
height="24"
width="24"
>
<use
xlink:href="#ec-simple-menu"
/>
</svg>
</button>
</header>
</div>
`;

exports[`EcNavigation > should apply light mode CSS classes if "isInLightMode" prop is true 1`] = `
Expand Down
34 changes: 21 additions & 13 deletions src/components/ec-navigation/ec-navigation.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<template>
<ec-mobile-header
<div
v-if="isResponsive && !isMobileMenuOpen"
@open-mobile-menu="isMobileMenuOpen = true"
class="ec-navigation__mobile-header__container"
>
<template #logo>
<img
class="ec-navigation__mobile-header__logo"
:src="branding.logo"
:alt="branding.name"
data-test="ec-navigation__mobile-header__logo"
>
</template>
</ec-mobile-header>
<ec-mobile-header
@open-mobile-menu="isMobileMenuOpen = true"
>
<template #logo>
<img
class="ec-navigation__mobile-header__logo"
:src="branding.logo"
:alt="branding.name"
data-test="ec-navigation__mobile-header__logo"
>
</template>
</ec-mobile-header>
</div>
<div
v-else
class="ec-navigation"
Expand Down Expand Up @@ -219,8 +223,12 @@ function onNavigationLinkClicked() {
}
&__mobile-header {
&__container {
padding-bottom: 68px;
}
&__logo {
@apply tw-w-88;
@apply tw-h-36;
}
}
Expand All @@ -238,7 +246,7 @@ function onNavigationLinkClicked() {
&__branding-logo {
&--light-mode {
@apply tw-align-top;
@apply tw-w-88;
@apply tw-h-36;
}
}
Expand Down
Binary file modified ...pshots/visual-regression.spec.js/layout-navigation--light-mode__chrome.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/visual-regression.spec.js/layout-navigation--light-mode__firefox.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...pshots/visual-regression.spec.js/layout-navigation--responsive__chrome.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...shots/visual-regression.spec.js/layout-navigation--responsive__firefox.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tion/snapshots/visual-regression.spec.js/mobile-header--basic__firefox.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit d3739fb

Please sign in to comment.