@comicrelief/component-library 8.54.1 → 8.55.0

package/dist/components/Atoms/Logo/Logo.js

@@ -17,11 +17,6 @@ const Image = _styledComponents.default.img.withConfig({
   displayName: "Logo__Image",
   componentId: "sc-18yiye8-0"
 })(["object-fit:cover;width:100%;display:block;height:auto;margin-right:", ";"], (0, _spacing.default)('md'));
-
-/**
- * Logo wrapper
- */
-
 const LogoWrapper = _styledComponents.default.div.withConfig({
   displayName: "Logo__LogoWrapper",
   componentId: "sc-18yiye8-1"

package/dist/components/Atoms/Logo/Logo.test.js

@@ -5,7 +5,7 @@ var _react = _interopRequireDefault(require("react"));
 require("jest-styled-components");
 var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
 var _Logo = _interopRequireDefault(require("./Logo"));
-it("renders correctly", () => {
+it('renders correctly', () => {
   const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: true
   })).toJSON();

package/dist/components/Atoms/LogoNav2026/LogoNav2026.test.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+require("jest-styled-components");
+var _shallowWithTheme = _interopRequireDefault(require("../../../../tests/hoc/shallowWithTheme"));
+var _LogoNav = _interopRequireDefault(require("./_LogoNav2026"));
+it('renders correctly', () => {
+  const tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_LogoNav.default, {
+    rotate: true
+  })).toJSON();
+  expect(tree).toMatchInlineSnapshot(`
+    .c0 img {
+      -webkit-animation: jaJSCW 0.4s ease-in-out forwards;
+      animation: jaJSCW 0.4s ease-in-out forwards;
+      -webkit-animation-name: blCpAO;
+      animation-name: blCpAO;
+    }
+
+    .c0:hover img,
+    .c0:focus img {
+      -webkit-animation: jaJSCW 0.4s ease-in-out forwards;
+      animation: jaJSCW 0.4s ease-in-out forwards;
+    }
+
+    .c1 {
+      display: block;
+      width: auto;
+      height: 100%;
+      max-width: 100%;
+    }
+
+    .c2 {
+      z-index: 3;
+      width: 49px;
+      height: 32px;
+      display: block;
+    }
+
+    .c3 {
+      z-index: 3;
+      display: none;
+    }
+
+    @media (min-width:320px) {
+      .c2 {
+        display: none;
+      }
+    }
+
+    @media (min-width:320px) {
+      .c3 {
+        display: block;
+        width: 132px;
+        height: 20px;
+      }
+    }
+
+    @media (min-width:740px) {
+      .c3 {
+        width: 162px;
+        height: 25px;
+      }
+    }
+
+    @media (min-width:1024px) {
+      .c3 {
+        width: 162px;
+        min-width: 162px;
+        height: 46px;
+      }
+    }
+
+    <a
+      className="c0"
+      data-testid="LogoLink"
+      href="/"
+      title="Go to Comic Relief homepage"
+    >
+      <img
+        alt="Comic Relief logo"
+        className="c1 c2"
+        data-testid="MobileImage"
+        src="mock.asset"
+      />
+      <img
+        alt="Comic Relief logo"
+        className="c1 c3"
+        data-testid="DesktopImage"
+        src="mock.asset"
+      />
+    </a>
+  `);
+});

package/dist/components/Atoms/LogoNav2026/_LogoNav2026.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _zIndex = _interopRequireDefault(require("../../../theme/shared/zIndex"));
+var _crLogo = _interopRequireDefault(require("./assets/cr-logo.svg"));
+var _crLogoMob = _interopRequireDefault(require("./assets/cr-logo-mob.svg"));
+var _animations = require("../../../theme/shared/animations");
+const LogoLink = _styledComponents.default.a.withConfig({
+  displayName: "_LogoNav2026__LogoLink",
+  componentId: "sc-309o9d-0"
+})(["img{", ";}&:hover,&:focus{img{", ";}}"], _animations.pulseOutAnimation, _animations.pulseInAnimation);
+const Image = _styledComponents.default.img.withConfig({
+  displayName: "_LogoNav2026__Image",
+  componentId: "sc-309o9d-1"
+})(["display:block;width:auto;height:100%;max-width:100%;"]);
+const MobileNavLogo = (0, _styledComponents.default)(Image).withConfig({
+  displayName: "_LogoNav2026__MobileNavLogo",
+  componentId: "sc-309o9d-2"
+})(["", " width:49px;height:32px;display:block;@media ", "{display:none}"], (0, _zIndex.default)('high'), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints2026('S');
+});
+const DesktopNavLogo = (0, _styledComponents.default)(Image).withConfig({
+  displayName: "_LogoNav2026__DesktopNavLogo",
+  componentId: "sc-309o9d-3"
+})(["", " display:none;@media ", "{display:block;width:132px;height:20px;}@media ", "{width:162px;height:25px;}@media ", "{width:162px;min-width:162px;height:46px;}"], (0, _zIndex.default)('high'), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.breakpoints2026('S');
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('M');
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.breakpoints2026('L');
+});
+const LogoNav2026 = () => /*#__PURE__*/_react.default.createElement(LogoLink, {
+  "data-testid": "LogoLink",
+  href: "/",
+  title: "Go to Comic Relief homepage"
+}, /*#__PURE__*/_react.default.createElement(MobileNavLogo, {
+  "data-testid": "MobileImage",
+  src: _crLogoMob.default,
+  alt: "Comic Relief logo"
+}), /*#__PURE__*/_react.default.createElement(DesktopNavLogo, {
+  "data-testid": "DesktopImage",
+  src: _crLogo.default,
+  alt: "Comic Relief logo"
+}));
+var _default = exports.default = LogoNav2026;

