Document, rename and clean up

This commit renames the component files to look like component files,
adds documentation for each context message type and does a bit of
clean up and maintenance tasks.

.npmrc

@@ -1 +1,2 @@
 registry=***REMOVED***
+package-lock=false

CHANGELOG.md

@@ -1,10 +1,25 @@
 # CHANGELOG
 
+## 2.3.3
+
+### 🏠 Improvements
+
+* Improve documentation
+
+### 🐛 Bugfixes
+
+* Fix some deprecation warnings
+
 ## 2.3.2
+
+### 🏠 Improvements
+
 * Use PropTypes from prop-types package
 
 ## 2.3.1
 
+### 🏠 Improvements
+
 * Expand peerDep scope of `ffe-context-message` to include `2.x`.
 * Remove peerDep on `ffe-core`, `ffe-icons-react`, `react` and `react-dom`.
 

dev/dev-app.js

@@ -4,12 +4,12 @@ import React from 'react';
 import InfoIcon from 'ffe-icons-react/info-ikon';
 import ShowerIcon from 'ffe-icons-react/badekar-dusj-ikon';
 import BoatIcon from 'ffe-icons-react/bat-liten-ikon';
-import CatchCircleIcon from 'ffe-icons-react/hake-sirkel-ikon';
 import { render } from 'react-dom';
 import {
     ContextInfoMessage,
     ContextTipMessage,
     ContextSuccessMessage,
+    ContextErrorMessage,
 } from '../src';
 
 render(
@@ -35,39 +35,27 @@ render(
             </ContextTipMessage>
         </div>
         <div style={{ margin: '25px 0' }}>
-            <ContextTipMessage
+            <ContextSuccessMessage
                 locale='en'
                 showCloseButton={true}
                 icon={<ShowerIcon/>}
             >
                 Vekommen til betaversjonen av nye Sparebank1.no.
                 Vekommen til betaversjonen av nye Sparebank1.no.
                 Vekommen til betaversjonen av nye Sparebank1.no.
-            </ContextTipMessage>
+            </ContextSuccessMessage>
         </div>
 
         <div style={{ margin: '25px 0' }}>
-            <ContextTipMessage
+            <ContextErrorMessage
                 locale='en'
                 showCloseButton={true}
                 icon={<BoatIcon/>}
             >
                 Vekommen til betaversjonen av nye Sparebank1.no.
                 Vekommen til betaversjonen av nye Sparebank1.no.
                 Vekommen til betaversjonen av nye Sparebank1.no.
-            </ContextTipMessage>
-        </div>
-
-        <div style={{ margin: '25px 0' }}>
-            <ContextSuccessMessage
-                locale='en'
-                showCloseButton={true}
-                icon={<CatchCircleIcon/>}
-            >
-                Vekommen til betaversjonen av nye Sparebank1.no.
-                Vekommen til betaversjonen av nye Sparebank1.no.
-                Vekommen til betaversjonen av nye Sparebank1.no.
-            </ContextSuccessMessage>
+            </ContextErrorMessage>
         </div>
     </div>,
     document.getElementById('root')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ffe-context-message-react",
-  "version": "2.3.2",
-  "description": "SpareBank 1 System Message komponent",
+  "version": "2.3.3",
+  "description": "React implementation of ffe-context-message component",
   "main": "lib/index.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=src/test/ src/. && npm run example",
@@ -23,6 +23,7 @@
   },
   "author": "SpareBank 1",
   "dependencies": {
+    "classnames": "^2.2.5",
     "prop-types": "*"
   },
   "peerDependencies": {

src/ContextErrorMessage.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ContextMessage from './ContextMessage';
+
+const ContextErrorMessage = props => (
+    <ContextMessage messageType="error" {...props} />
+);
+
+export default ContextErrorMessage;

src/ContextInfoMessage.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ContextMessage from './ContextMessage';
+
+const ContextInfoMessage = props => (
+    <ContextMessage messageType="info" {...props} />
+);
+
+export default ContextInfoMessage;

src/base.js → src/ContextMessage.js

@@ -9,12 +9,19 @@ import {
     func,
     object
 } from 'prop-types';
+import classNames from 'classnames';
 import CloseIcon from 'ffe-icons-react/kryss-ikon';
 
 import acceptedLocales from './locale/accepted-locales';
 import texts from './locale/texts';
 
-export default class Base extends Component {
+/**
+ * Base component for all four types of context messages.
+ *
+ * *Should never be used directly!*
+ * Please use one of the four versions exported from this package.
+ */
+export default class ContextMessage extends Component {
     constructor() {
         super();
         this.close = this.close.bind(this);
@@ -71,11 +78,12 @@ export default class Base extends Component {
             <div
                 aria-describedby={contentElementId}
                 aria-labelledby={headerElementId}
-                className={
-                    `ffe-context-message ffe-context-message--${messageType}`
-                        + `${compact ? ' ffe-context-message--compact' : ''}`
-                        + `${className ? ` ${className}` : ''}`
-                }
+                className={classNames(
+                    'ffe-context-message',
+                    `ffe-context-message--${messageType}`,
+                    { 'ffe-context-message--compact': compact },
+                    className
+                )}
                 ref={(_self) => { this._self = _self; }}
                 style={{ ...style, transition: `height ${animationLengthMs / 1000}s` }}
             >
@@ -107,23 +115,32 @@ export default class Base extends Component {
     }
 }
 
-Base.propTypes = {
+ContextMessage.propTypes = {
     animationLengthMs: number,
+    /** The content shown in the context box */
     children: node.isRequired,
+    /** Classes are added in addition to the relevant context message classes */
     className: string,
+    /** Renders a more compact version of the context message */
     compact: bool,
+    /** ID for the children container */
     contentElementId: string,
     header: string,
+    /** ID for the header container */
     headerElementId: string,
     icon: element,
+    /** Decides the language of the aria-label for the close icon */
     locale: oneOf(acceptedLocales),
+    /** Provided by the wrapper component */
     messageType: oneOf(['info', 'tip', 'success', 'error']).isRequired,
+    /** Callback for when the context message has been closed (after the animation) */
     onClose: func,
     showCloseButton: bool,
+    /** Styles applied to the outermost element. `height` will be overridden */
     style: object,
 };
 
-Base.defaultProps = {
+ContextMessage.defaultProps = {
     animationLengthMs: 300,
     compact: false,
     contentElementId: 'contentElementId',

src/ContextMessage.md

@@ -0,0 +1,75 @@
+Gir side eller produktspesifikk informasjon av ikke kritisk art
+
+Kommer i fire forskjellige versjoner - info, tips, suksess og feil.
+Alle har støtte for å kunne sende inn et ikon om designet tilsier det
+
+```js
+const Icon = require('ffe-icons-react/info-ikon');
+const ContextInfoMessage = require('./ContextInfoMessage');
+<ContextInfoMessage>
+    Nå har det kommet noe nytt og spennende fra SpareBank 1!
+</ContextInfoMessage>
+<ContextInfoMessage icon={<Icon />}>
+    Nå har det kommet noe nytt og spennende fra SpareBank 1!
+</ContextInfoMessage>
+```
+
+```js
+const Icon = require('ffe-icons-react/hake-ikon');
+const ContextSuccessMessage = require('./ContextSuccessMessage');
+<ContextSuccessMessage>
+    Betalingen ble registrert!
+</ContextSuccessMessage>
+<ContextSuccessMessage icon={<Icon />}>
+    Betalingen ble registrert!
+</ContextSuccessMessage>
+```
+
+```js
+const Icon = require('ffe-icons-react/lyspare-ikon');
+const ContextTipMessage = require('./ContextTipMessage');
+<ContextTipMessage>
+    Visste du at du kan få en skattefordel ved sparing i IPS?
+</ContextTipMessage>
+<ContextTipMessage icon={<Icon />}>
+    Visste du at du kan få en skattefordel ved sparing i IPS?
+</ContextTipMessage>
+```
+
+```js
+const Icon = require('ffe-icons-react/utropstegn-ikon');
+const ContextErrorMessage = require('./ContextErrorMessage');
+<ContextErrorMessage>
+    Dette gikk ikke som forventet i det hele tatt!
+</ContextErrorMessage>
+<ContextErrorMessage icon={<Icon />}>
+    Dette gikk ikke som forventet i det hele tatt!
+</ContextErrorMessage>
+```
+
+De har støtte for å legge til en tittel:
+
+```js
+const ContextInfoMessage = require('./ContextInfoMessage');
+<ContextInfoMessage heading="Til info">
+    Nå har det kommet noe nytt og spennende fra SpareBank 1!
+</ContextInfoMessage>
+```
+
+De har støtte for å bli lukket:
+
+```js
+const ContextInfoMessage = require('./ContextInfoMessage');
+<ContextInfoMessage showCloseButton={true}>
+    Trykk på lukk-knappen
+</ContextInfoMessage>
+```
+
+For konsumenter som trenger et mer kompakt design, er det også støtte for det:
+
+```js
+const ContextInfoMessage = require('./ContextInfoMessage');
+<ContextInfoMessage compact={true}>
+    Nå har det kommet noe nytt og spennende fra SpareBank 1!
+</ContextInfoMessage>
+```

src/ContextSuccessMessage.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ContextMessage from './ContextMessage';
+
+const ContextSuccessMessage = props => (
+    <ContextMessage messageType="success" {...props} />
+);
+
+export default ContextSuccessMessage;

src/ContextTipMessage.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ContextMessage from './ContextMessage';
+
+const ContextTipMessage = props => (
+    <ContextMessage messageType="tip" {...props} />
+);
+
+export default ContextTipMessage;

src/index.js

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