feat: requests page setup + banner (#1783)

package.json

@@ -51,6 +51,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.3",
+    "@digdir/design-system-react": "^0.27.0",
+    "@digdir/design-system-tokens": "^0.7.0",
     "@emotion/styled": "^11.10.5",
     "@fellesdatakatalog/alert": "^0.3.6",
     "@fellesdatakatalog/button": "^0.2.10",

src/app/app.jsx

@@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
+import '@digdir/design-system-tokens/brand/digdir/tokens.css';
 import localization from '../lib/localization';
 import { MainPage } from '../pages/main-page/main-page';
 import { SearchPage } from '../pages/search-page/search-page';
@@ -46,7 +47,8 @@ import {
   PATHNAME_ABOUT_CONCEPTS,
   PATHNAME_ABOUT_INFORMATIONMODELS,
   PATHNAME_AI,
-  PATHNAME_TRANSPORT
+  PATHNAME_TRANSPORT,
+  PATHNAME_REQUESTS
 } from '../constants/constants';
 import ScrollToTop from '../components/scroll-to-top';
 import { getConfig } from '../config';
@@ -58,6 +60,7 @@ import { CmsArticlePage } from '../pages/cms-article-page/cms-article-page';
 import OrganizationsRouter from '../pages/organizations';
 import InformationPage from '../pages/cms-information-page';
 import TransportPage from '../pages/cms-transport-page';
+import RequestsPage from '../pages/requests';
 import { AiProjectPage } from '../pages/ai-project-page';
 import { parseSearchParams } from '../lib/location-history-helper';
 import routes from '../routes';
@@ -113,7 +116,8 @@ export function App({ language, onChangeLanguage }) {
     [PATHNAME_ABOUT_CONCEPTS]: InformationPage,
     [PATHNAME_ABOUT_INFORMATIONMODELS]: InformationPage,
     [PATHNAME_AI]: AiProjectPage,
-    [PATHNAME_TRANSPORT]: TransportPage
+    [PATHNAME_TRANSPORT]: TransportPage,
+    [PATHNAME_REQUESTS]: RequestsPage
   };
 
   return (

src/components/banner/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { FC } from 'react';
+import { Heading } from '@digdir/design-system-react';
+import SC from './styled';
+
+import EllipseSVG from './svg/ellipse-1.svg';
+import RectangleSVG from './svg/rectangle-1.svg';
+
+interface Props {
+  title: string;
+}
+
+const Banner: FC<Props> = ({ title }) => (
+  <SC.Container>
+    <SC.SvgEllipse>
+      <EllipseSVG />
+    </SC.SvgEllipse>
+    <SC.TitleContainer>
+      <Heading size='xlarge'>{title}</Heading>
+    </SC.TitleContainer>
+    <SC.SvgRectangle>
+      <RectangleSVG />
+    </SC.SvgRectangle>
+  </SC.Container>
+);
+
+export default Banner;

src/components/banner/styled.ts

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  color: #2d3741;
+  background-color: #ffffff;
+  overflow-wrap: break-word;
+  height: 160px;
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  overflow-wrap: break-word;
+  flex-grow: 1;
+  align-self: center;
+  justify-content: center;
+`;
+
+const SvgEllipse = styled.div`
+  position: absolute;
+  padding-top: 1.6rem;
+
+  @media screen and (max-width: 600px) {
+    .svgEllipse {
+      display: none;
+    }
+  }
+
+  @media (max-width: 1620px) {
+    .svgEllipse {
+      position: relative;
+    }
+`;
+
+const SvgRectangle = styled.div`
+  position: absolute;
+  right: 100px;
+  padding-bottom: 1.6rem;
+
+  @media screen and (max-width: 940px) {
+    .svgRectangle {
+      display: none;
+    }
+  }
+
+  @media screen and (max-width: 940px) {
+    .svgRectangle {
+      display: none;
+      position: relative;
+    }
+  }
+`;
+
+export default {
+  SvgRectangle,
+  SvgEllipse,
+  Container,
+  TitleContainer
+};

src/constants/constants.js

@@ -34,6 +34,7 @@ export const PATHNAME_AI = '/kunstig-intelligens';
 export const EXTERNAL_AI_PAGE =
   'https://www.digdir.no/kunstig-intelligens/kunstig-intelligens-i-offentlig-sektor/4276';
 export const PATHNAME_TRANSPORT = '/transport';
+export const PATHNAME_REQUESTS = '/requests';
 
 export const PARAGRAPH__BODY = 'paragraph--body';
 export const PARAGRAPH__IMAGE = 'paragraph--image';

src/l10n/en.json

@@ -198,7 +198,8 @@
     "apiTab": "APIs",
     "termTab": "Concepts",
     "informationModelTab": "Information models",
-    "serviceTab": "Services and events"
+    "serviceTab": "Services and events",
+    "requests": "Requests"
   },
   "hitstats": {
     "nosearch": "Search among {0} datasets, {1} APIs, {2} concepts and {3} information models",

src/l10n/nb.json

@@ -198,7 +198,8 @@
     "apiTab": "API-er",
     "termTab": "Begreper",
     "informationModelTab": "Informasjonsmodeller",
-    "serviceTab": "Tjenester og hendelser"
+    "serviceTab": "Tjenester og hendelser",
+    "requests": "Etterspørsler"
   },
   "hitstats": {
     "nosearch": "Søk blant {0} datasett, {1} API-er, {2} begreper og {3} informasjonsmodeller",

src/l10n/nn.json

@@ -198,7 +198,8 @@
     "apiTab": "API ",
     "termTab": "Omgrep",
     "informationModelTab": "Informasjonsmodellar",
-    "serviceTab": "Tenester og hendingar"
+    "serviceTab": "Tenester og hendingar",
+    "requests": "Etterspurnadar"
   },
   "hitstats": {
     "nosearch": "Søk blant {0} datasett, {1} API, {2} omgrep og {3} informasjonsmodellar",

src/pages/requests/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Banner from '../../components/banner';
+import localization from '../../lib/localization';
+
+const RequestsPage = () => (
+  <main id='content' className='container'>
+    <Banner title={localization.page.requests} />
+  </main>
+);
+export default RequestsPage;

src/pages/requests/styled.ts

@@ -0,0 +1 @@
+export default {};

src/routes.ts

@@ -26,7 +26,8 @@ import {
   PATHNAME_ABOUT_CONCEPTS,
   PATHNAME_ABOUT_INFORMATIONMODELS,
   PATHNAME_AI,
-  PATHNAME_TRANSPORT
+  PATHNAME_TRANSPORT,
+  PATHNAME_REQUESTS
 } from './constants/constants';
 
 const routes: any = {
@@ -61,7 +62,8 @@ const routes: any = {
     PATHNAME_ABOUT_CONCEPTS,
     PATHNAME_ABOUT_INFORMATIONMODELS,
     PATHNAME_AI,
-    PATHNAME_TRANSPORT
+    PATHNAME_TRANSPORT,
+    PATHNAME_REQUESTS
   ],
   publishing: [
     PATHNAME_PUBLISHING,