package/dist/components/Atoms/LogoNav2026/assets/cr-logo-mob.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 49 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.94034 31.9872C5.75158 31.4083 5.70125 30.5149 5.60058 28.6903C5.52508 27.2432 5.17274 26.5008 4.0528 26.5008H3.59979V31.9998H0.101562V16.7988H4.46806C7.86562 16.7988 9.38823 18.5857 9.38823 21.2786C9.38823 23.6695 8.30605 24.8523 6.75827 25.1166C8.3438 25.4815 8.88489 26.614 8.99814 28.5141C9.12398 30.5149 9.09881 31.2825 9.42598 31.9872H5.94034ZM3.93955 23.6946C5.36149 23.6946 5.91517 23.2416 5.91517 21.6938C5.91517 20.3222 5.36149 19.6427 3.93955 19.6427H3.59979V23.6946H3.93955Z" fill="#E52631"/>
+  <path d="M18.1212 31.9872H10.4326V16.7988H18.1212V19.7182H13.9057V22.8264H17.039V25.7206H13.9057V29.0678H18.1212V31.9872Z" fill="#E52631"/>
+  <path d="M22.7391 16.7988V29.0678H26.8413V31.9872H19.2031V16.7988H22.7391Z" fill="#E52631"/>
+  <path d="M31.2829 16.7988V31.9872H27.7344V16.7988H31.2829Z" fill="#E52631"/>
+  <path d="M40.3057 31.9872H32.6172V16.7988H40.3057V19.7182H36.0903V22.8264H39.2236V25.7206H36.0903V29.0678H40.3057V31.9872Z" fill="#E52631"/>
+  <path d="M41.3623 31.9872V16.7988H48.7614V19.7182H44.9109V23.2416H47.7296V26.1107H44.9109V31.9872H41.3623Z" fill="#E52631"/>
+  <path d="M3.63665 10.4695C3.63665 11.816 3.80024 12.6842 4.84467 12.6842C5.88911 12.6842 6.05269 11.816 6.05269 10.4695V8.83366H9.50059V9.53834C9.50059 13.0869 8.36807 15.5659 4.92017 15.5659C1.37161 15.5659 0 13.175 0 8.82108V6.74479C0 2.37829 1.37161 0 4.92017 0C8.36807 0 9.50059 2.47896 9.50059 6.02753V6.73221H6.05269V5.09634C6.05269 3.7499 5.88911 2.88164 4.84467 2.88164C3.80024 2.88164 3.63665 3.7499 3.63665 5.09634V10.4695Z" fill="#E52631"/>
+  <path d="M20.1353 8.72041C20.1353 13.0869 18.7637 15.5659 15.2151 15.5659C11.6665 15.5659 10.2949 13.0869 10.2949 8.72041V6.84546C10.2949 2.47896 11.6665 0 15.2151 0C18.7637 0 20.1353 2.47896 20.1353 6.84546V8.72041ZM13.9567 10.4192C13.9567 11.7656 14.1707 12.6842 15.2151 12.6842C16.2469 12.6842 16.4735 11.7656 16.4735 10.4192V5.12151C16.4735 3.77507 16.2595 2.85647 15.2151 2.85647C14.1832 2.85647 13.9567 3.77507 13.9567 5.12151V10.4192Z" fill="#E52631"/>
+  <path d="M27.3827 7.88999H27.4834L28.9305 0.17627H33.3851V15.3646H30.1134V6.70714H30.0127L28.3517 15.3646H26.137L24.4256 6.70714H24.3249V15.3646H21.2168V0.17627H25.772L27.3827 7.88999Z" fill="#E52631"/>
+  <path d="M38.2917 0.17627V15.3646H34.7432V0.17627H38.2917Z" fill="#E52631"/>
+  <path d="M43.0497 10.4695C43.0497 11.816 43.2133 12.6842 44.2578 12.6842C45.3022 12.6842 45.4658 11.816 45.4658 10.4695V8.83366H48.9137V9.53834C48.9137 13.0869 47.7812 15.5659 44.3333 15.5659C40.7847 15.5659 39.4131 13.175 39.4131 8.82108V6.74479C39.4131 2.37829 40.7847 0 44.3333 0C47.7812 0 48.9137 2.47896 48.9137 6.02753V6.73221H45.4658V5.09634C45.4658 3.7499 45.3022 2.88164 44.2578 2.88164C43.2133 2.88164 43.0497 3.7499 43.0497 5.09634V10.4695Z" fill="#E52631"/>
+</svg>

