feat(web): Add image to generic list item (#17464)

* Add image to generic list item * Set title props on newscard for generic list item with image * Also update how we display dates overall * Minor fix after review --------- Co-authored-by: runarvestmann <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Jan 13, 2025 · 3849d14 · 3849d14
1 parent c57d0bf
commit 3849d14
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 6 deletions.
diff --git a/apps/web/components/GenericList/GenericList.tsx b/apps/web/components/GenericList/GenericList.tsx
@@ -26,12 +26,14 @@ import {
 } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
 import { Locale } from '@island.is/shared/types'
+import { NewsCard } from '@island.is/web/components'
 import {
   GenericListItem,
   GenericListItemResponse,
   GenericTag,
   GetGenericListItemsInputOrderBy,
   GetGenericListItemsQueryVariables,
+  Image as ImageSchema,
   Query,
 } from '@island.is/web/graphql/schema'
 import { useWindowSize } from '@island.is/web/hooks/useViewport'
@@ -89,7 +91,7 @@ export const NonClickableItem = ({ item }: ItemProps) => {
           <Stack space={0}>
             {item.date && (
               <Text variant="eyebrow" color="purple400">
-                {format(new Date(item.date), 'dd.MM.yyyy')}
+                {format(new Date(item.date), 'do MMMM yyyy')}
               </Text>
             )}
             <Text variant="h3" as="span" color="dark400">
@@ -144,6 +146,27 @@ export const ClickableItem = ({ item, baseUrl }: ClickableItemProps) => {
 
   const filterTags = item.filterTags ?? []
 
+  if (item.image) {
+    return (
+      <NewsCard
+        title={item.title}
+        introduction={
+          item.cardIntro?.length > 0 && (
+            <Box>{webRichText(item.cardIntro ?? [])}</Box>
+          )
+        }
+        href={href ?? ''}
+        image={item.image as ImageSchema}
+        readMoreText=""
+        titleAs="h3"
+        titleVariant="h3"
+        titleTextColor="blue400"
+        date={item.date ?? ''}
+        dateTextColor="purple400"
+      />
+    )
+  }
+
   return (
     <FocusableBox
       padding={[2, 2, 3]}
@@ -161,7 +184,7 @@ export const ClickableItem = ({ item, baseUrl }: ClickableItemProps) => {
                 <Box className={styles.clickableItemTopRowContainer}>
                   <Inline space={2} justifyContent="spaceBetween">
                     <Text variant="eyebrow" color="purple400">
-                      {format(new Date(item.date), 'dd.MM.yyyy')}
+                      {format(new Date(item.date), 'do MMMM yyyy')}
                     </Text>
                     {icon && (
                       <Icon

diff --git a/apps/web/components/NewsCard/NewsCard.tsx b/apps/web/components/NewsCard/NewsCard.tsx
@@ -24,6 +24,7 @@ interface NewsCardProps {
   dateTextColor?: 'dark400' | 'purple400'
   titleVariant?: 'h2' | 'h3'
   titleAs?: 'h2' | 'h3' | 'h4'
+  titleTextColor?: 'dark400' | 'blue400'
   mini?: boolean
 }
 
@@ -37,6 +38,7 @@ export const NewsCard: React.FC<React.PropsWithChildren<NewsCardProps>> = ({
   dateTextColor = 'dark400',
   titleVariant = 'h2',
   titleAs = 'h3',
+  titleTextColor = 'dark400',
   mini,
 }) => {
   const [ref, { width }] = useMeasure()
@@ -67,7 +69,7 @@ export const NewsCard: React.FC<React.PropsWithChildren<NewsCardProps>> = ({
                 {formattedDate}
               </Text>
             )}
-            <Text variant="h2" as={titleAs}>
+            <Text variant="h2" as={titleAs} color={titleTextColor}>
               {title}
             </Text>
           </Stack>
@@ -107,7 +109,7 @@ export const NewsCard: React.FC<React.PropsWithChildren<NewsCardProps>> = ({
               <Text variant="eyebrow" color={dateTextColor}>
                 {formattedDate}
               </Text>
-              <Text variant={titleVariant} as={titleAs}>
+              <Text variant={titleVariant} as={titleAs} color={titleTextColor}>
                 {title}
               </Text>
               {React.isValidElement(introduction) ? (
@@ -130,7 +132,7 @@ export const NewsCard: React.FC<React.PropsWithChildren<NewsCardProps>> = ({
               </Box>
             )}
           </Box>
-          {!!showImage && (
+          {!!showImage && image && (
             <Box flexGrow={0} width="full" className={styles.image}>
               <BackgroundImage
                 width={600}

diff --git a/apps/web/screens/GenericList/GenericListItem.css.ts b/apps/web/screens/GenericList/GenericListItem.css.ts
@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css'
+
+import { themeUtils } from '@island.is/island-ui/theme'
+
+export const floatedImage = style({
+  ...themeUtils.responsiveStyle({
+    sm: {
+      float: 'right',
+      width: '50%',
+      marginLeft: '16px',
+    },
+  }),
+})
diff --git a/apps/web/screens/GenericList/GenericListItem.tsx b/apps/web/screens/GenericList/GenericListItem.tsx
@@ -1,3 +1,6 @@
+import cn from 'classnames'
+
+import { Image } from '@island.is/island-ui/contentful'
 import { Box, GridContainer, Stack, Text } from '@island.is/island-ui/core'
 import { HeadWithSocialSharing, Webreader } from '@island.is/web/components'
 import type {
@@ -11,6 +14,7 @@ import { webRichText } from '@island.is/web/utils/richText'
 
 import type { Screen } from '../../types'
 import { GET_GENERIC_LIST_ITEM_BY_SLUG_QUERY } from '../queries/GenericList'
+import * as styles from './GenericListItem.css'
 
 export interface GenericListItemPageProps {
   item: GenericListItem
@@ -32,7 +36,7 @@ const GenericListItemPage: Screen<GenericListItemPageProps> = ({
         <Stack space={1}>
           {item.date && (
             <Text variant="eyebrow">
-              {format(new Date(item.date), 'dd.MM.yyyy')}
+              {format(new Date(item.date), 'do MMMM yyyy')}
             </Text>
           )}
           <Stack space={1}>
@@ -41,6 +45,26 @@ const GenericListItemPage: Screen<GenericListItemPageProps> = ({
             </Text>
             {showReadspeaker && <Webreader readClass="rs_read" marginTop={0} />}
           </Stack>
+          {item.image && (
+            <Box
+              paddingY={2}
+              className={cn({
+                [styles.floatedImage]: item.fullWidthImageInContent !== false,
+              })}
+            >
+              <Image
+                {...item?.image}
+                url={
+                  item?.image?.url
+                    ? item.image.url + '?w=1000&fm=webp&q=80'
+                    : ''
+                }
+                thumbnail={
+                  item?.image?.url ? item.image.url + '?w=50&fm=webp&q=80' : ''
+                }
+              />
+            </Box>
+          )}
           <Text as="div">{webRichText(item.content ?? [])}</Text>
         </Stack>
       </Box>

diff --git a/apps/web/screens/queries/GenericList.ts b/apps/web/screens/queries/GenericList.ts
@@ -25,6 +25,12 @@ export const GET_GENERIC_LIST_ITEMS_QUERY = gql`
         slug
         assetUrl
         externalUrl
+        image {
+          url
+          title
+          width
+          height
+        }
       }
       total
     }
@@ -43,6 +49,13 @@ export const GET_GENERIC_LIST_ITEM_BY_SLUG_QUERY = gql`
         ...AllSlices
         ${nestedFields}
       }
+      image {
+        url
+        title
+        width
+        height
+      }
+      fullWidthImageInContent
     }
   }
   ${slices}

diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts
@@ -976,6 +976,12 @@ export const slices = gql`
         }
         slug
         assetUrl
+        image {
+          url
+          title
+          width
+          height
+        }
       }
     }
   }

diff --git a/libs/cms/src/lib/generated/contentfulTypes.d.ts b/libs/cms/src/lib/generated/contentfulTypes.d.ts
@@ -1684,6 +1684,12 @@ export interface IGenericListItemFields {
 
   /** External Link */
   externalLink?: ILinkUrl | undefined
+
+  /** Image */
+  image?: Asset | undefined
+
+  /** Full Width Image In Content */
+  fullWidthImageInContent?: boolean | undefined
 }
 
 /** An item that belongs to a generic list */

diff --git a/libs/cms/src/lib/models/genericListItem.model.ts b/libs/cms/src/lib/models/genericListItem.model.ts
@@ -4,6 +4,7 @@ import { SliceUnion, mapDocument } from '../unions/slice.union'
 import { GenericList, mapGenericList } from './genericList.model'
 import { IGenericListItem } from '../generated/contentfulTypes'
 import { GenericTag, mapGenericTag } from './genericTag.model'
+import { Image, mapImage } from './image.model'
 
 @ObjectType()
 export class GenericListItem {
@@ -36,6 +37,12 @@ export class GenericListItem {
 
   @CacheField(() => [GenericTag], { nullable: true })
   filterTags?: GenericTag[]
+
+  @CacheField(() => Image, { nullable: true })
+  image?: Image | null
+
+  @Field(() => Boolean, { nullable: true })
+  fullWidthImageInContent?: boolean
 }
 
 export const mapGenericListItem = ({
@@ -67,5 +74,7 @@ export const mapGenericListItem = ({
     assetUrl,
     externalUrl: fields.externalLink?.fields?.url ?? '',
     filterTags: fields.filterTags ? fields.filterTags.map(mapGenericTag) : [],
+    image: fields.image ? mapImage(fields.image) : null,
+    fullWidthImageInContent: fields.fullWidthImageInContent ?? true,
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -976,6 +976,12 @@ export const slices = gql` @@
             }
             slug
             assetUrl
+            image {
+              url
+              title
+              width
+              height
+            }
           }
         }
       }
@@ Expand Down @@