[email protected] - small CSS updates to match design (#1802)

* updated country selector font * removed unneeded css * added changelog * refactored padding * removed text decoration * refactored usernavpanel component * using css variable * reverted small focus change * resolved datatrak Co-authored-by: Lizzie Turney <[email protected]>
justeattakeaway · Apr 14, 2022 · 0c967e4 · 0c967e4
1 parent 8de42fc
commit 0c967e4
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 74 deletions.
diff --git a/packages/components/organisms/f-header/CHANGELOG.md b/packages/components/organisms/f-header/CHANGELOG.md
@@ -4,6 +4,15 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 
+v9.13.0
+------------------------------
+*April 12, 2022*
+
+### Changed
+- added font size and color to nav buttons
+- refactored `UserNavigationPanel` to take in `NavLink` component
+
+
 v9.12.0
 ------------------------------
 *April 11, 2022*

diff --git a/packages/components/organisms/f-header/package.json b/packages/components/organisms/f-header/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@justeat/f-header",
   "description": "Fozzie Header - Globalised Header Component",
-  "version": "9.12.0",
+  "version": "9.13.0",
   "main": "dist/f-header.umd.min.js",
   "maxBundleSize": "40kB",
   "files": [

diff --git a/packages/components/organisms/f-header/src/assets/scss/navigation.scss b/packages/components/organisms/f-header/src/assets/scss/navigation.scss
@@ -166,6 +166,10 @@ $nav-link-focus-color              : $color-focus;
             text-decoration: underline;
         }
     }
