diff --git a/apps/events-helsinki/package.json b/apps/events-helsinki/package.json index cc092d080..17d2d4e5a 100644 --- 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 index 2aea848a8..910fad016 100644 --- 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={} diff --git a/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx b/apps/events-helsinki/src/hooks/useEventsRHHCConfig.tsx index c3c276b84..c19ef1195 100644 --- 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: { ), }, + 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 index 0139795d3..f77c9edef 100644 --- 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 index 42eeda4e3..a6ce5c219 100644 --- 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 index 1df6b8566..ef1548948 100644 --- 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: { ), }, + 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 index b020fefab..d97a175db 100644 --- 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 index d8176f86c..ea1e0df3b 100644 --- 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 = ({ 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 index 6d5806f95..395752bd3 100644 --- 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 = ({ > {hasNext && ( - )} diff --git a/apps/sports-helsinki/src/domain/search/venueList/venueList.module.scss b/apps/sports-helsinki/src/domain/search/venueList/venueList.module.scss index bb3bf58b6..e0e9dcee9 100644 --- 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 index bde2bd908..943c705ef 100644 --- 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: { ), }, + customCopy: { + loadMoreButtonVariant: 'success', + }, siteName: resilientT('appSports:appName'), currentLanguageCode: getLanguageCode(locale), apolloClient, diff --git a/packages/components/package.json b/packages/components/package.json index 80e9a10ed..b9ea490f1 100644 --- 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 index c60934ead..40dbe0694 100644 --- 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; + loadMoreButtonTheme?: ButtonTheme; }; const EventList: React.FC = ({ @@ -39,13 +42,14 @@ const EventList: React.FC = ({ 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 = ({ > {hasNext && ( - )} diff --git a/packages/components/src/components/eventList/eventList.module.scss b/packages/components/src/components/eventList/eventList.module.scss index 11dcc0002..058be15d4 100644 --- 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 index 99bba49d7..27ffe635f 100644 --- 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"