Får opp et initielt design (mangler ikoner)

navikt · Dec 5, 2017 · 0a6dbb8 · 0a6dbb8
1 parent 4ec5431
commit 0a6dbb8
Show file tree

Hide file tree

Showing 32 changed files with 357 additions and 66 deletions.
diff --git a/src/frontend/@types/nav-frontend-grid.d.ts b/src/frontend/@types/nav-frontend-grid.d.ts
@@ -0,0 +1,27 @@
+declare module 'nav-frontend-grid' {
+    import * as React from 'react';
+
+    export interface ContainerProps {
+        className?: string;
+        fluid?: boolean;
+    }
+
+    export interface RowProps {
+        className?: string;
+    }
+
+    export interface ColumnProps {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        className?: string;
+    }
+
+    export class Container extends React.Component<ContainerProps, {}> {
+    }
+    export class Row extends React.Component<RowProps, {}> {
+    }
+    export class Column extends React.Component<ColumnProps, {}> {
+    }
+}
diff --git a/src/frontend/@types/nav-frontend-lenkepanel.d.ts b/src/frontend/@types/nav-frontend-lenkepanel.d.ts
@@ -0,0 +1,11 @@
+declare module 'nav-frontend-lenkepanel' {
+    import * as React from 'react';
+
+    export interface ElementProps {
+        tittelProps?: string;
+        href: string;
+        children?: {};
+    }
+
+    export default class Lenkepanel extends React.Component<ElementProps, {}> {}
+}
diff --git a/src/frontend/@types/nav-frontend-paneler.d.ts b/src/frontend/@types/nav-frontend-paneler.d.ts
@@ -0,0 +1,10 @@
+declare module 'nav-frontend-paneler' {
+    import * as React from 'react';
+
+    export interface ElementProps {
+        children?: {};
+        className?: string;
+    }
+
+    export class Panel extends React.Component<ElementProps, {}> {}
+}
diff --git a/src/frontend/@types/nav-frontend-typografi.d.ts b/src/frontend/@types/nav-frontend-typografi.d.ts
@@ -0,0 +1,19 @@
+declare module 'nav-frontend-typografi' {
+    import * as React from 'react';
+
+    export interface ElementProps {
+        className?: string;
+        style?: {};
+        tag?: String;
+        role?: String;
+    }
+
+    export class Sidetittel extends React.Component<ElementProps, {}> {}
+    export class Undertittel extends React.Component<ElementProps, {}> {}
+    export class Normaltekst extends React.Component<ElementProps, {}> {}
+    export class EtikettLiten extends React.Component<ElementProps, {}> {}
+    export class Innholdstittel extends React.Component<ElementProps, {}> {}
+    export class Undertekst extends React.Component<ElementProps, {}> {}
+    export class UndertekstBold extends React.Component<ElementProps, {}> {}
+    export class Element extends React.Component<ElementProps, {}> {}
+}
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -5,12 +5,14 @@
   "private": true,
   "dependencies": {
     "classnames": "2.2.5",
-    "nav-frontend-chevron-style": "^0.3.4",
+    "nav-frontend-chevron-style": "0.3.4",
     "nav-frontend-core": "4.0.5",
     "nav-frontend-grid": "0.1.10",
     "nav-frontend-grid-style": "0.2.4",
     "nav-frontend-lenkepanel": "0.3.16",
     "nav-frontend-lenkepanel-style": "0.3.6",
+    "nav-frontend-paneler": "0.2.17",
+    "nav-frontend-paneler-style": "0.3.7",
     "nav-frontend-typografi": "1.0.12",
     "nav-frontend-typografi-style": "1.0.7",
     "react": "16.2.0",

diff --git a/src/frontend/public/index.css.map b/src/frontend/public/index.css.map
diff --git a/src/frontend/public/svg/dataskjerm.svg b/src/frontend/public/svg/dataskjerm.svg
diff --git a/src/frontend/src/app.tsx b/src/frontend/src/app.tsx
@@ -5,6 +5,7 @@ import IntlProvider from './Intl-provider';
 import Overskrift from './komponenter/overskrift/overskrift';
 import Oppgaver from './komponenter/oppgaver/oppgaver';
 import Tjenester from './komponenter/tjenester/tjenester';
+import Komigang from './komponenter/overskrift/kom-i-gang';
 
 const store = getStore();
 
@@ -15,11 +16,16 @@ class App extends React.Component {
                 <IntlProvider>
                     <div>
                         <Overskrift/>
-                        <Oppgaver />
-                        <Tjenester/>
+                        <div className="gray-background__wrapper">
+                            <div className="body__wrapper">
+                                <Komigang/>
+                                <Oppgaver />
+                                <Tjenester/>
+                            </div>
+                        </div>
                     </div>
                 </IntlProvider>
-            </Provider>
+            </Provider >
         );
     }
 }

