feat: ENG-2834 Nav update (#638)

* Rename styles for less confusion with other nav * Remove functionality & styles re: cloning menu items * Tidy-up * Lol I've done it all wrong * Use pre-existing data * Start updating styles * More hover styles * Breakpoint-dependent rendering of icons n buttons * CSS3 animations * Icon animations * Target Header icons only * Ditch keyframes for lighter transitions * Start on mobile specific styles * Fix rel property * Clarify naming * Add in cloned menu item for mobile only * Prototype limit logic * Target logic * Unpicking logic nightmare * Fix mobile nav * Tidyup, bring in new markup logic * Prototyping * Sussed out nightmare nesting * Broken everything * Debug * Step back, but reintroduce new stuff to troubleshoot * Fix render logic * Towel throw-in for today: * Process nav BEFORE render to circumnavigate state issues * Remove some now-necessary markup * Reupdate nonmobile nav re:firstchild * Comment through the nonsense * Rename gibberish function * Tighten up keyevents * Fix import * Clearer naming, clone and extending components * Tidyup * Fix More item markup * Remove unncessary styles * Tidyup old markup * Handle endless mess of styles * Hover events * Fix imports * Trigger logo animation in correct place * Animations * Tidying * Update snaps * Test fix 1 * More useful data attributes * New data-attributes for tests * Improve icon data-attributes * Test fix 2 * Fix shop selector with new markup * Test stuff * Better tests * Update snaps * Mobile styles * Yet more styling * Fix WYMD carousel imgs * Attempt to start resize stuff * Midway thru animating opacity * Fix More dropdown * Fix mobile nav * Finesse animations * Improve animation, sort out revealtext widths * Revealtext tweak * Less full-on cR logo rotate * Set-up header donate button animation * Bottom donate button too. * Handle keyboard focus issue * Tidyup * Animation tweka * Still tryign to improve animations 🤷 * Fix RevealText bug * BG colour inherit * Bg colour inheritance * Space fix * Change of plan * Tweak Nav breakpoint to suit new design & functionality * Snap update * Post-chat tweaks * Tweak nav breakpoint to fit * Snaps * Experimenting with nav scrolling * Desktop fixes * Alt nav examples * Fix duplicated IDs * Re-add bottom donate button now we can scroll * Remove scrolling for testing * Dropshadows * Fix subsubmenu shadow bug * Fix breakpoint changes * Tidyup * Chevron updates * Tweakz * Tweak More chevrons * Beef up CL style overrides * Remove merge silliness * Update snaps * Tweaks, plus new data * Style tweaks * Clone as seperate organism * Reset to old nav * Roll back test' * Tidyup * Breakout MoreNav into own component * Tidyup * Rename component to reflect year * Match navItems prop to actual usage in CRcom * Break out NavItem * Sort key issue * Appear to have broken the submenu * Fix submenu * Update props accordingly * Tidyup, fix props etc * Sussing tab functionality * Gut old functionality * Reinstate global Icon opacity, tweak for new Header only * Add new prop to old icons * Fixes and tidying * Ensure new tweaks only applied to new header * Clarify comment * Tidyup * Tidyup * Fix offset * More chevron fix * Animation and example tweaks * Pass logo sizing properly * Remove old implementation of Move nav stuff in non-More nav * Styletweaks * Making width allowances for items * Snap update * Update header tests to reflect new nav breakpoint * Tweaks to better fit content * Remove centering for now * Breakpoint tweak * New breakpoint rename * Design review tweaks for penultimate breakpoint * Convert More menu to Text as it ISNT a link or button * Fix 'open more menu item' styles * Stick with Styled Comps for sanity * More housekeeping * Clarify comments * Add confusing old stuff back into old nav * Panelbeat blur/focus listeners * Remove unncessary styled comp * Centralise and streamline morenav check * Fix mouse events and reset * Tidyup * Add new example, reset default characterLimit * Remove hoverstates on mobile * Tidyup gpo * Sort mobile and focus styles * Tidyup * Global config for screenwidth * Revert test change * PW install fix * Tidyup * Review tidyingup
comicrelief · Jan 15, 2025 · d036505 · d036505
1 parent 136fddc
commit d036505
Show file tree

Hide file tree

Showing 51 changed files with 4,154 additions and 391 deletions.
diff --git a/README.md b/README.md
@@ -53,3 +53,15 @@ To publish
 ```
 $ yarn publish:npm
 ```
+
+### Testing
+
+Install Playwright:
+```
+yarn playwright install
+```
+
+Run the tests
+```
+yarn test:e2e:local
+```
diff --git a/playwright.config.js b/playwright.config.js
@@ -19,7 +19,7 @@ module.exports = defineConfig({
   workers: 2,
   timeout: 60 * 1000,
   expect: {
-    timeout: 60 * 1000,
+    timeout: 60 * 1000
   },
   reporter: [
     ['list'],
@@ -28,22 +28,29 @@ module.exports = defineConfig({
   use: {
     actionTimeout: 0,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: 'on-first-retry'
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: {
+          // Match our widest nav:
+          width: 1300,
+          height: 1000
+        }
+      }
+    }
   ],
 
   /* Run your local dev server before starting the tests */
   webServer: {
     command: 'yarn styleguide',
     port: '6060',
     timeout: 120000,
-    reuseExistingServer: true,
-  },
+    reuseExistingServer: true
+  }
 });
diff --git a/src/components/Atoms/SocialIcons/Icon/Icon.js b/src/components/Atoms/SocialIcons/Icon/Icon.js
@@ -1,18 +1,89 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { kebabCase } from 'lodash';
 import hideVisually from '../../../../theme/shared/hideVisually';
+import Text from '../../Text/Text';
+
+const RevealTextWidth = 55;
+const RevealTextSpeed = 0.35;
 
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   display: block;
+  position: relative;
   transition: opacity 0.2s;
 
   &:hover,
   &:focus {
     opacity: 0.6;
   }
+
+  // 'isHeader' is only set and passed in Header2025, so the pre-existing Header isn't affected:
+  ${({ isHeader }) => isHeader && css`
+    overflow: hidden;
+    padding-right: 0px;
+    transition: padding-right ${RevealTextSpeed}s cubic-bezier(0.5, 1.5, 0.5, 0.75);
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+    
+    // No hover state for mobile, so targetting Medium+:
+    @media ${({ theme }) => theme.allBreakpoints('M')} {
+      &:hover,
+      &:focus {        
+        img {
+          filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+        }
+      }
+    }
+
+    @media ${({ theme }) => theme.allBreakpoints('NavWide')} {
+      &:hover,
+      &:focus {
+        // Default
+        padding-right: ${RevealTextWidth}px;
+  
+        // Tweak for ESU's longer text:
+        &[data-testid="header-esu"] {
+          padding-right: 92px;
+        }
+  
+        // Tweak for Shop's shorter text:
+        &[data-testid="header-shop"] {
+          padding-right: 48px;
+        }
+        
+        // Show the Reveal text  
+        img + span {
+          display: block;
+        }
+      }
+    `}
+    };
+`;
+
+const RevealText = styled(Text)`
+  width: auto;
+  color: ${({ theme }) => theme.color('black')};
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 70px;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 8px;
+    left: 15px;
+    transform: translateX(0);
+    display: none;
+    color: ${({ theme }) => theme.color('red')};
+  }
 `;
 
 const StyledImage = styled.img`
@@ -24,18 +95,24 @@ const HelperText = styled.span`
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, ...restProps
+  href, target, icon, brand, title, isHeader = false, id, ...restProps
 }) => (
   <StyledLink
     href={href}
     target={`_${target}`}
     {...restProps}
     title={title}
     rel="noopener noreferrer"
-    data-test="header-esu-icon"
+    data-testid={`${isHeader ? 'header' : 'icon'}-${kebabCase(id)}`}
+    isHeader={isHeader}
   >
     <StyledImage src={icon} alt={brand} />
-    {title !== 'Sign up for emails' && (
+
+    { isHeader && (
+      <RevealText>{title}</RevealText>
+    )}
+
+    {id === 'esu' && (
       <HelperText>(opens in new window)</HelperText>
     )}
   </StyledLink>
@@ -46,7 +123,9 @@ Icon.propTypes = {
   href: PropTypes.string.isRequired,
   target: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  isHeader: PropTypes.bool,
+  id: PropTypes.string.isRequired
 };
 
 export default Icon;
diff --git a/src/components/Atoms/SocialIcons/SocialIcons.js b/src/components/Atoms/SocialIcons/SocialIcons.js
@@ -41,6 +41,7 @@ const SocialIcons = ({ target = 'blank', campaign, ...restProps }) => {
             href={links[brand].url}
             title={links[brand].title}
             brand={brand}
+            id={links[brand].id}
             {...restProps}
           />
         </StyledItem>

diff --git a/src/components/Atoms/SocialIcons/Utils/Links.js b/src/components/Atoms/SocialIcons/Utils/Links.js
@@ -6,18 +6,22 @@
 export default campaign => ({
   facebook: {
     url: `https://www.facebook.com/${campaign}`,
-    title: 'Check out our Facebook page'
+    title: 'Check out our Facebook page',
+    id: 'facebook'
   },
   twitter: {
     url: `https://twitter.com/${campaign}`,
-    title: 'Check out our Twitter account'
+    title: 'Check out our Twitter account',
+    id: 'twitter'
   },
   youtube: {
     url: 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw',
-    title: 'Check out our YouTube channel'
+    title: 'Check out our YouTube channel',
+    id: 'youtube'
   },
   instagram: {
     url: `https://www.instagram.com/${campaign}`,
-    title: 'Check out our Instagram account'
+    title: 'Check out our Instagram account',
+    id: 'instagram'
   }
 });