Merge pull request #15 from navikt/nedtrekks-panel-for-visittkort

Nedtrekkspanel for visittkort

package.json

@@ -5,17 +5,23 @@
   "dependencies": {
     "@types/storybook__react": "^3.0.7",
     "classnames": "^2.2.5",
-    "lodash.throttle": "^4.1.1",
     "copyfiles": "^1.2.0",
+    "lodash.throttle": "^4.1.1",
+    "nav-frontend-chevron-style": "^0.3.4",
     "nav-frontend-core": "^4.0.5",
+    "nav-frontend-ekspanderbartpanel": "0.2.21",
+    "nav-frontend-ekspanderbartpanel-style": "0.3.8",
     "nav-frontend-js-utils": "^1.0.3",
     "nav-frontend-knapper": "^1.0.3",
     "nav-frontend-knapper-style": "^0.3.6",
+    "nav-frontend-paneler-style": "^0.3.7",
     "nav-frontend-typografi": "^2.0.2",
     "nav-frontend-typografi-style": "^1.0.7",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
+    "react-collapse": "^4.0.3",
     "react-dom": "^16.2.0",
+    "react-motion": "^0.5.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts-ts": "2.13.0",

src/@types/nav-frontend-ekspanderbartpanel.d.ts

@@ -0,0 +1,12 @@
+declare module 'nav-frontend-ekspanderbartpanel' {
+    import * as React from "react";
+
+    export interface EkspanderbartpanelBaseProps {
+        apen: boolean;
+        heading: React.ReactChildren | React.ReactChild;
+        ariaTittel: string;
+    }
+    export class EkspanderbartpanelBase extends React.Component<EkspanderbartpanelBaseProps, {}>{
+
+    }
+}

src/components/visittkort/Visittkort.less

@@ -0,0 +1,6 @@
+.visittkort {
+  margin-left: auto;
+  margin-right: auto;
+  width: 900px;
+  padding-top: 50px;
+}

src/components/visittkort/Visittkort.tsx

@@ -1,18 +1,30 @@
 import * as React from 'react';
 import { Person } from '../../models/person';
-import Innholdstittel from 'nav-frontend-typografi/lib/innholdstittel';
+import Innholdstittel from 'nav-frontend-typografi';
+
+import { EkspanderbartpanelBase } from 'nav-frontend-ekspanderbartpanel';
 
 interface VisittkortProps {
     person: Person;
 }
 
-function Visittkort({person}: VisittkortProps) {
+function Tittel({person}: VisittkortProps) {
     return (
         <div>
-            <Innholdstittel>{person.fornavn} {person.etternavn}</Innholdstittel>
+            <Innholdstittel type={'innholdstittel'}>{person.fornavn} {person.etternavn}</Innholdstittel>
             <p>{person.fodselsnummer}</p>
         </div>
     );
 }
 
+function Visittkort({person}: VisittkortProps) {
+    return (
+        <div className="visittkort">
+            <EkspanderbartpanelBase apen={true} heading={<Tittel person={person}/>} ariaTittel="Visittkort">
+                <p>Mer personinformasjon her..</p>
+            </EkspanderbartpanelBase>
+        </div>
+    );
+}
+
 export default Visittkort;

src/index.less

@@ -4,10 +4,12 @@
 @import '../node_modules/nav-frontend-core/less/core';
 @import '../node_modules/nav-frontend-typografi-style/src/index';
 @import '../node_modules/nav-frontend-knapper-style/src/index';
+@import '../node_modules/nav-frontend-ekspanderbartpanel-style/src/index';
 
 @import './App.less';
 @import './components/underarbeid/UnderArbeid.less';
 @import './components/startbilde/startbilde.less';
+@import './components/visittkort/Visittkort';
 
 
 body {

tsconfig.json

@@ -17,6 +17,10 @@
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true
   },
+  "include" : [
+    "src/@types/*",
+    "src/**/*"
+  ],
   "exclude": [
     "node_modules",
     "build",