f-header@9.11.0 - updated interactive states (#1791)

* added new interactive states for header * added interactive states * added changelog * small tidy-up * small refactor to navlink * added tests for new states * updated nav button * fixed margin issue * reverted margin change * added correct naming * resolved PR comments * renamed class * resolved indentation issue * removed unneeded properties Co-authored-by: Lizzie Turney <lizzie.turney@just-eat.com>
justeattakeaway · Apr 8, 2022 · 118b3a2 · 118b3a2
1 parent 7e0fa04
commit 118b3a2
Show file tree

Hide file tree

Showing 15 changed files with 291 additions and 91 deletions.
diff --git a/packages/components/organisms/f-header/CHANGELOG.md b/packages/components/organisms/f-header/CHANGELOG.md
@@ -4,6 +4,14 @@ 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.11.0
+------------------------------
+*April 8, 2022*
+
+### Changed
+- Interactive states of component (focus, active and hover)
+
+
 v9.10.1
 ------------------------------
 *April 7, 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.10.1",
+  "version": "9.11.0",
   "main": "dist/f-header.umd.min.js",
   "maxBundleSize": "40kB",
   "files": [

diff --git a/packages/components/organisms/f-header/src/assets/scss/common.scss b/packages/components/organisms/f-header/src/assets/scss/common.scss
@@ -18,6 +18,7 @@ $header-buttonIcon-color            : $color-interactive-primary;
 $header-buttonCount-bg              : $color-interactive-primary;
 $header-buttonCount-color           : $color-content-interactive-primary;
 $header-buttonCount-borderColor     : $color-white;
+$header-buttonFocus-borderRadius    : 800px;
 
 $header--transparent-gradient-color : $color-black;
 $header--transparent-gradient       : 115px;

diff --git a/packages/components/organisms/f-header/src/assets/scss/navigation.scss b/packages/components/organisms/f-header/src/assets/scss/navigation.scss
@@ -46,6 +46,9 @@ $nav-toggleIcon-color--transparent : $nav-icon-color--transparent;
 $nav-toggleIcon-bg                 : transparent;
 $nav-toggleIcon-space              : 5px;
 
+$nav-focus-borderRadius            : 800px;
+$nav-link-focus-color              : $color-focus;
+
 @mixin nav-container-visible () {
     overflow-y: auto;
     left: 0;
@@ -158,9 +161,9 @@ $nav-toggleIcon-space              : 5px;
 .c-nav-list-link--transparent,
 .c-nav-list-link--alt {
     @include media('>mid') {
-        &:hover,
-        &:focus {
+        &:hover {
             color: $nav-text-color--transparent !important;
+            text-decoration: underline;
         }
     }
 }
@@ -204,7 +207,7 @@ $nav-toggleIcon-space              : 5px;
 
 .c-nav-popover.c-nav-popover--countrySelector {
     @include media('>mid') {
-        margin-top: spacing(c);
+        margin-top: spacing(d);
     }
     // tooltip arrow
     &:before {

diff --git a/packages/components/organisms/f-header/src/components/CountrySelector.vue b/packages/components/organisms/f-header/src/components/CountrySelector.vue
@@ -116,23 +116,39 @@ export default {
     background: transparent;
     border: 0;
     font-size: 1rem;
-    margin: 0;
-    padding: 0;
+    display: block;
+    padding: spacing(c) spacing(c);
+    margin-top: spacing(d);
+    margin-bottom: spacing(d);
 
     @include media('<=mid') {
         width: 100%;
         text-align: left;
-        padding: spacing(c) spacing(a);
+        padding: spacing(d) spacing(a);
+        margin: 0;
     }
 
-     &:hover {
-        font-weight: $font-weight-bold;
+    &:focus {
+        outline-color: $nav-link-focus-color;
+
+        @include media('>mid') {
+            border-radius: $nav-focus-borderRadius;
+        }
+    }
+
+    &:hover {
+        background: $color-container-subtle;
+
+        @include media('>mid') {
+            border-radius: $nav-focus-borderRadius;
+        }
     }
 }
 
 .c-countrySelector-current-flag {
     height: $countrySelector-flag-height;
     width: $countrySelector-flag-width;
+    display: block;
 
     @include media('<=mid') {
         margin: 0 spacing(d);

diff --git a/packages/components/organisms/f-header/src/components/CountrySelectorPanel.vue b/packages/components/organisms/f-header/src/components/CountrySelectorPanel.vue
@@ -46,15 +46,14 @@
                         }"
                         :tabindex="isOpen ? 0 : -1"
                         :text="country.localisedName"
-                        :class="$style['c-countrySelector-country-link']"
                         :has-border-bottom="false"
                         :is-country-link="true"
                         :href="country.siteUrl"
                         :lang="country.lang">
                         <template #icon>
                             <flag-icon
                                 :country-code="country.flagKey"
-                                :class="[$style['c-countrySelector-country-flag']]" />
+                                :class="$style['c-countrySelector-country-flag']" />
                         </template>
                     </nav-link>
                 </li>
@@ -180,15 +179,21 @@ $countrySelector-text-bg-hover : $color-container-subtle;
 
     &:hover {
         background: $countrySelector-text-bg-hover;
-        text-decoration: none;
+    }
+
+    &:active {
+        background: $color-container-strong;
+    }
+
+    &:focus {
+        outline-color: $nav-link-focus-color;
     }
 }
 
 .c-countrySelector-country-flag {
     height: $countrySelector-flag-height;
     width: $countrySelector-flag-width;
-    display: flex;
-    float: left;
-    margin: spacing(c) spacing(d);
+    margin-left: spacing(d);
+    margin-right: spacing(d);
 }
 </style>
diff --git a/packages/components/organisms/f-header/src/components/Logo.vue b/packages/components/organisms/f-header/src/components/Logo.vue
@@ -103,10 +103,18 @@ export default {
         height: $header-height--narrow;
         padding: spacing(d) 0;
 
+        &:focus {
+            outline-color: $color-focus;
+        }
+
         @include media('>mid') {
             justify-content: left;
             height: $header-height;
             padding: 20px 0;
+
+            &:focus {
+               border-radius: $header-buttonFocus-borderRadius;
+            }
         }
     }
 

diff --git a/packages/components/organisms/f-header/src/components/NavLink.vue b/packages/components/organisms/f-header/src/components/NavLink.vue
@@ -1,22 +1,26 @@
 <template>
-    <div>
+    <a
+        v-bind="$attrs"
+        :data-trak="JSON.stringify(dataTrak)"
+        :href="href"
+        :class="[{
+            [$style['c-navLink']]: !isCountryLink,
+            [$style['c-navLink--countryLink']]: isCountryLink,
+            [$style['c-nav-list-link--alt']]: isAltColour,
+            [$style['c-navLink--hoverWithWhiteBackground']]: backgroundTheme === 'white',
+            [$style['c-nav-list-link--transparent']]: backgroundTheme === 'transparent'
+        }]">
         <slot name="icon" />
-        <a
-            v-bind="$attrs"
-            :data-trak="JSON.stringify(dataTrak)"
-            :href="href"
-            :class="[
-                $style['c-navLink'],
-                { [$style['c-navLink--borderBottomBelowMid']]: hasBorderBottom },
-                { [$style['c-navLink--borderTopBelowMid']]: hasBorderTop },
-                { [$style['c-navLink--countryLink']]: isCountryLink },
-                { [$style['c-nav-list-link--alt']]: isAltColour },
-                { [$style['c-nav-list-link--transparent']]: backgroundTheme === 'transparent' }
-            ]">
-
+        <span
+            :class="[{
+                [$style['c-navLink-text']]: !isCountryLink,
+                [$style['c-navLink-text--noIcon']]: !hasIcon,
+                [$style['c-navLink-text--borderBottomBelowMid']]: hasBorderBottom,
+                [$style['c-navLink-text--borderTopBelowMid']]: hasBorderTop
+            }]">
             {{ text }}
-        </a>
-    </div>
+        </span>
+    </a>
 </template>
 
 <script>
@@ -63,6 +67,12 @@ export default {
             type: String,
             default: 'white'
         }
+    },
+    computed: {
+        // adds extra margin when link does not have an icon
+        hasIcon () {
+            return this.$slots.icon && this.$slots.icon.length;
+        }
     }
 };
 </script>
