diff --git a/apps/web/components/FeaturedLinks/FeaturedLinks.tsx b/apps/web/components/FeaturedLinks/FeaturedLinks.tsx new file mode 100644 index 000000000000..0b34edae41a0 --- /dev/null +++ b/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 ( + + {links.map(({ title, attention, thing }) => { + const cardUrl = linkResolver(thing?.type as LinkType, [ + thing?.slug as string, + ]) + return cardUrl?.href && cardUrl?.href.length > 0 ? ( + ( + + {children} + + ), + } + : { href: cardUrl.href })} + variant="blue" + attention={attention} + > + {title} + + ) : ( + + {title} + + ) + })} + + ) +} diff --git a/apps/web/components/Organization/Slice/FeaturedLinks/FeaturedLinks.tsx b/apps/web/components/Organization/Slice/FeaturedLinks/FeaturedLinks.tsx deleted file mode 100644 index aac1cdaac985..000000000000 --- a/apps/web/components/Organization/Slice/FeaturedLinks/FeaturedLinks.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Inline, LinkV2, Stack, Tag, Text } from '@island.is/island-ui/core' -import { FeaturedLinks as FeaturedLinksSchema } from '@island.is/web/graphql/schema' -import { LinkType, useLinkResolver } from '@island.is/web/hooks' - -interface FeaturedLinksProps { - slice: FeaturedLinksSchema -} - -export const FeaturedLinks = ({ slice }: FeaturedLinksProps) => { - const { linkResolver } = useLinkResolver() - return ( - - {slice.title} - - {(slice.links ?? []) - .filter( - (link) => Boolean(link.thing?.type) && Boolean(link.thing?.slug), - ) - .map(({ title, attention, thing }) => { - const cardUrl = linkResolver(thing?.type as LinkType, [ - thing?.slug as string, - ]) - return cardUrl?.href && cardUrl?.href.length > 0 ? ( - ( - - {children} - - ), - } - : { href: cardUrl.href })} - variant="blue" - attention={attention} - > - {title} - - ) : ( - - {title} - - ) - })} - - - ) -} diff --git a/apps/web/components/Organization/Slice/FeaturedLinksSlice/FeaturedLinksSlice.tsx b/apps/web/components/Organization/Slice/FeaturedLinksSlice/FeaturedLinksSlice.tsx new file mode 100644 index 000000000000..df1851d43057 --- /dev/null +++ b/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 ( + + {slice.title} + + + ) +} diff --git a/apps/web/components/Organization/Slice/SliceMachine.tsx b/apps/web/components/Organization/Slice/SliceMachine.tsx index ffdf63b2b304..5d55ae2b8e3a 100644 --- a/apps/web/components/Organization/Slice/SliceMachine.tsx +++ b/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 @@ -220,6 +224,8 @@ export const renderSlice = ( case 'LatestGenericListItems': { return } + case 'FeaturedLinks': + return default: return } diff --git a/apps/web/components/SearchSection/SearchSection.tsx b/apps/web/components/SearchSection/SearchSection.tsx index 2c19f84f4062..7c1b1f69d0b1 100644 --- a/apps/web/components/SearchSection/SearchSection.tsx +++ b/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 /> - - {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 ? ( - ( - - {children} - - ), - } - : { href: cardUrl.href })} - variant="blue" - attention={attention} - > - {title} - - ) : ( - - {title} - - ) - }, - )} - + diff --git a/apps/web/components/real.ts b/apps/web/components/real.ts index 0bfb24cebd7a..da37a0d9947f 100644 --- a/apps/web/components/real.ts +++ b/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' diff --git a/apps/web/screens/queries/fragments.ts b/apps/web/screens/queries/fragments.ts index 7003e554e721..29c5fb9fb23e 100644 --- a/apps/web/screens/queries/fragments.ts +++ b/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 { diff --git a/libs/cms/src/lib/models/featuredLinks.model.ts b/libs/cms/src/lib/models/featuredLinks.model.ts index 74fc548f7f8c..5f17410673e5 100644 --- a/libs/cms/src/lib/models/featuredLinks.model.ts +++ b/libs/cms/src/lib/models/featuredLinks.model.ts @@ -2,6 +2,7 @@ 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 { @@ -9,12 +10,13 @@ export class FeaturedLinks { title?: string @CacheField(() => [Featured], { nullable: true }) - links?: Featured[] | null + featuredLinks?: Featured[] | null } export const mapFeaturedLinks = ({ fields, -}: IFeaturedLinks): FeaturedLinks => ({ +}: IFeaturedLinks): SystemMetadata => ({ + typename: 'FeaturedLinks', title: fields.displayedTitle ?? '', - links: fields.links ? fields.links.map(mapFeatured) : [], + featuredLinks: fields.links ? fields.links.map(mapFeatured) : [], })