Merge pull request #229 from SpareBank1/master_oppdatere-tekst-og-bilder

Oppdatere tekst og bilder

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",

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 = () => (
   <div className="sb1-page empati-page">
-    <img src={sparebank1} alt="SpareBank 1 Logo" />
-    <h1 className="ffe-h1--text-center empati-heading">{empatiJson.heading}</h1>
+    <SEO
+      title="Empati"
+      keywords={[
+        `sparebank 1`,
+        `universell utforming`,
+        `utvikling`,
+        `design`,
+        `test`,
+      ]}
+    />
+    <header>
+      <img src={sparebank1} alt="SpareBank 1-logo" />
+      <h1 className="ffe-h1--text-center empati-heading">
+        {empatiJson.heading}
+      </h1>
+    </header>
     <Grid>
       <GridRow>
         <GridCol sm={12} lg={{ cols: 6, offset: 3 }}>
-          <p className="ffe-body-paragraph empati-paragraph">
+          <p className="ffe-lead-paragraph empati-paragraph">
             {empatiJson.firstParagraph}
           </p>
-          <p className="ffe-body-paragraph empati-paragraph">
+          <p className="ffe-lead-paragraph empati-paragraph">
             {empatiJson.secondParagraph}
           </p>
         </GridCol>
@@ -34,7 +49,7 @@ const EmpatiPage = () => (
 
     <Grid>
       <GridRow topPadding={false}>
-        <GridCol>
+        <GridCol sm={12} lg={{ cols: 8, offset: 2 }}>
           {textCardsJson.map((card, index) => (
             <Cards
               key={index}
@@ -46,6 +61,7 @@ const EmpatiPage = () => (
               task1={card.task1}
               task2={card.task2}
               task3={card.task3}
+              task4={card.task4}
               warningMessage={card.warningMessage}
             />
           ))}

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 (
-    <TextCard className={dynamicColorClass}>
-      {() => (
-        <>
-          <Heading2>{title}</Heading2>
-          {hands && (
-            <ErrorMessage
-              icon={
-                <span className="material-symbols-rounded">priority_high</span>
-              }
-            >
-              <Paragraph>{warningMessage}</Paragraph>
-            </ErrorMessage>
-          )}
-          <Paragraph>{text}</Paragraph>
-          <Heading3>{subTitle}</Heading3>
-          <div className={styles.tasks}>
-            <NumberedList>
-              <NumberedListItem>{task1}</NumberedListItem>
-              <NumberedListItem>{task2}</NumberedListItem>
-              <NumberedListItem>{task3}</NumberedListItem>
-            </NumberedList>
-
-            {color === 'sand' ? (
-              hands ? (
-                <img
-                  src={hand}
-                  alt=""
-                  width={'250px'}
-                  height={'170px'}
-                  className={styles.svg}
-                />
-              ) : (
-                <img src={sand} alt="" width={'200px'} className={styles.svg} />
-              )
-            ) : color === 'syrin' ? (
-              <img src={syrin} alt="" width={'200px'} className={styles.svg} />
-            ) : color === 'fjell' ? (
-              <img src={fjell} alt="" width={'200px'} className={styles.svg} />
-            ) : color === 'frost' ? (
-              <img src={frost} alt="" width={'200px'} className={styles.svg} />
-            ) : null}
-          </div>
-        </>
+    <div className={dynamicColorClass}>
+      <Heading2>{title}</Heading2>
+      {hands && (
+        <ContextErrorMessage title={warningMessage}>
+          <Paragraph>test</Paragraph>
+        </ContextErrorMessage>
       )}
-    </TextCard>
+      <Paragraph>{text}</Paragraph>
+      <Heading3>{subTitle}</Heading3>
+      <div className={styles.tasks}>
+        <NumberedList>
+          <NumberedListItem>{task1}</NumberedListItem>
+          <NumberedListItem>{task2}</NumberedListItem>
+          <NumberedListItem>{task3}</NumberedListItem>
+          {!!task4 && <NumberedListItem>{task4}</NumberedListItem>}
+        </NumberedList>
+
+        {color === 'sand' && hands ? (
+          <img
+            src={hand}
+            alt=""
+            width={'250px'}
+            height={'170px'}
+            className={styles.svg}
+          />
+        ) : color === 'syrin' ? (
+          <img src={syrin} alt="" width={'200px'} className={styles.svg} />
+        ) : color === 'fjell' ? (
+          <img src={fjell} alt="" width={'200px'} className={styles.svg} />
+        ) : color === 'frost' ? (
+          <img src={frost} alt="" width={'200px'} className={styles.svg} />
+        ) : null}
+      </div>
+    </div>
   )
 }

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;
   }
 }