Fix bug where design was totally wrong

SpareBank1 · Jul 12, 2016 · 42f65f2 · 42f65f2
1 parent 0f03b1e
commit 42f65f2
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 81 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## Version 0.1.2
+Tidligere versjon var laget med utgangspunkt i feil designskisser
+
 ## Version 0.1.1
 Spesifiser filer som skal inkluderes i pakka
 

diff --git a/README.md b/README.md
@@ -1,11 +1,3 @@
-# OBS
-
-Pga litt forvirring og blanding av skisser så er denne komponenten ikke riktig implementert.
-Det er designet på https://sparebank1.invisionapp.com/share/5W7NXA69B#/screens/167191567 som
-er riktig, og før denne komponenten tas i bruk må man oppdatere stylingen til å matche riktige
-skisser.
-
-
 # ffe-system-message-react
 
 ## Install

diff --git a/dev/dev-app.js b/dev/dev-app.js
@@ -7,30 +7,30 @@ import { render } from 'react-dom';
 import {
     SystemErrorMessage,
     SystemInfoMessage,
+    SystemNewsMessage,
     SystemSuccessMessage,
 } from '../src';
 
 render(
-    <div className="ffe-section-wrapper ffe-body-text">
-        <div className="ffe-content-container ffe-content-container--lg">
-            <SystemErrorMessage header="Dette er typen system-error-message">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+    <div className="ffe-body-text">
+        <div style={{margin: '25px 0'}}>
+            <SystemErrorMessage>
+                Vi opplever for tiden problemer med nettbank og kortbetaling. Vi gir en lyd så snart dette er løst.
             </SystemErrorMessage>
         </div>
-        <div className="ffe-content-container ffe-content-container--lg">
-            <SystemInfoMessage header="Dette er typen system-info-message">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+        <div style={{margin: '25px 0'}}>
+            <SystemInfoMessage>
+                Her kan det stå en nyhet eller informasjon som ikke er kritisk.
             </SystemInfoMessage>
         </div>
-        <div className="ffe-content-container ffe-content-container--lg">
-            <SystemSuccessMessage header="Dette er typen system-success-message">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+        <div style={{margin: '25px 0'}}>
+            <SystemNewsMessage>
+                Vekommen til betaversjonen av nye Sparebank1.no
+            </SystemNewsMessage>
+        </div>
+        <div style={{margin: '25px 0'}}>
+            <SystemSuccessMessage>
+                En gladnyhet. Nå er nettbanken oppe og går igjen!
             </SystemSuccessMessage>
         </div>
     </div>,

diff --git a/example/example.js b/example/example.js
@@ -21,29 +21,30 @@ const example = (
         <h3 className="ffe-h4">Eksempler</h3>
 
         <div className="example-container">
-            <h4 className="example-container__header">Success</h4>
-            <SystemErrorMessage header="Feilmelding">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+            <h4 className="example-container__header">Feil</h4>
+            <SystemErrorMessage>
+                Feilmelding :(
             </SystemErrorMessage>
         </div>
 
         <div className="example-container">
             <h4 className="example-container__header">Info</h4>
-            <SystemInfoMessage header="Informasjon">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+            <SystemInfoMessage>
+                Informasjon
+            </SystemInfoMessage>
+        </div>
+
+        <div className="example-container">
+            <h4 className="example-container__header">News</h4>
+            <SystemInfoMessage>
+                Nyheter
             </SystemInfoMessage>
         </div>
 
         <div className="example-container">
             <h4 className="example-container__header">Success</h4>
-            <SystemSuccessMessage header="Gladmelding">
-                Bacon ipsum dolor amet lorem cupim pork belly jowl strip steak minim ham boudin nulla
-                incididunt shoulder. In meatball turkey, sed in strip steak enim rump cupidatat dolore
-                cupim sunt spare ribs labore short ribs.
+            <SystemSuccessMessage>
+                Gladmelding :)
             </SystemSuccessMessage>
         </div>
 
@@ -55,7 +56,7 @@ const example = (
                     <code className="html hljs xml">
                         {
                             renderToStaticMarkup(
-                                <SystemInfoMessage header="Headeren sendes inn her">
+                                <SystemInfoMessage>
                                     Send innholdet her. Alt pakkes i et &lt;p&gt; element så unngå bruk av
                                     feks &lt;div&gt;, &lt;p&gt; og &lt;ul&gt;.
                                 </SystemInfoMessage>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-system-message-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "SpareBank 1 System Message komponent",
   "main": "lib/index.js",
   "scripts": {

diff --git a/src/base.js b/src/base.js
@@ -21,28 +21,27 @@ export default class Base extends Component {
     render() {
         const {
             children,
-            header,
             icon,
             modifier,
         } = this.props;
 
         return (
             <div
-                className="ffe-system-message__wrapper"
+                className={`ffe-system-message-wrapper ffe-system-message-wrapper--${modifier}`}
                 ref="self"
             >
-                <div className={`ffe-system-message ffe-system-message--${modifier}`}>
+                <div
+                    className={`
+                        ffe-system-message
+                        ffe-content-container
+                        ffe-content-container--lg`}
+                >
                     <div className="ffe-system-message__icon">
                         {icon}
                     </div>
-                    <div className="ffe-system-message__content">
-                        <div className="ffe-system-message__header">
-                            {header}
-                        </div>
-                        <p className="ffe-system-message__text">
-                            {children}
-                        </p>
-                    </div>
+                    <p className="ffe-system-message__content">
+                        {children}
+                    </p>
                     <div
                         className="ffe-system-message__close"
                         role="button"
@@ -62,6 +61,5 @@ export default class Base extends Component {
 Base.propTypes = {
     children: PropTypes.node.isRequired,
     icon: PropTypes.node.isRequired,
-    header: PropTypes.string.isRequired,
-    modifier: PropTypes.oneOf(['error', 'info', 'success']),
+    modifier: PropTypes.oneOf(['error', 'info', 'success', 'news']),
 };
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,11 @@
 import SystemErrorMessage from './system-error-message';
 import SystemInfoMessage from './system-info-message';
+import SystemNewsMessage from './system-news-message';
 import SystemSuccessMessage from './system-success-message';
 
 export {
     SystemErrorMessage,
     SystemInfoMessage,
+    SystemNewsMessage,
     SystemSuccessMessage,
 };
diff --git a/src/system-error-message.js b/src/system-error-message.js
@@ -1,18 +1,20 @@
 import React, { PropTypes } from 'react';
 
-import UtropstegnIkon from 'ffe-icons-react/utropstegn-ikon';
+import InfoSirkelIkon from 'ffe-icons-react/info-sirkel-ikon';
 
 import Base from './base';
 
-export default function SystemErrorMessage({ children, header }) {
+export default function SystemErrorMessage({ children }) {
+    const ikon = (
+        <InfoSirkelIkon style={{ transform: 'rotateX(180deg)' }} />
+    );
     return (
-        <Base header={header} modifier="error" icon={<UtropstegnIkon />}>
+        <Base modifier="error" icon={ikon}>
             {children}
         </Base>
     );
 }
 
 SystemErrorMessage.propTypes = {
     children: PropTypes.node.isRequired,
-    header: PropTypes.string.isRequired,
 };
diff --git a/src/system-info-message.js b/src/system-info-message.js
@@ -1,18 +1,17 @@
 import React, { PropTypes } from 'react';
 
-import InfoIkon from 'ffe-icons-react/info-ikon';
+import InfoSirkelIkon from 'ffe-icons-react/info-sirkel-ikon';
 
 import Base from './base';
 
-export default function SystemInfoMessage({ children, header }) {
+export default function SystemInfoMessage({ children }) {
     return (
-        <Base header={header} modifier="info" icon={<InfoIkon />}>
+        <Base modifier="info" icon={<InfoSirkelIkon />}>
             {children}
         </Base>
     );
 }
 
 SystemInfoMessage.propTypes = {
     children: PropTypes.node.isRequired,
-    header: PropTypes.string.isRequired,
 };
diff --git a/src/system-news-message.js b/src/system-news-message.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+import InfoSirkelIkon from 'ffe-icons-react/info-sirkel-ikon';
+
+import Base from './base';
+
+export default function SystemNewsMessage({ children }) {
+    return (
+        <Base modifier="news" icon={<InfoSirkelIkon />}>
+            {children}
+        </Base>
+    );
+}
+
+SystemNewsMessage.propTypes = {
+    children: PropTypes.node.isRequired,
+};
diff --git a/src/system-success-message.js b/src/system-success-message.js
@@ -1,18 +1,17 @@
 import React, { PropTypes } from 'react';
 
-import HakeIkon from 'ffe-icons-react/hake-ikon';
+import HakeSirkelIkon from 'ffe-icons-react/hake-sirkel-ikon';
 
 import Base from './base';
 
-export default function SystemSuccessMessage({ children, header }) {
+export default function SystemSuccessMessage({ children }) {
     return (
-        <Base header={header} modifier="success" icon={<HakeIkon />}>
+        <Base modifier="success" icon={<HakeSirkelIkon />}>
             {children}
         </Base>
     );
 }
 
 SystemSuccessMessage.propTypes = {
     children: PropTypes.node.isRequired,
-    header: PropTypes.string.isRequired,
 };
diff --git a/src/test/system-info-message.spec.js b/src/test/system-info-message.spec.js
@@ -11,26 +11,22 @@ describe('when rendering', () => {
 
     beforeEach(() => {
         wrapper = mount(
-            <SystemInfoMessage header="Jeg er en test">
+            <SystemInfoMessage>
                 Blå sjiraff
             </SystemInfoMessage>
         );
     });
 
-    it('renders with provided header and body', () => {
-        const header = wrapper.find('.ffe-system-message__header');
-        expect(header.length).to.be(1);
-        expect(header.text()).to.be('Jeg er en test');
-
-        const text = wrapper.find('.ffe-system-message__text');
+    it('renders with provided body', () => {
+        const text = wrapper.find('.ffe-system-message__content');
         expect(text.length).to.be(1);
         expect(text.text()).to.be('Blå sjiraff');
     });
 
     it('closes itself after a click on the close container', done => {
         wrapper.find('.ffe-system-message__close').simulate('click');
         setTimeout(() => {
-            const component = wrapper.find('.ffe-system-message__wrapper');
+            const component = wrapper.find('.ffe-system-message-wrapper');
             expect(component.get(0).style.getPropertyValue('height')).to.be('0px');
             done();
         }, 100);
@@ -42,31 +38,31 @@ describe('for different types of message', () => {
 
     it('creates info-message', () => {
         wrapper = mount(
-            <SystemInfoMessage header="Jeg er en test">
+            <SystemInfoMessage>
                 Infomelding
             </SystemInfoMessage>
         );
-        const message = wrapper.find('.ffe-system-message');
-        expect(message.hasClass('ffe-system-message--info')).to.be(true);
+        const message = wrapper.find('.ffe-system-message-wrapper');
+        expect(message.hasClass('ffe-system-message-wrapper--info')).to.be(true);
     });
 
     it('creates error-message', () => {
         wrapper = mount(
-            <SystemErrorMessage header="Jeg er en test">
+            <SystemErrorMessage>
                 Feilmelding
             </SystemErrorMessage>
         );
-        const message = wrapper.find('.ffe-system-message');
-        expect(message.hasClass('ffe-system-message--error')).to.be(true);
+        const message = wrapper.find('.ffe-system-message-wrapper');
+        expect(message.hasClass('ffe-system-message-wrapper--error')).to.be(true);
     });
 
     it('create success-message', () => {
         wrapper = mount(
-            <SystemSuccessMessage header="Jeg er en test">
+            <SystemSuccessMessage>
                 Gladmelding
             </SystemSuccessMessage>
         );
-        const message = wrapper.find('.ffe-system-message');
-        expect(message.hasClass('ffe-system-message--success')).to.be(true);
+        const message = wrapper.find('.ffe-system-message-wrapper');
+        expect(message.hasClass('ffe-system-message-wrapper--success')).to.be(true);
     });
 });