feat(web): Organization parent subpage - Use organization layout in case theme is not set to 'standalone'

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

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, FC<any>> = {
   [PageType.STANDALONE_LEVEL2_SITEMAP]: (props) => (
     <StandaloneLevel2Sitemap {...props} />
   ),
+  [PageType.PARENT_SUBPAGE]: (props) => (
+    <OrganizationParentSubpage {...props} />
+  ),
   [PageType.SUBPAGE]: (props) => <SubPage {...props} />,
   [PageType.ALL_NEWS]: (props) => <OrganizationNewsList {...props} />,
   [PageType.PUBLISHED_MATERIAL]: (props) => <PublishedMaterial {...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) {

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 (
+    <OrganizationWrapper
+      showExternalLinks={true}
+      showReadSpeaker={false}
+      pageTitle={subpage?.title ?? ''}
+      organizationPage={organizationPage}
+      fullWidthContent={true}
+      pageFeaturedImage={
+        subpage?.featuredImage ?? organizationPage?.featuredImage
+      }
+      breadcrumbItems={[
+        {
+          title: 'Ísland.is',
+          href: linkResolver('homepage').href,
+        },
+        {
+          title: organizationPage?.title ?? '',
+          href: linkResolver('organizationpage', [organizationPage?.slug]).href,
+        },
+      ]}
+      navigationData={{
+        title: n('navigationTitle', 'Efnisyfirlit'),
+        items: getSubpageNavList(organizationPage, router),
+      }}
+    >
+      <Box paddingTop={4}>
+        <GridContainer>
+          <GridRow>
+            <GridColumn span={['9/9', '9/9', '7/9']} offset={['0', '0', '1/9']}>
+              <Stack space={3}>
+                {parentSubpage.childLinks.length > 1 && (
+                  <Stack space={4}>
+                    <Text variant="h1" as="h1">
+                      {parentSubpage.title}
+                    </Text>
+                    <TableOfContents
+                      headings={tableOfContentHeadings}
+                      onClick={(headingId) => {
+                        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}
+                    />
+                  </Stack>
+                )}
+              </Stack>
+            </GridColumn>
+          </GridRow>
+        </GridContainer>
+        <SubPageContent
+          namespace={namespace}
+          organizationPage={organizationPage}
+          subpage={subpage}
+          subpageTitleVariant={
+            parentSubpage.childLinks.length > 1 ? 'h2' : 'h1'
+          }
+        />
+      </Box>
+    </OrganizationWrapper>
+  )
+}
+
+OrganizationParentSubpage.getProps = getProps
+
+export default withMainLayout(OrganizationParentSubpage)

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

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<SubPageProps, SubPageScreenContext> = ({
 
   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 (
     <OrganizationWrapper
       showExternalLinks={true}
@@ -292,7 +296,7 @@ const SubPage: Screen<SubPageProps, SubPageScreenContext> = ({
       }
       navigationData={{
         title: n('navigationTitle', 'Efnisyfirlit'),
-        items: navList,
+        items: getSubpageNavList(organizationPage, router),
       }}
     >
       {customContent ? (