package/dist/components/Atoms/LogoNav2026/assets/cr-logo.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 813 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.9 83.3C28.9 94 30.2 100.9 38.5 100.9C46.8 100.9 48.1 94 48.1 83.3V70.3H75.5V75.9C75.5 104.1 66.5 123.8 39.1 123.8C10.9 123.8 0 104.8 0 70.2V53.7C0 19 10.9 0.0999756 39.1 0.0999756C66.5 0.0999756 75.5 19.8 75.5 48V53.6H48.1V40.6C48.1 29.9 46.8 23 38.5 23C30.2 23 28.9 29.9 28.9 40.6V83.3Z" fill="#E52630"/>
+<path d="M160 69.3C160 104 149.1 123.7 120.9 123.7C92.6998 123.7 81.7998 104 81.7998 69.3V54.4C81.7998 19.7 92.6998 0 120.9 0C149.1 0 160 19.7 160 54.4V69.3ZM111 82.9C111 93.6 112.7 100.9 121 100.9C129.2 100.9 131 93.6 131 82.9V40.8C131 30.1 129.3 22.8 121 22.8C112.8 22.8 111 30.1 111 40.8V82.9Z" fill="#E52630"/>
+<path d="M217.7 62.8H218.5L230 1.5H265.4V122.2H239.3V53.4H238.5L225.3 122.2H207.7L194.1 53.4H193.3V122.2H168.6V1.5H204.8L217.7 62.8Z" fill="#E52630"/>
+<path d="M304.3 1.5V122.2H276.1V1.5H304.3Z" fill="#E52630"/>
+<path d="M342.1 83.3C342.1 94 343.4 100.9 351.7 100.9C359.9 100.9 361.3 94 361.3 83.3V70.3H388.7V75.9C388.7 104.1 379.7 123.8 352.3 123.8C324.1 123.8 313.2 104.8 313.2 70.2V53.7C313.2 19 324.1 0.0999756 352.3 0.0999756C379.7 0.0999756 388.7 19.8 388.7 48V53.6H361.3V40.6C361.3 29.9 360 23 351.7 23C343.5 23 342.1 29.9 342.1 40.6V83.3Z" fill="#E52630"/>
+<path d="M472.2 122.2C470.7 117.6 470.3 110.5 469.5 96C468.9 84.5 466.1 78.6 457.2 78.6H453.6V122.3H425.8V1.5H460.5C487.5 1.5 499.6 15.7 499.6 37.1C499.6 56.1 491 65.5 478.7 67.6C491.3 70.5 495.6 79.5 496.5 94.6C497.5 110.5 497.3 116.6 499.9 122.2H472.2ZM456.3 56.3C467.6 56.3 472 52.7 472 40.4C472 29.5 467.6 24.1 456.3 24.1H453.6V56.3H456.3Z" fill="#E52630"/>
+<path d="M569 122.2H507.9V1.5H569V24.7H535.5V49.4H560.4V72.4H535.5V99H569V122.2Z" fill="#E52630"/>
+<path d="M605.6 1.5V99H638.2V122.2H577.5V1.5H605.6Z" fill="#E52630"/>
+<path d="M673.5 1.5V122.2H645.4V1.5H673.5Z" fill="#E52630"/>
+<path d="M745.2 122.2H684.1V1.5H745.2V24.7H711.7V49.4H736.6V72.4H711.7V99H745.2V122.2Z" fill="#E52630"/>
+<path d="M753.7 122.2V1.5H812.5V24.7H781.9V52.7H804.3V75.5H781.9V122.2H753.7Z" fill="#E52630"/>
+</svg>

