Wordmark Links to homepage (#147)

* Use wordmark instead of logo inside the modal * Added support for wordmark linking to homepage
ApollosProject · Jan 24, 2024 · 6c2dfa6 · 6c2dfa6
1 parent 11082d2
commit 6c2dfa6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git 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 = {}) => {

diff --git 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
@@ -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;