diff --git a/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx b/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx index d42d13d63913..44e38cb37d59 100644 --- a/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx +++ b/apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx @@ -128,7 +128,7 @@ interface NavigationData { interface WrapperProps { pageTitle: string pageDescription?: string - pageFeaturedImage?: Image + pageFeaturedImage?: Image | null organizationPage: OrganizationPage breadcrumbItems?: BreadCrumbItem[] mainContent?: ReactNode diff --git a/apps/web/pages/s/[...slugs]/index.tsx b/apps/web/pages/s/[...slugs]/index.tsx index 9eca5605ac4c..e5bee55e773d 100644 --- a/apps/web/pages/s/[...slugs]/index.tsx +++ b/apps/web/pages/s/[...slugs]/index.tsx @@ -25,6 +25,9 @@ import OrganizationNewsArticle, { import OrganizationNewsList, { type OrganizationNewsListProps, } from '@island.is/web/screens/Organization/OrganizationNews/OrganizationNewsList' +import OrganizationParentSubpage, { + type OrganizationParentSubpageProps, +} from '@island.is/web/screens/Organization/ParentSubpage' import PublishedMaterial, { type PublishedMaterialProps, } from '@island.is/web/screens/Organization/PublishedMaterial/PublishedMaterial' @@ -54,6 +57,7 @@ enum PageType { STANDALONE_PARENT_SUBPAGE = 'standalone-parent-subpage', STANDALONE_LEVEL1_SITEMAP = 'standalone-level1-sitemap', STANDALONE_LEVEL2_SITEMAP = 'standalone-level2-sitemap', + PARENT_SUBPAGE = 'parent-subpage', SUBPAGE = 'subpage', ALL_NEWS = 'news', PUBLISHED_MATERIAL = 'published-material', @@ -76,6 +80,9 @@ const pageMap: Record> = { [PageType.STANDALONE_LEVEL2_SITEMAP]: (props) => ( ), + [PageType.PARENT_SUBPAGE]: (props) => ( + + ), [PageType.SUBPAGE]: (props) => , [PageType.ALL_NEWS]: (props) => , [PageType.PUBLISHED_MATERIAL]: (props) => , @@ -112,6 +119,13 @@ interface Props { type: PageType.STANDALONE_LEVEL2_SITEMAP props: StandaloneLevel2SitemapProps } + | { + type: PageType.PARENT_SUBPAGE + props: { + layoutProps: LayoutProps + componentProps: OrganizationParentSubpageProps + } + } | { type: PageType.SUBPAGE props: { @@ -282,10 +296,18 @@ Component.getProps = async (context) => { } try { + if (isStandaloneTheme) { + return { + page: { + type: PageType.STANDALONE_PARENT_SUBPAGE, + props: await StandaloneParentSubpage.getProps(modifiedContext), + }, + } + } return { page: { - type: PageType.STANDALONE_PARENT_SUBPAGE, - props: await StandaloneParentSubpage.getProps(modifiedContext), + type: PageType.PARENT_SUBPAGE, + props: await OrganizationParentSubpage.getProps(modifiedContext), }, } } catch (error) { @@ -360,10 +382,18 @@ Component.getProps = async (context) => { } try { + if (isStandaloneTheme) { + return { + page: { + type: PageType.STANDALONE_PARENT_SUBPAGE, + props: await StandaloneParentSubpage.getProps(modifiedContext), + }, + } + } return { page: { - type: PageType.STANDALONE_PARENT_SUBPAGE, - props: await StandaloneParentSubpage.getProps(modifiedContext), + type: PageType.PARENT_SUBPAGE, + props: await OrganizationParentSubpage.getProps(modifiedContext), }, } } catch (error) { diff --git a/apps/web/screens/Organization/ParentSubpage.tsx b/apps/web/screens/Organization/ParentSubpage.tsx new file mode 100644 index 000000000000..3ae364be44fb --- /dev/null +++ b/apps/web/screens/Organization/ParentSubpage.tsx @@ -0,0 +1,123 @@ +import { useRouter } from 'next/router' + +import { + Box, + GridColumn, + GridContainer, + GridRow, + Stack, + TableOfContents, + Text, +} from '@island.is/island-ui/core' +import { OrganizationWrapper } from '@island.is/web/components' +import { Query } from '@island.is/web/graphql/schema' +import { useLinkResolver, useNamespace } from '@island.is/web/hooks' +import useContentfulId from '@island.is/web/hooks/useContentfulId' +import { useI18n } from '@island.is/web/i18n' +import { withMainLayout } from '@island.is/web/layouts/main' +import type { Screen, ScreenContext } from '@island.is/web/types' + +import { + getProps, + StandaloneParentSubpageProps, +} from './Standalone/ParentSubpage' +import { getSubpageNavList, SubPageContent } from './SubPage' + +type OrganizationParentSubpageScreenContext = ScreenContext & { + organizationPage?: Query['getOrganizationPage'] +} + +export type OrganizationParentSubpageProps = StandaloneParentSubpageProps + +const OrganizationParentSubpage: Screen< + OrganizationParentSubpageProps, + OrganizationParentSubpageScreenContext +> = ({ + organizationPage, + parentSubpage, + selectedHeadingId, + subpage, + tableOfContentHeadings, + namespace, +}) => { + const router = useRouter() + const { activeLocale } = useI18n() + const { linkResolver } = useLinkResolver() + const n = useNamespace(namespace) + useContentfulId(organizationPage.id, parentSubpage.id, subpage.id) + + return ( + + + + + + + {parentSubpage.childLinks.length > 1 && ( + + + {parentSubpage.title} + + { + const href = tableOfContentHeadings.find( + (heading) => heading.headingId === headingId, + )?.href + if (href) { + router.push(href) + } + }} + tableOfContentsTitle={ + namespace?.['OrganizationTableOfContentsTitle'] ?? + activeLocale === 'is' + ? 'Efnisyfirlit' + : 'Table of contents' + } + selectedHeadingId={selectedHeadingId} + /> + + )} + + + + + 1 ? 'h2' : 'h1' + } + /> + + + ) +} + +OrganizationParentSubpage.getProps = getProps + +export default withMainLayout(OrganizationParentSubpage) diff --git a/apps/web/screens/Organization/Standalone/ParentSubpage.tsx b/apps/web/screens/Organization/Standalone/ParentSubpage.tsx index 9f30ee2920a4..7191f959e12a 100644 --- a/apps/web/screens/Organization/Standalone/ParentSubpage.tsx +++ b/apps/web/screens/Organization/Standalone/ParentSubpage.tsx @@ -138,7 +138,7 @@ const StandaloneParentSubpage: Screen< ) } -StandaloneParentSubpage.getProps = async ({ +export const getProps: typeof StandaloneParentSubpage['getProps'] = async ({ apolloClient, locale, query, @@ -262,4 +262,6 @@ StandaloneParentSubpage.getProps = async ({ } } +StandaloneParentSubpage.getProps = getProps + export default StandaloneParentSubpage diff --git a/apps/web/screens/Organization/SubPage.tsx b/apps/web/screens/Organization/SubPage.tsx index 6d81780073b2..dd2850892088 100644 --- a/apps/web/screens/Organization/SubPage.tsx +++ b/apps/web/screens/Organization/SubPage.tsx @@ -1,4 +1,4 @@ -import { useRouter } from 'next/router' +import { NextRouter, useRouter } from 'next/router' import { ParsedUrlQuery } from 'querystring' import { SliceType } from '@island.is/island-ui/contentful' @@ -27,6 +27,7 @@ import { import { SLICE_SPACING } from '@island.is/web/constants' import { ContentLanguage, + OrganizationPage, Query, QueryGetNamespaceArgs, QueryGetOrganizationPageArgs, @@ -214,6 +215,27 @@ export const SubPageContent = ({ ) } +export const getSubpageNavList = ( + organizationPage: OrganizationPage | null | undefined, + router: NextRouter, +): NavigationItem[] => { + const pathname = new URL(router.asPath, 'https://island.is').pathname + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore make web strict + return organizationPage?.menuLinks.map(({ primaryLink, childrenLinks }) => ({ + title: primaryLink?.text, + href: primaryLink?.url, + active: + primaryLink?.url === pathname || + childrenLinks.some((link) => link.url === pathname), + items: childrenLinks.map(({ text, url }) => ({ + title: text, + href: url, + active: url === pathname, + })), + })) +} + type SubPageScreenContext = ScreenContext & { organizationPage?: Query['getOrganizationPage'] } @@ -239,24 +261,6 @@ const SubPage: Screen = ({ useContentfulId(...contentfulIds) - const pathname = new URL(router.asPath, 'https://island.is').pathname - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore make web strict - const navList: NavigationItem[] = organizationPage?.menuLinks.map( - ({ primaryLink, childrenLinks }) => ({ - title: primaryLink?.text, - href: primaryLink?.url, - active: - primaryLink?.url === pathname || - childrenLinks.some((link) => link.url === pathname), - items: childrenLinks.map(({ text, url }) => ({ - title: text, - href: url, - active: url === pathname, - })), - }), - ) - return ( = ({ } navigationData={{ title: n('navigationTitle', 'Efnisyfirlit'), - items: navList, + items: getSubpageNavList(organizationPage, router), }} > {customContent ? (