@comicrelief/component-library 8.12.0 → 8.13.0

package/src/components/Organisms/Header2025/Header2025.md

@@ -0,0 +1,554 @@
+# Comic Relief header
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+
+<Header2025
+  navItems={data}
+  rotate="true"
+  donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+/>;
+```
+
+# Sport Relief header
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+
+<Header2025
+  navItems={data}
+  campaign="Sport Relief"
+  donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+/>;
+```
+
+# Pride header
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+
+<Header2025
+  navItems={data}
+  campaign="Pride"
+  donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+/>;
+```
+
+# Comic Relief header with Search
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<Header2025
+  navItems={data}
+  rotate="true"
+  donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          id="search"
+          isHeader
+        />
+      </div>
+    </>
+  }
+/>;
+```
+
+# Comic Relief full header #1
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<>
+<Header2025
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```
+
+# Comic Relief full header #2
+
+```js
+import data from './data/data-extended';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<>
+<Header2025
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```
+
+# -
+# Comic Relief full header #3: nav items as per 19/11/24 (default 60 character limit)
+
+```js
+import data from './data/data-live';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<>
+<Header2025
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```
+
+# -
+# Comic Relief full header #3: nav items as per 19/11/24 (overridden 50 character limit)
+
+```js
+import data from './data/data-live';
+import Link from '../../Atoms/Link/Link';
+import searchIcon from './assets/icon--search--2023.svg';
+import shopIcon from './assets/icon--shop--2023.svg';
+import payinIcon from './assets/PayIn.svg';
+import esuIcon from './assets/Post.svg';
+
+import Icon from '../../Atoms/SocialIcons/Icon/Icon';
+import RichText from '../../Atoms/RichText/RichText';
+
+const title = 'Stay in the know!';
+const topCopy = (
+  <RichText
+    markup={`<p>Get regular email updates and info on what we're up to!</p>`}
+  />
+);
+const privacyCopy = (
+  <RichText
+    markup={`<p>Our <a class="link link--white inline" href="/privacy-notice">Privacy Policy</a> describes how we handle and protect your information.<br><br>If you are under 18, please make sure you have your parents’ permission before providing us with any personal details.</p>`}
+  />
+);
+const successCopy = (
+  <RichText
+    markup={`<p>Thanks! Your first email will be with you shortly</p>`}
+  />
+);
+
+initialState = { isSuccess: false };
+const [success, setSuccess] = React.useState(false);
+
+<>
+<Header2025
+  characterLimit={50}
+  navItems={data}
+  rotate="true"
+    donateButton={
+    <>
+      <Link color="red" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+  metaIcons={
+    <>
+      <div>
+        <Icon
+          icon={esuIcon}
+          title="Newsletter"
+          target="_blank"
+          role="button"
+          href="#"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="esu"
+        />
+      </div>
+      <div>
+        <Icon
+          icon={payinIcon}
+          title="Pay in"
+          target="_blank"
+          role="button"
+          href="https://donation.comicrelief.com/?cartId=rnd23-fundraisingpayin"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="payin"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={shopIcon}
+          title="Shop"
+          target="_blank"
+          role="button"
+          href="https://shop.comicrelief.com"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="shop"
+        />
+      </div>
+
+      <div>
+        <Icon
+          icon={searchIcon}
+          title="Search"
+          target="self"
+          role="button"
+          href="/search"
+          brand="comicrelief"
+          tabIndex="0"
+          isHeader
+          id="search"
+        />
+      </div>
+    </>
+  }
+/>
+<div style={{height: "1000px", backgroundColor: "turquoise", width:"100%"}}>
+  <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
+</div>
+</>;
+```

package/src/components/Organisms/Header2025/Header2025.style.js

@@ -0,0 +1,131 @@
+import styled from 'styled-components';
+
+import zIndex from '../../../theme/shared/zIndex';
+import containers from '../../../theme/shared/containers';
+
+import './annoying.css';
+
+const Header2025Wrapper = styled.header.attrs(() => ({
+  role: 'banner'
+}))`
+  position: relative;
+  background-color: ${({ theme }) => theme.color('white')};
+  padding: 0;
+  height: 75px;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    height: auto;
+  }
+`;
+
+const InnerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  cursor: pointer;
+  max-width: ${containers.large};
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    margin: 0 auto;
+  }
+`;
+
+const Brand = styled.div`
+  ${zIndex('high')};
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  
+  a {
+    border: 0;
+    color: transparent;
+    margin-right: 25px;
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+      
+    :hover {
+      border: 0;
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    margin-right: 0
+  }
+`;
+
+const DonateButtonWrapperTop = styled.div`
+  width: 100px;
+  display: flex;
+  justify-content: center;
+  margin-left: 5px;
+
+  // Donate button
+  a {
+    width: 100%;
+    transition: width 0.4s cubic-bezier(0.5, 1.5, 0.5, 0.80);
+  
+    &:hover,
+    &:focus {
+      width: 100%;
+      box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px 0;
+    }
+  }
+`;
+
+const Header2025MetaIcons = styled.div`
+  // Hide these when using the mobile navigation, 
+  // now only rendered in the Header2025Nav
+  display: none;
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    width: auto;
+    align-items: center;
+
+    // Icons
+    > div {
+      height: 35px;
+      width: auto;
+      display: inline-block;
+  
+      > a {
+        height: inherit;
+        width: inherit;
+        margin-right: 6px;
+  
+        img {
+          padding: 5px 7px;
+          height: inherit;
+          width: inherit;
+        }
+      }
+    }
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: ${({ theme }) => theme.color('white')};
+    margin-right: 0px;
+    right: 0px;
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('NavWide')} {
+    // Icons
+    > div > a {
+      margin-right: 20px;
+    }
+  }
+`;
+
+const ButtonsAndIcons = styled.div`
+  margin-left: auto;
+  display: flex;
+`;
+
+export {
+  Brand, Header2025Wrapper, InnerWrapper, DonateButtonWrapperTop,
+  Header2025MetaIcons, ButtonsAndIcons
+};