@comicrelief/component-library 8.12.1 → 8.13.1

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

@@ -0,0 +1,280 @@
+export 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/src/components/Organisms/Header/data/data-live.js

@@ -0,0 +1,149 @@
+export 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/src/components/Organisms/Header2025/Burger/BurgerMenu.js

@@ -0,0 +1,28 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { BurgerBar, BurgerHiddenText, BurgerWrapper } from './BurgerMenu.style';
+
+const BurgerMenu = ({ toggle, isExpandable }) => (
+  <BurgerWrapper
+    href="#"
+    role="button"
+    aria-haspopup="true"
+    aria-label="Open and close Navigation Menu"
+    inline
+    underline={false}
+    onClick={toggle}
+    isExpandable={isExpandable}
+  >
+    <BurgerHiddenText>Open and close nav menu</BurgerHiddenText>
+    <BurgerBar />
+  </BurgerWrapper>
+);
+
+BurgerMenu.propTypes = {
+  toggle: PropTypes.func.isRequired,
+  isExpandable: PropTypes.bool.isRequired
+};
+
+export default BurgerMenu;

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

@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+
+import hideVisually from '../../../../theme/shared/hideVisually';
+import Link from '../../../Atoms/Link/Link';
+import Text from '../../../Atoms/Text/Text';
+import zIndex from '../../../../theme/shared/zIndex';
+
+/**
+ * Burger hidden text
+ */
+const BurgerHiddenText = styled(Text)`
+  ${hideVisually};
+`;
+
+/**
+ * Burger menu bar
+ */
+const BurgerBar = styled.span`
+  background-color: ${({ theme }) => theme.color('deep_violet_dark')};
+  margin: 0 auto;
+`;
+
+/**
+ * Burger wrapper
+ */
+const BurgerWrapper = styled(Link)`
+  ${zIndex('medium')};
+  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;
+  }
+  ${BurgerBar} {
+    position: relative;
+
+    &,
+    ::before,
+    ::after {
+      width: 25px;
+      height: 3px;
+      border-radius: 3px;
+      display: inline-block;
+    }
+
+    ${({ isExpandable }) => isExpandable && ' background-color: transparent'};
+
+    ::before,
+    ::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      background-color: currentColor;
+      transition: all 0.2s;
+    }
+
+    ::before {
+      top: -0.5rem;
+      ${({ isExpandable }) => isExpandable && ' transform:rotate(135deg); top: 0;'};
+    }
+
+    ::after {
+      top: 0.5rem;
+      ${({ isExpandable }) => isExpandable && ' transform:rotate(-135deg); top: 0;'};
+    }
+  }
+
+  :hover ${BurgerBar} {
+    &,
+    ::before,
+    ::after {
+      background-color: ${({ theme, isExpandable }) => !isExpandable && theme.color('grey')};
+    }
+
+    ::before {
+      ${({ isExpandable }) => !isExpandable && 'top: -0.6rem;'};
+    }
+
+    ::after {
+      ${({ isExpandable }) => !isExpandable && 'top: 0.6rem;'};
+    }
+  }
+
+  @media ${({ theme }) => theme.allBreakpoints('Nav')} {
+    display: none;
+  }
+`;
+
+export { BurgerHiddenText, BurgerWrapper, BurgerBar };

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Logos from '../../Molecules/Logos/Logos';
+import HeaderNav2025 from './HeaderNav2025/HeaderNav2025';
+import {
+  Brand, Header2025Wrapper, InnerWrapper,
+  DonateButtonWrapperTop, Header2025MetaIcons, ButtonsAndIcons
+} from './Header2025.style';
+
+const Header2025 = ({
+  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null, characterLimit = 60, ...rest
+}) => (
+  <Header2025Wrapper navItems {...rest}>
+    <InnerWrapper>
+      <Brand>
+        <Logos
+          campaign={campaign}
+          sizeSm="50px"
+          sizeMd="55px"
+          animateRotate
+        />
+      </Brand>
+      <HeaderNav2025
+        navItems={navItems}
+        metaIcons={metaIcons}
+        donateButton={donateButton}
+        characterLimit={characterLimit}
+      />
+      <ButtonsAndIcons>
+        <Header2025MetaIcons isHeader data-testid="meta-icons--desktop">{metaIcons}</Header2025MetaIcons>
+        <DonateButtonWrapperTop data-testid="donate-button--desktop">{donateButton}</DonateButtonWrapperTop>
+      </ButtonsAndIcons>
+
+    </InnerWrapper>
+  </Header2025Wrapper>
+);
+
+Header2025.propTypes = {
+  navItems: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    menuGroups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        links: PropTypes.arrayOf(
+          PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            url: PropTypes.string
+          })
+        )
+      })
+    )
+  }),
+  // NB: metaIcons no longer include the Donate button:
+  metaIcons: PropTypes.node.isRequired,
+  // ... and is supplied separately to allow more render control:
+  donateButton: PropTypes.node,
+  campaign: PropTypes.string,
+  characterLimit: PropTypes.number
+};
+
+export default Header2025;