package/dist/components/Molecules/LogoLinked/LogoLinked.md

@@ -7,5 +7,10 @@
 # Comic Relief Logo with hover animation and custom hovertext
 
 ```js
-<LogoLinked animateRotate sizeSm="50px" title="I'm a custom title" sizeMd="60px" />
+<LogoLinked
+    animateRotate
+    sizeSm="50px"
+    sizeMd="60px"
+    title="I'm a custom title"
+/>
 ```

package/dist/components/Organisms/Header/HeaderNav/HeaderNav.style.js

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
-var _arrowRight = _interopRequireDefault(require("./arrow-right.png"));
+var _arrow = _interopRequireDefault(require("../../Header2026/Navs/arrow.svg"));
 const transitionDuration = 0.2;
 const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "HeaderNavstyle__NavLinkClass",
@@ -210,12 +210,12 @@ const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.wi
 const NavMetaIcons = exports.NavMetaIcons = _styledComponents.default.div.withConfig({
   displayName: "HeaderNavstyle__NavMetaIcons",
   componentId: "sc-1eihosl-9"
-})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> a{height:inherit;width:100%;padding:15px 20px;position:relative;&:after{position:absolute;right:20px;top:50%;transform:translateY(-50%);content:\"\";width:20px;height:20px;background-image:url(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}&:focus,&:hover{span{color:", ";}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref27 => {
+})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> a{height:inherit;width:100%;padding:15px 20px;position:relative;&:after{position:absolute;right:20px;top:50%;transform:translateY(-50%) rotate(180deg);content:\"\";width:20px;height:20px;background-image:url(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}&:focus,&:hover{span{color:", ";}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref27 => {
   let {
     theme
   } = _ref27;
   return theme.color('grey_medium');
-}, _arrowRight.default, _ref28 => {
+}, _arrow.default, _ref28 => {
   let {
     theme
   } = _ref28;

package/dist/components/Organisms/Header2025/Header2025.md

@@ -664,4 +664,4 @@ const [success, setSuccess] = React.useState(false);
   <img style={{width: "100%", maxWidth:"1440px", margin: "0 auto", display: "block"}} src="https://images.ctfassets.net/zsfivwzfgl3t/ecqrPx7BesE3JsYR2ns0E/a374276ba6d8024b9cd7c6d27c911303/Manchester_Marathon.jpeg"/>
 </div>
 </>;
-```
+```

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js

@@ -19,7 +19,7 @@ var _HeaderNav = require("./HeaderNav2025.style");
 const HeaderNav2025 = _ref => {
   let {
     navItems = {},
-    metaIcons,
+    metaIcons = null,
     donateButton = null,
     characterLimit
   } = _ref;

package/dist/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js

@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
 var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
 var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
-var _arrowRight = _interopRequireDefault(require("./arrow-right.png"));
+var _arrow = _interopRequireDefault(require("../../Header2026/Navs/arrow.svg"));
 var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
 const transitionDuration = 0.2;
 const NavLinkClass = (0, _styledComponents.default)(_Link.default).withConfig({
@@ -267,12 +267,12 @@ const ChevronWrapper = exports.ChevronWrapper = _styledComponents.default.div.wi
 const NavMetaIcons = exports.NavMetaIcons = _styledComponents.default.div.withConfig({
   displayName: "HeaderNav2025style__NavMetaIcons",
   componentId: "sc-xflhtq-10"
-})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> a{height:inherit;width:100%;padding:15px 20px;position:relative;&:after{position:absolute;right:20px;top:50%;transform:translateY(-50%);content:\"\";width:20px;height:20px;background-image:url(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}@media ", "{&:focus,&:hover{span{color:", ";}}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref37 => {
+})(["width:auto;display:flex;align-items:center;flex-direction:column;background-color:inherit;> div{height:60px;width:100%;display:flex;border-bottom:1px solid ", ";> a{height:inherit;width:100%;padding:15px 20px;position:relative;&:after{position:absolute;right:20px;top:50%;transform:translateY(-50%) rotate(180deg);content:\"\";width:20px;height:20px;background-image:url(", ");background-size:100%;background-repeat:no-repeat;}img{padding:5px;height:35px;width:35px;}span{transition:color 0.15s ease-out;}@media ", "{&:focus,&:hover{span{color:", ";}}}}&:first-child{margin-top:20px;}}@media ", "{display:none;}"], _ref37 => {
   let {
     theme
   } = _ref37;
   return theme.color('grey_medium');
-}, _arrowRight.default, _ref38 => {
+}, _arrow.default, _ref38 => {
   let {
     theme
   } = _ref38;

package/dist/components/Organisms/Header2026/Burger/BurgerMenu.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _BurgerMenu = require("./BurgerMenu.style");
+const BurgerMenu = _ref => {
+  let {
+    toggle,
+    isMenuOpen
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerWrapper, {
+    "data-testid": "BurgerWrapper",
+    type: "button",
+    "aria-haspopup": "true",
+    "aria-expanded": isMenuOpen,
+    "aria-label": "Open and close Navigation Menu",
+    onClick: toggle,
+    isMenuOpen: isMenuOpen
+  }, /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerHiddenText, null, "Open and close nav menu"), /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerBar, null));
+};
+var _default = exports.default = BurgerMenu;

package/dist/components/Organisms/Header2026/Burger/BurgerMenu.style.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BurgerWrapper = exports.BurgerHiddenText = exports.BurgerBar = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+const BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "BurgerMenustyle__BurgerHiddenText",
+  componentId: "sc-1xlapnr-0"
+})(["", ";"], _hideVisually.default);
+const BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
+  displayName: "BurgerMenustyle__BurgerBar",
+  componentId: "sc-1xlapnr-1"
+})(["background-color:", ";margin:0 auto;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('black');
+});
+const BurgerWrapper = exports.BurgerWrapper = _styledComponents.default.button.withConfig({
+  displayName: "BurgerMenustyle__BurgerWrapper",
+  componentId: "sc-1xlapnr-2"
+})(["position:relative;display:flex;align-items:center;height:36px;width:36px;background-color:", ";", ";border-radius:8px;border:none;order:1;cursor:pointer;transition:all 0.2s;margin-left:10px;padding:0;@media ", "{margin-left:12px;}", "{position:relative;&,::before,::after{width:19px;height:3px;border-radius:2px;display:inline-block;}background-color:currentColor;opacity:", ";transition:opacity 0.3s ease-in-out;::before,::after{content:'';position:absolute;left:0;background-color:currentColor;opacity:1;transition:opacity 0.2s ease-in-out;}::before{top:-0.5rem;}::after{top:0.5rem;}}&::before,&::after{content:'';position:absolute;width:24px;height:3px;border-radius:2px;background-color:", ";left:50%;top:50%;margin-left:-12px;margin-top:-1.5px;opacity:", ";transition:opacity 0.2s ease-in-out;pointer-events:none;}&::before{transform:rotate(45deg);}&::after{transform:rotate(-45deg);}@media ", "{display:none;}"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.color('grey_medium');
+}, (0, _zIndex.default)('medium'), _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.breakpoints2026('XS');
+}, BurgerBar, _ref4 => {
+  let {
+    isMenuOpen
+  } = _ref4;
+  return isMenuOpen ? '0' : '1';
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.color('black');
+}, _ref6 => {
+  let {
+    isMenuOpen
+  } = _ref6;
+  return isMenuOpen ? '1' : '0';
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.breakpoints2026('L');
+});

