feat: add ingress requests page

Informasjonsforvaltning · Oct 9, 2023 · 190d2db · 190d2db
1 parent 245d90f
commit 190d2db
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 6 deletions.
diff --git a/src/l10n/en.json b/src/l10n/en.json
@@ -97,6 +97,7 @@
   "relatedBy": "Related by",
   "collaborationBetween": "A collaboration between:",
   "dateCreated": "Date created",
+  "date": "Date",
   "head": {
     "title": "National Data Catalog",
     "description": "The National Data Catalog – data.norge.no is the public website providing an overview of descriptions of datasets, concepts, APIs and information models. The content is supplied by various establishments, both public and private. The Digitalization Agency is responsible for the operation and development of the website."
@@ -1172,5 +1173,12 @@
     "email": "E-mail:",
     "submitNewProject": "You can register new projects here:",
     "submit": "Register"
+  },
+  "requestsPage": {
+    "title": "Requests",
+    "ingress": "Here you will find an overview of all requests published in the {lenke}. You can subscribe to, vote on, or comment on requests.",
+    "requests": "Requests from the Data Community",
+    "votes": "Number of Votes",
+    "views": "Number of Views"
   }
 }
diff --git a/src/l10n/nb.json b/src/l10n/nb.json
@@ -97,6 +97,7 @@
   "relatedBy": "Relatert av",
   "collaborationBetween": "Et samarbeid mellom:",
   "dateCreated": "Dato opprettet",
+  "date": "Dato",
   "head": {
     "title": "Felles datakatalog",
     "description": "Felles datakatalog – data.norge.no er det offentlige nettstedet som gir oversikt over beskrivelser av datasett, begrep, api-er og informasjonsmodeller. Innholdet blir levert av ulike virksomheter, offentlige og private. Det er Digitaliseringsdirektoratet som er ansvarlig for drift og utvikling av nettstedet."
@@ -1172,5 +1173,12 @@
     "email": "E-post:",
     "submitNewProject": "Her kan du melde inn nye prosjekter:",
     "submit": "Meld inn"
+  },
+  "requestsPage": {
+    "title": "Etterspørsler",
+    "ingress": "Her finner du en oversikt over alle etterspørsler publisert i {lenke}. Du kan abonnere på, stemme opp eller kommentere på etterspørsler.",
+    "requests": "Etterspørsler fra Datalandsbyen",
+    "votes": "Antall stemmer",
+    "views": "Antall visninger"
   }
 }
diff --git a/src/l10n/nn.json b/src/l10n/nn.json
@@ -1173,5 +1173,12 @@
     "email": "E-post:",
     "submitNewProject": "Her kan du melde inn nye prosjekt:",
     "submit": "Meld inn"
+  },
+  "requestsPage": {
+    "title": "Etterspurnadar",
+    "ingress": "Her finn du ei oversikt over alle etterspurnadar publisert i {lenke}. Du kan abonnere på, stemme opp eller kommentere på etterspurnadar.",
+    "requests": "Etterspurnadar frå Datalandsbyen",
+    "votes": "Antall stemmer",
+    "views": "Antall visningar"
   }
 }
diff --git a/src/pages/requests/index.tsx b/src/pages/requests/index.tsx
@@ -1,16 +1,18 @@
 import React, { FC, useEffect } from 'react';
 import { compose } from 'redux';
+import { Ingress, Link } from '@digdir/design-system-react';
 import withCommunity, {
   Props as CommunityProps
 } from '../../components/with-community';
 import withErrorBoundary from '../../components/with-error-boundary';
 import ErrorPage from '../error-page';
 import SC from './styled';
 import { formatDate } from '../../lib/date-utils';
+import Banner from '../../components/banner';
+import localization from '../../lib/localization';
 import env from '../../env';
 
 const { FDK_COMMUNITY_BASE_URI } = env;
-
 interface Props extends CommunityProps {}
 
 const RequestsPage: FC<Props> = ({
@@ -27,11 +29,23 @@ const RequestsPage: FC<Props> = ({
 
   return (
     <main id='content' className='container'>
+      <Banner title={localization.requestsPage.title} />
+      <SC.InfoText>
+        <Ingress size='medium'>
+          {localization.formatString(localization.requestsPage.ingress, {
+            lenke: (
+              <Link href={FDK_COMMUNITY_BASE_URI} eksternal>
+                {localization.community.title}
+              </Link>
+            )
+          })}
+        </Ingress>
+      </SC.InfoText>
       <SC.RequestsTitleRow>
-        <SC.RequestTitle>Etterspørsler fra Datalandsbyen</SC.RequestTitle>
-        <SC.RequestInfo>Dato</SC.RequestInfo>
-        <SC.RequestInfo>Antall stemmer</SC.RequestInfo>
-        <SC.RequestInfo>Antall visninger</SC.RequestInfo>
+        <SC.RequestTitle>{localization.requestsPage.requests}</SC.RequestTitle>
+        <SC.RequestInfo>{localization.date}</SC.RequestInfo>
+        <SC.RequestInfo>{localization.requestsPage.votes}</SC.RequestInfo>
+        <SC.RequestInfo>{localization.requestsPage.views}</SC.RequestInfo>
       </SC.RequestsTitleRow>
       {notDeletedRequests &&
         notDeletedRequests.map(topic => (

diff --git a/src/pages/requests/styled.ts b/src/pages/requests/styled.ts
@@ -43,10 +43,19 @@ const RequestInfo = styled.div`
   justify-content: center;
 `;
 
+const InfoText = styled.div`
+  display: flex;
+  max-width: 50%;
+  margin-top: 50px;
+  margin-bottom: 50px;
+  font-size: 1.6rem !important;
+`;
+
 export default {
   RequestRow,
   RequestsTitleRow,
   RequestTitle,
   RequestInfo,
-  RequestLink
+  RequestLink,
+  InfoText
 };