fix(KERN): fix links on the PageHeader and Footer (#3165)

Author: ingriddorio

app/components/kern/KernStandaloneLink.tsx

@@ -1,7 +1,7 @@
 import { mustachePlaceholderRegex } from "~/services/security/mustachePlaceholder";
 import { isExternalUrl, isFileDownloadUrl } from "~/util/url";
-import { OpenInNewTabIcon } from "~/components/common/OpenInNewTabIcon";
 import classNames from "classnames";
+import { KernIcon } from "./common/KernIcon";
 
 type KernStandaloneLinkProps = Readonly<{
   url: string;
@@ -43,7 +43,7 @@ export const KernStandaloneLink = ({
     <a {...anchorProps} className={className} data-testid={dataTestid}>
       {icon}
       {text}
-      {shouldOpenNewTab && <OpenInNewTabIcon />}
+      {shouldOpenNewTab && <KernIcon name="open-in-new" />}
     </a>
   );
 };

app/components/kern/layout/KernFooter.tsx

@@ -54,7 +54,7 @@ export default function KernPageHeader({
           >
             <a
               href="/"
-              className="kern-title"
+              className="kern-link"
               aria-label={`${title} - ${linkLabel}`}
             >
               {title}
@@ -65,15 +65,15 @@ export default function KernPageHeader({
                   href={"/leichtesprache"}
                   className="kern-link kern-link--small"
                 >
-                  <KernIcon name="local-library" />
+                  <KernIcon name="local-library" className="flex-shrink-0" />
                   {translations.pageHeader.leichtesprache.de}
                 </a>
 
                 <a
                   href={"/gebaerdensprache"}
                   className="kern-link kern-link--small"
                 >
-                  <KernIcon name="sign-language" />
+                  <KernIcon name="sign-language" className="flex-shrink-0" />
                   {"Gebärdensprache"}{" "}
                   {/*translations.pageHeader.gebaerdensprache.de */}
                 </a>

app/components/kern/layout/KernPageHeader.tsx

@@ -0,0 +1,48 @@
+import Image, { type ImageProps } from "~/components/common/Image";
+import { GridItem } from "~/components/layout/grid/GridItem";
+import { Grid } from "~/components/layout/grid/Grid";
+import { KernFooterExternalLinks } from "./KernFooterExternalLinks";
+import { KernFooterDeletePersonalData } from "./KernFooterDeletePersonalData";
+import { KernFooterInternalLinks } from "./KernFooterInternalLinks";
+
+type FooterProps = Readonly<{
+  image?: ImageProps;
+  showDeletionBanner?: boolean;
+  ariaLabel?: string;
+}>;
+
+export default function KernFooter({
+  image,
+  showDeletionBanner = false,
+  ariaLabel,
+}: FooterProps) {
+  return (
+    <>
+      <Grid className="py-40 px-0 print:pb-0">
+        <GridItem
+          mdColumn={{ start: 1, span: 8 }}
+          lgColumn={{ start: 1, span: 3 }}
+          xlColumn={{ start: 1, span: 3 }}
+          className="flex flex-col gap-kern-space-large"
+        >
+          {image && (
+            <div className="forced-colors:bg-black">
+              <Image {...image} />
+            </div>
+          )}
+          <KernFooterExternalLinks />
+        </GridItem>
+        <GridItem
+          mdColumn={{ start: 1, span: 8 }}
+          lgColumn={{ start: 4, span: 9 }}
+          xlColumn={{ start: 4, span: 9 }}
+          className="[grid-row:2] md:[grid-row:2] lg:[grid-row:1] xl:[grid-row:1]"
+          aria-label={ariaLabel}
+        >
+          <KernFooterInternalLinks />
+        </GridItem>
+      </Grid>
+      {showDeletionBanner && <KernFooterDeletePersonalData />}
+    </>
+  );
+}

app/components/kern/layout/footer/KernFooter.tsx

@@ -0,0 +1,31 @@
+import { Grid } from "~/components/layout/grid/Grid";
+import { GridItem } from "~/components/layout/grid/GridItem";
+import { GridSection } from "~/components/layout/grid/GridSection";
+import { translations } from "~/services/translations/translations";
+import { footerContent } from "./footerContent";
+
+export const KernFooterDeletePersonalData = () => {
+  const personalDataDeleteLink = footerContent.find((section) =>
+    section.type.includes("deletionBanner"),
+  )?.content[0];
+
+  return (
+    <GridSection className="bg-kern-neutral-025">
+      <Grid>
+        <GridItem
+          mdColumn={{ start: 1, span: 8 }}
+          lgColumn={{ start: 3, span: 8 }}
+          xlColumn={{ start: 2, span: 10 }}
+          className="text-white print:hidden text-center pt-16 pb-16"
+        >
+          <div className="text-center print:hidden">
+            <a className="kern-link" href={personalDataDeleteLink?.url}>
+              {translations["delete-data"].footerLinkLabel.de ??
+                personalDataDeleteLink?.text}
+            </a>
+          </div>
+        </GridItem>
+      </Grid>
+    </GridSection>
+  );
+};

app/components/kern/layout/footer/KernFooterDeletePersonalData.tsx

@@ -0,0 +1,32 @@
+import { KernIcon } from "../../common/KernIcon";
+import { footerContent } from "./footerContent";
+
+export const KernFooterExternalLinks = () => {
+  const externalLinksSections = footerContent.filter((section) =>
+    section.type.includes("externalLink"),
+  );
+  return (
+    <div>
+      {externalLinksSections.map((section) => {
+        const link = section.content[0];
+        return (
+          <p key={section.key} className="kern-body gap-kern-space-default">
+            {section.title}{" "}
+            <a
+              href={link.url}
+              className="kern-link inline-flex items-center gap-1"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <KernIcon
+                name="open-in-new"
+                className="w-[1em] h-[1em] flex-shrink-0 mt-4"
+              />
+              {link.text}
+            </a>
+          </p>
+        );
+      })}
+    </div>
+  );
+};

app/components/kern/layout/footer/KernFooterExternalLinks.tsx

@@ -0,0 +1,46 @@
+import { footerContent } from "./footerContent";
+
+export type KernFooterInternalLinksProps = {
+  ariaLabel?: string;
+};
+
+export const KernFooterInternalLinks = ({
+  ariaLabel,
+}: KernFooterInternalLinksProps) => {
+  const internalLinksSections = footerContent.filter((section) =>
+    section.type.includes("internalLink"),
+  );
+
+  return (
+    <nav
+      className="flex flex-col sm:flex-row justify-between print:hidden"
+      aria-label={ariaLabel}
+    >
+      {internalLinksSections.map((section) => {
+        const ariaLabelledBy = `footer-list-${section.key}`;
+        return (
+          <div
+            key={section.key}
+            className="flex flex-col gap-kern-space-small py-kern-space-large"
+          >
+            <h2 className="kern-body--bold">{section.sectionName}</h2>
+            <ul
+              aria-labelledby={ariaLabelledBy}
+              className="list-none! flex flex-col gap-kern-space-small"
+            >
+              {section.content.map((link) => {
+                return (
+                  <li key={link.url}>
+                    <a href={link.url} className="kern-link">
+                      {link.text ?? ""}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        );
+      })}
+    </nav>
+  );
+};