package/dist/components/Organisms/Header2026/Header2026.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pageLinksPropTypes = exports.default = void 0;
+require("../../../utils/remove-extra-styles-in-preview.css");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _LogoNav = _interopRequireDefault(require("../../Atoms/LogoNav2026/_LogoNav2026"));
+var _Navs = _interopRequireDefault(require("./Navs/Navs"));
+var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
+var _Header = require("./Header2026.style");
+var _searchIcon = _interopRequireDefault(require("./assets/search-icon.svg"));
+var _chevronIcon = _interopRequireDefault(require("./assets/chevron-icon.svg"));
+var _Icon = _interopRequireDefault(require("../../Atoms/SocialIcons/Icon/Icon"));
+var _urlHelper = _interopRequireDefault(require("../../../utils/urlHelper"));
+var _breakpoints = require("../../../theme/shared/breakpoints2026");
+const Header2026 = _ref => {
+  let {
+    data = {},
+    characterLimit = 60,
+    devMode = false,
+    ...rest
+  } = _ref;
+  const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
+  const [isSubMenuOpen, setIsSubMenuOpen] = (0, _react.useState)(false);
+  const [isTertiaryMenuOpen, setIsTertiaryMenuOpen] = (0, _react.useState)(false);
+  const [tertiaryParentName, setTertiaryParentName] = (0, _react.useState)(null);
+  const closeSubMenusRef = (0, _react.useRef)(null);
+  const closeTertiaryRef = (0, _react.useRef)(null);
+  const handleSubMenuChange = (0, _react.useCallback)((isOpen, closeFunction) => {
+    setIsSubMenuOpen(isOpen);
+    closeSubMenusRef.current = closeFunction;
+  }, []);
+  const handleTertiaryMenuChange = (0, _react.useCallback)((isOpen, parentName, closeFunction) => {
+    setIsTertiaryMenuOpen(isOpen);
+    setTertiaryParentName(parentName);
+    closeTertiaryRef.current = closeFunction;
+  }, []);
+
+  // Prevent body scroll when mobile menu is open
+  (0, _react.useEffect)(() => {
+    document.body.style.overflow = isMenuOpen ? 'hidden' : '';
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isMenuOpen]);
+
+  // Reset mobile nav state when resizing to desktop
+  (0, _react.useEffect)(() => {
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (window.innerWidth >= _breakpoints.breakpointValues2026.L) {
+          setIsMenuOpen(false);
+          setIsSubMenuOpen(false);
+          setIsTertiaryMenuOpen(false);
+          setTertiaryParentName(null);
+        }
+      }, 150);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const handleBackClick = () => {
+    if (isTertiaryMenuOpen && closeTertiaryRef.current) {
+      closeTertiaryRef.current();
+      setIsTertiaryMenuOpen(false);
+      setTertiaryParentName(null);
+    } else if (closeSubMenusRef.current) {
+      closeSubMenusRef.current();
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Header.MobileMenuOverlay, {
+    isVisible: isMenuOpen
+  }), /*#__PURE__*/_react.default.createElement(_Header.Header2026Wrapper, Object.assign({
+    "data-testid": "Header2026Wrapper",
+    role: "banner"
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, {
+    "data-testid": "InnerWrapper"
+  }, isSubMenuOpen || isTertiaryMenuOpen ? /*#__PURE__*/_react.default.createElement(_Header.MobileBackHeader, {
+    "data-testid": "MobileBackHeader",
+    onClick: handleBackClick,
+    type: "button",
+    "aria-label": isTertiaryMenuOpen ? `Go back to ${tertiaryParentName}` : 'Go back to main menu'
+  }, /*#__PURE__*/_react.default.createElement(_Header.BackChevron, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: _chevronIcon.default,
+    alt: "chevron icon"
+  })), isTertiaryMenuOpen ? tertiaryParentName : 'Main menu') : /*#__PURE__*/_react.default.createElement(_Header.Brand, {
+    "data-testid": "Brand"
+  }, /*#__PURE__*/_react.default.createElement(_LogoNav.default, {
+    "data-testid": "LogoNav2026"
+  })), /*#__PURE__*/_react.default.createElement(_Navs.default, {
+    "data-testid": "Navs",
+    navItems: data,
+    characterLimit: characterLimit,
+    isMenuOpen: isMenuOpen,
+    setIsMenuOpen: setIsMenuOpen,
+    devMode: devMode,
+    onSubMenuChange: handleSubMenuChange,
+    onTertiaryMenuChange: handleTertiaryMenuChange
+  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, {
+    "data-testid": "ButtonsAndIcons"
+  }, /*#__PURE__*/_react.default.createElement(_Header.SearchIconWrapperDesktop, {
+    "data-testid": "SearchIconWrapperDesktop"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _searchIcon.default,
+    title: "Search",
+    target: "self",
+    role: "button",
+    href: (0, _urlHelper.default)('/search', devMode),
+    brand: "comicrelief",
+    tabIndex: "0",
+    id: "search"
+  })), !isMenuOpen && /*#__PURE__*/_react.default.createElement(_Header.DonateButtonTopBarWrapper, {
+    "data-testid": "DonateButtonTopBarWrapper"
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    color: "red",
+    type: "button",
+    href: "https://donation.comicrelief.com/"
+  }, "Donate"))))));
+};
+const pageLinksPropTypes = exports.pageLinksPropTypes = _propTypes.default.arrayOf(_propTypes.default.shape({
+  pageName: _propTypes.default.string.isRequired,
+  pageUrlIfExternal: _propTypes.default.string,
+  pageLevel: _propTypes.default.bool.isRequired,
+  pageSelector: _propTypes.default.shape({
+    title: _propTypes.default.string,
+    path: _propTypes.default.string,
+    header_page_link: _propTypes.default.arrayOf(_propTypes.default.shape({
+      pageName: _propTypes.default.string.isRequired,
+      pageSelector: _propTypes.default.shape({
+        path: _propTypes.default.string.isRequired,
+        title: _propTypes.default.string.isRequired
+      }).isRequired,
+      pageUrlIfExternal: _propTypes.default.string,
+      pageLevel: _propTypes.default.bool.isRequired
+    }))
+  })
+}));
+var _default = exports.default = Header2026;

package/dist/components/Organisms/Header2026/Header2026.md

@@ -0,0 +1,14 @@
+# Header 2026 - Comic Relief
+
+#### Dev Mode - prepends `https://www.comicrelief.com` to page links
+
+```js
+import mockData from './mockData/mockData.json';
+
+const headerMenuNode = mockData.data.allContentfulHeaderMenu.edges[0].node;
+
+<Header2026
+  data={headerMenuNode}
+  devMode
+/>;
+```