@comicrelief/component-library 8.13.6 → 8.14.0

package/.github/workflows/main.yml

@@ -89,7 +89,7 @@ jobs:
 
       # Test run video was always captured, so this action uses "always()" condition
       - name: Upload videos
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

package/dist/components/Molecules/{Logos/Logos.js → LogoLinked/LogoLinked.js}

@@ -10,21 +10,22 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Logo = _interopRequireDefault(require("../../Atoms/Logo/Logo"));
 const TitleLabel = _styledComponents.default.span.withConfig({
-  displayName: "Logos__TitleLabel",
-  componentId: "sc-z3hhhd-0"
+  displayName: "LogoLinked__TitleLabel",
+  componentId: "sc-1l32h77-0"
 })(["line-height:0;font-size:0;color:transparent;"]);
 const LogoLink = _styledComponents.default.a.withConfig({
-  displayName: "Logos__LogoLink",
-  componentId: "sc-z3hhhd-1"
+  displayName: "LogoLinked__LogoLink",
+  componentId: "sc-1l32h77-1"
 })(["", ""], _ref => {
   let {
     animateRotate
   } = _ref;
   return animateRotate && (0, _styledComponents.css)(["img{transition:transform 0.35s cubic-bezier(0.41,1.64,0.41,0.8);}&:hover,&:focus{img{transform:rotate(-14deg);}}"]);
 });
-const Logos = _ref2 => {
+const LogoLinked = _ref2 => {
   let {
     campaign = 'Comic Relief',
+    title = 'Go to Comic Relief homepage',
     animateRotate = false,
     sizeSm,
     sizeMd
@@ -77,14 +78,14 @@ const Logos = _ref2 => {
   }
   return /*#__PURE__*/_react.default.createElement(LogoLink, {
     href: "/",
-    title: "Go to Comic Relief homepage",
+    title: title,
     animateRotate: animateRotate
   }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
     rotate: false,
     campaign: "Comic Relief",
-    title: "Go to Comic Relief homepage",
+    title: title,
     sizeSm: sizeSm,
     sizeMd: sizeMd
-  }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, "Go to Comic Relief homepage"));
+  }), /*#__PURE__*/_react.default.createElement(TitleLabel, null, title));
 };
-var _default = exports.default = Logos;
+var _default = exports.default = LogoLinked;

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

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

package/dist/components/Molecules/SingleMessage/SingleMessage.js

@@ -34,7 +34,7 @@ const SingleMessage = _ref => {
   } = _ref;
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
-  const hasVideo = !!(videoID !== null && videoID !== '');
+  const hasVideo = Boolean(videoID !== null && videoID !== '');
 
   // States to track video status
   const [isInitialised, setIsInitialised] = (0, _react.useState)(false);
@@ -46,22 +46,33 @@ const SingleMessage = _ref => {
   const thisRef = (0, _react.useRef)(null);
   const isIOS = typeof navigator === 'object' ? /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream && !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform) : false;
 
-  // Break-out video markup into its own function
-  const renderVideoPlayers = thisRowID => {
-    // Store the dynamically-created UUID (from the main render func) in our state
-    // so useEffect can access it
-    const thisVideoID = "".concat(thisRowID, "__video");
-    setUniqueID(thisVideoID);
-    return /*#__PURE__*/_react.default.createElement(_SingleMessage.VideoWrapper, {
-      isPlaying: isPlaying,
-      isBuffering: isBuffering,
-      key: thisVideoID,
-      landscapeVideo: landscapeVideo
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      id: thisVideoID
-    }));
+  /* Dynamically retrieve ID that Gatsby has already baked into the page,
+  need to null check for initial render */
+  const getID = refWithID => {
+    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
+    return thisID;
   };
 
+  // Create the id string for the youtube video
+  (0, _react.useEffect)(() => {
+    if (thisRef.current) {
+      const thisID = getID(thisRef.current);
+      if (thisID) {
+        setUniqueID("".concat(thisID, "__video"));
+      }
+    }
+  }, [thisRef]);
+
+  // Break-out video markup into its own function
+  const renderVideoPlayers = () => /*#__PURE__*/_react.default.createElement(_SingleMessage.VideoWrapper, {
+    isPlaying: isPlaying,
+    isBuffering: isBuffering,
+    key: uniqueID,
+    landscapeVideo: landscapeVideo
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: uniqueID
+  }));
+
   /* Waiting on a usable ref from render before setting our flag used in other functions */
   (0, _react.useEffect)(() => {
     setHasParentID(true);
@@ -100,13 +111,6 @@ const SingleMessage = _ref => {
     }, 1000);
     setIsBuffering(true);
   };