+
+    @include media('<=mid') {
+        color: $nav-text-color;
+    }
 }
 
 .has-sublist {
@@ -178,7 +182,7 @@ $nav-link-focus-color              : $color-focus;
 
 .c-nav-popover {
     @include media('>mid') {
-        min-width: 300px;
+        min-width: $nav-popover-width;
         position: absolute;
         top: 100%;
         right: 99999px; // offscreen, so can’t ever be hovered over by default

diff --git a/packages/components/organisms/f-header/src/components/CountrySelector.vue b/packages/components/organisms/f-header/src/components/CountrySelector.vue
@@ -107,15 +107,17 @@ export default {
 @import '../assets/scss/navigation.scss';
 
 .c-countrySelector-text {
+    color: $nav-text-color;
+    @include font-size($nav-text-size);
     @include media('>mid') {
         display: none;
     }
 }
 
 .c-countrySelector-btn {
+    text-decoration: none;
     background: transparent;
     border: 0;
-    font-size: 1rem;
     display: block;
     padding: spacing(c) spacing(c);
     margin-top: spacing(d);

diff --git a/packages/components/organisms/f-header/src/components/CountrySelectorPanel.vue b/packages/components/organisms/f-header/src/components/CountrySelectorPanel.vue
@@ -47,7 +47,7 @@
                         :tabindex="isOpen ? 0 : -1"
                         :text="country.localisedName"
                         :has-border-bottom="false"
-                        :is-country-link="true"
+                        :is-popover-link="true"
                         :href="country.siteUrl"
                         :lang="country.lang">
                         <template #icon>

diff --git a/packages/components/organisms/f-header/src/components/NavLink.vue b/packages/components/organisms/f-header/src/components/NavLink.vue
@@ -4,16 +4,16 @@
         :data-trak="JSON.stringify(dataTrak)"
         :href="href"
         :class="[{
-            [$style['c-navLink']]: !isCountryLink,
-            [$style['c-navLink--countryLink']]: isCountryLink,
+            [$style['c-navLink']]: !isPopoverLink,
+            [$style['c-navLink--popoverLink']]: isPopoverLink,
             [$style['c-nav-list-link--alt']]: isAltColour,
             [$style['c-navLink--hoverWithWhiteBackground']]: backgroundTheme === 'white',
             [$style['c-nav-list-link--transparent']]: backgroundTheme === 'transparent'
         }]">
         <slot name="icon" />
         <span
             :class="[{
-                [$style['c-navLink-text']]: !isCountryLink,
+                [$style['c-navLink-text']]: !isPopoverLink,
                 [$style['c-navLink-text--noIcon']]: !hasIcon,
                 [$style['c-navLink-text--borderBottomBelowMid']]: hasBorderBottom,
                 [$style['c-navLink-text--borderTopBelowMid']]: hasBorderTop
@@ -58,7 +58,7 @@ export default {
             default: false
         },
 
-        isCountryLink: {
+        isPopoverLink: {
             type: Boolean,
             default: false
         },
@@ -83,7 +83,7 @@ export default {
 .c-navLink {
     text-decoration: none;
     color: $nav-text-color;
-    font-size: $nav-text-size;
+    @include font-size($nav-text-size);
 
     @include media('<=mid') {
         display: flex;
@@ -105,8 +105,7 @@ export default {
 
     @include media('>mid') {
         font-weight: $nav-text-weight;
-        margin-top: spacing(d);
-        margin-bottom: spacing(d);
+        margin: spacing(d) 0;
         padding: spacing(c) spacing(c);
         display: flex;
 
@@ -121,7 +120,7 @@ export default {
     @include media('<=mid') {
         width: 100vw;
         padding: spacing(c) spacing(d) spacing(c) 0;
-        margin-left: spacing(c);
+        margin-left: spacing(a);
     }
 }
 
@@ -143,7 +142,7 @@ export default {
     }
 }
 
-.c-navLink--countryLink {
+.c-navLink--popoverLink {
     display: block;
     text-decoration: none;
     padding: spacing(c) spacing(d) spacing(c) 0;
@@ -159,10 +158,12 @@ export default {
 
     &:hover {
         background: $color-container-subtle;
+        border-radius: 0 !important;
     }
 
     &:active {
         background: $color-container-strong;
+        border-radius: 0 !important;
     }
 
     &:focus {

diff --git a/packages/components/organisms/f-header/src/components/Navigation.vue b/packages/components/organisms/f-header/src/components/Navigation.vue
@@ -156,7 +156,6 @@
                         :aria-haspopup="isBelowMid ? false : true"
                         :aria-label="copy.userMenu.buttonLabel(userInfo.friendlyName)"
                         :class="[
-                            $style['c-nav-list-text'],
                             $style['c-nav-list-btn'],
                             { [$style['c-nav-list-btn--hoverAboveMid']]: headerBackgroundTheme === 'white' }
                         ]"
@@ -172,7 +171,6 @@
                             :class="[
                                 $style['c-nav-list-btn-text'],
                                 {
-                                    [$style['c-nav-list-link']]: headerBackgroundTheme === 'white',
                                     [$style['c-nav-list-link--alt']]: isAltColour,
                                     [$style['c-nav-list-link--transparent']]: headerBackgroundTheme === 'transparent'
                                 }]">
@@ -678,10 +676,9 @@ export default {
 
 .c-nav-list-btn {
     background: transparent;
+    text-decoration: none;
     border: 0;
-    font-size: 1rem;
     padding: spacing(c) spacing(c);
-    color: $nav-text-color;
     display: flex;
 
     &:focus {
@@ -698,8 +695,10 @@ export default {
         width: 100%;
         text-align: left;
         display: block;
+        padding: spacing(c) 0;
 
         &:focus {
+            outline-color: $nav-link-focus-color;
             border-radius: 0;
         }
 
@@ -711,8 +710,11 @@ export default {
 }
 
 .c-nav-list-btn-text {
+    @include font-size($nav-text-size);
+    color: $nav-text-color;
+    font-weight: $font-weight-regular;
     @include media('>mid') {
-        margin-top: 2px;
+        font-weight: $nav-text-weight;
     }
 }
 
@@ -728,6 +730,9 @@ export default {
 .c-nav-list-text-sub {
     display: block;
     overflow: hidden;
+    @include font-size($nav-text-size);
+    margin-left: spacing(h);
+    color: $nav-text-color;
     &.u-showBelowMid {
         @include media('>mid') {
             display: none !important;
@@ -763,47 +768,27 @@ export default {
     }
 }
 
-.c-nav-list-text {
-    font-weight: $nav-text-weight;
-    @include media('<=mid') {
-        padding: spacing(c) spacing(a);
-        font-weight: $font-weight-regular;
-    }
-}
-
 // Icons, such as the profile icon
 .c-nav-icon {
     width: $nav-icon-size;
     height: $nav-icon-size;
-    margin-right: spacing(a);
-
     @include media('>mid') {
+        margin-right: spacing(a);
         & path {
             fill: $nav-icon-color;
         }
     }
 
     @include media('<=mid') {
         float: left;
-        margin-right: spacing();
+        margin: spacing(c) spacing(d);
     }
 }
 
+.c-nav-icon--profile,
 .c-nav-icon--delivery,
 .c-nav-icon--offers {
     @include media('<=mid') {
-        margin-left: spacing(d);
-        margin-top: spacing(c);
-        & path {
-            fill: $nav-icon-color--mobileWhiteBg;
-        }
-    }
-}
-
-.c-nav-icon--profile {
-    @include media('<=mid') {
-        margin-left: spacing(c);
-        margin-right: spacing(d);
         & path {
             fill: $nav-icon-color--mobileWhiteBg;
         }

diff --git a/packages/components/organisms/f-header/src/components/UserNavigationPanel.vue b/packages/components/organisms/f-header/src/components/UserNavigationPanel.vue
@@ -6,22 +6,22 @@
         <li
             v-for="(link, index) in copy.navLinks"
             :key="index"
-            data-test-id="nav-links"
-            :class="$style['c-user-list-item']">
-            <a
-                :class="$style['list-link']"
+            data-test-id="nav-links">
+            <nav-link
                 :tabindex="tabIndex"
                 :href="link.url"
-                :data-trak='`{
-                    "trakEvent": "click",
-                    "category": "engagement",
-                    "action": "header",
-                    "label": "${link.gtm}"
-                }`'
+                :is-popover-link="!isBelowMid"
+                :data-trak="{
+                    trakEvent: 'click',
+                    category: 'engagement',
+                    action: 'header',
+                    label: `${link.gtm}`
+                }"
+                :text="link.text"
+                :has-border-top="true"
+                :has-border-bottom="false"
                 @blur="$emit('deactivateNav')"
-                @focus="$emit('activateNav')">
-                {{ link.text }}
-            </a>
+                @focus="$emit('activateNav')" />
         </li>
 
         <li
@@ -37,7 +37,7 @@
                     "label": "${copy.accountLogout.gtm}"
                 }`'
                 data-test-id="logout-link"
-                :class="$style['list-link']"
+                :class="$style['c-user-list-link']"
                 @blur="$emit('deactivateNav')"
                 @focus="$emit('activateNav')">
                 {{ copy.accountLogout.text }}
@@ -47,7 +47,12 @@
 </template>
 
 <script>
+import NavLink from './NavLink.vue';
+
 export default {
+    components: {
+        NavLink
+    },
     props: {
         isUserMenuOpen: {
             type: Boolean,
@@ -98,33 +103,25 @@ export default {
 }
 
 .c-user-list-item {
+    padding: spacing(c) spacing(d) spacing(c) 0;
+
+    &:focus {
+            outline-color: $nav-link-focus-color;
+            border-radius: 0;
+    }
+
     &:hover {
         background: $color-container-subtle;
     }
 
-     &:active {
+    &:active {
         background: $color-container-strong;
     }
 }
 
-.list-link {
+.c-user-list-link {
     text-decoration: none;
-
-    &:focus {
-        outline-color: $nav-link-focus-color;
-    }
-
-    @include media('>mid') {
-        display: block;
-        padding: spacing(c) spacing(d);
-        height: auto;
-    }
-
-    @include media('<=mid') {
-        display: flex;
-        margin-left: spacing(h);
-        padding: spacing(c) spacing(d) spacing(c) 0;
-        border-top: 1px solid $color-border-default;
-    }
+    color: $nav-text-color;
+    @include font-size($nav-text-size);
 }
 </style>