Merge pull request #80 from delta10/refactor/replace-summary-link-wit…

…h-nlds-link

refactor: use NLDS link in summary form

src/app/[locale]/incident/components/Stepper.tsx

@@ -5,7 +5,8 @@ import { Paths, usePathname } from '@/routing/navigation'
 import { useStepperStore } from '@/store/stepper_store'
 import { useEffect, useRef } from 'react'
 import { useFormStore } from '@/store/form_store'
-import { Button, Link, Paragraph } from '@/components/index'
+import { Button, Paragraph } from '@/components/index'
+import { NextLinkWrapper } from '@/components/ui/NextLinkWrapper'
 
 type StepperProps = {}
 
@@ -91,7 +92,7 @@ export const Stepper = ({}: StepperProps) => {
         >
           {items.map((item, index) => {
             return (
-              <Link
+              <NextLinkWrapper
                 onClick={() => goToStep(index + 1)}
                 href={item.path}
                 key={item.path}
@@ -114,7 +115,7 @@ export const Stepper = ({}: StepperProps) => {
                 >
                   {item.name}
                 </Paragraph>
-              </Link>
+              </NextLinkWrapper>
             )
           })}
         </div>
@@ -124,7 +125,9 @@ export const Stepper = ({}: StepperProps) => {
 
   return (
     <Button onClick={() => resetState()} asChild>
-      <Link href={'/incident'}>{t('new_notification')}</Link>
+      <NextLinkWrapper href={'/incident'}>
+        {t('new_notification')}
+      </NextLinkWrapper>
     </Button>
   )
 }

src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx

@@ -3,10 +3,8 @@
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
 import { useTranslations } from 'next-intl'
 import { Divider } from '@/components/ui/Divider'
-import { LinkWrapper } from '@/components/ui/LinkWrapper'
 import { useStepperStore } from '@/store/stepper_store'
 import React, { useEffect, useState } from 'react'
-import { LocationMap } from '@/components/ui/LocationMap'
 import { signalsClient } from '@/services/client/api-client'
 import { useRouter } from '@/routing/navigation'
 import { postAttachments } from '@/services/attachment/attachments'
@@ -15,6 +13,7 @@ import { _NestedLocationModel } from '@/services/client'
 import { Paragraph, Heading } from '@/components/index'
 import PreviewFile from '@/components/ui/upload/PreviewFile'
 import { SubmitAlert } from '@/app/[locale]/incident/summary/components/SubmitAlert'
+import { NextLinkWrapper } from '@/components/ui/NextLinkWrapper'
 
 const IncidentSummaryForm = () => {
   const t = useTranslations('describe-summary')
@@ -103,9 +102,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_one.title')}</Heading>
-          <LinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
+          <NextLinkWrapper href={'/incident'} onClick={() => goToStep(1)}>
             {t('steps.step_one.edit')}
-          </LinkWrapper>
+          </NextLinkWrapper>
         </div>
         <IncidentSummaryFormItem
           title={t('steps.step_one.input_heading')}
@@ -122,9 +121,9 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_two.title')}</Heading>
-          <LinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
+          <NextLinkWrapper href={'/incident/add'} onClick={() => goToStep(2)}>
             {t('steps.step_two.edit')}
-          </LinkWrapper>
+          </NextLinkWrapper>
         </div>
         {/* TODO: AssetSelect en LocationSelect hier tonen, indien een / beide zijn ingevuld */}
         {formState.extra_properties.map((answer) => {
@@ -153,9 +152,12 @@ const IncidentSummaryForm = () => {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-1 md:flex-row justify-between">
           <Heading level={2}>{t('steps.step_three.title')}</Heading>
-          <LinkWrapper href={'/incident/contact'} onClick={() => goToStep(3)}>
+          <NextLinkWrapper
+            href={'/incident/contact'}
+            onClick={() => goToStep(3)}
+          >
             {t('steps.step_three.edit')}
-          </LinkWrapper>
+          </NextLinkWrapper>
         </div>
         {formState.phone === '' ||
         (formState.phone === undefined && formState.email === '') ||

src/components/ui/NextLinkWrapper.tsx

@@ -0,0 +1,85 @@
+import { Link as DesignSystemLink } from '@/components'
+import type { LinkProps as DesignSystemLinkProps } from '@utrecht/component-library-react/dist/Link'
+import clsx from 'clsx'
+import { Link as NextLink, usePathname } from '@/routing/navigation'
+import React, { ForwardedRef, forwardRef } from 'react'
+
+export interface LinkProps extends DesignSystemLinkProps {
+  /**
+   * Background to the naming of this API:
+   * "same-url" is inspired by "same-origin" and "same-site" from CSP.
+   * "reload" is from `window.reload()`
+   * Angular also has `onSameUrlNavigation: 'ignore' | 'reload'
+   * URL spec also suggest using a `somethingURL` name:
+   * https://url.spec.whatwg.org/#url-apis-elsewhere
+   */
+  sameURL?: 'no-link' | 'reload'
+}
+
+export const NextLinkWrapper = forwardRef(
+  (
+    {
+      boxContent,
+      children,
+      external,
+      href,
+      className,
+      sameURL,
+      placeholder,
+      role,
+      ...restProps
+    }: LinkProps,
+    ref: ForwardedRef<HTMLAnchorElement>
+  ) => {
+    const pathname = usePathname()
+    const isSameURL = pathname === href
+
+    if (isSameURL && sameURL === 'no-link') {
+      return <>{children}</>
+    }
+
+    if ((isSameURL && sameURL === 'reload') || placeholder) {
+      /* Avoid client-side routing with `NextLink` for reload behavior */
+      /* Avoid `NextLink` for placeholder links that render no `href` */
+      return (
+        <DesignSystemLink
+          href={href}
+          external={external}
+          boxContent={boxContent}
+          placeholder={placeholder}
+          ref={ref}
+          aria-current={isSameURL ? 'page' : undefined}
+          {...restProps}
+        >
+          {children}
+        </DesignSystemLink>
+      )
+    } else {
+      return (
+        <NextLink
+          // @ts-ignore
+          href={href || ''}
+          ref={ref}
+          role={role || (placeholder ? 'link' : undefined)}
+          className={clsx(
+            'utrecht-link',
+            {
+              'utrecht-link--box-content': boxContent,
+              'utrecht-link--external': external,
+              'utrecht-link--placeholder': placeholder,
+            },
+            className
+          )}
+          aria-disabled={placeholder ? 'true' : undefined}
+          rel={external ? 'external noopener noreferrer' : undefined}
+          aria-current={isSameURL ? 'page' : undefined}
+          {...restProps}
+        >
+          {children}
+        </NextLink>
+      )
+    }
+  }
+)
+
+NextLinkWrapper.displayName = 'NextLinkWrapper'