Merge pull request #238 from NDLANO/add-alert-banner

Add alert banner

package.json

@@ -82,6 +82,7 @@
     "ts-jest": "^29.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
+    "vercel": "^33.6.2",
     "webpack": "^5.76.0",
     "webpack-dev-middleware": "^6.0.1",
     "webpack-dev-server": "^4.11.0",

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,15 @@ 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>{t("alert")}</AlertBanner>
+      <ListingContainer
+        isOembed={isOembed}
+        subjects={data?.listingPage?.subjects ?? previousData?.listingPage?.subjects ?? []}
+        tags={filteredTags}
+        filters={filters}
+      />
+    </>
   );
 };
 

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;

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;

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;

yarn.lock

@@ -12078,6 +12078,7 @@ __metadata:
     ts-jest: "npm:^29.0.3"
     ts-node: "npm:^10.9.1"
     typescript: "npm:^4.9.3"
+    vercel: "npm:^33.6.2"
     webpack: "npm:^5.76.0"
     webpack-dev-middleware: "npm:^6.0.1"
     webpack-dev-server: "npm:^4.11.0"