Merge pull request #26 from minimalchat/start-closed

Add open/close to header + replace icons
minimalchat · Jul 24, 2017 · 95b1fec · 95b1fec
2 parents 22a84e3 + 53e4f10
commit 95b1fec
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 13 deletions.
diff --git a/src/components/App/__snapshots__/index.test.js.snap b/src/components/App/__snapshots__/index.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<App /> matches snapshot 1`] = `"<div class=\\"mnml--messenger open\\"><section class=\\"Chat--messenger\\"><header class=\\"Header--messenger\\"><span class=\\"Header__title--messenger\\">Chat with John</span><button class=\\"Header__closeBtn--messenger\\">×</button></header><ul class=\\"Chat__body--messenger\\"></ul><form class=\\"Input__form--messenger\\"><input class=\\"Input--messenger\\" placeholder=\\"Type Here\\" name=\\"messages\\" value /></form></section></div>"`;
+exports[`<App /> matches snapshot 1`] = `"<div class=\\"mnml--messenger closed\\"><header class=\\"Header--messenger\\"><span class=\\"Header__title--messenger\\">Chat with John</span><button class=\\"Header__closeBtn--messenger\\"><span>⬆</span></button></header></div>"`;
diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -18,7 +18,7 @@ const SIDEPANEL = 'side';
 
 class App extends Component {
   state = {
-    chatOpen: true,
+    chatOpen: false,
     messages: [],
     textBox: '',
     network: '',
@@ -123,7 +123,12 @@ class App extends Component {
 
   // --- Render + Render methods
 
-  renderClosedChat = () => <ClosedState toggleChat={this.toggleChat} />;
+  renderClosedChat = () => (
+    <ClosedState
+      chatOpen={this.state.chatOpen}
+      toggleChat={this.toggleChat}
+    />
+  )
 
   renderOpenChat = () =>
     (<Chat
@@ -133,6 +138,7 @@ class App extends Component {
       toggleChat={this.toggleChat}
       handleInput={this.handleInput}
       sendMessage={this.sendMessage}
+      chatOpen={this.state.chatOpen}
     />);
 
   renderChat = () => (this.state.chatOpen ? this.renderOpenChat() : this.renderClosedChat());

diff --git a/src/components/Chat/__snapshots__/index.test.js.snap b/src/components/Chat/__snapshots__/index.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Chat /> matches snapshot 1`] = `"<section class=\\"Chat--undefined\\"><header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\">×</button></header><section class=\\"Notification__undefined-undefined\\"></section><ul class=\\"Chat__body--undefined\\"></ul><form class=\\"Input__form--undefined\\"><input class=\\"Input--undefined\\" placeholder=\\"Type Here\\" name=\\"messages\\" /></form></section>"`;
+exports[`<Chat /> matches snapshot 1`] = `"<section class=\\"Chat--undefined\\"><header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\"><span>⬆</span></button></header><header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\"><span>⬆</span></button></header><section class=\\"Notification__undefined-undefined\\"></section><ul class=\\"Chat__body--undefined\\"></ul><form class=\\"Input__form--undefined\\"><input class=\\"Input--undefined\\" placeholder=\\"Type Here\\" name=\\"messages\\" /></form></section>"`;
diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
@@ -20,6 +20,7 @@ class Chat extends Component {
     toggleChat: PropTypes.func,
     handleInput: PropTypes.func,
     sendMessage: PropTypes.func,
+    chatOpen: PropTypes.boolean,
     network: PropTypes.string,
     theme: PropTypes.string,
     textBox: PropTypes.string,
@@ -52,6 +53,10 @@ class Chat extends Component {
 
     return (
       <section className={`Chat--${theme}`}>
+        <Header
+          toggleChat={() => toggleChat(false)}
+          chatOpen={this.props.chatOpen}
+        />
         <Header toggleChat={() => toggleChat(false)} />
         <Notification network={this.props.network} />
 

diff --git a/src/components/ClosedState/__snapshots__/index.test.js.snap b/src/components/ClosedState/__snapshots__/index.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ClosedState /> matches snapshot 1`] = `"<header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\">×</button></header>"`;
+exports[`<ClosedState /> matches snapshot 1`] = `"<header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\"><span>⬆</span></button></header>"`;
diff --git a/src/components/ClosedState/index.js b/src/components/ClosedState/index.js
@@ -5,10 +5,15 @@ import Header from '../Header';
 
 import './styles.css';
 
-const ClosedState = props => <Header toggleChat={() => props.toggleChat(true)} />;
-
+const ClosedState = props => (
+  <Header
+    chatOpen={props.chatOpen}
+    toggleChat={() => props.toggleChat(true)}
+  />
+)
 ClosedState.propTypes = {
   toggleChat: PropTypes.func,
+  chatOpen: PropTypes.boolean
 };
 
 export default ClosedState;
diff --git a/src/components/Header/__snapshots__/index.test.js.snap b/src/components/Header/__snapshots__/index.test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Header /> should render  1`] = `"<header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\">×</button></header>"`;
+exports[`<Header /> should render  1`] = `"<header class=\\"Header--undefined\\"><span class=\\"Header__title--undefined\\">Chat with John</span><button class=\\"Header__closeBtn--undefined\\"><span>⬆</span></button></header>"`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -13,16 +13,21 @@ class Header extends Component {
   propTypes = {
     toggleChat: PropTypes.func,
     theme: PropTypes.string,
+    chatOpen: PropTypes.boolean
   };
 
+  renderToggleChatButton = () => (
+    this.props.chatOpen ? (<span>×</span>) : (<span>⬆</span>)
+  )
+
   render () {
     const { toggleChat, theme } = this.props;
 
     return (
-      <header className={`Header--${theme}`}>
+      <header className={`Header--${theme}`} onClick={() => toggleChat(true)}>
         <span className={`Header__title--${theme}`}>Chat with John</span>
-        <button className={`Header__closeBtn--${theme}`} onClick={toggleChat}>
-          ×
+        <button className={`Header__closeBtn--${theme}`} onClick={() => toggleChat(true)}>
+          {this.renderToggleChatButton()}
         </button>
       </header>
     );

diff --git a/src/components/Header/style.css b/src/components/Header/style.css
@@ -13,6 +13,7 @@
   height: 32px;
   border-radius: 3px 3px 0 0;
   border-right: 1px solid rgba(0,0,0,0.1);
+  cursor: pointer;
 }
 
 .Header__title--messenger {
@@ -25,7 +26,7 @@
   background: none;
   border: 0;
   color: white;
-  font-size: 24px;
+  font-size: 18px;
   align-self: center;
   outline: none;
   cursor: pointer;
@@ -50,7 +51,7 @@
   right: 10px;
   bottom: 30px;
 }
-    
+
 .Header__title--float {
   display: none;
 }