From f6aa54b3d71c3bd3ee63a53ed4c535b77f8962c4 Mon Sep 17 00:00:00 2001
From: Jon M <81927768+curlyfriesplease@users.noreply.github.com>
Date: Fri, 31 Jan 2025 11:32:33 +0000
Subject: [PATCH] feat: Allows Logos to be exported, and adds ability to
 customise title (#701)

* Allows Logos to be exported, and adds ability to customise title

* Adds title to proptypes of Logos

* Adds animated and non-animated examples of Logos component

* Updates upload-artifact version

* Changes 'Logos' to 'LogoLinked' to distinguish from simple Logo
---
 .../Logos.js => LogoLinked/LogoLinked.js}     | 19 ++++++++++---------
 .../Molecules/LogoLinked/LogoLinked.md        | 11 +++++++++++
 src/components/Molecules/Logos/Logos.md       |  5 -----
 src/components/Organisms/Header/Header.js     |  4 ++--
 .../Organisms/Header2025/Header2025.js        |  4 ++--
 src/index.js                                  |  1 +
 6 files changed, 26 insertions(+), 18 deletions(-)
 rename src/components/Molecules/{Logos/Logos.js => LogoLinked/LogoLinked.js} (81%)
 create mode 100644 src/components/Molecules/LogoLinked/LogoLinked.md
 delete mode 100644 src/components/Molecules/Logos/Logos.md

diff --git a/src/components/Molecules/Logos/Logos.js b/src/components/Molecules/LogoLinked/LogoLinked.js
similarity index 81%
rename from src/components/Molecules/Logos/Logos.js
rename to src/components/Molecules/LogoLinked/LogoLinked.js
index d5b53742c..2637461d9 100644
--- a/src/components/Molecules/Logos/Logos.js
+++ b/src/components/Molecules/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;
diff --git a/src/components/Molecules/LogoLinked/LogoLinked.md b/src/components/Molecules/LogoLinked/LogoLinked.md
new file mode 100644
index 000000000..8485806d7
--- /dev/null
+++ b/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" />
+```
diff --git a/src/components/Molecules/Logos/Logos.md b/src/components/Molecules/Logos/Logos.md
deleted file mode 100644
index 7fa49af5e..000000000
--- a/src/components/Molecules/Logos/Logos.md
+++ /dev/null
@@ -1,5 +0,0 @@
-# Comic Relief Logo
-
-```js
-<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
-```
\ No newline at end of file
diff --git a/src/components/Organisms/Header/Header.js b/src/components/Organisms/Header/Header.js
index c1d0253d9..0f6da72cc 100644
--- a/src/components/Organisms/Header/Header.js
+++ b/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>
diff --git a/src/components/Organisms/Header2025/Header2025.js b/src/components/Organisms/Header2025/Header2025.js
index 6913c4e05..bb86e6652 100644
--- a/src/components/Organisms/Header2025/Header2025.js
+++ b/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"
diff --git a/src/index.js b/src/index.js
index 630a27839..8a39212d1 100644
--- a/src/index.js
+++ b/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 {