diff --git a/package.json b/package.json index faade01bf..f7da2c0a8 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@sb1/ffe-buttons-react": "^14.0.4", "@sb1/ffe-cards": "^12.0.4", "@sb1/ffe-cards-react": "^5.0.0", + "@sb1/ffe-context-message-react": "^9.0.5", "@sb1/ffe-core": "^19.2.0", "@sb1/ffe-core-react": "^7.1.4", "@sb1/ffe-dropdown-react": "^5.1.7", diff --git a/src/pages/empati.js b/src/pages/empati.js index 5829b1ba0..e282793bc 100644 --- a/src/pages/empati.js +++ b/src/pages/empati.js @@ -8,18 +8,33 @@ import dame2 from './empati/images/dame2.svg' import empatiJson from './empati/empati.json' import textCardsJson from './empati/components/card/textCards.json' import Cards from './empati/components/card/Cards' +import SEO from '../components/seo' const EmpatiPage = () => (
- SpareBank 1 Logo -

{empatiJson.heading}

+ +
+ SpareBank 1-logo +

+ {empatiJson.heading} +

+
-

+

{empatiJson.firstParagraph}

-

+

{empatiJson.secondParagraph}

@@ -34,7 +49,7 @@ const EmpatiPage = () => ( - + {textCardsJson.map((card, index) => ( ( task1={card.task1} task2={card.task2} task3={card.task3} + task4={card.task4} warningMessage={card.warningMessage} /> ))} diff --git a/src/pages/empati/components/card/Cards.js b/src/pages/empati/components/card/Cards.js index 180e57b1f..326e2cd18 100644 --- a/src/pages/empati/components/card/Cards.js +++ b/src/pages/empati/components/card/Cards.js @@ -1,18 +1,16 @@ import React from 'react' import { clsx } from 'clsx' -import { TextCard } from '@sb1/ffe-cards-react' import { Heading3, Heading2, Paragraph } from '@sb1/ffe-core-react' -import { ErrorMessage } from '@sb1/ffe-message-box-react' import { NumberedList, NumberedListItem } from '@sb1/ffe-lists-react' import fjell from './svgs/briller-fjell.svg' import frost from './svgs/briller-frost.svg' -import sand from './svgs/briller-sand.svg' import syrin from './svgs/briller-syrin.svg' import hand from './svgs/hånd-fjell.svg' import * as styles from './text-card.module.less' +import { ContextErrorMessage } from '@sb1/ffe-context-message-react' export default function Cards({ hands, @@ -23,6 +21,7 @@ export default function Cards({ task3, task2, task1, + task4, warningMessage, }) { const colorClasses = { @@ -35,50 +34,39 @@ export default function Cards({ const dynamicColorClass = clsx(colorClasses[color]) return ( - - {() => ( - <> - {title} - {hands && ( - priority_high - } - > - {warningMessage} - - )} - {text} - {subTitle} -
- - {task1} - {task2} - {task3} - - - {color === 'sand' ? ( - hands ? ( - - ) : ( - - ) - ) : color === 'syrin' ? ( - - ) : color === 'fjell' ? ( - - ) : color === 'frost' ? ( - - ) : null} -
- +
+ {title} + {hands && ( + + test + )} - + {text} + {subTitle} +
+ + {task1} + {task2} + {task3} + {!!task4 && {task4}} + + + {color === 'sand' && hands ? ( + + ) : color === 'syrin' ? ( + + ) : color === 'fjell' ? ( + + ) : color === 'frost' ? ( + + ) : null} +
+
) } diff --git a/src/pages/empati/components/card/svgs/briller-fjell.svg b/src/pages/empati/components/card/svgs/briller-fjell.svg index ce1e46efe..247ddedc5 100644 --- a/src/pages/empati/components/card/svgs/briller-fjell.svg +++ b/src/pages/empati/components/card/svgs/briller-fjell.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/pages/empati/components/card/svgs/briller-frost.svg b/src/pages/empati/components/card/svgs/briller-frost.svg index 2c1042a24..d365062a4 100644 --- a/src/pages/empati/components/card/svgs/briller-frost.svg +++ b/src/pages/empati/components/card/svgs/briller-frost.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/pages/empati/components/card/svgs/briller-sand.svg b/src/pages/empati/components/card/svgs/briller-sand.svg deleted file mode 100644 index a331e8e65..000000000 --- a/src/pages/empati/components/card/svgs/briller-sand.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/pages/empati/components/card/svgs/briller-syrin.svg b/src/pages/empati/components/card/svgs/briller-syrin.svg index 3191c90f8..8cde06ea1 100644 --- a/src/pages/empati/components/card/svgs/briller-syrin.svg +++ b/src/pages/empati/components/card/svgs/briller-syrin.svg @@ -1,7 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/pages/empati/components/card/text-card.module.less b/src/pages/empati/components/card/text-card.module.less index 3530b7da0..98a063f9d 100644 --- a/src/pages/empati/components/card/text-card.module.less +++ b/src/pages/empati/components/card/text-card.module.less @@ -1,9 +1,11 @@ @import '@sb1/ffe-core/less/colors.less'; + @base-color-fjell: @ffe-farge-fjell; @base-color-hvit: @ffe-farge-hvit; @base-background: @ffe-farge-fjell; .card-styles(@color, @background) { + :global(div), :global(.ffe-h2), :global(.ffe-h3), :global(.ffe-body-paragraph) { @@ -16,37 +18,36 @@ color: @color; border-radius: 50px; padding: 40px; + margin-bottom: 16px; } -:global(.ffe-text-card).colorSand { +:global(div).colorSand { .card-styles(@ffe-farge-fjell, @ffe-farge-sand-70); } -:global(.ffe-text-card).colorFjell { +:global(div).colorFjell { .card-styles(@ffe-farge-hvit, @ffe-farge-fjell); } -:global(.ffe-text-card).colorFrost { +:global(div).colorFrost { .card-styles(@ffe-farge-fjell, @ffe-farge-frost-30); } -:global(.ffe-text-card).colorSyrin { +:global(div).colorSyrin { .card-styles(@ffe-farge-fjell, @ffe-farge-syrin-70); } .tasks { display: flex; flex-direction: row; - align-items: center; + justify-content: space-between; - .svg { - margin-left: 7rem; + @media screen and (max-width: 640px) { + flex-direction: column; } - @media screen and (max-width: 640px) { - .svg { - display: none; - } + .svg { + margin-left: 7rem; } } diff --git a/src/pages/empati/components/card/textCards.json b/src/pages/empati/components/card/textCards.json index 80077f6bd..0965f4e96 100644 --- a/src/pages/empati/components/card/textCards.json +++ b/src/pages/empati/components/card/textCards.json @@ -1,73 +1,74 @@ [ { "heading": "Stand 1: Makuladegenerasjon (forkalkning)", - "text": "Det finnes flere typer, men aldersrelatert makuladegenerasjon er den største årsaken til varig synshemming hos personer over 50 år i Norge. Makula er et lite område av netthinnen som er viktig for skarpsynet. Ved makula-degenerasjon vil skarpsynet hemmes.\\n\\nTørr makuladegenerasjon gjør at det oppstår små, gule flekker rundt makula. Våt makuladegenerasjon kjennetegnes av små blodkar som vokser på baksiden av øyet.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "Gå inn på yr.no, og finn værvarsel for stedet der du bor", + "text": "Makuladegenerasjon er en sykdom som gir skade i skarpsynsområdet i øyet (makula). Den er en av de vanligste grunnene til synstap for personer over 50 år, men finnes også blant yngre.\n\nFørst blir det ofte vanskeligere å lese, kjenne igjen ansikter og se fine detaljer.\n\nEtter hvert kan ting midt i synsfeltet se mer sløret eller forvrengt ut. Til slutt kan området i midten av synsfeltet bli mørkt, så vi ikke kan se ting som er rett foran oss.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Gå inn på kamera-appen på mobilen din, og ta en selfie!", + "task3": "Del bildet med noen på Slack, eller SMS", "color": "fjell", "hands": false }, { "heading": "Stand 2: Grønn stær", - "text": "Grønn stær er en tilstand som ofte skyldes høyt trykk inne i øyet. På sikt kan tilstanden medføre innskrenkninger i synsfeltet og ubehandlet kan man ende opp med «tunnelsyn». Glaukom er en av de vanligste årsakene til blindhet i Norge, særlig i høy alder. Vi regner med at 2-3 prosent av befolkningen over 40 år har glaukom, mens antatt forekomst blant de over 70 år er 15-20 prosent.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "Send en melding på slack eller SMS", + "text": "Grønn stær er en tilstand som ofte skyldes høyt trykk inne i øyet. Etter hvert kan den gi innskrenkninger i synsfeltet og ubehandlet kan vi ende opp med «tunnelsyn».\n\nGrønn stær er en av de vanligste grunnene til blindhet i Norge, særlig i høy alder.\n\nDet estimeres at 2-3 prosent av befolkningen over 40 år har grønn stær, og 15-20 prosent av befolkningen over 70 år har det.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Hent opp din favoritt-app på telefonen", + "task3": "Finn ut hvordan den oppleves med brillene på", "color": "syrin", "hands": false }, { "heading": "Stand 3: Grå stær", - "text": "Grå stær er en sykdom der linsen i øyet mister sin klarhet. Grå stær gir først og fremst nedsatt syn, «tåkesyn», både på avstand og på nært hold. Selv om alder er den viktigste årsaken til grå stær blir noen barn faktisk født med denne sykdommen. Hos yngre mennesker ses sykdommen oftest på grunn av skader eller andre sykdommer i øyet. Grå stær er den ledende årsaken til blindhet i verden.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "Gå inn på kameraappen og ta en selfie", + "text": "Grå stær er en sykdom der linsen i øyet mister klarheten. Den gir først og fremst svekket syn, «tåkesyn», både på avstand og på nært hold.\n\nSelv om alder er den viktigste grunnen til grå stær blir noen barn faktisk født med denne sykdommen.\nEn tredjedel av alle over 65 år har grå stær.\nHos yngre oppstår grå stær oftest etter skader eller sykdom.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Gå inn på kalenderen på telefonen", + "task3": "Hvordan er det å få oversikt over aktivitetene dine for denne uken?", "color": "frost", "hands": false }, { "heading": "Stand 4: Tremor (skjelving)", - "text": "Tremor er det samme som skjelving. Dette er en ufrivillig, rytmisk, ofte vedvarende aktivering av muskulaturen. Ofte finner ikke legen årsaken til tremor og den kalles da isolert tremor. Den vanligste formen for isolert tremor er essentiell tremor. Dette er en tremor som rammer hendene spesielt. I tillegg kan mange også få litt tremor i nakken/hodet og denne kalles da hodetremor.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringshanskene", - "task3": "...", + "text": "Tremor er det samme som skjelving. Dette er en ufrivillig, rytmisk, ofte vedvarende aktivering av muskulaturen. \n\nOfte finner ikke legen årsaken til tremor og den kalles da isolert tremor. Den vanligste formen for isolert tremor er essentiell tremor. Dette er en tremor som rammer hendene våre spesielt. \n\nI tillegg kan mange også få litt tremor i nakken/hodet. Det kalles hodetremor.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringshanskene", + "task2": "Gå inn på yr.no i nettleseren på mobilen", + "task3": "Finn værvarselet for i morgen på ditt hjemsted", "color": "sand", "hands": true, "warningMessage": "Forsiktighetsregler ved bruk av simuleringshanskene..." }, { "heading": "Stand 5: Diabetes retinopati", - "text": "Diabetes retinopati betyr sykdom i øyets netthinne (retina) som følge av diabetes. Dette er den viktigste enkeltårsaken til at personer i yrkesaktiv alder i vestlige land mister synet, helt eller delvis. Personer med diabetisk retinopati kan oppleve svekket syn, blanke områder eller blendende lysflekker når de oppholder seg i sterkt lys. Etter som sykdommen utvikler seg, vil uklart syn, blanke områder og svarte flekker opptre. De svarte flekkene vil kunne flyte omkring i synsfeltet.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "...", + "text": "Diabetes retinopati betyr sykdom i øyets netthinne (retina) som følge av diabetes.\n\nDette er den viktigste enkeltårsaken til at personer i yrkesaktiv alder i vestlige land mister synet, helt eller delvis.\n\nPersoner med diabetes retinopati kan blant annet oppleve flekker i synsfeltet, sløret syn og svekket kontrastsyn.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Gå inn på sparebank1.no, i nettleseren på mobilen", + "task3": "Trykk på oversikten over alle bankene", + "task4": "Hvilken bank har slagordet «Tett på kundenes behov»?", "color": "fjell", "hands": false }, { "heading": "Stand 6: Netthinneløsning", - "text": "Symptomer på netthinneløsning er at synet brått forsvinner. Mange beskriver det som en «gardin» som dras for synsfeltet. Synet kan gradvis bedre seg i flere måneder etter operasjon. Det blir imidlertid aldri like bra som før. Etter operasjon opplever opp mot halvparten varig synstap. Nedsatt kontrastsyn og forvrengning av synsinntrykk er vanlige følgetilstander som kan gi problemer med lesing, bilkjøring og nærarbeid.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "...", + "text": "Symptomer på netthinneløsning er at synet brått forsvinner. Mange beskriver det som at en «gardin» dras for synsfeltet.\n\n Det er en akutt tilstand som fører til blindhet hvis den ikke opereres. Jo tidligere den blir operert, jo større sjanse er det for å få netthinnen på plass, og bevare mest mulig av synet.\n\n Vi kan få netthinneløsning i alle aldre, men det er mest vanlig blant eldre.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Gå til nrk.no i nettleseren på mobilen", + "task3": "Se om du kan finne Urix", "color": "syrin", "hands": false }, { "heading": "Stand 7: Retinitis pigmentosa", - "text": "Retinitis pigmentosa (RP) er fellesbetegnelse for en rekke netthinnesykdommer som gir sterk synshemning i form av innsnevret synsfelt eller blindhet. Sykdommen beskrives som å ha kikkertsyn eller tunnelsyn. RP er blant de hyppigste årsakene til alvorlig nedsatt syn hos barn og yngre voksne. Som regel starter RP med at mørkesynet blir dårlig (nattblindhet). Senere er det et stadig mer innsnevret synsfelt (bortfall av sidesyn) som gir de største problemene for mennesker med denne sykdommen.", - "tasks": "Oppgaver", - "task1": "Finn frem mobilen", - "task2": "Ta på deg simuleringsbrillene", - "task3": "...", - "color": "sand", + "text": "Retinitis pigmentosa (RP) er fellesbetegnelse for flere, hovedsakelig arvelige, netthinnesykdommer.\n\n Det er en av de vanligste grunnene til alvorlig nedsatt syn hos barn og yngre voksne. \n\nSom regel starter RP med at mørkesynet blir dårligere (nattblindhet). Senere er det et stadig mer innsnevret synsfelt (bortfall av sidesyn) som gir de største utfordringene for personer med denne sykdommen.", + "tasks": "Oppgave", + "task1": "Ta på deg simuleringsbrillene", + "task2": "Gå inn på bildeappen på telefonen din, og se på bildene med brillene på", + "task3": "Hva er annerledes?", + "color": "frost", "hands": false } ] \ No newline at end of file