@comicrelief/component-library 8.12.1 → 8.13.0

package/dist/components/Organisms/Header/data/data-extended.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  title: 'Header',
+  menuGroups: [{
+    title: 'GROUP1',
+    id: 'group1',
+    links: [{
+      title: 'Sport Relief',
+      path: 'https://www.comicrelief.com/fundraising/pay-in-your-money',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Run 30 Miles in June',
+      path: 'https://www.comicrelief.com/rednoseday',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Be a Good Sport: Schools',
+      path: 'https://www.comicrelief.com/join',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Win a trip to New York with Major League Baseball',
+      path: 'https://www.comicrelief.com/squads',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP2',
+    id: 'group2',
+    links: [{
+      title: 'Red Nose Day',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'The New Red Nose',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'The Red Nose Day Nosey Awards',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP3',
+    id: 'group3',
+    links: [{
+      title: 'Funding',
+      path: 'https://www.comicrelief.com/what-your-money-does',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding Practice',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Funding opportunities',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding strategy',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Managing your funding',
+      path: 'https://www.comicrelief.com/our-legacy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP4',
+    id: 'group4',
+    links: [{
+      title: 'What Your Money Does',
+      path: 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Reports & Publications',
+      path: 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP5',
+    id: 'group5',
+    links: [{
+      title: 'Get Involved',
+      url: 'https://www.comicrelief.com/working-with-us/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Do your own fundraising',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Regular Donations',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Run for Comic Relief',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'How to pay in your fundraising money',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Partners',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }]
+  }, {
+    title: 'GROUP6',
+    id: 'group6',
+    links: [{
+      title: 'Something Here',
+      url: 'https://www.comicrelief.com/working-with-us/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Do your own fundraising',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Regular Donations',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Run for Comic Relief',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'How to pay in your fundraising money',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Partners',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }]
+  }, {
+    title: 'GROUP7',
+    id: 'group7',
+    links: [{
+      title: 'Something Else',
+      url: 'https://www.comicrelief.com/working-with-us/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Do your own fundraising',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Regular Donations',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Run for Comic Relief',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'How to pay in your fundraising money',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Partners',
+      url: 'https://www.comicrelief.com/404/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }]
+  }]
+};

package/dist/components/Organisms/Header/data/data-live.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  title: 'Header',
+  menuGroups: [{
+    title: 'GROUP1',
+    id: 'group1',
+    links: [{
+      title: 'Winter Appeal 2024',
+      path: 'https://www.comicrelief.com/winterappeal/',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP2',
+    id: 'group2',
+    links: [{
+      title: 'Red Nose Day',
+      path: 'https://www.comicrelief.com/rednoseday/schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Billy Monger: The Race is On',
+      path: 'https://www.comicrelief.com/rednoseday/challenges/billy',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP3',
+    id: 'group3',
+    links: [{
+      title: 'Funding',
+      path: 'https://www.comicrelief.com/what-your-money-does',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding Practice',
+      path: 'https://www.comicrelief.com/our-legacy-two',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Funding opportunities',
+      path: 'https://www.comicrelief.com/our-legacy-three',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Our Funding strategy',
+      path: 'https://www.comicrelief.com/our-legacy-four',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Managing your funding',
+      path: 'https://www.comicrelief.com/our-legacy-five',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP4',
+    id: 'group4',
+    links: [{
+      title: 'What Your Money Does',
+      path: 'https://www.comicrelief.com/rednoseday/schools/primary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }, {
+      title: 'Reports & Publications',
+      path: 'https://www.comicrelief.com/rednoseday/schools/secondary-schools',
+      internal: {
+        type: 'ContentfulPageLandingPage'
+      }
+    }]
+  }, {
+    title: 'GROUP5',
+    id: 'group5',
+    links: [{
+      title: 'Get Involved',
+      url: 'https://www.comicrelief.com/working-with-us/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Do your own fundraising',
+      url: 'https://www.comicrelief.com/one/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Regular Donations',
+      url: 'https://www.comicrelief.com/two/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Run for Comic Relief',
+      url: 'https://www.comicrelief.com/three/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'How to pay in your fundraising money',
+      url: 'https://www.comicrelief.com/four/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }, {
+      title: 'Partners',
+      url: 'https://www.comicrelief.com/five/',
+      internal: {
+        type: 'ContentfulComponentLink'
+      }
+    }]
+  }]
+};

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

@@ -0,0 +1,28 @@
+"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");
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+const BurgerMenu = _ref => {
+  let {
+    toggle,
+    isExpandable
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_BurgerMenu.BurgerWrapper, {
+    href: "#",
+    role: "button",
+    "aria-haspopup": "true",
+    "aria-label": "Open and close Navigation Menu",
+    inline: true,
+    underline: false,
+    onClick: toggle,
+    isExpandable: isExpandable
+  }, /*#__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/Header2025/Burger/BurgerMenu.style.js

@@ -0,0 +1,76 @@
+"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 _Link = _interopRequireDefault(require("../../../Atoms/Link/Link"));
+var _Text = _interopRequireDefault(require("../../../Atoms/Text/Text"));
+var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
+/**
+ * Burger hidden text
+ */
+const BurgerHiddenText = exports.BurgerHiddenText = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "BurgerMenustyle__BurgerHiddenText",
+  componentId: "sc-14j8u4q-0"
+})(["", ";"], _hideVisually.default);
+
+/**
+ * Burger menu bar
+ */
+const BurgerBar = exports.BurgerBar = _styledComponents.default.span.withConfig({
+  displayName: "BurgerMenustyle__BurgerBar",
+  componentId: "sc-14j8u4q-1"
+})(["background-color:", ";margin:0 auto;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.color('deep_violet_dark');
+});
+
+/**
+ * Burger wrapper
+ */
+const BurgerWrapper = exports.BurgerWrapper = (0, _styledComponents.default)(_Link.default).withConfig({
+  displayName: "BurgerMenustyle__BurgerWrapper",
+  componentId: "sc-14j8u4q-2"
+})(["", ";order:50;display:flex;align-items:center;position:relative;text-indent:-9999px;background-color:transparent;height:100%;width:45px;left:5px;cursor:pointer;transition:all 0.2s;:hover{border:none;font-weight:inherit;}", "{position:relative;&,::before,::after{width:25px;height:3px;border-radius:3px;display:inline-block;}", ";::before,::after{content:'';position:absolute;left:0;background-color:currentColor;transition:all 0.2s;}::before{top:-0.5rem;", ";}::after{top:0.5rem;", ";}}:hover ", "{&,::before,::after{background-color:", ";}::before{", ";}::after{", ";}}@media ", "{display:none;}"], (0, _zIndex.default)('medium'), BurgerBar, _ref2 => {
+  let {
+    isExpandable
+  } = _ref2;
+  return isExpandable && ' background-color: transparent';
+}, _ref3 => {
+  let {
+    isExpandable
+  } = _ref3;
+  return isExpandable && ' transform:rotate(135deg); top: 0;';
+}, _ref4 => {
+  let {
+    isExpandable
+  } = _ref4;
+  return isExpandable && ' transform:rotate(-135deg); top: 0;';
+}, BurgerBar, _ref5 => {
+  let {
+    theme,
+    isExpandable
+  } = _ref5;
+  return !isExpandable && theme.color('grey');
+}, _ref6 => {
+  let {
+    isExpandable
+  } = _ref6;
+  return !isExpandable && 'top: -0.6rem;';
+}, _ref7 => {
+  let {
+    isExpandable
+  } = _ref7;
+  return !isExpandable && 'top: 0.6rem;';
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.allBreakpoints('Nav');
+});

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

@@ -0,0 +1,40 @@
+"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 _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
+var _HeaderNav = _interopRequireDefault(require("./HeaderNav2025/HeaderNav2025"));
+var _Header = require("./Header2025.style");
+const Header2025 = _ref => {
+  let {
+    navItems = {},
+    metaIcons,
+    campaign = 'Comic Relief',
+    donateButton = null,
+    characterLimit = 60,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Header.Header2025Wrapper, Object.assign({
+    navItems: true
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
+    campaign: campaign,
+    sizeSm: "50px",
+    sizeMd: "55px",
+    animateRotate: true
+  })), /*#__PURE__*/_react.default.createElement(_HeaderNav.default, {
+    navItems: navItems,
+    metaIcons: metaIcons,
+    donateButton: donateButton,
+    characterLimit: characterLimit
+  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, null, /*#__PURE__*/_react.default.createElement(_Header.Header2025MetaIcons, {
+    isHeader: true,
+    "data-testid": "meta-icons--desktop"
+  }, metaIcons), /*#__PURE__*/_react.default.createElement(_Header.DonateButtonWrapperTop, {
+    "data-testid": "donate-button--desktop"
+  }, donateButton))));
+};
+var _default = exports.default = Header2025;