feat(web): Manual chapter links (#16314)

* Add chapter links

* Dont take up space

* Set single expand to false

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/Organization/Wrapper/OrganizationWrapper.tsx

@@ -1146,6 +1146,7 @@ export const OrganizationWrapper: React.FC<
                         type="button"
                         variant="text"
                         truncate
+                        unfocusable
                       >
                         {backLink.text}
                       </Button>

apps/web/screens/Manual/Manual.css.ts

@@ -13,7 +13,3 @@ export const inputContainer = style({
     },
   }),
 })
-
-export const smallLink = style({
-  fontSize: '14px',
-})

apps/web/screens/Manual/ManualChangelog.tsx

@@ -50,20 +50,21 @@ const ManualChangelog: ManualScreen = ({ manual, namespace }) => {
       namespace={namespace}
       socialTitle={generateOgTitle(manual?.title, manualChangelogTitle)}
     >
-      <Stack space={2}>
+      <Stack space={5}>
         <LinkV2
-          className={styles.smallLink}
+          className={styles.link}
           underline="small"
           underlineVisibility="always"
           href={linkResolver('manual', [manual?.slug as string]).href}
+          color="blue400"
         >
           {n(
             'manualFrontpage',
             activeLocale === 'is' ? 'Forsíða handbókar' : 'Manual frontpage',
           )}
         </LinkV2>
         <Divider />
-        <Box paddingTop={2}>
+        <Box>
           <Stack space={2}>
             <Text variant="h2" as="h1">
               {manualChangelogTitle}
@@ -94,7 +95,7 @@ const ManualChangelog: ManualScreen = ({ manual, namespace }) => {
         </Box>
       )}
       {changelog?.length > 0 && (
-        <Accordion>
+        <Accordion singleExpand={false}>
           {changelog.map(({ year, dates }) => (
             <AccordionItem
               labelUse="h2"

apps/web/screens/Manual/ManualChapter.tsx

@@ -7,7 +7,9 @@ import {
   Accordion,
   AccordionItem,
   Box,
+  Button,
   Divider,
+  Inline,
   LinkV2,
   Stack,
   TableOfContents,
@@ -91,27 +93,70 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
     initialScrollHasHappened.current = true
   }, [selectedItemId])
 
+  const { previousChapterUrl, nextChapterUrl } = useMemo(() => {
+    if (!manual?.slug || !manualChapter?.id) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: '',
+      }
+    }
+
+    const index = manual.chapters.findIndex(
+      (chapter) => chapter.id === manualChapter?.id,
+    )
+
+    if (index < 0) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: '',
+      }
+    }
+
+    const nextChapterSlug = manual.chapters[index + 1]?.slug
+
+    if (index === 0) {
+      return {
+        previousChapterUrl: '',
+        nextChapterUrl: nextChapterSlug
+          ? linkResolver('manualchapter', [manual.slug, nextChapterSlug]).href
+          : '',
+      }
+    }
+
+    const previousChapterSlug = manual.chapters[index - 1]?.slug
+
+    return {
+      previousChapterUrl: previousChapterSlug
+        ? linkResolver('manualchapter', [manual.slug, previousChapterSlug]).href
+        : '',
+      nextChapterUrl: nextChapterSlug
+        ? linkResolver('manualchapter', [manual.slug, nextChapterSlug]).href
+        : '',
+    }
+  }, [linkResolver, manual?.chapters, manual?.slug, manualChapter?.id])
+
   return (
     <ManualWrapper
       manual={manual}
       namespace={namespace}
       socialTitle={generateOgTitle(manual?.title, manualChapter?.title)}
     >
       {manualChapter && (
-        <Stack space={2}>
+        <Stack space={5}>
           <LinkV2
-            className={styles.smallLink}
             underline="small"
             underlineVisibility="always"
+            color="blue400"
             href={linkResolver('manual', [manual?.slug as string]).href}
+            className={styles.link}
           >
             {n(
               'manualFrontpage',
               activeLocale === 'is' ? 'Forsíða handbókar' : 'Manual frontpage',
             )}
           </LinkV2>
           <Divider />
-          <Box paddingTop={2}>
+          <Box>
             <Text variant="h2" as="h1">
               {manualChapter.title}
             </Text>
@@ -122,7 +167,7 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
 
       <Stack space={3}>
         {manualChapter && (
-          <Accordion>
+          <Accordion singleExpand={false}>
             {manualChapter.chapterItems.map((item) => (
               <AccordionItem
                 labelUse="h2"
@@ -154,6 +199,54 @@ const ManualChapter: ManualScreen = ({ manual, manualChapter, namespace }) => {
             ))}
           </Accordion>
         )}
+        {(Boolean(previousChapterUrl) || Boolean(nextChapterUrl)) && (
+          <Box paddingTop={3}>
+            <Inline space={3} alignY="center" justifyContent="spaceBetween">
+              <Box>
+                {previousChapterUrl && (
+                  <LinkV2 href={previousChapterUrl}>
+                    <Button
+                      preTextIcon="arrowBack"
+                      preTextIconType="filled"
+                      size="medium"
+                      type="button"
+                      variant="text"
+                      truncate
+                      unfocusable
+                    >
+                      {n(
+                        'manualPreviousChapter',
+                        activeLocale === 'is'
+                          ? 'Fyrri kafli'
+                          : 'Previous chapter',
+                      )}
+                    </Button>
+                  </LinkV2>
+                )}
+              </Box>
+              <Box>
+                {nextChapterUrl && (
+                  <LinkV2 href={nextChapterUrl}>
+                    <Button
+                      icon="arrowForward"
+                      iconType="filled"
+                      size="medium"
+                      type="button"
+                      variant="text"
+                      truncate
+                      unfocusable
+                    >
+                      {n(
+                        'manualNextChapter',
+                        activeLocale === 'is' ? 'Næsti kafli' : 'Next chapter',
+                      )}
+                    </Button>
+                  </LinkV2>
+                )}
+              </Box>
+            </Inline>
+          </Box>
+        )}
       </Stack>
     </ManualWrapper>
   )

apps/web/screens/Manual/components/ManualWrapper.tsx

@@ -33,7 +33,7 @@ export const ManualWrapper = ({
               paddingTop={0}
               sidebarContent={null}
             >
-              <Stack space={3}>
+              <Stack space={5}>
                 <ManualHeader manual={manual} namespace={namespace} />
                 {children}
               </Stack>