From fea75d3086b30c8aacee361ae51c958c3881781b Mon Sep 17 00:00:00 2001 From: Stavros Tomas <55188371+stavros-tomas@users.noreply.github.com> Date: Wed, 10 Jul 2024 10:05:24 +0100 Subject: [PATCH] [CHUX-690] Make metroline footer cta mobile friendly (#2005) * CHUX-690:feat:remove buttons 256px limit and make metroline footer cta expand fully on mobile * CHUX-690:chore:identation * CHUX-690:feat:add z index to panel * CHUX-690:fix:bem * 2.8.16 --- package-lock.json | 4 +-- package.json | 2 +- .../ec-metroline-item/ec-metroline-item.vue | 7 +++- .../ec-mobile-header.spec.ts.snap | 2 +- .../ec-mobile-header/ec-mobile-header.vue | 4 +-- .../__snapshots__/ec-navigation.spec.ts.snap | 32 +++++++++---------- .../ec-navigation/ec-navigation.vue | 10 +++--- src/components/ec-panel/ec-panel.vue | 1 + src/styles/components/ec-btn/ec-btn.css | 2 -- 9 files changed, 34 insertions(+), 30 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f810c511..bdb98baef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@ebury/chameleon-components", - "version": "2.8.15", + "version": "2.8.16", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@ebury/chameleon-components", - "version": "2.8.15", + "version": "2.8.16", "license": "MIT", "dependencies": { "@vueuse/core": "10.9.0", diff --git a/package.json b/package.json index 273384441..846ba8b78 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ebury/chameleon-components", - "version": "2.8.15", + "version": "2.8.16", "main": "src/main.ts", "sideEffects": false, "author": "Ebury Team (http://labs.ebury.rocks/)", diff --git a/src/components/ec-metroline/components/ec-metroline-item/ec-metroline-item.vue b/src/components/ec-metroline/components/ec-metroline-item/ec-metroline-item.vue index e69a3a2a1..561ba5b46 100644 --- a/src/components/ec-metroline/components/ec-metroline-item/ec-metroline-item.vue +++ b/src/components/ec-metroline/components/ec-metroline-item/ec-metroline-item.vue @@ -269,7 +269,12 @@ function complete() { } &__footer-cta { - @apply tw-ml-auto tw-mr-0; + @apply tw-w-full; + + @screen md { + @apply tw-w-auto; + @apply tw-ml-auto tw-mr-0; + } } } diff --git a/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap index 264d42444..0af46e471 100644 --- a/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap +++ b/src/components/ec-mobile-header/__snapshots__/ec-mobile-header.spec.ts.snap @@ -20,7 +20,7 @@ exports[`EcMobileHeader > should render properly 1`] = ` type="button" > diff --git a/src/components/ec-mobile-header/ec-mobile-header.vue b/src/components/ec-mobile-header/ec-mobile-header.vue index fe9aea9c9..24184ad28 100644 --- a/src/components/ec-mobile-header/ec-mobile-header.vue +++ b/src/components/ec-mobile-header/ec-mobile-header.vue @@ -13,7 +13,7 @@ @click="emit('open-mobile-menu')" > @@ -44,7 +44,7 @@ const emit = defineEmits<{ @apply tw-border-0 tw-p-0; @apply tw-bg-transparent; - &__icon { + &-icon { @apply tw-fill-key-4; } diff --git a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap index 65f87272b..b0410db4a 100644 --- a/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap +++ b/src/components/ec-navigation/__snapshots__/ec-navigation.spec.ts.snap @@ -2,7 +2,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > after 1`] = `
mobile navigation > should close the mobile navigation w @@ -26,7 +26,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w type="button" > @@ -92,7 +92,7 @@ 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`] = `
mobile navigation > should close the mobile navigation w @@ -116,7 +116,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w type="button" > @@ -185,7 +185,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w exports[`EcNavigation > mobile navigation > should render mobile header if "isResponsive" prop is true 1`] = `
mobile navigation > should render mobile header if "isRe @@ -209,7 +209,7 @@ exports[`EcNavigation > mobile navigation > should render mobile header if "isRe type="button" > @@ -275,7 +275,7 @@ 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`] = `
mobile navigation > should show render the mobile naviga @@ -299,7 +299,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga type="button" > diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue index 3b83e7bfa..49ba015c0 100644 --- a/src/components/ec-navigation/ec-navigation.vue +++ b/src/components/ec-navigation/ec-navigation.vue @@ -1,17 +1,17 @@
@@ -231,11 +231,11 @@ function onNavigationLinkClicked() { } &__mobile-header { - &__container { + &-container { padding-bottom: 68px; } - &__logo { + &-logo { @apply tw-h-36; } } diff --git a/src/components/ec-panel/ec-panel.vue b/src/components/ec-panel/ec-panel.vue index 0a2882fc2..e5de50ed4 100644 --- a/src/components/ec-panel/ec-panel.vue +++ b/src/components/ec-panel/ec-panel.vue @@ -131,6 +131,7 @@ function closePanel() { max-width: var(--ec-side-panel-max-width); @apply tw-w-full; + @apply tw-z-navigation; @apply tw-absolute tw-right-0 tw-top-0; &__fixed-container { diff --git a/src/styles/components/ec-btn/ec-btn.css b/src/styles/components/ec-btn/ec-btn.css index 7338ce249..f57fcc0de 100644 --- a/src/styles/components/ec-btn/ec-btn.css +++ b/src/styles/components/ec-btn/ec-btn.css @@ -8,8 +8,6 @@ @apply tw-whitespace-nowrap tw-overflow-hidden; @apply tw-transition-colors tw-duration-150 tw-ease-out; - max-width: 256px; - &:hover { @apply tw-no-underline; }