@@ -77,61 +87,101 @@ export default {
 
     @include media('<=mid') {
         display: flex;
-        margin-left: spacing(h);
-        padding: spacing(c) spacing(d) spacing(c) 0;
+        width: 100%;
+
+        &:focus {
+            outline-color: $nav-link-focus-color;
+            border-radius: 0;
+        }
+
+        &:hover {
+            background: $color-container-subtle;
+        }
+
+        &:active {
+            background: $color-container-strong;
+        }
     }
 
     @include media('>mid') {
         font-weight: $nav-text-weight;
-        margin: 0;
-        padding: 0;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-        text-decoration: none;
+        margin-top: spacing(d);
+        margin-bottom: spacing(d);
+        padding: spacing(c) spacing(c);
+        display: flex;
 
-        @include media('<=mid') {
-            font-weight: $font-weight-bold;
+        &:focus {
+            outline-color: $nav-link-focus-color;
+            border-radius: $nav-focus-borderRadius;
         }
+    }
+}
 
-        @include media('>mid') {
-            color: $nav-text-color--hover;
-            text-decoration: underline;
+.c-navLink-text {
+    @include media('<=mid') {
+        width: 100vw;
+        padding: spacing(c) spacing(d) spacing(c) 0;
+        margin-left: spacing(c);
+    }
+}
 
-            .c-header--transparent .c-nav-popoverList & {
-                color: inherit;
-            }
-        }
+.c-navLink-text--noIcon {
+    @include media('<=mid') {
+        margin-left: spacing(h);
     }
 }
 
-.c-navLink--borderTopBelowMid {
+.c-navLink-text--borderTopBelowMid {
     @include media('<=mid') {
         border-top: 1px solid $color-border-default;
     }
 }
 
-.c-navLink--borderBottomBelowMid {
+.c-navLink-text--borderBottomBelowMid {
     @include media('<=mid') {
         border-bottom: 1px solid $color-border-default;
     }
 }
 
 .c-navLink--countryLink {
+    display: block;
+    text-decoration: none;
+    padding: spacing(c) spacing(d) spacing(c) 0;
+
+    @include media('<=mid') {
+        margin-left: 0;
+    }
+
     @include media('>mid') {
-        text-decoration: none;
-        display: flex;
         float: center;
-        margin-left: spacing(h);
-        padding: spacing(c) spacing(d) spacing(c) 0;
-        @include font-size($nav-text-size);
         font-weight: $font-weight-regular;
     }
+
     &:hover {
-        text-decoration: none;
-        font-weight: $font-weight-regular;
+        background: $color-container-subtle;
+    }
+
+    &:active {
+        background: $color-container-strong;
+    }
+
+    &:focus {
+        outline-color: $color-focus;
+        border-radius: 0;
+    }
+}
+
+.c-navLink--hoverWithWhiteBackground {
+    @include media('>mid') {
+        &:hover {
+            background: $color-container-subtle;
+            border-radius: $nav-focus-borderRadius;
+        }
+
+        &:active {
+            background: $color-container-strong;
+            border-radius: $nav-focus-borderRadius;
+        }
     }
 }
 </style>