Setter opp less og importerer komponenter fra designsystemet

Author: ulrikah

craco.config.js

@@ -1,3 +1,20 @@
-module.exports = {
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const CracoLessPlugin = require('craco-less')
 
+module.exports = {
+    webpack: {
+        configure: {
+            devtool: 'hidden-source-map'
+        },
+    },
+    plugins: [
+        {
+            plugin: CracoLessPlugin,
+            options: {
+                lessLoaderOptions: {
+                    sourceMap: true
+                }
+            }
+        },
+    ],
 }

package-lock.json

@@ -11,6 +11,19 @@
     "@types/node": "^12.12.47",
     "@types/react": "^16.9.41",
     "@types/react-dom": "^16.9.8",
+    "classnames": "^2.2.6",
+    "craco-less": "^1.17.0",
+    "nav-frontend-chevron-style": "^0.3.5",
+    "nav-frontend-core": "^5.0.1",
+    "nav-frontend-lenkepanel": "^1.0.42",
+    "nav-frontend-lenkepanel-style": "^0.3.31",
+    "nav-frontend-lenker": "^1.0.38",
+    "nav-frontend-lenker-style": "^0.2.29",
+    "nav-frontend-paneler-style": "^0.3.21",
+    "nav-frontend-tabell-style": "^0.2.23",
+    "nav-frontend-typografi": "^2.0.21",
+    "nav-frontend-typografi-style": "^1.0.22",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

package.json

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, ReactElement } from 'react';
-import logo from './logo.svg';
+import Lenkepanel from 'nav-frontend-lenkepanel';
 import env from './utils/environment';
-import './App.css';
+
+import Tabell from './components/Tabell';
 
 function MeldingBoks(sykmeldingId : string, fnr: string) {
   return (
@@ -40,20 +41,17 @@ function App() : ReactElement {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          {' '}
-          <code>src/App.tsx</code>
-          {' '}
-          and save to reload.
-        </p>
         <div>
           <h3> Meldinger fra backend: </h3>
           {
             meldinger.map((melding : Melding) => MeldingBoks(melding.sykmeldingId, melding.fnr))
           }
         </div>
+        <Lenkepanel href="#" border tittelProps="innholdstittel">
+          Lenketekst
+        </Lenkepanel>
+        <Tabell />
+
       </header>
     </div>
   );

src/App.css

@@ -0,0 +1,32 @@
+import 'nav-frontend-tabell-style';
+import Lenke from 'nav-frontend-lenker';
+import React, { ReactElement } from 'react';
+
+function Tabell() : ReactElement {
+  return (
+    <table className="tabell">
+      <thead>
+        <tr>
+          <th role="columnheader" aria-sort="none"><Lenke href="#">ID</Lenke></th>
+          <th role="columnheader" aria-sort="descending" className="tabell__th--sortert-desc"><Lenke href="#">Fødselsnummer</Lenke></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>3</td>
+          <td className="tabell__td--sortert">Geordi</td>
+        </tr>
+        <tr>
+          <td>1</td>
+          <td className="tabell__td--sortert">Jean-Luc</td>
+        </tr>
+        <tr>
+          <td>2</td>
+          <td className="tabell__td--sortert">William</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+}
+
+export default Tabell;

src/App.tsx

@@ -13,7 +13,4 @@ ReactDOM.render(
   document.getElementById('root'),
 );
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister();