feat: ENG-283 Nav update

README.md

@@ -53,3 +53,15 @@ To publish
 ```
 $ yarn publish:npm
 ```
+
+### Testing
+
+Install Playwright:
+```
+yarn playwright install
+```
+
+Run the tests
+```
+yarn test:e2e:local
+```

docs/utils.md

@@ -53,18 +53,20 @@ How to use in your styled component
 `@media ${({ theme }) => theme.allBreakpoints('M')} {`
 
 #### screen sizes:
-```
-import { breakpointValues } from '../../../theme/shared/allBreakpoints';
-...
-max-width: ${breakpointValues.M}px;
-```
+`import { breakpointValues } from '../../../theme/shared/allBreakpoints';`
+
+`...`
+
+`max-width: ${breakpointValues.M}px;`
+
 
 ### Usage within Component Library
-```
-import { breakpointValues } from '@comicrelief/component-library/src/theme/shared/allBreakpoints';
-...
-max-width: ${breakpointValues.M}px);
-```
+`import { breakpointValues } from '@comicrelief/component-library/src/theme/shared/allBreakpoints';`
+
+`...`
+
+`max-width: ${breakpointValues.M}px);`
+
 
 
 ## containers from containers.js

playwright/components/organisms/header.spec.js

@@ -2,80 +2,67 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('header component', () => {
   test('Comic Relief header', async ({ page }) => {
-
     await page.goto('/#header');
 
     await expect(page.locator('[data-testid="Header-example-1"]')).toBeVisible();
     // donate locator
-    await expect(page.locator('[data-testid="Header-example-1"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-1"] header[role="banner"] [data-testid="donate-button--desktop"] a[href="/donation"]')).toBeVisible();
     // CR logo
     await expect(page.locator('[data-testid="Header-example-1"] [title="Go to Comic Relief homepage"]')).toBeVisible();
-    // shop
-    await expect(page.locator('[data-testid="Header-example-1"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
 
     await page.close();
   });
 
   test('Sport Relief header', async ({ page }) => {
-
     await page.goto('/#header');
 
     await expect(page.locator('[data-testid="Header-example-3"]')).toBeVisible();
     // donate locator
-    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] [data-testid="donate-button--desktop"] a[href="/donation"]')).toBeVisible();
     // SR logo
     await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href="/sportrelief"]')).toBeVisible();
-    // shop
-    await expect(page.locator('[data-testid="Header-example-3"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
 
     await page.close();
   });
 
   test('Pride header', async ({ page }) => {
-
     await page.goto('/#header');
 
     await expect(page.locator('[data-testid="Header-example-5"]')).toBeVisible();
     // donate locator
-    await expect(page.locator('[data-testid="Header-example-5"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-5"] header[role="banner"] [data-testid="donate-button--desktop"] a[href="/donation"]')).toBeVisible();
     // CR logo
     await expect(page.locator('[data-testid="Header-example-5"] [title="Go to Comic Relief homepage"]')).toBeVisible();
-    // shop
-    await expect(page.locator('[data-testid="Header-example-5"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
 
     await page.close();
   });
 
   test('Comic Relief header with Search', async ({ page }) => {
-
     await page.goto('/#header');
 
     await expect(page.locator('[data-testid="Header-example-7"]')).toBeVisible();
     // donate locator
-    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] [data-testid="donate-button--desktop"] a[href="/donation"]')).toBeVisible();
     // CR logo
     await expect(page.locator('[data-testid="Header-example-7"] [title="Go to Comic Relief homepage"]')).toBeVisible();
-    // shop
-    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href*="/shop"]')).toBeVisible();
     // search
-    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] a[href="/search"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-7"] header[role="banner"] [data-testid="meta-icons--desktop"] a[data-testid="header-search"]')).toBeVisible();
 
     await page.close();
   });
 
   test('Comic Relief header with Search and Shop', async ({ page }) => {
-
     await page.goto('/#header');
 
     await expect(page.locator('[data-testid="Header-example-9"]')).toBeVisible();
     // donate locator
-    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] a[href="/donation"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] [data-testid="donate-button--desktop"] a[href="/donation"]')).toBeVisible();
     // CR logo
     await expect(page.locator('[data-testid="Header-example-9"] [title="Go to Comic Relief homepage"]')).toBeVisible();
     // shop icon
-    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] [title="Shop"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] [data-testid="meta-icons--desktop"] [title="Shop"]')).toBeVisible();
     // search
-    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] a[href="/search"]')).toBeVisible();
+    await expect(page.locator('[data-testid="Header-example-9"] header[role="banner"] [data-testid="meta-icons--desktop"] a[data-testid="header-search"]')).toBeVisible();
 
     await page.close();
   });

src/components/Atoms/Logo/Logo.js

@@ -70,8 +70,8 @@ Logo.propTypes = {
 
 Logo.defaultProps = {
   rotate: false,
-  sizeSm: '51px', // - to work with the header 75px height and 12px padding
-  sizeMd: '70px',
+  sizeSm: '51px',
+  sizeMd: '51px',
   campaign: 'Comic Relief'
 };
 

src/components/Atoms/Logo/Logo.test.js

@@ -25,9 +25,9 @@ it("renders correctly", () => {
       vertical-align: bottom;
     }
 
-    @media (min-width:1150px) {
+    @media (min-width:1175px) {
       .c0 {
-        width: 70px;
+        width: 51px;
       }
     }
 

src/components/Atoms/SocialIcons/Icon/Icon.js

@@ -1,17 +1,73 @@
 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 = 58;
+const RevealTextSpeed = 0.35;
 
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   display: block;
-  transition: opacity 0.2s;
+  position: relative;
+
+  ${({ 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 {
+      img {
+        filter: invert(0.5) sepia(1) saturate(100) hue-rotate(20deg);
+      }
+    }
+
+    @media ${({ theme }) => theme.allBreakpoints('NavWithAnimations')} {
+      &:hover,
+      &:focus {
+        // Default
+        padding-right: ${RevealTextWidth}px;
+
+        // Tweak for ESU's longer text:
+        &[data-testid="header-esu"] {
+          padding-right: 95px;
+        }
+
+        // Tweak for Shop 's shorter text:
+        &[data-testid="header-shop"] {
+          padding-right: 52px;
+        }
+
+        // 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;
 
-  &:hover,
-  &:focus {
-    opacity: 0.6;
+  @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')};
   }
 `;
 
@@ -24,29 +80,41 @@ const HelperText = styled.span`
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, ...restProps
+  href, target, icon, brand, title, isHeader, 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>
 );
 
+Icon.defaultProps = {
+  isHeader: false
+};
+
 Icon.propTypes = {
   brand: PropTypes.string.isRequired,
   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;

src/components/Atoms/SocialIcons/SocialIcons.js

@@ -40,6 +40,7 @@ const SocialIcons = ({ campaign, ...restProps }) => {
             href={links[brand].url}
             title={links[brand].title}
             brand={brand}
+            id={links[brand].id}
             {...restProps}
           />
         </StyledItem>

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'
   }
 });