@comicrelief/component-library 8.48.0 → 8.48.2

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

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#1',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#2',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#3',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#4',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,19 +73,19 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#one',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#two',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#three',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#4',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#5',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#6',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#2',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#3',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -163,31 +163,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#7',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#8',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#9',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#10',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#11',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -203,31 +203,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#12',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#13',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#14',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#15',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#16',
       internal: {
         type: 'ContentfulComponentLink'
       }

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

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#5',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

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

@@ -51,7 +51,7 @@ var _default = exports.default = {
     id: 'eaec51921-bbb3-5e8d-b966-c53fff34998b5',
     links: [{
       title: 'Single menu link',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#6',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -77,7 +77,7 @@ var _default = exports.default = {
     id: 'eaec5191-bbb3-5e8d-b966-c53fff34998b',
     links: [{
       title: 'Schools & youth',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#7',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

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

@@ -12,7 +12,7 @@ var _Header = require("./Header2025.style");
 const Header2025 = _ref => {
   let {
     navItems = {},
-    metaIcons,
+    metaIcons = undefined,
     campaign = 'Comic Relief',
     donateButton = null,
     characterLimit = 60,
@@ -32,7 +32,7 @@ const Header2025 = _ref => {
     metaIcons: metaIcons,
     donateButton: donateButton,
     characterLimit: characterLimit
-  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, null, /*#__PURE__*/_react.default.createElement(_Header.Header2025MetaIcons, {
+  }), /*#__PURE__*/_react.default.createElement(_Header.ButtonsAndIcons, null, metaIcons && /*#__PURE__*/_react.default.createElement(_Header.Header2025MetaIcons, {
     isHeader: true,
     "data-testid": "meta-icons--desktop"
   }, metaIcons), /*#__PURE__*/_react.default.createElement(_Header.DonateButtonWrapperTop, {

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

@@ -478,7 +478,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
-  showBoxShadow="true"
+  showBoxShadow
   characterLimit={50}
   navItems={data}
   rotate="true"
@@ -590,7 +590,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
-  showBoxShadow="true"
+  showBoxShadow
   characterLimit={50}
   navItems={data}
   rotate="true"

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

@@ -166,7 +166,7 @@ const HeaderNav2025 = _ref => {
     navHelper: _navHelper.NavHelper,
     allowListed: _allowListed.default,
     internalLinkHelper: _internalLinkHelper.InternalLinkHelper
-  }) : null), /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
+  }) : null), metaIcons && /*#__PURE__*/_react.default.createElement(_HeaderNav.NavMetaIcons, {
     isHeader: true,
     "data-testid": "meta-icons--mobile"
   }, metaIcons), /*#__PURE__*/_react.default.createElement(_HeaderNav.DonateButtonWrapperBottom, {

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

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: '¢',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#8',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#9',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#10',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,25 +73,25 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#1',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#2',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#3',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Managing your funding',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#4',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#17',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#18',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#19',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#20',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#21',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -163,31 +163,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#21',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#22',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#23',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#24',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#25',
       internal: {
         type: 'ContentfulComponentLink'
       }
@@ -203,31 +203,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#26',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#27',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#28',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#29',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#30',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/dist/components/Organisms/Header2025/data/data-live--minimal.js

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#11',
       internal: {
         type: 'ContentfulPageLandingPage'
       }

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

@@ -21,7 +21,7 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#12',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -117,7 +117,7 @@ var _default = exports.default = {
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#31',
       internal: {
         type: 'ContentfulComponentLink'
       }

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

@@ -39,25 +39,25 @@ var _default = exports.default = {
     id: 'group2',
     links: [{
       title: 'Red Nose Day',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#13',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The New Red Nose',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#14',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Schools',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#15',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'The Red Nose Day Nosey Awards',
-      path: 'https://www.comicrelief.com/rednoseday/schools',
+      path: 'https://www.comicrelief.com/rednoseday/schools#16',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -73,25 +73,25 @@ var _default = exports.default = {
       }
     }, {
       title: 'Our Funding Practice',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#5',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Funding opportunities',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#6',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Our Funding strategy',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#7',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
     }, {
       title: 'Managing your funding',
-      path: 'https://www.comicrelief.com/our-legacy',
+      path: 'https://www.comicrelief.com/our-legacy#8',
       internal: {
         type: 'ContentfulPageLandingPage'
       }
@@ -123,31 +123,31 @@ var _default = exports.default = {
       }
     }, {
       title: 'Do your own fundraising',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#32',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Regular Donations',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#33',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Run for Comic Relief',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#34',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'How to pay in your fundraising money',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#35',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
       title: 'Partners',
-      url: 'https://www.comicrelief.com/404/',
+      url: 'https://www.comicrelief.com/404#36',
       internal: {
         type: 'ContentfulComponentLink'
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.48.0",
+  "version": "8.48.2",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Input/Input.md

@@ -141,6 +141,7 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
   <>
     <h4>Input with Description:</h4>
     <Input
+      name="input-with-description"
       placeholder="I have a description"
       type="text"
       label="My Great Input"

package/src/components/Molecules/CTAMultiCard/CTAMultiCard.js

@@ -25,7 +25,9 @@ const CTAMultiCard = ({ data }) => {
     cards,
     backgroundColour: bgCards,
     layout,
-    carouselOfCards
+    carouselOfCards,
+    paddingAbove,
+    paddingBelow
   } = data;
 
   if (!cards || !Array.isArray(cards) || cards.length === 0) {
@@ -43,6 +45,8 @@ const CTAMultiCard = ({ data }) => {
       backgroundColor={cardsBackground}
       columns={columns}
       isCarousel={carouselOfCards}
+      paddingAbove={paddingAbove}
+      paddingBelow={paddingBelow}
     >
       {cards.map(card => (
         <SingleCard
@@ -87,7 +91,9 @@ CTAMultiCard.propTypes = {
     ).isRequired,
     backgroundColour: PropTypes.string,
     layout: PropTypes.string,
-    carouselOfCards: PropTypes.bool
+    carouselOfCards: PropTypes.bool,
+    paddingAbove: PropTypes.string,
+    paddingBelow: PropTypes.string
   }).isRequired
 };
 

package/src/components/Molecules/CTAMultiCard/CTAMultiCard.md

@@ -14,7 +14,7 @@ The component expects pre-rendered content to be passed in the `body` field of e
 
 ### CTAMultiCard: Desktop Grid View (3 columns)
 
-**NB: In mobile view, this example displays as a carousel.**
+**NB: In mobile view, this example displays as a carousel. This example also demonstrates no vertical padding via `paddingAbove` / `paddingBelow` set to `0rem`, so it will sit flush to the surrounding container.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -43,17 +43,19 @@ const data = {
   ...exampleData,
   cards: cardsWithRenderedBody,
   carouselOfCards: true,
-  backgroundColour: "transparent"
+  backgroundColour: "transparent",
+  paddingAbove: '0rem',
+  paddingBelow: '0rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={data} />
 </div>;
 ```
 
 ### CTAMultiCard: Desktop Grid View (2 columns)
 
-**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel).**
+**NB: One card contains a lot of lorem ipsum text to demonstrate that all cards will match the height of the tallest sibling card. In mobile view, this example displays as a vertical stack (non-carousel). This example also demonstrates larger vertical padding via `paddingAbove` / `paddingBelow` set to `4rem`, so it will appear with more space above and below the cards.**
 
 ```js
 import CTAMultiCard from './CTAMultiCard';
@@ -95,10 +97,12 @@ const dataWithLongText = {
   layout: "2 columns",
   carouselOfCards: false,
   backgroundColour: "Transparent",
-  cards: cardsWithRenderedBody
+  cards: cardsWithRenderedBody,
+  paddingAbove: '4rem',
+  paddingBelow: '4rem'
 };
 
-<div style={{ padding: '2rem', background: '#E1E2E3' }}>
+<div style={{ background: '#E1E2E3' }}>
   <CTAMultiCard data={dataWithLongText} />
 </div>;
 ```