Move featured links into a reusable component

apps/web/components/FeaturedLinks/FeaturedLinks.tsx

@@ -0,0 +1,47 @@
+import { Inline, LinkV2, Tag } from '@island.is/island-ui/core'
+import type { Featured } from '@island.is/web/graphql/schema'
+import { type LinkType, useLinkResolver } from '@island.is/web/hooks'
+
+interface FeaturedLinksProps {
+  links: Featured[]
+}
+
+export const FeaturedLinks = ({ links }: FeaturedLinksProps) => {
+  const { linkResolver } = useLinkResolver()
+  return (
+    <Inline space={2}>
+      {links.map(({ title, attention, thing }) => {
+        const cardUrl = linkResolver(thing?.type as LinkType, [
+          thing?.slug as string,
+        ])
+        return cardUrl?.href && cardUrl?.href.length > 0 ? (
+          <Tag
+            key={title}
+            {...(cardUrl.href.startsWith('/')
+              ? {
+                  CustomLink: ({ children, ...props }) => (
+                    <LinkV2
+                      key={title}
+                      {...props}
+                      {...cardUrl}
+                      dataTestId="featured-link"
+                    >
+                      {children}
+                    </LinkV2>
+                  ),
+                }
+              : { href: cardUrl.href })}
+            variant="blue"
+            attention={attention}
+          >
+            {title}
+          </Tag>
+        ) : (
+          <Tag key={title} variant="blue" attention={attention}>
+            {title}
+          </Tag>
+        )
+      })}
+    </Inline>
+  )
+}

apps/web/components/Organization/Slice/FeaturedLinksSlice/FeaturedLinksSlice.tsx

@@ -0,0 +1,17 @@
+import { Stack, Text } from '@island.is/island-ui/core'
+import { FeaturedLinks } from '@island.is/web/components'
+import { FeaturedLinks as FeaturedLinksSchema } from '@island.is/web/graphql/schema'
+
+interface FeaturedLinksSliceProps {
+  slice: FeaturedLinksSchema
+}
+
+export const FeaturedLinksSlice = ({ slice }: FeaturedLinksSliceProps) => {
+  if (!slice.featuredLinks?.length) return null
+  return (
+    <Stack space={2}>
+      <Text variant="h4">{slice.title}</Text>
+      <FeaturedLinks links={slice.featuredLinks} />
+    </Stack>
+  )
+}

apps/web/components/Organization/Slice/SliceMachine.tsx

@@ -107,6 +107,10 @@ const LatestGenericListItems = dynamic(() =>
   import('@island.is/web/components').then((mod) => mod.LatestGenericListItems),
 )
 
+const FeaturedLinksSlice = dynamic(() =>
+  import('@island.is/web/components').then((mod) => mod.FeaturedLinksSlice),
+)
+
 interface SliceMachineProps {
   slice: Slice
   namespace?: Record<string, string>
@@ -220,6 +224,8 @@ export const renderSlice = (
     case 'LatestGenericListItems': {
       return <LatestGenericListItems slice={slice} />
     }
+    case 'FeaturedLinks':
+      return <FeaturedLinksSlice slice={slice} />
     default:
       return <RichText body={[slice]} />
   }

apps/web/components/SearchSection/SearchSection.tsx

@@ -7,18 +7,15 @@ import {
   GridColumn,
   GridContainer,
   GridRow,
-  Inline,
-  Link,
   Stack,
-  Tag,
   Text,
 } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
 import { TestSupport } from '@island.is/island-ui/utils'
 import { Locale } from '@island.is/shared/types'
-import { SearchInput } from '@island.is/web/components'
+import { FeaturedLinks, SearchInput } from '@island.is/web/components'
 import { GetFrontpageQuery } from '@island.is/web/graphql/schema'
-import { LinkType, useLinkResolver } from '@island.is/web/hooks/useLinkResolver'
+import { useLinkResolver } from '@island.is/web/hooks/useLinkResolver'
 
 import * as styles from './SearchSection.css'
 
@@ -107,50 +104,7 @@ export const SearchSection = ({
                   dataTestId="search-box"
                   colored
                 />
-                <Inline space={2}>
-                  {featured.map(
-                    ({
-                      title,
-                      attention,
-                      thing,
-                    }: {
-                      title: string
-                      attention: boolean
-                      thing: any
-                    }) => {
-                      const cardUrl = linkResolver(thing?.type as LinkType, [
-                        thing?.slug,
-                      ])
-                      return cardUrl?.href && cardUrl?.href.length > 0 ? (
-                        <Tag
-                          key={title}
-                          {...(cardUrl.href.startsWith('/')
-                            ? {
-                                CustomLink: ({ children, ...props }) => (
-                                  <Link
-                                    key={title}
-                                    {...props}
-                                    {...cardUrl}
-                                    dataTestId="featured-link"
-                                  >
-                                    {children}
-                                  </Link>
-                                ),
-                              }
-                            : { href: cardUrl.href })}
-                          variant="blue"
-                          attention={attention}
-                        >
-                          {title}
-                        </Tag>
-                      ) : (
-                        <Tag key={title} variant="blue" attention={attention}>
-                          {title}
-                        </Tag>
-                      )
-                    },
-                  )}
-                </Inline>
+                <FeaturedLinks links={featured} />
               </Stack>
             </Box>
           </GridColumn>

apps/web/components/real.ts

@@ -96,3 +96,5 @@ export * from './GenericList/GenericList'
 export * from './GenericList/LatestGenericListItems/LatestGenericListItems'
 export * from './connected/ParentalLeaveCalculator/ParentalLeaveCalculator'
 export * from './Organization/OrganizationIslandFooter'
+export * from './Organization/Slice/FeaturedLinksSlice/FeaturedLinksSlice'
+export * from './FeaturedLinks/FeaturedLinks'

apps/web/screens/queries/fragments.ts

@@ -922,8 +922,9 @@ export const slices = gql`
   }
 
   fragment FeaturedLinksFields on FeaturedLinks {
+    __typename
     title
-    links {
+    featuredLinks {
       title
       attention
       thing {
@@ -978,6 +979,7 @@ export const slices = gql`
     ...FeaturedEventsFields
     ...GenericListFields
     ...LatestGenericListItemsFields
+    ...FeaturedLinksFields
   }
 
   fragment AllSlices on Slice {

libs/cms/src/lib/models/featuredLinks.model.ts

@@ -2,19 +2,21 @@ import { Field, ObjectType } from '@nestjs/graphql'
 import { IFeaturedLinks } from '../generated/contentfulTypes'
 import { Featured, mapFeatured } from './featured.model'
 import { CacheField } from '@island.is/nest/graphql'
+import { SystemMetadata } from '@island.is/shared/types'
 
 @ObjectType()
 export class FeaturedLinks {
   @Field()
   title?: string
 
   @CacheField(() => [Featured], { nullable: true })
-  links?: Featured[] | null
+  featuredLinks?: Featured[] | null
 }
 
 export const mapFeaturedLinks = ({
   fields,
-}: IFeaturedLinks): FeaturedLinks => ({
+}: IFeaturedLinks): SystemMetadata<FeaturedLinks> => ({
+  typename: 'FeaturedLinks',
   title: fields.displayedTitle ?? '',
-  links: fields.links ? fields.links.map(mapFeatured) : [],
+  featuredLinks: fields.links ? fields.links.map(mapFeatured) : [],
 })