FO-2760 La til header

Author: AlexGaard

package-lock.json

@@ -39,7 +39,11 @@
     "constate": "^1.3.2",
     "craco-less": "1.9.0",
     "dayjs": "^1.8.17",
-    "react": "^16.12.0",
+    "nav-frontend-core": "^4.0.11",
+    "nav-frontend-typografi": "^2.0.17",
+    "nav-frontend-typografi-style": "^1.0.18",
+    "prop-types": "^15.7.2",
+    "react": "^16.13.0",
     "react-dom": "^16.11.0",
     "react-scripts": "3.0.1",
     "typescript": "3.4.5"

package.json

@@ -1,17 +1,18 @@
 import React from 'react';
 import { DataFetcher } from './components/datafetcher';
 import StoreProvider from './stores/store-provider';
-import './app.less';
+import { Header } from './components/header/header';
 
 function App() {
 	return (
-		<main>
-			<StoreProvider>
+		<StoreProvider>
+			<Header />
+			<main>
 				<DataFetcher>
-					<p>Hello world</p>
+					<p />
 				</DataFetcher>
-			</StoreProvider>
-		</main>
+			</main>
+		</StoreProvider>
 	);
 }
 

src/app.less

@@ -0,0 +1,6 @@
+
+.header {
+  width: 100%;
+  padding: 2rem;
+  background-color: white;
+}

src/app.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Sidetittel } from 'nav-frontend-typografi';
+import './header.less';
+
+export const Header = () => {
+	return (
+		<div className="header">
+			<Sidetittel>Beslutteroversikt</Sidetittel>
+		</div>
+	);
+};

src/components/header/header.less

@@ -0,0 +1,11 @@
+.beslutteroversikt {
+  > * {
+    box-sizing: border-box;
+  }
+
+  background-color: #f4f4f4;
+}
+
+body {
+  margin: 0;
+}

src/components/header/header.tsx

@@ -4,6 +4,7 @@ import App from './app';
 import env from './utils/environment';
 import * as dayjs from 'dayjs';
 import 'dayjs/locale/nb';
+import './index.less';
 
 dayjs.locale('nb');