Card title icon support and helsinki icon checkbox (#133)

City-of-Helsinki · Nov 13, 2023 · beae6fc · beae6fc
1 parent e4c313c
commit beae6fc
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-helsinki-headless-cms",
-  "version": "1.0.0-alpha224",
+  "version": "1.0.0-alpha228",
   "description": "React components for displaying Headless CMS content according to guidelines set by HDS",
   "main": "cjs/index.js",
   "module": "index.js",

diff --git a/src/common/venuesService/__generated__.ts b/src/common/venuesService/__generated__.ts
@@ -178,6 +178,8 @@ export type ListVenueFragment = {
   name?: string | null;
   streetAddress?: string | null;
   addressLocality?: string | null;
+  providerType?: string | null;
+  displayedServiceOwnerType?: string | null;
   ontologyWords: Array<{
     __typename?: 'Ontology';
     id?: number | null;
@@ -199,6 +201,8 @@ export type VenuesByIdsQuery = {
     name?: string | null;
     streetAddress?: string | null;
     addressLocality?: string | null;
+    providerType?: string | null;
+    displayedServiceOwnerType?: string | null;
     ontologyWords: Array<{
       __typename?: 'Ontology';
       id?: number | null;
@@ -219,6 +223,8 @@ export const ListVenueFragmentDoc = gql`
       id
       label
     }
+    providerType
+    displayedServiceOwnerType
   }
 `;
 export const VenuesByIdsDocument = gql`

diff --git a/src/common/venuesService/graphql/venues.graphql b/src/common/venuesService/graphql/venues.graphql
@@ -9,6 +9,8 @@ fragment listVenue on Venue {
     id
     label
   }
+  providerType
+  displayedServiceOwnerType
 }
 
 query VenuesByIds($ids: [ID!]!) {

diff --git a/src/core/card/Card.tsx b/src/core/card/Card.tsx
@@ -20,6 +20,8 @@ export type CardProps = {
   imageUrl?: string | null;
   imageLabel?: string;
   title?: string;
+  withTitleIcon?: boolean;
+  titleIcon?: React.ReactNode | string;
   subTitle?: string;
   text?: string;
   customContent?: React.ReactNode | string;
@@ -49,6 +51,8 @@ export function Card({
   imageUrl,
   imageLabel,
   title,
+  withTitleIcon,
+  titleIcon,
   subTitle,
   text,
   customContent,
@@ -150,6 +154,7 @@ export function Card({
                 )}
               >
                 {title}
+                {withTitleIcon && titleIcon}
               </div>
             )}
             {subTitle && <div className={styles.subTitle}>{subTitle}</div>}

diff --git a/src/core/collection/Collection.tsx b/src/core/collection/Collection.tsx
@@ -178,16 +178,20 @@ export function getEventCollectionCards({
   getRoutedInternalHref,
   getEventCardProps,
   EventCardContent,
+  HelsinkiCityOwnedIcon,
+  organisationPrefixes,
   locale = DEFAULT_LOCALE,
 }: {
   items: EventType[];
   getRoutedInternalHref: Config['utils']['getRoutedInternalHref'];
   getEventCardProps: Config['utils']['getEventCardProps'];
   EventCardContent: React.FC<Record<string, unknown>>;
+  HelsinkiCityOwnedIcon: React.FC<Record<string, unknown>>;
+  organisationPrefixes: string[];
   locale?: string;
 }) {
   const cards = items
-    .map((item) => getEventCardProps(item, locale))
+    .map((item) => getEventCardProps(item, organisationPrefixes, locale))
     .map((cardProps, i) => {
       const url = getRoutedInternalHref(cardProps.url, null);
       return (
@@ -199,6 +203,10 @@ export function getEventCollectionCards({
           customContent={
             EventCardContent && <EventCardContent event={items[i]} />
           }
+          titleIcon={
+            cardProps.withTitleIcon &&
+            HelsinkiCityOwnedIcon && <HelsinkiCityOwnedIcon />
+          }
         />
       );
     });
@@ -216,8 +224,9 @@ export function EventSearchCollection({
   const eventsApolloClient = useEventsApolloClientFromConfig();
   const {
     currentLanguageCode,
+    organisationPrefixes,
     utils: { getRoutedInternalHref, getEventCardProps },
-    components: { EventCardContent },
+    components: { EventCardContent, HelsinkiCityOwnedIcon },
   } = useConfig();
   const { url } = collection;
   // TODO: use initAmountOfEvents -field when it's null-issue is fixed
@@ -258,6 +267,8 @@ export function EventSearchCollection({
       getRoutedInternalHref(link, type ?? ModuleItemTypeEnum.Event),
     getEventCardProps,
     EventCardContent,
+    HelsinkiCityOwnedIcon,
+    organisationPrefixes,
     locale: currentLanguageCode,
   });
 
@@ -275,8 +286,9 @@ export function EventSelectionCollection({
   const eventsApolloClient = useEventsApolloClientFromConfig();
   const {
     currentLanguageCode,
+    organisationPrefixes,
     utils: { getRoutedInternalHref, getEventCardProps },
-    components: { EventCardContent },
+    components: { EventCardContent, HelsinkiCityOwnedIcon },
   } = useConfig();
   // TODO: use initAmountOfEvents -field when it's null-issue is fixed
   const pageSize = collection.events.length; // collection.initAmountOfEvents
@@ -326,6 +338,8 @@ export function EventSelectionCollection({
       getRoutedInternalHref(link, type ?? ModuleItemTypeEnum.Event),
     getEventCardProps,
     EventCardContent,
+    HelsinkiCityOwnedIcon,
+    organisationPrefixes,
     locale: currentLanguageCode,
   });
 
@@ -337,11 +351,13 @@ export function getLocationsCollectionCards({
   getRoutedInternalHref,
   getLocationCardProps,
   VenueCardContent,
+  HelsinkiCityOwnedIcon,
 }: {
   items: VenueType[];
   getRoutedInternalHref: Config['utils']['getRoutedInternalHref'];
   getLocationCardProps: Config['utils']['getLocationCardProps'];
   VenueCardContent: React.FC<Record<string, unknown>>;
+  HelsinkiCityOwnedIcon: React.FC<Record<string, unknown>>;
 }) {
   const cards = items
     .map((item) => getLocationCardProps(item))
@@ -355,6 +371,10 @@ export function getLocationsCollectionCards({
           key={cardProps.id}
           {...cardProps}
           url={url}
+          titleIcon={
+            cardProps.withTitleIcon &&
+            HelsinkiCityOwnedIcon && <HelsinkiCityOwnedIcon />
+          }
           direction="fixed-vertical"
           customContent={
             VenueCardContent && <VenueCardContent location={items[i]} />
@@ -381,7 +401,7 @@ export function LocationsSelectionCollection({
   const venuesApolloClient = useVenuesApolloClientFromConfig();
   const {
     utils: { getRoutedInternalHref, getLocationCardProps },
-    components: { VenueCardContent },
+    components: { VenueCardContent, HelsinkiCityOwnedIcon },
   } = useConfig();
 
   const { data, loading } = useVenuesByIdsQuery({
@@ -414,6 +434,7 @@ export function LocationsSelectionCollection({
       getRoutedInternalHref(link, ModuleItemTypeEnum.Venue),
     getLocationCardProps,
     VenueCardContent,
+    HelsinkiCityOwnedIcon,
   });
 
   return <Collection {...delegatedProps} cards={cards} />;

diff --git a/src/core/configProvider/configContext.ts b/src/core/configProvider/configContext.ts
@@ -16,6 +16,7 @@ export type Config = {
   siteName: string;
   mainContentId?: string;
   internalHrefOrigins: string[];
+  organisationPrefixes: string[];
   currentLanguageCode: LanguageCodeEnum;
   fallbackImageUrls: string[];
   copy: {
@@ -50,13 +51,18 @@ export type Config = {
     EventCardContent?: React.FC<Record<string, unknown>>;
     VenueCardContent?: React.FC<Record<string, unknown>>;
     ArticleCardContent?: React.FC<Record<string, unknown>>;
+    HelsinkiCityOwnedIcon?: React.FC<Record<string, unknown>>;
   };
   apolloClient?: ApolloClient<NormalizedCacheObject>;
   eventsApolloClient?: ApolloClient<NormalizedCacheObject> | 'disabled';
   venuesApolloClient?: ApolloClient<NormalizedCacheObject> | 'disabled';
   utils: {
     getArticlePageCardProps: (item: ArticleType | PageType) => CardProps;
-    getEventCardProps: (item: EventType, locale: string) => CardProps;
+    getEventCardProps: (
+      item: EventType,
+      organisationPrefixes: string[],
+      locale: string,
+    ) => CardProps;
     getLocationCardProps: (item: VenueType) => CardProps;
     getIsHrefExternal: (href: string) => boolean;
     getRoutedInternalHref: (

diff --git a/src/core/configProvider/defaultConfig.tsx b/src/core/configProvider/defaultConfig.tsx
@@ -21,6 +21,7 @@ export const defaultConfig: Config = {
     './images/event_placeholder_C.jpg',
     './images/event_placeholder_D.jpg',
   ],
+  organisationPrefixes: [],
   copy: {
     breadcrumbNavigationLabel: 'Breadcrumb navigation',
     breadcrumbListLabel: 'breadcrumbs',

diff --git a/src/core/pageContent/utils.ts b/src/core/pageContent/utils.ts
@@ -107,6 +107,7 @@ export function getArticlePageCardProps(
 
 export function getEventCardProps(
   item: EventType,
+  organisationPrefixes,
   locale = DEFAULT_LOCALE,
 ): CardProps {
   const image = item.images.length > 0 ? item.images[0] : null;
@@ -123,6 +124,9 @@ export function getEventCardProps(
     clampText: true,
     direction: 'responsive' as CardProps['direction'],
     openLinkInNewTab: false,
+    withTitleIcon: organisationPrefixes.includes(
+      item?.publisher?.split(':')[0] ?? '',
+    ),
   };
 }
 
@@ -139,6 +143,9 @@ export function getLocationCardProps(item: VenueType): CardProps {
     clampText: true,
     direction: 'responsive' as CardProps['direction'],
     openLinkInNewTab: false,
+    withTitleIcon:
+      item.providerType === 'SELF_PRODUCED' &&
+      item.displayedServiceOwnerType === 'MUNICIPAL_SERVICE',
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,6 +9,8 @@ fragment listVenue on Venue { @@
         id
         label
       }
+      providerType
+      displayedServiceOwnerType
     }
     query VenuesByIds($ids: [ID!]!) {
@@ Expand Down @@