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

melniiv · web-flow · commit 8e3d077c0181 · 2024-10-07T00:13:36.000+03:00
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"

Original file line number	Diff line number	Diff line change
`@@ -185,6 +185,7 @@ const SearchPage: React.FC<{`
`185`	`185`	`showEnrolmentStatusInCardDetails={`
`186`	`186`	`AppConfig.showEnrolmentStatusInCardDetails`
`187`	`187`	`}`
	`188`	`+ loadMoreButtonVariant="success"`
`188`	`189`	`/>`
`189`	`190`	`}`
`190`	`191`	`orderBySelectComponent={<EventsOrderBySelect />}`
Original file line number	Diff line number	Diff line change
`@@ -180,6 +180,8 @@ const SearchPage: React.FC<{`
`180`	`180`	`showEnrolmentStatusInCardDetails={`
`181`	`181`	`AppConfig.showEnrolmentStatusInCardDetails`
`182`	`182`	`}`
	`183`	`+ loadMoreButtonVariant="primary"`
	`184`	`+ loadMoreButtonTheme="coat"`
`183`	`185`	`/>`
`184`	`186`	`}`
`185`	`187`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,7 @@ const EventSearchPage: React.FC<SearchPageProps> = ({`
`116`	`116`	`showEnrolmentStatusInCardDetails={`
`117`	`117`	`AppConfig.showEnrolmentStatusInCardDetails`
`118`	`118`	`}`
	`119`	`+ loadMoreButtonVariant="success"`
`119`	`120`	`/>`
`120`	`121`	`}`
`121`	`122`	`orderBySelectComponent={`
Original file line number	Diff line number	Diff line change
`@@ -71,7 +71,7 @@ const VenueList: React.FC<Props> = ({`
`71`	`71`	`>`
`72`	`72`	`<LoadingSpinner hasPadding={!venues.length} isLoading={loading}>`
`73`	`73`	`{hasNext && (`
`74`		`- <Button onClick={onLoadMore} variant="secondary" theme="black">`
	`74`	`+ <Button onClick={onLoadMore} variant="success">`
`75`	`75`	`{t('buttonLoadMore', { count: venuesLeft })}`
`76`	`76`	`</Button>`
`77`	`77`	`)}`