diff --git a/src/frontend/src/index.less b/src/frontend/src/index.less
@@ -4,27 +4,59 @@
 @import '../node_modules/nav-frontend-core/less/core';
 @import '../node_modules/nav-frontend-grid-style/src/index';
 @import '../node_modules/nav-frontend-typografi-style/src/index';
+@import '../node_modules/nav-frontend-chevron-style/src/index';
+@import '../node_modules/nav-frontend-paneler-style/src/index';
+@import '../node_modules/nav-frontend-lenkepanel-style/src/index';
 
+@import './komponenter/oppgaver/oppgave';
+@import './komponenter/lenkeboks/lenkeboks';
+@import './komponenter/tjenester/tjenester';
 
-.oppgaver__wrapper {
+
+.body__wrapper {
     width: 70%;
     margin-left: auto;
     margin-right: auto;
 }
 
-.tjenester__wrapper {
-    text-align: center;
+.gray-background__wrapper {
+    background-color: @navLysGra;
 }
 
 .overskrift-veientilarbeid__wrapper {
+    padding-top: 3rem;
     text-align: center;
+    height: 10rem;
+    border-bottom: 2px solid @navBla;
+    background: @navLysBla url("./svg/dataskjerm.svg") no-repeat;
+    background-position: 20% 100%;
 }
-.overskrift-komigang__wrapper {
-    width: 70%;
-    text-align: center;
-    margin: auto;
+
+.kom-i-gang__wrapper {
+    padding-top:1rem;
+
+    .overskrift-kom-i-gang {
+        text-align: center;
+    }
+}
+
+.overskrift-komigang__panel {
     .beskrivelse-komigang {
         width: 50%;
-        margin: auto;
+        margin-left: auto;
+        margin-right:auto;
+    }
+}
+
+.overskrift-kom-i-gang, .overskrift-oppgaver, .overskrift-tjenester {
+    &::after {
+        border-bottom: 3px solid;
+        display: block;
+        content: '';
+        margin-top: 1rem;
+        width: 2rem;
+        margin-left: auto;
+        margin-right: auto;
+        color: @navGronn;
     }
-}
+}
diff --git a/src/frontend/src/komponenter/lenkeboks/lenkeboks.less b/src/frontend/src/komponenter/lenkeboks/lenkeboks.less
@@ -0,0 +1,76 @@
+
+.oppgaver__wrapper {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+
+    .overskrift-oppgaver {
+        text-align: center;
+    }
+
+    @media (max-width: 768px) {
+        display: block;
+    }
+    .lenkeboks {
+        .lenkeboks-overskrift {
+            margin-left: 0.5rem;
+            margin-top: 0.5rem;
+        }
+        .lenkeboks-beskrivelse {
+            margin-left: 0.5rem;
+            top: 3rem;
+            position:absolute;
+        }
+        min-height: 12rem;
+        margin-bottom: 1rem;
+        background-color: #ffffff;
+        display: inline-block;
+        border-radius: 4px;
+        position: relative;
+        z-index: 100;
+        cursor: pointer;
+        color: #3e3832;
+        text-decoration: none;
+        padding-bottom: 3rem;
+        width: calc(~'100%/3 - 1rem');
+
+        &:first-of-type {
+            margin-right: 1.5rem;
+        }
+        &:last-of-type {
+            margin-left: 1.5rem;
+        }
+
+        @media (max-width: 768px) {
+            &:first-child {
+                margin-right: 0;
+            }
+
+            &:last-child {
+                margin-left: 0;
+            }
+
+            width: 100%
+        }
+
+        &:hover {
+            box-shadow: #b7b1a9 0 2px 1px 0;
+            color: #005b82;
+
+            & .lenkeboks__indikator {
+                bottom: 12px;
+            }
+        }
+
+        &__indikator {
+            .chevron-mixin();
+            .chevron-orientasjon-mixin(hoyre);
+            position: absolute;
+            right: 50%;
+            bottom: 16px;
+            transition: bottom 250ms;
+        }
+
+    }
+}
+
diff --git a/src/frontend/src/komponenter/lenkeboks/lenkeboks.tsx b/src/frontend/src/komponenter/lenkeboks/lenkeboks.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface Props {
+    children: {};
+    href: string;
+}
+
+function Leneboks({children, href}: Props) {
+    return (
+        <a href={href} className="lenkeboks">
+            {children}
+            <span className="lenkeboks__indikator"/>
+        </a>
+    );
+}
+
+export default Leneboks;
diff --git a/src/frontend/src/komponenter/oppgaver/oppgave.less b/src/frontend/src/komponenter/oppgaver/oppgave.less
@@ -0,0 +1,3 @@
+.oppgave-tittel {
+    margin-bottom: 1rem;
+}
diff --git a/src/frontend/src/komponenter/oppgaver/oppgave.tsx b/src/frontend/src/komponenter/oppgaver/oppgave.tsx
@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { FormattedMessage, injectIntl, InjectedIntlProps } from 'react-intl';
+import Lenkeboks from '../lenkeboks/lenkeboks';
+import { Undertittel } from 'nav-frontend-typografi';
 
 interface Props {
     tittelId: string;
     beskrivelseId: string;
     lenkeId: string;
-    className: string;
 }
 
-function Oppgave({tittelId, beskrivelseId, lenkeId, className, intl}: Props & InjectedIntlProps) {
+function Oppgave({tittelId, beskrivelseId, lenkeId, intl}: Props & InjectedIntlProps) {
     return (
-        <a className={className} href={intl.messages[lenkeId]}>
-            <h3 className="typo-undertittel"><FormattedMessage id={tittelId}/></h3>
-            <div><FormattedMessage id={beskrivelseId}/></div>
-        </a>
+        <Lenkeboks href={intl.messages[lenkeId]}>
+            <Undertittel className="lenkeboks-overskrift blokk-m"><FormattedMessage id={tittelId}/></Undertittel>
+            <div className="lenkeboks-beskrivelse"><FormattedMessage id={beskrivelseId}/></div>
+        </Lenkeboks>
     );
 }
 

diff --git a/src/frontend/src/komponenter/oppgaver/oppgaver.tsx b/src/frontend/src/komponenter/oppgaver/oppgaver.tsx
@@ -1,27 +1,29 @@
 import * as React from 'react';
+import { Innholdstittel } from 'nav-frontend-typografi';
+import { FormattedMessage } from 'react-intl';
 import Oppgave from './oppgave';
 
 function Overskrifter() {
     return (
-        <div className="oppgaver__wrapper row blokk-xl">
-            <Oppgave
-                tittelId="overskrift-lenke-jobbsokerkompetanse"
-                beskrivelseId="beskrivelse-lenke-jobbsokerkompetanse"
-                lenkeId="lenke-din-jobbsokerkompetanse"
-                className="jobbsokerkompetanse-lenke col-md-4"
-            />
-            <Oppgave
-                tittelId="overskrift-lenke-jobbsokerkompetanse"
-                beskrivelseId="beskrivelse-lenke-jobbsokerkompetanse"
-                lenkeId="lenke-din-jobbsokerkompetanse"
-                className="jobbsokerkompetanse-lenke col-md-4"
-            />
-            <Oppgave
-                tittelId="overskrift-lenke-jobbsokerkompetanse"
-                beskrivelseId="beskrivelse-lenke-jobbsokerkompetanse"
-                lenkeId="lenke-din-jobbsokerkompetanse"
-                className="jobbsokerkompetanse-lenke col-md-4"
-            />
+        <div className="oppgaver__wrapper blokk-xl">
+            <Innholdstittel className="blokk-l overskrift-oppgaver">
+                <FormattedMessage id="overskrift-oppgaver"/>
+            </Innholdstittel>
+                <Oppgave
+                    tittelId="overskrift-lenke-jobbsokerkompetanse"
+                    beskrivelseId="beskrivelse-lenke-jobbsokerkompetanse"
+                    lenkeId="lenke-din-jobbsokerkompetanse"
+                />
+                <Oppgave
+                    tittelId="overskrift-lenke-cv"
+                    beskrivelseId="beskrivelse-lenke-cv"
+                    lenkeId="lenke-fyll-ut-cv"
+                />
+                <Oppgave
+                    tittelId="overskrift-lenke-aktivitetsplan"
+                    beskrivelseId="beskrivelse-lenke-aktivitetsplan"
+                    lenkeId="lenke-aktivitetsplan"
+                />
         </div>
     );
 }