From cbc35f16b7ca69088352e7e78f5f762fe24a2b3b Mon Sep 17 00:00:00 2001 From: Hege Aalvik <48259307+hegeaal@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:39:38 +0200 Subject: [PATCH] feat: requests page setup + banner (#1783) --- package-lock.json | 99 +++++++++++++++++++++-- package.json | 2 + src/app/app.jsx | 8 +- src/components/banner/index.tsx | 27 +++++++ src/components/banner/styled.ts | 63 +++++++++++++++ src/components/banner/svg/ellipse-1.svg | 3 + src/components/banner/svg/rectangle-1.svg | 3 + src/constants/constants.js | 1 + src/l10n/en.json | 3 +- src/l10n/nb.json | 3 +- src/l10n/nn.json | 3 +- src/pages/requests/index.tsx | 10 +++ src/pages/requests/styled.ts | 1 + src/routes.ts | 6 +- 14 files changed, 218 insertions(+), 14 deletions(-) create mode 100644 src/components/banner/index.tsx create mode 100644 src/components/banner/styled.ts create mode 100644 src/components/banner/svg/ellipse-1.svg create mode 100644 src/components/banner/svg/rectangle-1.svg create mode 100644 src/pages/requests/index.tsx create mode 100755 src/pages/requests/styled.ts diff --git a/package-lock.json b/package-lock.json index 701db77eb..c3dc3c64c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,8 @@ "license": "Apache-2.0", "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", @@ -180,6 +182,11 @@ "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==", "dev": true }, + "node_modules/@altinn/figma-design-tokens": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@altinn/figma-design-tokens/-/figma-design-tokens-6.0.1.tgz", + "integrity": "sha512-8MbIZDZdDzeYwvQ1DaRUoVd6VkWjax/mlbq1haABwv0WX8++L426O9g2wg9YtZ+WeIa3JUSOhbiXMgpTVcXBDQ==" + }, "node_modules/@ampproject/remapping": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz", @@ -2870,6 +2877,27 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@digdir/design-system-react": { + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/@digdir/design-system-react/-/design-system-react-0.27.0.tgz", + "integrity": "sha512-w4PUb6ZFso1YOXa9EDVjsNvodpN6JABMmBifNjnXrg7lDF6CUFeqcq6Fn1jiFPj9bW8bLY/2fiVGJ7RwlAE0ow==", + "dependencies": { + "@altinn/figma-design-tokens": "^6.0.1", + "@digdir/design-system-tokens": "^0.7.0", + "@floating-ui/react": "0.25.2", + "@navikt/aksel-icons": "^3.2.4", + "react-number-format": "5.2.2" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/@digdir/design-system-tokens": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/@digdir/design-system-tokens/-/design-system-tokens-0.7.0.tgz", + "integrity": "sha512-6DwU6+KciZ8r0EZSBq0puSLlR5q5rejr95u6OLcdGCvUoQvr26j3ks/wk3Q/1MoPd/FM1hNgDmeu7neoTvYfSQ==" + }, "node_modules/@digitalbazaar/http-client": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@digitalbazaar/http-client/-/http-client-1.2.0.tgz", @@ -3261,18 +3289,53 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.4.tgz", - "integrity": "sha512-FPFLbg2b06MIw1dqk2SOEMAMX3xlrreGjcui5OTxfBDtaKTmh0kioOVjT8gcfl58juawL/yF+S+gnq8aUYQx/Q==" + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", + "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } }, "node_modules/@floating-ui/dom": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.12.tgz", - "integrity": "sha512-HeG/wHoa2laUHlDX3xkzqlUqliAfa+zqV04LaKIwNCmCNaW2p0fQi4/Kd0LB4GdFoJ2UllLFq5gWnXAd67lg7w==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", "dependencies": { - "@floating-ui/core": "^1.0.4" + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" } }, + "node_modules/@floating-ui/react": { + "version": "0.25.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.25.2.tgz", + "integrity": "sha512-3e10G9LFOgl32/SMWLBOwT7oVCtB+d5zBsU2GxTSVOvRgZexwno5MlYbc0BaXr+TR5EEGpqe9tg9OUbjlrVRnQ==", + "dependencies": { + "@floating-ui/react-dom": "^2.0.1", + "@floating-ui/utils": "^0.1.1", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz", + "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + }, "node_modules/@fluentui/date-time-utilities": { "version": "8.5.5", "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.5.5.tgz", @@ -6239,6 +6302,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, + "node_modules/@navikt/aksel-icons": { + "version": "3.4.2", + "resolved": "https://registry.npmjs.org/@navikt/aksel-icons/-/aksel-icons-3.4.2.tgz", + "integrity": "sha512-9fj+Jb4UrX3SDDzqJpKP3fvizdxtACIFNXgDiPaP/N/61pbeY4tZz/zrtWGtExLpDeg7dAyaiFH/hfo7nBg6nw==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -22176,6 +22244,18 @@ "react": "^16.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-number-format": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.2.2.tgz", + "integrity": "sha512-wCh64Z1HCwXcO2dbgkeYIaB+Rmp/fcsH8kAeRtUkc46dv1pIrgDjie2WkOqKBw8YqyqhwNdYgNFNQuuY+iGJ/g==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-paginate": { "version": "8.1.4", "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.1.4.tgz", @@ -24397,6 +24477,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 43ff1066c..e06d4b537 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.jsx b/src/app/app.jsx index d4028008f..fbda08b88 100644 --- a/src/app/app.jsx +++ b/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 ( diff --git a/src/components/banner/index.tsx b/src/components/banner/index.tsx new file mode 100644 index 000000000..51bc0101c --- /dev/null +++ b/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 = ({ title }) => ( + + + + + + {title} + + + + + +); + +export default Banner; diff --git a/src/components/banner/styled.ts b/src/components/banner/styled.ts new file mode 100644 index 000000000..1bf6901a4 --- /dev/null +++ b/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 +}; diff --git a/src/components/banner/svg/ellipse-1.svg b/src/components/banner/svg/ellipse-1.svg new file mode 100644 index 000000000..df665fb1c --- /dev/null +++ b/src/components/banner/svg/ellipse-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/banner/svg/rectangle-1.svg b/src/components/banner/svg/rectangle-1.svg new file mode 100644 index 000000000..ca21d9366 --- /dev/null +++ b/src/components/banner/svg/rectangle-1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/constants/constants.js b/src/constants/constants.js index 59cde63b1..a21e967eb 100644 --- a/src/constants/constants.js +++ b/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'; diff --git a/src/l10n/en.json b/src/l10n/en.json index 92d4f5dbc..2a05419d9 100644 --- a/src/l10n/en.json +++ b/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", diff --git a/src/l10n/nb.json b/src/l10n/nb.json index f3de55c94..9e4d68344 100644 --- a/src/l10n/nb.json +++ b/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", diff --git a/src/l10n/nn.json b/src/l10n/nn.json index b1f098930..9ff8e9b4f 100644 --- a/src/l10n/nn.json +++ b/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", diff --git a/src/pages/requests/index.tsx b/src/pages/requests/index.tsx new file mode 100644 index 000000000..28e30d5c1 --- /dev/null +++ b/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 = () => ( +
+ +
+); +export default RequestsPage; diff --git a/src/pages/requests/styled.ts b/src/pages/requests/styled.ts new file mode 100755 index 000000000..ff8b4c563 --- /dev/null +++ b/src/pages/requests/styled.ts @@ -0,0 +1 @@ +export default {}; diff --git a/src/routes.ts b/src/routes.ts index 52adb35c7..9529bc315 100644 --- a/src/routes.ts +++ b/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,