feat(Header): announcement banner

src/components/navigation/header/Header.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { defaultLanguage } from "i18n/supportedLanguages";
 import {
+  mockAnnouncement,
   mockLogo,
   mockNavigation,
   mockPathTranslations,
@@ -30,6 +31,7 @@ export const Default: Story = {
   args: {
     navigation: mockNavigation,
     assets: mockLogo,
+    announcement: mockAnnouncement,
     currentLanguage: defaultLanguage?.id ?? "en",
     pathTranslations: mockPathTranslations,
   },

src/components/navigation/header/Header.tsx

@@ -10,7 +10,9 @@ import { SanityImage } from "src/components/image/SanityImage";
 import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
+import Text from "src/components/text/Text";
 import { getHref } from "src/utils/link";
+import { Announcement } from "studio/lib/interfaces/announcement";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { InternationalizedString } from "studio/lib/interfaces/global";
 import { ILink, Navigation } from "studio/lib/interfaces/navigation";
@@ -22,6 +24,7 @@ import styles from "./header.module.css";
 export interface IHeader {
   navigation: Navigation;
   assets: BrandAssets;
+  announcement: Announcement | null;
   currentLanguage: string;
   pathTranslations: InternationalizedString;
 }
@@ -32,6 +35,7 @@ const filterLinks = (data: ILink[], type: string) =>
 export const Header = ({
   navigation,
   assets,
+  announcement,
   currentLanguage,
   pathTranslations,
 }: IHeader) => {
@@ -67,6 +71,11 @@ export const Header = ({
     };
   }, []);
 
+  const showAnnouncement =
+    announcement !== null &&
+    announcement.text.length > 0 &&
+    (!announcement.hideAfter || new Date(announcement.hideAfter) > new Date());
+
   return (
     <FocusOn
       enabled={isOpen}
@@ -120,6 +129,22 @@ export const Header = ({
             </div>
           )}
         </nav>
+        {showAnnouncement && (
+          <div className={styles.announcementWrapper}>
+            <div className={styles.announcementContent}>
+              <Text type={"bodySmall"}>{announcement.text}</Text>
+              {announcement.link && announcement.link.linkTitle && (
+                <div>
+                  <CustomLink
+                    link={announcement.link}
+                    size={"small"}
+                    color={"light"}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        )}
       </header>
     </FocusOn>
   );

src/components/navigation/header/HeaderPreview.tsx

@@ -1,41 +1,54 @@
 "use client";
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
+import { Announcement } from "studio/lib/interfaces/announcement";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { InternationalizedString } from "studio/lib/interfaces/global";
 import { Navigation } from "studio/lib/interfaces/navigation";
-import { BRAND_ASSETS_QUERY, NAV_QUERY } from "studio/lib/queries/siteSettings";
+import {
+  ANNOUNCEMENT_QUERY,
+  BRAND_ASSETS_QUERY,
+  NAV_QUERY,
+} from "studio/lib/queries/siteSettings";
 
 import { Header } from "./Header";
 
 export default function HeaderPreview({
   initialNav,
   initialBrandAssets,
+  initialAnnouncement,
   currentLanguage,
   pathTranslations,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialBrandAssets: QueryResponseInitial<BrandAssets>;
+  initialAnnouncement: QueryResponseInitial<Announcement | null>;
   currentLanguage: string;
   pathTranslations: InternationalizedString;
 }) {
   const { data: newNav } = useQuery<Navigation | null>(
     NAV_QUERY,
-    { language: initialNav.data.language },
+    { language: currentLanguage },
     { initial: initialNav },
   );
   const { data: newBrandAssets } = useQuery<BrandAssets | null>(
     BRAND_ASSETS_QUERY,
     {},
     { initial: initialBrandAssets },
   );
+  const { data: newAnnouncement } = useQuery<Announcement | null>(
+    ANNOUNCEMENT_QUERY,
+    { language: currentLanguage },
+    { initial: initialAnnouncement },
+  );
 
   return (
     newNav &&
     newBrandAssets && (
       <Header
         navigation={newNav}
         assets={newBrandAssets}
+        announcement={newAnnouncement}
         currentLanguage={currentLanguage}
         pathTranslations={pathTranslations}
       />

src/components/navigation/header/PageHeader.tsx

@@ -1,8 +1,14 @@
 import { getDraftModeInfo } from "src/utils/draftmode";
+import { isNonNullQueryResponse } from "src/utils/queryResponse";
+import { Announcement } from "studio/lib/interfaces/announcement";
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { InternationalizedString } from "studio/lib/interfaces/global";
 import { Navigation } from "studio/lib/interfaces/navigation";
-import { BRAND_ASSETS_QUERY, NAV_QUERY } from "studio/lib/queries/siteSettings";
+import {
+  ANNOUNCEMENT_QUERY,
+  BRAND_ASSETS_QUERY,
+  NAV_QUERY,
+} from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
 import { Header } from "./Header";
@@ -31,26 +37,28 @@ export default async function PageHeader({
     { perspective },
   );
 
+  const initialAnnouncement = await loadStudioQuery<Announcement | null>(
+    ANNOUNCEMENT_QUERY,
+    { language },
+    { perspective },
+  );
+
   return (
-    initialBrandAssets.data !== null &&
-    initialNav.data !== null &&
+    isNonNullQueryResponse(initialBrandAssets) &&
+    isNonNullQueryResponse(initialNav) &&
     (isDraftMode ? (
       <HeaderPreview
-        initialNav={{
-          ...initialNav,
-          data: initialNav.data,
-        }}
-        initialBrandAssets={{
-          ...initialBrandAssets,
-          data: initialBrandAssets.data,
-        }}
+        initialNav={initialNav}
+        initialBrandAssets={initialBrandAssets}
+        initialAnnouncement={initialAnnouncement}
         currentLanguage={language}
         pathTranslations={pathTranslations}
       />
     ) : (
       <Header
         navigation={initialNav.data}
         assets={initialBrandAssets.data}
+        announcement={initialAnnouncement.data}
         currentLanguage={language}
         pathTranslations={pathTranslations}
       />

src/components/navigation/header/header.module.css

@@ -149,3 +149,27 @@
   composes: button;
   background: url("/_assets/menu-close.svg") no-repeat 50% 50%;
 }
+
+.announcementWrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  background-color: var(--primary-bg-blue);
+  align-items: center;
+}
+
+.announcementContent {
+  display: flex;
+  gap: 2rem;
+
+  @media (max-width: 1024px) {
+    align-items: center;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+
+.announcementContent p {
+  font-weight: 600;
+  color: var(--primary-white);
+}

src/components/navigation/mockData.ts

@@ -1,5 +1,6 @@
 import primaryLogoFile from "src/stories/assets/energiai-primary-logo.svg";
 import secondaryLogoFile from "src/stories/assets/energiai-secondary-logo.svg";
+import { Announcement } from "studio/lib/interfaces/announcement";
 import { InternationalizedString } from "studio/lib/interfaces/global";
 import {
   LinkType,
@@ -131,6 +132,14 @@ export const mockLogo = {
   favicon: {},
 };
 
+export const mockAnnouncement: Announcement = {
+  language: "no",
+  text: "Mandag 21.10. er det TDC! Møt oss der!",
+  hideAfter: new Date(
+    new Date().setMonth(new Date().getMonth() + 1),
+  ).toISOString(),
+};
+
 // Mock Social Media Profiles
 export const mockSocialMediaProfiles: SocialMediaProfiles = {
   _id: "profile123",

src/styles/global.css

@@ -14,6 +14,7 @@ html {
   --primary-light: #f5a4c4;
   --primary-bg: #f2f2f2;
   --primary-bg-dark: #d9d9d9;
+  --primary-bg-blue: #0014cd;
 
   --primary-white-bright: #ffffff;
   --primary-white: #faf8f5;

studio/deskStructure.ts

@@ -1,6 +1,7 @@
 import {
   CaseIcon,
   CogIcon,
+  ConfettiIcon,
   EarthGlobeIcon,
   HeartIcon,
   ImagesIcon,
@@ -22,6 +23,7 @@ import { legalDocumentID } from "./schemas/documents/admin/legalDocuments";
 import { compensationsId } from "./schemas/documents/compensations";
 import { languageSettingsID } from "./schemas/documents/languageSettings";
 import { pageBuilderID } from "./schemas/documents/pageBuilder";
+import { announcementID } from "./schemas/documents/siteSettings/announcement";
 import { brandAssetsID } from "./schemas/documents/siteSettings/brandAssets";
 import { localeID } from "./schemas/documents/siteSettings/locale";
 import { soMeLinksID } from "./schemas/documents/siteSettings/socialMediaProfiles";
@@ -120,6 +122,15 @@ const siteSettingSection = (S: StructureBuilder) =>
                 .documentId(defaultSeoID)
                 .title("Default SEO"),
             ),
+          S.listItem()
+            .title("Announcement")
+            .icon(ConfettiIcon)
+            .child(
+              S.document()
+                .schemaType(announcementID)
+                .documentId(announcementID)
+                .title("Announcement"),
+            ),
         ]),
     );
 

studio/lib/interfaces/announcement.ts

@@ -0,0 +1,8 @@
+import { ILink } from "./navigation";
+
+export interface Announcement {
+  language: string;
+  text: string;
+  link?: ILink;
+  hideAfter?: string;
+}

studio/lib/queries/siteSettings.ts

@@ -80,3 +80,16 @@ export const DEFAULT_SEO_QUERY = groq`
     ${SEO_FRAGMENT}
   }
 `;
+
+// Announcement
+export const ANNOUNCEMENT_QUERY = groq`
+  *[_type == "announcement"][0]{
+    ${LANGUAGE_FIELD_FRAGMENT},
+    "text": ${translatedFieldFragment("text")},
+    "link": link {
+      ...,
+      ${TRANSLATED_LINK_FRAGMENT}
+    },
+    hideAfter
+  }
+`;

studio/schema.ts

@@ -7,6 +7,7 @@ import legalDocument from "./schemas/documents/admin/legalDocuments";
 import compensations from "./schemas/documents/compensations";
 import languageSettings from "./schemas/documents/languageSettings";
 import pageBuilder from "./schemas/documents/pageBuilder";
+import announcement from "./schemas/documents/siteSettings/announcement";
 import brandAssets from "./schemas/documents/siteSettings/brandAssets";
 import locale from "./schemas/documents/siteSettings/locale";
 import navigationManager from "./schemas/documents/siteSettings/navigationManager";
@@ -41,5 +42,6 @@ export const schema: { types: SchemaTypeDefinition[] } = {
     locale,
     richText,
     seo,
+    announcement,
   ],
 };

studio/schemas/documents/siteSettings/announcement.ts

@@ -0,0 +1,36 @@
+import { defineField, defineType } from "sanity";
+
+import { link } from "studio/schemas/objects/link";
+
+export const announcementID = "announcement";
+
+const announcement = defineType({
+  name: announcementID,
+  type: "document",
+  title: "Announcement",
+  description: "Message displayed in a banner at the top of each page.",
+  fields: [
+    defineField({
+      name: "text",
+      type: "internationalizedArrayString",
+      title: "Text",
+    }),
+    link,
+    defineField({
+      name: "hideAfter",
+      type: "datetime",
+      title: "Hide After",
+      description:
+        "The announcement will be hidden after the specified date and time.",
+    }),
+  ],
+  preview: {
+    prepare() {
+      return {
+        title: "Announcement",
+      };
+    },
+  },
+});
+
+export default announcement;