SSL-1056. Added ContextErrorMessage

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 2.2.0
+* Added <ContextErrorMessage /> component
+
 ## 2.1.1/2.1.2 
 * Update designguide doc
 

example/example.js

@@ -6,6 +6,7 @@ import {
     ContextInfoMessage,
     ContextTipMessage,
     ContextSuccessMessage,
+    ContextErrorMessage,
 } from '../lib';
 
 const example = (
@@ -58,6 +59,17 @@ const example = (
             </ContextSuccessMessage>
         </div>
 
+        <div className="example-container">
+            <h4 className="example-container__header">Error</h4>
+            <ContextErrorMessage
+                header='Error'
+                locale='nb'
+                showCloseButton={true}
+            >
+                Whoops! Noe gikk feil.
+            </ContextErrorMessage>
+        </div>
+
         <div className="expanding-field">
             <button className="expanding-field__toggle">Vis HTML</button>
             <span className="expanding-field__icon"></span>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-context-message-react",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "SpareBank 1 System Message komponent",
   "main": "lib/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
   "peerDependencies": {
     "ffe-core": "^8.1.2",
     "ffe-icons-react": "^2.3.0",
-    "ffe-context-message": "^1.1.0",
+    "ffe-context-message": "^1.2.0",
     "react": "^15.1.0",
     "react-dom": "^15.1.0"
   },
@@ -46,7 +46,7 @@
     "eslint-plugin-jsx-a11y": "^3.0.2",
     "eslint-plugin-react": "^6.8.0",
     "expect.js": "^0.3.1",
-    "ffe-context-message": "^1.0.3",
+    "ffe-context-message": "^1.2.0",
     "ffe-core": "^8.1.2",
     "ffe-icons-react": "^2.1.0",
     "hjs-webpack": "^8.3.0",

src/base.js

@@ -92,7 +92,7 @@ export default class Base extends Component {
 
 Base.propTypes = {
     children: PropTypes.node.isRequired,
-    messageType: PropTypes.oneOf(['info', 'tip', 'success']).isRequired,
+    messageType: PropTypes.oneOf(['info', 'tip', 'success', 'error']).isRequired,
     showCloseButton: PropTypes.bool.isRequired,
     locale: PropTypes.oneOf(acceptedLocales),
     icon: PropTypes.element,

src/context-error-message.js

@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+import Base from './base';
+
+export default function ContextErrorMessage({children, ...rest}) {
+    return (
+        <Base
+            messageType="error"
+            {...rest}
+        >
+            {children}
+        </Base>
+    );
+}
+
+ContextErrorMessage.propTypes = {
+    children: PropTypes.node.isRequired,
+};

src/index.js

@@ -1,9 +1,11 @@
 import ContextInfoMessage from './context-info-message';
 import ContextTipMessage from './context-tip-message';
 import ContextSuccessMessage from './context-success-message';
+import ContextErrorMessage from './context-error-message';
 
 export {
     ContextInfoMessage,
     ContextTipMessage,
     ContextSuccessMessage,
+    ContextErrorMessage,
 };

src/test/context-message-test.js

@@ -5,6 +5,7 @@ import {
     ContextInfoMessage,
     ContextTipMessage,
     ContextSuccessMessage,
+    ContextErrorMessage,
 } from '../';
 import Base from '../base';
 import InfoCircleIcon from 'ffe-icons-react/info-sirkel-ikon';
@@ -127,3 +128,19 @@ describe('Test ContextSuccessMessage', () => {
         expect(component.hasClass('ffe-context-message--success')).to.be(true);
     });
 });
+
+describe('Test ContextErrorMessage', () => {
+    const wrapper = mount(
+        <ContextErrorMessage
+            icon={<InfoCircleIcon />}
+            showCloseButton={true}
+        >
+            <p>content</p>
+        </ContextErrorMessage>
+    );
+
+    it('renders ContextErrorMessage', () => {
+        const component = wrapper.find('.ffe-context-message');
+        expect(component.hasClass('ffe-context-message--error')).to.be(true);
+    });
+});