-
-  /* Dynamically retrieve ID that Gatsby has already baked into the page,
-  need to null check for initial render */
-  const getID = refWithID => {
-    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
-    return thisID;
-  };
   return (
     /*#__PURE__*/
     // Creates namespaced UUIDs for each row

package/dist/components/Molecules/SingleMessage/SingleMessage.md

@@ -124,7 +124,7 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no top and bottom padding 
+Single Message with no Image - no top and bottom padding
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -184,13 +184,15 @@ Single Message with 16:9 video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[0]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -202,13 +204,15 @@ const defaultData = require('../../../styleguide/data/data').defaultData;
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={false}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[1]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -222,13 +226,15 @@ Single Message with portrait video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="FoMlSB6ftQg"
+  videoID={exampleYoutubeIds[2]}
 >
   <Text tag="p" color="black" size="xxl">
     Single Message with portrait video
@@ -240,14 +246,16 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="fwCQRMlKBnA"
+  videoID={exampleYoutubeIds[3]}
   vhFull
 >
   <Text tag="p" color="black" size="xxl">
@@ -261,13 +269,15 @@ Single Message with landscape video, 100VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[4]}
   vhFull
   fullImage={true}
 >
@@ -283,13 +293,15 @@ Single Message with landscape video, 50VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[5]}
   fullImage={true}
 >
   <Text tag="p" color="black" size="xxl">

