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 82c5015c2..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';