Header design 21

src/components/Atoms/Logo/Logo.js

@@ -47,7 +47,7 @@ const themeSwitcher = theme => {
 const Logo = ({
   rotate, sizeSm, sizeMd, campaign
 }) => (
-  <LogoWrapper rotate={rotate ? 1 : 0} sizeSm={sizeSm} sizeMd={sizeMd}>
+  <LogoWrapper rotate={rotate} sizeSm={sizeSm} sizeMd={sizeMd}>
     <Image
       src={themeSwitcher(campaign)}
       alt={

src/components/Atoms/Logo/Logo.md

@@ -1,7 +1,7 @@
 # Comic Relief Logo
 
 ```js
-<Logo rotate={false} sizeSm="50px" sizeMd="60px" />
+<Logo rotate sizeSm="50px" sizeMd="60px" />
 ```
 
 # Sport Relief Logo

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import 'jest-styled-components';
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import Logo from './Logo';
+import React from "react";
+import "jest-styled-components";
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import Logo from "./Logo";
 
-it('renders correctly', () => {
+it("renders correctly", () => {
   const tree = renderWithTheme(<Logo rotate />).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -32,7 +32,7 @@ it('renders correctly', () => {
 
     <div
       className="c0"
-      rotate={1}
+      rotate={true}
     >
       <img
         alt="Comic Relief logo"

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

@@ -2,11 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import hideVisually from '../../../../theme/shared/hideVisually';
+import spacing from '../../../../theme/shared/spacing';
+import Text from '../../Text/Text';
 
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: flex;
+  align-items: center;
   transition: opacity 0.2s;
 
   &:hover,
@@ -17,14 +20,16 @@ const StyledLink = styled.a`
 
 const StyledImage = styled.img`
   width: 100%;
+  width: ${({ size }) => size};
+  margin-right: ${spacing('sm')};
 `;
 
 const HelperText = styled.span`
   ${hideVisually};
 `;
 
 const Icon = ({
-  href, target, icon, brand, title, ...restProps
+  href, target, icon, brand, title, size, hideLabel, ...restProps
 }) => (
   <StyledLink
     href={href}
@@ -33,11 +38,17 @@ const Icon = ({
     title={title}
     rel="noopener noreferrer"
     data-test="header-esu-icon"
+    hideLabel={hideLabel}
   >
-    <StyledImage src={icon} alt={brand} />
+    <StyledImage size={size} src={icon} alt={brand} />
     {title !== 'Sign up for emails' && (
       <HelperText>(opens in new window)</HelperText>
     )}
+    {!hideLabel ? (
+      <Text size="md" color="black">
+        {title}
+      </Text>
+    ) : null}
   </StyledLink>
 );
 
@@ -46,7 +57,14 @@ Icon.propTypes = {
   href: PropTypes.string.isRequired,
   target: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  hideLabel: PropTypes.bool,
+  size: PropTypes.string
+};
+
+Icon.defaultProps = {
+  hideLabel: true,
+  size: 'auto'
 };
 
 export default Icon;

src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -5,7 +5,14 @@ exports[`renders correctly with Comic Relief links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -17,6 +24,8 @@ exports[`renders correctly with Comic Relief links 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -89,6 +98,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -112,6 +122,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -135,6 +146,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -158,6 +170,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -175,7 +188,14 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -187,6 +207,8 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -259,6 +281,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -282,6 +305,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -305,6 +329,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -328,6 +353,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -345,7 +371,14 @@ exports[`renders correctly with Sport Relief links 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
-  display: block;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-transition: opacity 0.2s;
   transition: opacity 0.2s;
 }
@@ -357,6 +390,8 @@ exports[`renders correctly with Sport Relief links 1`] = `
 
 .c3 {
   width: 100%;
+  width: auto;
+  margin-right: 0.5rem;
 }
 
 .c4 {
@@ -429,6 +464,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="facebook"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -452,6 +488,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="twitter"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -475,6 +512,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="youtube"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span
@@ -498,6 +536,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
       <img
         alt="instagram"
         className="c3"
+        size="auto"
         src="mock.asset"
       />
       <span