fix(KERN): replace KernStandaloneLink component by a link tag, fix styling, remove unused files, fix icon shrink (#3172)

Author: ingriddorio

app/components/kern/KernStandaloneLink.tsx

@@ -12,7 +12,7 @@ export function KernIcon({
 }: Readonly<IconProps>) {
   return (
     <svg
-      className={`app-icon ${className}`}
+      className={`app-icon ${className} flex-shrink-0`}
       width={size}
       height={size}
       fill="currentColor"

app/components/kern/common/KernIcon.tsx

@@ -1,7 +1,6 @@
 import { Grid } from "~/components/layout/grid/Grid";
 import { GridItem } from "~/components/layout/grid/GridItem";
 import { GridSection } from "~/components/layout/grid/GridSection";
-import { KernStandaloneLink } from "../KernStandaloneLink";
 import { KernIcon } from "~/components/kern/common/KernIcon";
 
 type KernBreadcrumb = {
@@ -53,11 +52,12 @@ export default function KernBreadcrumbs({
                     {breadcrumb.title}
                   </span>
                 ) : (
-                  <KernStandaloneLink
-                    text={breadcrumb.title ?? ""}
-                    url={breadcrumb.url ?? ""}
-                    className="increase-tap-area text-kern-16 p-0!"
-                  />
+                  <a
+                    href={breadcrumb.url ?? ""}
+                    className="increase-tap-area kern-link kern-link--small p-0!"
+                  >
+                    {breadcrumb.title ?? ""}
+                  </a>
                 )}
               </div>
             ))}

app/components/kern/layout/KernBreadcrumbs.tsx

@@ -8,12 +8,9 @@ import {
   stateIsActive,
   stateIsWarning,
 } from "~/services/navigation/navState";
-import KeyboardArrowLeft from "@digitalservicebund/icons/KeyboardArrowLeft";
-import SvgWarningAmber from "@digitalservicebund/icons/WarningAmberRounded";
 import { getMobileButtonAreaTitles } from "~/components/navigation/getMobileButtonAreaTitles";
 import classNames from "classnames";
 import { KernIcon } from "../common/KernIcon";
-import { KernStandaloneLink } from "../KernStandaloneLink";
 
 const DATA_TESTID_STEP_STEPPER_LINK = "step-stepper-link";
 
@@ -39,19 +36,19 @@ const StepStepperLinks = ({
           const isWarningStep = stateIsWarning(step.state);
           return (
             <div className="flex flex-row pl-16 pr-0 pb-16" key={step.label}>
-              <KernStandaloneLink
-                url={step.href}
+              <a
+                href={step.href}
                 className="truncate text-left mw-[70vw]"
-                icon={<KeyboardArrowLeft className="inline" />}
-                text={`${translations.navigationMobile.toStep.de} ${step.label} (${step.stepIndex}/${stepsStepper.length})`}
-                dataTestid={DATA_TESTID_STEP_STEPPER_LINK}
+                data-testid={DATA_TESTID_STEP_STEPPER_LINK}
                 aria-describedby={isWarningStep ? step.href : undefined}
-              />
+              >
+                <KernIcon name="chevron-left" className="inline" />
+                {`${translations.navigationMobile.toStep.de} ${step.label} (${step.stepIndex}/${stepsStepper.length})`}
+              </a>
               {isWarningStep && (
-                <SvgWarningAmber
-                  data-testid="icon-warning"
-                  className="pl-2"
-                  id={step.href}
+                <KernIcon
+                  name="warning"
+                  className="pl-2 fill-kern-feedback-warning!"
                   aria-label={translations.navigation.navigationItemWarning.de}
                 />
               )}