feat: allow for specifying a custom width for the profile popup (#242)

* feat: allow for specifying a custom width for the profile popup * feat: make horizontal adjustment only when size is specified * docs: explain new attribute
ApollosProject · Nov 26, 2024 · 5a41e7c · 5a41e7c
1 parent 3a12bc3
commit 5a41e7c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 9 deletions.
diff --git a/packages/web-shared/components/Profile/Profile.js b/packages/web-shared/components/Profile/Profile.js
@@ -26,7 +26,7 @@ import themeGet from '@styled-system/theme-get';
 import { logout, useAuth } from '../../providers/AuthProvider';
 import authSteps from '../Auth/authSteps';
 
-const Profile = ({ theme, handleCloseProfile, ...rest }) => {
+const Profile = ({ theme, handleCloseProfile, size, ...rest }) => {
   const { currentUser } = useCurrentUser();
   const { currentChurch } = useCurrentChurch();
 
@@ -79,17 +79,19 @@ const Profile = ({ theme, handleCloseProfile, ...rest }) => {
 
   return (
     <>
-      <Styled.Profile ref={ref}>
+      <Styled.Profile ref={ref} {...(size ? { right: '-15px;' } : {})}>
         <Styled.ProfileCard
           borderRadius={{
             _: '0%',
             sm: 'xxl',
           }}
-          width={{
-            _: '100%',
-            sm: '350px',
-            md: '520px',
-          }}
+          width={
+            size ?? {
+              _: '100%',
+              sm: '350px',
+              md: '520px',
+            }
+          }
         >
           <Box display="flex" alignItems="center" justifyContent="end">
             <Styled.CloseIcon onClick={handleCloseProfile}>

diff --git a/packages/web-shared/components/Profile/ProfileButton.js b/packages/web-shared/components/Profile/ProfileButton.js
@@ -32,7 +32,9 @@ const ProfileButton = (props) => {
           </Box>
         )}
       </Box>
-      {showProfile ? <Profile handleCloseProfile={() => setShowProfile(false)} /> : null}
+      {showProfile ? (
+        <Profile handleCloseProfile={() => setShowProfile(false)} size={props.popupSize} />
+      ) : null}
     </Box>
   );
 };

diff --git a/packages/web-shared/components/Searchbar/Searchbar.js b/packages/web-shared/components/Searchbar/Searchbar.js
@@ -161,7 +161,7 @@ const Searchbar = (props = {}) => {
             </Styled.InterfaceWrapper>
           </Styled.Interface>
           <Box p={16}>
-            <ProfileButton />
+            <ProfileButton popupSize={searchState.searchProfileSize} />
           </Box>
         </Box>
         <SearchResults autocompleteState={autocompleteState} autocomplete={autocompleteInstance} />

diff --git a/packages/web-shared/embeds/Main.js b/packages/web-shared/embeds/Main.js
@@ -61,6 +61,7 @@ const Main = ({ type }) => {
                 type={widget.dataset.type}
                 church={widget.dataset.church}
                 searchFeed={widget.dataset.searchFeed}
+                searchProfileSize={widget.dataset.searchProfileSize}
                 featureFeed={widget.dataset.featureFeed}
                 modal={widget.dataset.modal}
                 emptyPlaceholderText={widget.dataset.emptyPlaceholderText}

diff --git a/packages/web-shared/providers/AppProvider.js b/packages/web-shared/providers/AppProvider.js
@@ -35,6 +35,7 @@ function AppProvider(props = {}) {
             <SearchProvider
               church={props.church}
               searchFeed={props.searchFeed}
+              searchProfileSize={props.searchProfileSize}
               customPlaceholder={props.customPlaceholder}
             >
               <ModalProvider>

diff --git a/packages/web-shared/providers/SearchProvider.js b/packages/web-shared/providers/SearchProvider.js
@@ -8,6 +8,7 @@ const SearchDispatchContext = createContext();
 const initialState = {
   church: null,
   searchFeed: null,
+  searchProfileSize: null,
   customPlaceholder: null,
   loading: true,
 };
@@ -37,6 +38,7 @@ function SearchProvider(props = {}) {
     ...initialState, // spread the original initialState object
     church: props.church, // add church to state
     searchFeed: props.searchFeed, // add search feed id to state
+    searchProfileSize: props.searchProfileSize, // specify a custom width for the profile popup
     customPlaceholder: props.customPlaceholder, // add search custom placeholder to state
   });
 

diff --git a/web-embeds/README.md b/web-embeds/README.md
@@ -54,6 +54,13 @@ For the 'FeatureFeed' embed, which displays the church's content, add `data-type
 
 _⚠️ Make sure to replace [INSERT_CHURCH_SLUG_HERE] with your church's unique identifier, or 'slug'._
 
+## Search type: Custom Profile modal width:
+For the Search embed type, to control the width of the Profile modal that appears when click the "Profile" button, use the `data-search-profile-size` attribute.
+
+```
+<div class="apollos-widget" data-type="Search" data-church="bayside" data-search-profile-size="365px"></div>
+```
+
 ### Enabling Caching for Local Frustration
 
 For local development and testing purposes, you might want to enable caching to ensure you're not receiving the latest responses directly from the API. To do this, please refer to the Apollo client configuration file:
@@ -72,6 +79,7 @@ In this file, locate the header configuration within the `apollosApiLink` functi
 | ----------- |
 | Auth        |
 | FeatureFeed |
+| Search      |
 
 | data-church                |
 | -------------------------- |

diff --git a/web-embeds/src/App.js b/web-embeds/src/App.js
@@ -24,6 +24,9 @@ function App() {
   const searchFeed = searchElement
     ? searchElement.getAttribute("data-search-feed")
     : null;
+  const searchProfileSize = searchElement
+    ? searchElement.getAttribute("data-search-profile-size")
+    : null;
   const church = churchElement
     ? churchElement.getAttribute("data-church")
     : null;
@@ -57,6 +60,7 @@ function App() {
     <AppProvider
       church={church}
       searchFeed={searchFeed}
+      searchProfileSize={searchProfileSize}
       customPlaceholder={customPlaceholder}
       usePathRouter={usePathRouter}
     >