Add alert banner

NDLANO · Jan 15, 2025 · 33cb5e6 · 33cb5e6
1 parent d581650
commit 33cb5e6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/containers/ListingPage/ListingPage.tsx b/src/containers/ListingPage/ListingPage.tsx
@@ -6,14 +6,24 @@
  *
  */
 import qs from "query-string";
+import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { gql, useQuery } from "@apollo/client";
+import styled from "@emotion/styled";
+import { colors, spacing } from "@ndla/core";
 import { Spinner } from "@ndla/icons";
 import ListingContainer from "./ListingContainer";
 import { GQLListingPageQuery, GQLListingPageQueryVariables } from "../../graphqlTypes";
 import { mapTagsToFilters, filterTags } from "../../util/listingHelpers";
 import NotFoundPage from "../NotFoundPage/NotFoundPage";
 
+const AlertBanner = styled.div`
+  text-align: center;
+  background-color: ${colors.support.yellow};
+  padding-block: ${spacing.nsmall};
+  padding-inline: ${spacing.normal};
+`;
+
 interface Props {
   isOembed: boolean;
 }
@@ -27,6 +37,7 @@ const getSubjectsString = (subjects: string | string[] | number | boolean | unde
 };
 
 const ListingPage = ({ isOembed }: Props): JSX.Element => {
+  const { t } = useTranslation();
   const location = useLocation();
   const searchParams = qs.parse(location.search, { arrayFormat: "bracket" });
   const querySubjects = getSubjectsString(searchParams["subjects"]);
@@ -49,12 +60,17 @@ const ListingPage = ({ isOembed }: Props): JSX.Element => {
   const filteredTags = filterTags(data?.listingPage?.tags ?? previousData?.listingPage?.tags ?? []);
 
   return (
-    <ListingContainer
-      isOembed={isOembed}
-      subjects={data?.listingPage?.subjects ?? previousData?.listingPage?.subjects ?? []}
-      tags={filteredTags}
-      filters={filters}
-    />
+    <>
+      <AlertBanner>
+        <div className="alert-banner">{t("alert")}</div>
+      </AlertBanner>
+      <ListingContainer
+        isOembed={isOembed}
+        subjects={data?.listingPage?.subjects ?? previousData?.listingPage?.subjects ?? []}
+        tags={filteredTags}
+        filters={filters}
+      />
+    </>
   );
 };
 

diff --git a/src/phrases/phrases-en.ts b/src/phrases/phrases-en.ts
@@ -14,6 +14,7 @@ const phrases = {
     toolTheme: "Tools",
     natureTheme: "Nature",
   },
+  alert: "This page will be discontinued in February 2025.",
 };
 
 export default phrases;
diff --git a/src/phrases/phrases-nb.ts b/src/phrases/phrases-nb.ts
@@ -14,6 +14,7 @@ const phrases = {
     toolTheme: "Verktøy",
     natureTheme: "Naturbruk",
   },
+  alert: "Denne siden vil bli avviklet i løpet av februar 2025.",
 };
 
 export default phrases;
diff --git a/src/phrases/phrases-nn.ts b/src/phrases/phrases-nn.ts
@@ -14,6 +14,7 @@ const phrases = {
     toolTheme: "Verktøy",
     natureTheme: "Naturbruk",
   },
+  alert: "Denne sida vil bli avvikla i løpet av februar 2025.",
 };
 
 export default phrases;