From 96220e9647b856b433f1e5b6dff9093ce0bb7c35 Mon Sep 17 00:00:00 2001
From: Vincent Wilson <vince@classyh.at>
Date: Wed, 24 Jan 2024 15:22:59 -0500
Subject: [PATCH] Added support for wordmark linking to homepage

---
 packages/web-shared/components/Modal/Modal.js | 36 ++++++++++---------
 .../components/Wordmark/Wordmark.js           | 13 ++++---
 .../components/Wordmark/Wordmark.styles.js    | 11 ++++--
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
index 6c259994..7950927c 100644
--- a/packages/web-shared/components/Modal/Modal.js
+++ b/packages/web-shared/components/Modal/Modal.js
@@ -21,8 +21,12 @@ import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();
-  return <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} />;
-  return null;
+
+  const { origin } = window.location;
+
+  return (
+    <Wordmark source={currentChurch?.wordmarkLightUrl} padding={10} {...props} href={origin} />
+  );
 }
 
 const Modal = (props = {}) => {
@@ -78,20 +82,20 @@ const Modal = (props = {}) => {
                 />
               </Box>
               <Box
-                  width={{ _: '100%', sm: '10%' }}
-                  mb={{ _: 'xs', sm: '0' }}
-                  ml={{ _: '0', sm: 'xs' }}
-                  display="flex"
-                  justifyContent="flex-end"
-                  alignItems="center"
-                  position="absolute"
-                  top="xs"
-                  right="xs"
-                >
-                  <Styled.Icon onClick={handleCloseModal} ml={{ _: 'auto', sm: '0' }}>
-                    <X size={16} weight="bold" />
-                  </Styled.Icon>
-                </Box>              
+                width={{ _: '100%', sm: '10%' }}
+                mb={{ _: 'xs', sm: '0' }}
+                ml={{ _: '0', sm: 'xs' }}
+                display="flex"
+                justifyContent="flex-end"
+                alignItems="center"
+                position="absolute"
+                top="xs"
+                right="xs"
+              >
+                <Styled.Icon onClick={handleCloseModal} ml={{ _: 'auto', sm: '0' }}>
+                  <X size={16} weight="bold" />
+                </Styled.Icon>
+              </Box>
               <Box
                 width="100%"
                 display="flex"
diff --git a/packages/web-shared/components/Wordmark/Wordmark.js b/packages/web-shared/components/Wordmark/Wordmark.js
index 43f7429e..32f9dcfa 100644
--- a/packages/web-shared/components/Wordmark/Wordmark.js
+++ b/packages/web-shared/components/Wordmark/Wordmark.js
@@ -5,11 +5,16 @@ import Styled from './Wordmark.styles';
 
 import { systemPropTypes } from '../../ui-kit';
 
-function Wordmark({ size, source }) {
+function Wordmark({ size, source, href }) {
+  if (href) {
+    return (
+      <a href={href}>
+        <Styled.WrappedImage src={source || './icon.png'} alt="Logo" size={size} />
+      </a>
+    );
+  }
 
-  return (
-    <Styled.Image src={source || './icon.png'} alt="Logo" size={size} />
-  );
+  return <Styled.Image src={source || './icon.png'} alt="Logo" size={size} />;
 }
 
 Wordmark.propTypes = {
diff --git a/packages/web-shared/components/Wordmark/Wordmark.styles.js b/packages/web-shared/components/Wordmark/Wordmark.styles.js
index 0270a289..6e9d9e51 100644
--- a/packages/web-shared/components/Wordmark/Wordmark.styles.js
+++ b/packages/web-shared/components/Wordmark/Wordmark.styles.js
@@ -1,5 +1,5 @@
 import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';;
+import styled, { css } from 'styled-components';
 
 const DEFAULT_ICON_SIZE = '80px';
 
@@ -8,17 +8,24 @@ const imageStyles = ({ size }) => {
 
   return css`
     max-height: ${newSize};
-    max-width: 80%;
   `;
 };
 
 const Image = withTheme(styled.img`
   resizemode: 'contain';
+  max-width: 80%;
+  ${imageStyles};
+`);
+
+const WrappedImage = withTheme(styled.img`
+  resizemode: 'contain';
+  max-width: 100%;
   ${imageStyles};
 `);
 
 const Styled = {
   Image,
+  WrappedImage,
 };
 
 export default Styled;