feat(web): Stepper - Add "Links" below answers in the history (#16815)

* Add links to history * Add key prop --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
island-is · Nov 12, 2024 · a89215d · a89215d
1 parent 9f04555
commit a89215d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 17 deletions.
diff --git a/apps/web/components/Stepper/Stepper/Stepper.css.ts b/apps/web/components/Stepper/Stepper/Stepper.css.ts
@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css'
+
 import { themeUtils } from '@island.is/island-ui/theme'
 
 export const container = style({
@@ -11,7 +12,7 @@ export const answerRowContainer = style({
   borderBottom: '1px solid lightgrey',
   ...themeUtils.responsiveStyle({
     lg: {
-      gridTemplateColumns: '5.3fr 3.7fr 1fr',
+      gridTemplateColumns: '5.3fr 3.7fr',
     },
   }),
 })
diff --git a/apps/web/components/Stepper/Stepper/Stepper.tsx b/apps/web/components/Stepper/Stepper/Stepper.tsx
@@ -10,8 +10,10 @@ import {
   GridContainer,
   GridRow,
   Link,
+  LinkV2,
   RadioButton,
   Select,
+  Stack,
   Text,
 } from '@island.is/island-ui/core'
 import { isRunningOnEnvironment } from '@island.is/shared/utils'
@@ -60,6 +62,7 @@ interface QuestionAndAnswer {
   question: string
   answer: string
   slug: string
+  links?: { label?: string; href?: string }[]
 }
 
 const getInitialStateAndAnswersByQueryParams = (
@@ -111,6 +114,7 @@ const getInitialStateAndAnswersByQueryParams = (
         question: stepQuestion,
         answer: selectedOption.label,
         slug: selectedOption.value,
+        links: selectedOption.linksToDisplayInHistory ?? [],
       })
     }
   }
@@ -259,7 +263,7 @@ const Stepper = ({
   ) => {
     const accumulatedAnswers: string[] = []
 
-    return questionsAndAnswers.map(({ question, answer, slug }, i) => {
+    return questionsAndAnswers.map(({ question, answer, slug, links }, i) => {
       const previouslyAccumulatedAnswers = [...accumulatedAnswers]
       accumulatedAnswers.push(slug)
       const query = {
@@ -280,22 +284,56 @@ const Stepper = ({
               {question}
             </Text>
           </Box>
-          <Box marginRight={2}>
-            <Text color="purple600">{answer}</Text>
-          </Box>
-          <Box textAlign="right">
-            <Link
-              shallow={true}
-              href={{
-                pathname: urlWithoutQueryParams,
-                query: query,
-              }}
+
+          <Stack space={1}>
+            <Box
+              display="flex"
+              justifyContent="spaceBetween"
+              alignItems="flexStart"
+              rowGap={2}
+              columnGap={2}
             >
-              <Button variant="text" icon="pencil" size="small" nowrap={true}>
-                {n('changeSelection', 'Breyta')}
-              </Button>
-            </Link>
-          </Box>
+              <Box>
+                <Text color="purple600">{answer}</Text>
+              </Box>
+              <Box textAlign="right">
+                <Link
+                  shallow={true}
+                  href={{
+                    pathname: urlWithoutQueryParams,
+                    query: query,
+                  }}
+                >
+                  <Button
+                    variant="text"
+                    icon="pencil"
+                    size="small"
+                    nowrap={true}
+                  >
+                    {n('changeSelection', 'Breyta')}
+                  </Button>
+                </Link>
+              </Box>
+            </Box>
+            {links && links.length > 0 && (
+              <Stack space={2}>
+                {links
+                  .filter((link) => Boolean(link.href) && Boolean(link.label))
+                  .map((link, index) => (
+                    <LinkV2
+                      key={index}
+                      newTab={true}
+                      color="blue400"
+                      underline="normal"
+                      underlineVisibility="always"
+                      href={link.href as string}
+                    >
+                      {link.label}
+                    </LinkV2>
+                  ))}
+              </Stack>
+            )}
+          </Stack>
         </Box>
       )
     })

diff --git a/apps/web/components/Stepper/utils.ts b/apps/web/components/Stepper/utils.ts
@@ -45,6 +45,7 @@ interface StepOptionCMS {
   labelEN: string
   transition: string
   optionSlug: string
+  linksToDisplayInHistory?: { label?: string; href?: string }[]
 }
 
 interface StepOptionsFromSourceTransitionCMS {
@@ -71,6 +72,7 @@ interface StepOption {
   label: string
   transition: string
   value: string
+  linksToDisplayInHistory?: StepOptionCMS['linksToDisplayInHistory']
 }
 
 interface StateMeta {
@@ -380,6 +382,7 @@ const getStepOptions = (
       label: label,
       transition: o.transition,
       value: o.optionSlug,
+      linksToDisplayInHistory: o.linksToDisplayInHistory,
     }
   })
 }