feat(Implement Kopfzeile) (#1499)

* add Kopfzeile component and custom Fira Sans font

* add Storybook component

app/components/Kopfzeile.tsx

@@ -0,0 +1,23 @@
+export default function Kopfzeile() {
+  return (
+    <div
+      className="px-16 flex items-center text-left gap-8 sm:gap-16 text-xs sm:text-base"
+      style={{
+        backgroundColor: "#f0f0f0",
+        fontFamily: "FiraSans, Calibri, Verdana, Arial, Helvetica, sans-serif",
+      }}
+    >
+      <span
+        aria-hidden="true"
+        className="flex border-solid h-12 sm:h-16 border-white border"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16">
+          <path fill="#000" d="M0 .5h24v5.333H0z" />
+          <path fill="red" d="M0 5.833h24v5.333H0z" />
+          <path fill="#FACA2C" d="M0 11.167h24V16.5H0z" />
+        </svg>
+      </span>
+      <span>Eine offizielle Website der Bundesrepublik Deutschland</span>
+    </div>
+  );
+}

app/components/PageHeader.tsx

@@ -1,11 +1,13 @@
 import LocalLibrary from "@digitalservicebund/icons/LocalLibrary";
 import SignLanguage from "@digitalservicebund/icons/SignLanguage";
+import Kopfzeile from "~/components/Kopfzeile";
 import { StandaloneLink } from "~/components/StandaloneLink";
 
 type PageHeaderProps = {
   title: string;
   linkLabel: string;
   hideLinks: boolean;
+  showKopfzeile?: boolean;
   translations: {
     leichtesprache: string;
     gebaerdensprache: string;
@@ -18,9 +20,11 @@ export default function Header({
   linkLabel,
   hideLinks,
   translations,
+  showKopfzeile,
 }: Readonly<PageHeaderProps>) {
   return (
     <header>
+      {showKopfzeile && <Kopfzeile />}
       <nav
         className="py-20 px-16 flex flex-wrap justify-between"
         aria-label={translations.mainNavigationAriaLabel}

app/root.tsx

@@ -30,6 +30,7 @@ import {
   fetchTranslations,
 } from "~/services/cms/index.server";
 import { config as configWeb } from "~/services/env/web";
+import { isFeatureFlagEnabled } from "~/services/featureFlags";
 import Breadcrumbs from "./components/Breadcrumbs";
 import { CookieBanner } from "./components/cookieBanner/CookieBanner";
 import Footer from "./components/Footer";
@@ -95,6 +96,7 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
     videoTranslations,
     accessibilityTranslations,
     mainSession,
+    showKopfzeile,
   ] = await Promise.all([
     fetchSingleEntry("page-header"),
     fetchSingleEntry("footer"),
@@ -109,6 +111,7 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
     fetchTranslations("video"),
     fetchTranslations("accessibility"),
     mainSessionFromCookieHeader(cookieHeader),
+    isFeatureFlagEnabled("showKopfzeile"),
   ]);
 
   const shouldAddCacheControl = shouldSetCacheControlHeader(
@@ -121,6 +124,7 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
       header: {
         ...getPageHeaderProps(strapiHeader),
         hideLinks: flowIdFromPathname(pathname) !== undefined, // no headerlinks on flow pages
+        showKopfzeile,
       },
       footer: getFooterProps(strapiFooter),
       cookieBannerContent: cookieBannerContent,

app/services/featureFlags/index.ts

@@ -5,7 +5,8 @@ export type FeatureFlag =
   | "showFluggastrechteFormular"
   | "showGeldEinklagenFlow"
   | "showProzesskostenhilfeFlow"
-  | "showERV";
+  | "showERV"
+  | "showKopfzeile";
 
 export const isFeatureFlagEnabled = async (featureFlag: FeatureFlag) => {
   const { POSTHOG_API_KEY, POSTHOG_API_HOST } = config();

app/styles.css

@@ -25,6 +25,14 @@ body {
   min-height: 100vh;
 }
 
+@font-face {
+  font-family: FiraSans;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/FiraSans-Regular.woff2") format("woff2");
+}
+
 a {
   color: currentcolor;
 }

stories/Kopfzeile.stories.tsx

@@ -0,0 +1,14 @@
+import Kopfzeile from "~/components/Kopfzeile";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Component/Kopfzeile",
+  component: Kopfzeile,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Kopfzeile>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};