package/dist/components/Molecules/SingleMessage/_ExampleYoutubeIds.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const exampleYoutubeIds = ['fwCQRMlKBnA', 'ZlGgFEDYKlY', 'yKADOGvq1Hs', 'Il9jhN2-PMA', 'So-GyrcQtK8', 'DjTmbU9nZNk'];
+var _default = exports.default = exampleYoutubeIds;

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
+var _LogoLinked = _interopRequireDefault(require("../../Molecules/LogoLinked/LogoLinked"));
 var _Nav = _interopRequireDefault(require("./Nav/Nav"));
 var _Header = require("./Header.style");
 const Header = _ref => {
@@ -18,7 +18,7 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Header.HeaderWrapper, 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, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_LogoLinked.default, {
     campaign: campaign
   })), /*#__PURE__*/_react.default.createElement(_Nav.default, {
     navItems: navItems

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _Logos = _interopRequireDefault(require("../../Molecules/Logos/Logos"));
+var _LogoLinked = _interopRequireDefault(require("../../Molecules/LogoLinked/LogoLinked"));
 var _HeaderNav = _interopRequireDefault(require("./HeaderNav2025/HeaderNav2025"));
 var _Header = require("./Header2025.style");
 const Header2025 = _ref => {
@@ -22,7 +22,7 @@ const Header2025 = _ref => {
   return /*#__PURE__*/_react.default.createElement(_Header.Header2025Wrapper, Object.assign({
     navItems: true,
     showBoxShadow: showBoxShadow
-  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_Logos.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Header.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Header.Brand, null, /*#__PURE__*/_react.default.createElement(_LogoLinked.default, {
     campaign: campaign,
     sizeSm: "50px",
     sizeMd: "55px",

package/dist/index.js

@@ -196,6 +196,12 @@ Object.defineProperty(exports, "Logo", {
     return _Logo.default;
   }
 });
+Object.defineProperty(exports, "LogoLinked", {
+  enumerable: true,
+  get: function () {
+    return _LogoLinked.default;
+  }
+});
 Object.defineProperty(exports, "Lookup", {
   enumerable: true,
   get: function () {
@@ -476,6 +482,7 @@ var _Chip = _interopRequireDefault(require("./components/Molecules/Chip/Chip"));
 var _Descriptor = _interopRequireDefault(require("./components/Molecules/Descriptor/Descriptor"));
 var _Lookup = _interopRequireDefault(require("./components/Molecules/Lookup/Lookup"));
 var _SimpleSchoolLookup = _interopRequireDefault(require("./components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup"));
+var _LogoLinked = _interopRequireDefault(require("./components/Molecules/LogoLinked/LogoLinked"));
 var _EmailSignUp = require("./components/Organisms/EmailSignUp/_EmailSignUp");
 var _CookieBanner = _interopRequireDefault(require("./components/Organisms/CookieBanner/CookieBanner"));
 var _Membership = _interopRequireDefault(require("./components/Organisms/Membership/Membership"));

package/package.json

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

package/src/components/Molecules/{Logos/Logos.js → LogoLinked/LogoLinked.js}

@@ -5,9 +5,9 @@ import styled, { css } from 'styled-components';
 import Logo from '../../Atoms/Logo/Logo';
 
 const TitleLabel = styled.span`
-  line-height: 0; 
+  line-height: 0;
   font-size: 0;
-  color: transparent; 
+  color: transparent;
 `;
 
 const LogoLink = styled.a`
@@ -25,8 +25,8 @@ const LogoLink = styled.a`
   `}
 `;
 
-const Logos = ({
-  campaign = 'Comic Relief', animateRotate = false, sizeSm, sizeMd
+const LogoLinked = ({
+  campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', animateRotate = false, sizeSm, sizeMd
 }) => {
   if (campaign === 'Sport Relief Gameon') {
     return (
@@ -62,18 +62,19 @@ const Logos = ({
   }
 
   return (
-    <LogoLink href="/" title="Go to Comic Relief homepage" animateRotate={animateRotate}>
-      <Logo rotate={false} campaign="Comic Relief" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
-      <TitleLabel>Go to Comic Relief homepage</TitleLabel>
+    <LogoLink href="/" title={title} animateRotate={animateRotate}>
+      <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
+      <TitleLabel>{title}</TitleLabel>
     </LogoLink>
   );
 };
 
-Logos.propTypes = {
+LogoLinked.propTypes = {
   campaign: PropTypes.string,
   animateRotate: PropTypes.bool,
+  title: PropTypes.string,
   sizeSm: PropTypes.string,
   sizeMd: PropTypes.string
 };
 
-export default Logos;
+export default LogoLinked;

package/src/components/Molecules/LogoLinked/LogoLinked.md

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

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -35,7 +35,7 @@ const SingleMessage = ({
 }) => {
   const hasImage = imageSet || false;
   const doubleImage = (imageSet || image) && (imageSet2 || image2);
-  const hasVideo = !!(videoID !== null && videoID !== '');
+  const hasVideo = Boolean(videoID !== null && videoID !== '');
 
   // States to track video status
   const [isInitialised, setIsInitialised] = useState(false);
@@ -54,26 +54,36 @@ const SingleMessage = ({
         && /iPad|iPhone|iPod/.test(navigator.platform)
     : false;
 
-  // Break-out video markup into its own function
-  const renderVideoPlayers = thisRowID => {
-    // Store the dynamically-created UUID (from the main render func) in our state
-    // so useEffect can access it
-    const thisVideoID = `${thisRowID}__video`;
-
-    setUniqueID(thisVideoID);
-
-    return (
-      <VideoWrapper
-        isPlaying={isPlaying}
-        isBuffering={isBuffering}
-        key={thisVideoID}
-        landscapeVideo={landscapeVideo}
-      >
-        <div id={thisVideoID} />
-      </VideoWrapper>
-    );
+  /* Dynamically retrieve ID that Gatsby has already baked into the page,
+  need to null check for initial render */
+  const getID = refWithID => {
+    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
+
+    return thisID;
   };
 
+  // Create the id string for the youtube video
+  useEffect(() => {
+    if (thisRef.current) {
+      const thisID = getID(thisRef.current);
+      if (thisID) {
+        setUniqueID(`${thisID}__video`);
+      }
+    }
+  }, [thisRef]);
+
+  // Break-out video markup into its own function
+  const renderVideoPlayers = () => (
+    <VideoWrapper
+      isPlaying={isPlaying}
+      isBuffering={isBuffering}
+      key={uniqueID}
+      landscapeVideo={landscapeVideo}
+    >
+      <div id={uniqueID} />
+    </VideoWrapper>
+  );
+
   /* Waiting on a usable ref from render before setting our flag used in other functions */
   useEffect(() => {
     setHasParentID(true);
@@ -115,14 +125,6 @@ const SingleMessage = ({
     setIsBuffering(true);
   };
 
-  /* Dynamically retrieve ID that Gatsby has already baked into the page,
-  need to null check for initial render */
-  const getID = refWithID => {
-    const thisID = refWithID !== null ? refWithID.getAttribute('id') : null;
-
-    return thisID;
-  };
-
   return (
     // Creates namespaced UUIDs for each row
     <UID name={id => `single-msg__${id}`}>

package/src/components/Molecules/SingleMessage/SingleMessage.md

@@ -124,7 +124,7 @@ import Text from '../../Atoms/Text/Text';
 </SingleMessage>;
 ```
 
-Single Message with no Image - no top and bottom padding 
+Single Message with no Image - no top and bottom padding
 
 ```js
 import Text from '../../Atoms/Text/Text';
@@ -184,13 +184,15 @@ Single Message with 16:9 video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[0]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -202,13 +204,15 @@ const defaultData = require('../../../styleguide/data/data').defaultData;
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={false}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[1]}
   landscapeVideo
 >
   <Text tag="p" color="black" size="xxl">
@@ -222,13 +226,15 @@ Single Message with portrait video
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="FoMlSB6ftQg"
+  videoID={exampleYoutubeIds[2]}
 >
   <Text tag="p" color="black" size="xxl">
     Single Message with portrait video
@@ -240,14 +246,16 @@ Single Message with portrait video, 100VH
 
 ```js
 import Text from '../../Atoms/Text/Text';
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="fwCQRMlKBnA"
+  videoID={exampleYoutubeIds[3]}
   vhFull
 >
   <Text tag="p" color="black" size="xxl">
@@ -261,13 +269,15 @@ Single Message with landscape video, 100VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[4]}
   vhFull
   fullImage={true}
 >
@@ -283,13 +293,15 @@ Single Message with landscape video, 50VH, fullwidth image
 ```js
 import Text from '../../Atoms/Text/Text';
 const defaultData = require('../../../styleguide/data/data').defaultData;
+import exampleYoutubeIds from './_ExampleYoutubeIds.js';
+
 <SingleMessage
   backgroundColor="purple"
   imageSet={defaultData.images}
   image={defaultData.image}
   imageAltText=""
   copyFirst={true}
-  videoID="WUgvvPRH7Oc"
+  videoID={exampleYoutubeIds[5]}
   fullImage={true}
 >
   <Text tag="p" color="black" size="xxl">

package/src/components/Molecules/SingleMessage/_ExampleYoutubeIds.js

@@ -0,0 +1,10 @@
+const exampleYoutubeIds = [
+  'fwCQRMlKBnA',
+  'ZlGgFEDYKlY',
+  'yKADOGvq1Hs',
+  'Il9jhN2-PMA',
+  'So-GyrcQtK8',
+  'DjTmbU9nZNk'
+];
+
+export default exampleYoutubeIds;

package/src/components/Organisms/Header/Header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Logos from '../../Molecules/Logos/Logos';
+import LogoLinked from '../../Molecules/LogoLinked/LogoLinked';
 import MainNav from './Nav/Nav';
 import {
   Brand, HeaderWrapper, InnerWrapper, MetaIcons
@@ -13,7 +13,7 @@ const Header = ({
   <HeaderWrapper navItems {...rest}>
     <InnerWrapper>
       <Brand>
-        <Logos campaign={campaign} />
+        <LogoLinked campaign={campaign} />
       </Brand>
       <MainNav navItems={navItems} />
       <MetaIcons>{metaIcons}</MetaIcons>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Logos from '../../Molecules/Logos/Logos';
+import LogoLinked from '../../Molecules/LogoLinked/LogoLinked';
 import HeaderNav2025 from './HeaderNav2025/HeaderNav2025';
 import {
   Brand, Header2025Wrapper, InnerWrapper,
@@ -15,7 +15,7 @@ const Header2025 = ({
   <Header2025Wrapper navItems showBoxShadow={showBoxShadow} {...rest}>
     <InnerWrapper>
       <Brand>
-        <Logos
+        <LogoLinked
           campaign={campaign}
           sizeSm="50px"
           sizeMd="55px"

package/src/index.js

@@ -63,6 +63,7 @@ export { default as Chip } from './components/Molecules/Chip/Chip';
 export { default as Descriptor } from './components/Molecules/Descriptor/Descriptor';
 export { default as Lookup } from './components/Molecules/Lookup/Lookup';
 export { default as SimpleSchoolLookup } from './components/Molecules/SimpleSchoolLookup/SimpleSchoolLookup';
+export { default as LogoLinked } from './components/Molecules/LogoLinked/LogoLinked';
 
 /* Organisms */
 export {

package/dist/components/Molecules/Logos/Logos.md

@@ -1,5 +0,0 @@
-# Comic Relief Logo
-
-```js
-<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
-```

package/src/components/Molecules/Logos/Logos.md

@@ -1,5 +0,0 @@
-# Comic Relief Logo
-
-```js
-<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
-```