fix: card height and load more button (#744)

City-of-Helsinki · Oct 6, 2024 · 8e3d077 · 8e3d077
1 parent a8775f4
commit 8e3d077
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 29 deletions.
diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha298",
+    "react-helsinki-headless-cms": "1.0.0-alpha302",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",

diff --git a/apps/events-helsinki/src/domain/search/eventSearch/SearchPage.tsx b/apps/events-helsinki/src/domain/search/eventSearch/SearchPage.tsx
@@ -185,6 +185,7 @@ const SearchPage: React.FC<{
                     showEnrolmentStatusInCardDetails={
                       AppConfig.showEnrolmentStatusInCardDetails
                     }
+                    loadMoreButtonVariant="success"
                   />
                 }
                 orderBySelectComponent={<EventsOrderBySelect />}

diff --git a/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx b/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx
@@ -86,6 +86,9 @@ export default function useEventsRHHCConfig(args: {
           <HelsinkiCityOwnedIcon {...props} />
         ),
       },
+      customCopy: {
+        loadMoreButtonVariant: 'success',
+      },
       siteName: resilientT('appEvents:appName'),
       currentLanguageCode: getLanguageCode(locale),
       apolloClient,

diff --git a/apps/hobbies-helsinki/package.json b/apps/hobbies-helsinki/package.json
@@ -72,7 +72,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha298",
+    "react-helsinki-headless-cms": "1.0.0-alpha302",
     "react-i18next": "13.0.1",
     "react-scroll": "^1.8.9",
     "react-toastify": "^9.1.3",

diff --git a/apps/hobbies-helsinki/src/domain/search/eventSearch/SearchPage.tsx b/apps/hobbies-helsinki/src/domain/search/eventSearch/SearchPage.tsx
@@ -180,6 +180,8 @@ const SearchPage: React.FC<{
                     showEnrolmentStatusInCardDetails={
                       AppConfig.showEnrolmentStatusInCardDetails
                     }
+                    loadMoreButtonVariant="primary"
+                    loadMoreButtonTheme="coat"
                   />
                 }
               />

diff --git a/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx b/apps/hobbies-helsinki/src/hooks/useHobbiesRHHCConfig.tsx
@@ -87,6 +87,9 @@ export default function useHobbiesRHHCConfig(args: {
           <HelsinkiCityOwnedIcon {...props} />
         ),
       },
+      customCopy: {
+        loadMoreButtonTheme: 'coat',
+      },
       siteName: resilientT('appHobbies:appName'),
       currentLanguageCode: getLanguageCode(locale),
       apolloClient,

diff --git a/apps/sports-helsinki/package.json b/apps/sports-helsinki/package.json
@@ -80,7 +80,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha298",
+    "react-helsinki-headless-cms": "1.0.0-alpha302",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-scroll": "^1.8.9",

diff --git a/apps/sports-helsinki/src/domain/search/eventSearch/SearchPage.tsx b/apps/sports-helsinki/src/domain/search/eventSearch/SearchPage.tsx
@@ -116,6 +116,7 @@ const EventSearchPage: React.FC<SearchPageProps> = ({
                     showEnrolmentStatusInCardDetails={
                       AppConfig.showEnrolmentStatusInCardDetails
                     }
+                    loadMoreButtonVariant="success"
                   />
                 }
                 orderBySelectComponent={

diff --git a/apps/sports-helsinki/src/domain/search/venueList/VenueList.tsx b/apps/sports-helsinki/src/domain/search/venueList/VenueList.tsx
@@ -71,7 +71,7 @@ const VenueList: React.FC<Props> = ({
       >
         <LoadingSpinner hasPadding={!venues.length} isLoading={loading}>
           {hasNext && (
-            <Button onClick={onLoadMore} variant="secondary" theme="black">
+            <Button onClick={onLoadMore} variant="success">
               {t('buttonLoadMore', { count: venuesLeft })}
             </Button>
           )}

diff --git a/apps/sports-helsinki/src/domain/search/venueList/venueList.module.scss b/apps/sports-helsinki/src/domain/search/venueList/venueList.module.scss
@@ -14,13 +14,7 @@
   .loadMoreWrapper {
     display: flex;
     justify-content: center;
-    button {
-      border: 2px solid var(--color-primary-black);
-    }
-    button:hover {
-      background-color: var(--color-black-5);
-      border: 2px solid var(--color-primary-black);
-    }
+
     &.buttonCentered {
       text-align: center;
     }

diff --git a/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx b/apps/sports-helsinki/src/hooks/useSportsRHHCConfig.tsx
@@ -87,6 +87,9 @@ export default function useSportsRHHCConfig(args: {
           <HelsinkiCityOwnedIcon {...props} />
         ),
       },
+      customCopy: {
+        loadMoreButtonVariant: 'success',
+      },
       siteName: resilientT('appSports:appName'),
       currentLanguageCode: getLanguageCode(locale),
       apolloClient,

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -78,7 +78,7 @@
     "react-datepicker": "^4.14.1",
     "react-dom": "18.2.0",
     "react-error-boundary": "4.0.10",
-    "react-helsinki-headless-cms": "1.0.0-alpha298",
+    "react-helsinki-headless-cms": "1.0.0-alpha302",
     "react-i18next": "13.0.1",
     "react-leaflet": "4.2.1",
     "react-toastify": "^9.1.3",

diff --git a/packages/components/src/components/eventList/EventList.tsx b/packages/components/src/components/eventList/EventList.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { Button } from 'hds-react';
+import type { ButtonTheme, ButtonVariant } from 'hds-react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
@@ -27,6 +28,8 @@ type EventListProps = {
   showEnrolmentStatusInCardDetails: boolean;
   onLoadMore: () => void;
   getEventUrl: GetEventUrlType;
+  loadMoreButtonVariant?: Exclude<ButtonVariant, 'supplementary'>;
+  loadMoreButtonTheme?: ButtonTheme;
 };
 
 const EventList: React.FC<EventListProps> = ({
@@ -39,13 +42,14 @@ const EventList: React.FC<EventListProps> = ({
   onLoadMore,
   getEventUrl,
   showEnrolmentStatusInCardDetails = false,
+  loadMoreButtonVariant = 'secondary',
+  loadMoreButtonTheme,
 }) => {
   const { t } = useTranslation('search');
   const router = useRouter();
   const locale = useLocale();
   const eventsLeft = count - events.length;
   const EventCardComponent = eventCardsMap[cardSize];
-
   const eventCards = events.map((event) => {
     const eventUrl = getEventUrl(event, router, locale);
     return (
@@ -68,7 +72,14 @@ const EventList: React.FC<EventListProps> = ({
       >
         <LoadingSpinner hasPadding={!events.length} isLoading={loading}>
           {hasNext && (
-            <Button onClick={onLoadMore} variant="secondary" theme="black">
+            <Button
+              onClick={onLoadMore}
+              variant={loadMoreButtonVariant}
+              theme={
+                loadMoreButtonTheme ||
+                (loadMoreButtonVariant === 'secondary' ? 'black' : undefined)
+              }
+            >
               {t('buttonLoadMore', { count: eventsLeft })}
             </Button>
           )}

diff --git a/packages/components/src/components/eventList/eventList.module.scss b/packages/components/src/components/eventList/eventList.module.scss
@@ -14,13 +14,7 @@
   .loadMoreWrapper {
     display: flex;
     justify-content: center;
-    button {
-      border: 2px solid var(--color-primary-black);
-    }
-    button:hover {
-      background-color: var(--color-black-5);
-      border: 2px solid var(--color-primary-black);
-    }
+
     &.buttonCentered {
       text-align: center;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -3526,7 +3526,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha298"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha302"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-toastify: "npm:^9.1.3"
@@ -14365,7 +14365,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha298"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha302"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -16267,7 +16267,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha298"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha302"
     react-i18next: "npm:13.0.1"
     react-scroll: "npm:^1.8.9"
     react-toastify: "npm:^9.1.3"
@@ -23355,9 +23355,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-helsinki-headless-cms@npm:1.0.0-alpha298":
-  version: 1.0.0-alpha298
-  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha298"
+"react-helsinki-headless-cms@npm:1.0.0-alpha302":
+  version: 1.0.0-alpha302
+  resolution: "react-helsinki-headless-cms@npm:1.0.0-alpha302"
   dependencies:
     hds-design-tokens: "npm:^3.9.0"
     html-entities: "npm:^2.4.0"
@@ -23374,7 +23374,7 @@ __metadata:
   peerDependenciesMeta:
     "@apollo/client":
       optional: true
-  checksum: fd0922f32be76f1ecaa771df09dd31acf7068c912f868f72fae125356bbc890eecec97b6b55d7cfd5c2fcb2c172129c63f68c81ce16d298664c719a95e9df387
+  checksum: 32ed5349c293f0cf56c0f7aea54c8ed58b096ef2ec4d8401f7609658b052d1445285501aa0ee75b921df7408c7f5873f2b48348e55a645d0f594ca09b8c4d941
   languageName: node
   linkType: hard
 
@@ -25449,7 +25449,7 @@ __metadata:
     react-datepicker: "npm:^4.14.1"
     react-dom: "npm:18.2.0"
     react-error-boundary: "npm:4.0.10"
-    react-helsinki-headless-cms: "npm:1.0.0-alpha298"
+    react-helsinki-headless-cms: "npm:1.0.0-alpha302"
     react-i18next: "npm:13.0.1"
     react-leaflet: "npm:4.2.1"
     react-scroll: "npm:^1.8.9"