Merge pull request #38 from Thomas-Negrault/notification-badge

Add notification badge

README.md

@@ -150,6 +150,7 @@ export default App;
 |**profileAvatar**|PropTypes.string|NO| |The profile image that will be set on the responses|
 |**showCloseButton**|PropTypes.bool|NO|false|Show or hide the close button in full screen mode|
 |**fullScreenMode**|PropTypes.bool|NO|false|Allow the use of full screen in full desktop mode|
+|**badge**|PropTypes.number|NO|0|Display a notification badge on the launcher if the value is greater than 0|
 
 #### Styles
 

src/components/Widget/components/Launcher/components/Badge/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './style.scss';
+
+const Badge = ({ badge }) =>
+  badge > 0 &&
+<span className="badge">{badge}</span>;
+
+Badge.propTypes = {
+  badge: PropTypes.number
+};
+
+export default Badge;

src/components/Widget/components/Launcher/components/Badge/style.scss

@@ -0,0 +1,16 @@
+@import "variables.scss";
+
+.launcher {
+  .badge{
+    position: fixed;
+    top: -10px;
+    right: -5px;
+    background-color: $red;
+    color: white;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    line-height: 25px;
+    border-radius: 50%;
+  }
+}

src/components/Widget/components/Launcher/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import Badge from './components/Badge';
 
 import openLauncher from 'assets/launcher_button.svg';
 import close from 'assets/clear-button.svg';
 import './style.scss';
 
-const Launcher = ({ toggle, chatOpened }) =>
+const Launcher = ({ toggle, chatOpened, badge }) =>
   <button type="button" className={chatOpened ? 'launcher hide-sm' : 'launcher'} onClick={toggle}>
+    <Badge badge ={badge} />
     {
       chatOpened ?
         <img src={close} className="close-launcher" alt="" /> :
@@ -17,7 +19,8 @@ const Launcher = ({ toggle, chatOpened }) =>
 
 Launcher.propTypes = {
   toggle: PropTypes.func,
-  chatOpened: PropTypes.bool
+  chatOpened: PropTypes.bool,
+  badge: PropTypes.number
 };
 
 export default connect(store => ({

src/components/Widget/index.js

@@ -37,6 +37,7 @@ class Widget extends Component {
         profileAvatar={this.props.profileAvatar}
         showCloseButton={this.props.showCloseButton}
         fullScreenMode={this.props.fullScreenMode}
+        badge={this.props.badge}
       />
     );
   }
@@ -49,7 +50,8 @@ Widget.propTypes = {
   senderPlaceHolder: PropTypes.string,
   profileAvatar: PropTypes.string,
   showCloseButton: PropTypes.bool,
-  fullScreenMode: PropTypes.bool
+  fullScreenMode: PropTypes.bool,
+  badge: PropTypes.number
 };
 
 export default connect()(Widget);

src/components/Widget/layout.js

@@ -26,6 +26,7 @@ const WidgetLayout = props =>
       !props.fullScreenMode &&
       <Launcher
         toggle={props.onToggleConversation}
+        badge={props.badge}
       />
     }
   </div>;
@@ -40,7 +41,8 @@ WidgetLayout.propTypes = {
   profileAvatar: PropTypes.string,
   showCloseButton: PropTypes.bool,
   disabledInput: PropTypes.bool,
-  fullScreenMode: PropTypes.bool
+  fullScreenMode: PropTypes.bool,
+  badge: PropTypes.number
 };
 
 export default connect(store => ({

src/index.js

@@ -15,6 +15,7 @@ const ConnectedWidget = props =>
       profileAvatar={props.profileAvatar}
       showCloseButton={props.showCloseButton}
       fullScreenMode={props.fullScreenMode}
+      badge={props.badge}
     />
   </Provider>;
 
@@ -25,15 +26,17 @@ ConnectedWidget.propTypes = {
   senderPlaceHolder: PropTypes.string,
   profileAvatar: PropTypes.string,
   showCloseButton: PropTypes.bool,
-  fullScreenMode: PropTypes.bool
+  fullScreenMode: PropTypes.bool,
+  badge: PropTypes.number
 };
 
 ConnectedWidget.defaultProps = {
   title: 'Welcome',
   subtitle: 'This is your chat subtitle',
   senderPlaceHolder: 'Type a message...',
   showCloseButton: true,
-  fullScreenMode: false
+  fullScreenMode: false,
+  badge: 0
 };
 
 export default ConnectedWidget;

src/sass/variables.scss

@@ -5,3 +5,4 @@ $grey-3: #b5b5b5;
 $turqois-1: #35cce6;
 $turqois-2: #a3eaf7;
 $white: #fff;
+$red: #ff0000;