[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
Ebury · Jul 10, 2024 · fea75d3 · fea75d3
1 parent 7b9d34c
commit fea75d3
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 30 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.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
@@ -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;
+    }
   }
 }
 </style>
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
@@ -20,7 +20,7 @@ exports[`EcMobileHeader > should render properly 1`] = `
     type="button"
   >
     <svg
-      class="ec-icon ec-mobile-header__menu__icon"
+      class="ec-icon ec-mobile-header__menu-icon"
       height="24"
       width="24"
     >

diff --git 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')"
     >
       <ec-icon
-        class="ec-mobile-header__menu__icon"
+        class="ec-mobile-header__menu-icon"
         :name="IconName.SIMPLE_MENU"
         :size="24"
       />
@@ -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
@@ -2,7 +2,7 @@
 
 exports[`EcNavigation > mobile navigation > should close the mobile navigation when the close menu button is clicked > after 1`] = `
 <div
-  class="ec-navigation__mobile-header__container"
+  class="ec-navigation__mobile-header-container"
 >
   <header
     class="ec-mobile-header"
@@ -14,8 +14,8 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
       
       <img
         alt="Test Brand"
-        class="ec-navigation__mobile-header__logo"
-        data-test="ec-navigation__mobile-header__logo"
+        class="ec-navigation__mobile-header-logo"
+        data-test="ec-navigation__mobile-header-logo"
         src="/img/my-brand.png"
       />
       
@@ -26,7 +26,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
       type="button"
     >
       <svg
-        class="ec-icon ec-mobile-header__menu__icon"
+        class="ec-icon ec-mobile-header__menu-icon"
         height="24"
         width="24"
       >
@@ -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`] = `
 <div
-  class="ec-navigation__mobile-header__container"
+  class="ec-navigation__mobile-header-container"
 >
   <header
     class="ec-mobile-header"
@@ -104,8 +104,8 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
       
       <img
         alt="Test Brand"
-        class="ec-navigation__mobile-header__logo"
-        data-test="ec-navigation__mobile-header__logo"
+        class="ec-navigation__mobile-header-logo"
+        data-test="ec-navigation__mobile-header-logo"
         src="/img/my-brand.png"
       />
       
@@ -116,7 +116,7 @@ exports[`EcNavigation > mobile navigation > should close the mobile navigation w
       type="button"
     >
       <svg
-        class="ec-icon ec-mobile-header__menu__icon"
+        class="ec-icon ec-mobile-header__menu-icon"
         height="24"
         width="24"
       >
@@ -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`] = `
 <div
-  class="ec-navigation__mobile-header__container"
+  class="ec-navigation__mobile-header-container"
 >
   <header
     class="ec-mobile-header"
@@ -197,8 +197,8 @@ exports[`EcNavigation > mobile navigation > should render mobile header if "isRe
       
       <img
         alt="Test Brand"
-        class="ec-navigation__mobile-header__logo"
-        data-test="ec-navigation__mobile-header__logo"
+        class="ec-navigation__mobile-header-logo"
+        data-test="ec-navigation__mobile-header-logo"
         src="/img/my-brand.png"
       />
       
@@ -209,7 +209,7 @@ exports[`EcNavigation > mobile navigation > should render mobile header if "isRe
       type="button"
     >
       <svg
-        class="ec-icon ec-mobile-header__menu__icon"
+        class="ec-icon ec-mobile-header__menu-icon"
         height="24"
         width="24"
       >
@@ -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`] = `
 <div
-  class="ec-navigation__mobile-header__container"
+  class="ec-navigation__mobile-header-container"
 >
   <header
     class="ec-mobile-header"
@@ -287,8 +287,8 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
       
       <img
         alt="Test Brand"
-        class="ec-navigation__mobile-header__logo"
-        data-test="ec-navigation__mobile-header__logo"
+        class="ec-navigation__mobile-header-logo"
+        data-test="ec-navigation__mobile-header-logo"
         src="/img/my-brand.png"
       />
       
@@ -299,7 +299,7 @@ exports[`EcNavigation > mobile navigation > should show render the mobile naviga
       type="button"
     >
       <svg
-        class="ec-icon ec-mobile-header__menu__icon"
+        class="ec-icon ec-mobile-header__menu-icon"
         height="24"
         width="24"
       >

diff --git a/src/components/ec-navigation/ec-navigation.vue b/src/components/ec-navigation/ec-navigation.vue
@@ -1,17 +1,17 @@
 <template>
   <div
     v-if="isResponsive && !isMobileMenuOpen"
-    class="ec-navigation__mobile-header__container"
+    class="ec-navigation__mobile-header-container"
   >
     <ec-mobile-header
       @open-mobile-menu="isMobileMenuOpen = true"
     >
       <template #logo>
         <img
-          class="ec-navigation__mobile-header__logo"
+          class="ec-navigation__mobile-header-logo"
           :src="branding.logo"
           :alt="branding.name"
-          data-test="ec-navigation__mobile-header__logo"
+          data-test="ec-navigation__mobile-header-logo"
         >
       </template>
     </ec-mobile-header>
@@ -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
@@ -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
@@ -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;
   }