From 09cc28b82fd0b45aefaeff445355f686df04bc5e Mon Sep 17 00:00:00 2001 From: Joakim Lindquister Date: Wed, 7 Mar 2018 15:07:11 +0100 Subject: [PATCH] Legg til ekspanderbart nedtrekkspanel for visittkort MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Det er dratt inn fra nav-frontend-moduler. Per nå så opplever jeg litt krøll med komponenten, sannsynligvis fordi den ikke er skrevet i React. InteliJ rapporterer at 'EkspanderbartpanelBase does not have any construct or call signature'. Det funker fint å kompilere og kjøre, men skriptet feiler ved hot-reload av visittkort-komponenten. Det kan være relatert til denne: https://github.com/Microsoft/TypeScript/issues/14558. Denne har blitt merget inn i master, men er ikke ute i en release enda. Det eksisterer også en PR i nav-frontend på å skrive om panelet til typecript som forhåpentligvis vil løse problemet: https://github.com/navikt/nav-frontend-moduler/pull/233 --- package-lock.json | 45 +++++++++++++++++++ package.json | 8 +++- .../nav-frontend-ekspanderbartpanel.d.ts | 11 +++++ src/components/visittkort/Visittkort.less | 6 +++ src/components/visittkort/Visittkort.tsx | 18 ++++++-- src/index.less | 2 + tsconfig.json | 3 ++ 7 files changed, 89 insertions(+), 4 deletions(-) create mode 100644 src/@types/nav-frontend-ekspanderbartpanel.d.ts diff --git a/package-lock.json b/package-lock.json index b4659557d..652cef267 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8713,11 +8713,26 @@ "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=" }, + "nav-frontend-chevron-style": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/nav-frontend-chevron-style/-/nav-frontend-chevron-style-0.3.4.tgz", + "integrity": "sha512-pAWxabxXujZhwgYUvkWyuuLEDbyYP52VmA0jeXicJT6vfxHewkycMIgP4TqPPrHtPyNx2SVEa+RPK+OiPMcRPw==" + }, "nav-frontend-core": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/nav-frontend-core/-/nav-frontend-core-4.0.5.tgz", "integrity": "sha1-MJyd5qUUbo6Ts/UtT8Qswwms3KE=" }, + "nav-frontend-ekspanderbartpanel": { + "version": "0.2.21", + "resolved": "https://registry.npmjs.org/nav-frontend-ekspanderbartpanel/-/nav-frontend-ekspanderbartpanel-0.2.21.tgz", + "integrity": "sha512-KBYE3mfosJSRHhLwZmHBE2zH+M9yFNkPKCdPqXGvwLjUPhZr6hIGO/1FCz4H1jUxM0Xesgn1cz5Jsq2whsaIAA==" + }, + "nav-frontend-ekspanderbartpanel-style": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/nav-frontend-ekspanderbartpanel-style/-/nav-frontend-ekspanderbartpanel-style-0.3.8.tgz", + "integrity": "sha512-n+rHb8uhY0dlxViygvd2FNZPtQa+pSQB7+TLpVfqlX5AC8LWaJPjE7d8CUer1+fr4uXIDaWc5IwGkIjC4pacoA==" + }, "nav-frontend-js-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/nav-frontend-js-utils/-/nav-frontend-js-utils-1.0.3.tgz", @@ -8733,6 +8748,11 @@ "resolved": "https://registry.npmjs.org/nav-frontend-knapper-style/-/nav-frontend-knapper-style-0.3.6.tgz", "integrity": "sha512-nxbE6SezQFFj+Gu1w5s4ktdVoBNY3ef3DRr5Uy2axuMXqy/KcSOgpX1nbZ2hQIxOpo1+FlDe0cqk1D3wb5qQfw==" }, + "nav-frontend-paneler-style": { + "version": "0.3.7", + "resolved": "https://registry.npmjs.org/nav-frontend-paneler-style/-/nav-frontend-paneler-style-0.3.7.tgz", + "integrity": "sha512-i6Swbgp8ZI7r79ZGvFoe8T/IGApLgg0Y0MTRlwcujvtHy4ibrbd8h5TYOKHiyVS3UQWyRhcQd8f15fLZWD49yA==" + }, "nav-frontend-typografi": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/nav-frontend-typografi/-/nav-frontend-typografi-2.0.2.tgz", @@ -10904,6 +10924,14 @@ "prop-types": "15.6.1" } }, + "react-collapse": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz", + "integrity": "sha512-OO4NhtEqFtz+1ma31J1B7+ezdRnzHCZiTGSSd/Pxoks9hxrZYhzFEddeYt05A/1477xTtdrwo7xEa2FLJyWGCQ==", + "requires": { + "prop-types": "15.6.1" + } + }, "react-dev-utils": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-4.2.1.tgz", @@ -11025,6 +11053,23 @@ "warning": "3.0.0" } }, + "react-motion": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz", + "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==", + "requires": { + "performance-now": "0.2.0", + "prop-types": "15.6.1", + "raf": "3.4.0" + }, + "dependencies": { + "performance-now": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz", + "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=" + } + } + }, "react-redux": { "version": "5.0.7", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz", diff --git a/package.json b/package.json index 5d15ff5e3..8e50d2266 100644 --- a/package.json +++ b/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", diff --git a/src/@types/nav-frontend-ekspanderbartpanel.d.ts b/src/@types/nav-frontend-ekspanderbartpanel.d.ts new file mode 100644 index 000000000..79c2cb926 --- /dev/null +++ b/src/@types/nav-frontend-ekspanderbartpanel.d.ts @@ -0,0 +1,11 @@ +declare module 'nav-frontend-ekspanderbartpanel' { + import * as React from "react"; + + export interface EkspanderbartpanelProps { + } + export default class EkspanderbartPanel extends React.Component{} + + export class EkspanderbartpanelBase extends React.Component{ + + } +} \ No newline at end of file diff --git a/src/components/visittkort/Visittkort.less b/src/components/visittkort/Visittkort.less index e69de29bb..7d0b08cd7 100644 --- a/src/components/visittkort/Visittkort.less +++ b/src/components/visittkort/Visittkort.less @@ -0,0 +1,6 @@ +.visittkort { + margin-left: auto; + margin-right: auto; + width: 900px; + padding-top: 50px; +} \ No newline at end of file diff --git a/src/components/visittkort/Visittkort.tsx b/src/components/visittkort/Visittkort.tsx index 46c0c03a4..187f9ca57 100644 --- a/src/components/visittkort/Visittkort.tsx +++ b/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 (
- {person.fornavn} {person.etternavn} + {person.fornavn} {person.etternavn}

{person.fodselsnummer}

); } +function Visittkort({person}: VisittkortProps) { + return ( +
+ } ariaTittel="Visittkort"> +

Mer personinformasjon her..

+ +
+ ); +} + export default Visittkort; \ No newline at end of file diff --git a/src/index.less b/src/index.less index d2a38e6a3..6490f9a58 100644 --- a/src/index.less +++ b/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 { diff --git a/tsconfig.json b/tsconfig.json index 859735414..c2b694525 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,9 @@ "suppressImplicitAnyIndexErrors": true, "noUnusedLocals": true }, + "include" : [ + "src/@types/*" + ], "exclude": [ "node_modules", "build",