feat : set design for contact page

src/app/common/component/page-header/page-header-component.js

@@ -0,0 +1,38 @@
+import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
+import LucioleComponent from './../../core/abstract/luciole-component'
+import LuI18n from './../i18n/luciole-i18n-component'
+
+/**
+ * LuciolePageHeader Component
+ * A component used for page's header
+ */
+class LuciolePageHeader extends LucioleComponent {
+
+  /**
+   * Render the component
+   * @return {Object} React component tree
+   */
+  render () {
+    return (
+      <div className='page-header'>
+        <FontAwesome size='2x' name={this.props.icon} />
+        <h2><LuI18n value={this.props.title} /></h2>
+      </div>
+    )
+  }
+}
+
+/**
+ * The component properties' types
+ * @type {Object}
+ */
+LuciolePageHeader.propTypes = {
+  icon: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired
+}
+
+/**
+ * Export the component
+ */
+export default LuciolePageHeader

src/app/common/component/page-header/page-header-component.spec.js

@@ -0,0 +1,42 @@
+/* import React from 'react'
+import {shallow} from 'enzyme'
+import {expect} from 'chai'
+import LucioleSVG from './luciole-svg-component'
+import ReactSVG from 'react-svg'
+
+describe('LucioleSVG', () => {
+  describe('render', () => {
+    const props = {
+      path: 'pathprop',
+      callback: () => { return 0 },
+      class: 'classnameprop'
+    }
+
+    it('Expect to contain ReactSVG', () => {
+      const wrapper = shallow(<LucioleSVG {...props} />)
+      expect(wrapper.find(ReactSVG)).to.be.length(1)
+    })
+
+    it('Expect to contain ReactSVG with good prop path', () => {
+      const wrapper = shallow(<LucioleSVG {...props} />)
+      const actual = wrapper.find(ReactSVG).props().path
+      const expected = 'pathprop'
+      expect(actual).to.be.equal(expected)
+    })
+
+    it('Expect to contain ReactSVG with good prop callback', () => {
+      const wrapper = shallow(<LucioleSVG {...props} />)
+      const actual = wrapper.find(ReactSVG).props().callback
+      const expected = props.callback
+      expect(actual).to.be.equal(expected)
+    })
+
+    it('Expect to contain ReactSVG with good prop className', () => {
+      const wrapper = shallow(<LucioleSVG {...props} />)
+      const actual = wrapper.find(ReactSVG).props().className
+      const expected = 'classnameprop'
+      expect(actual).to.be.equal(expected)
+    })
+  })
+})
+*/

src/app/common/component/svg/luciole-svg-component.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import ReactSVG from 'react-svg'
-import LucioleComponent from './../abstract/luciole-component'
+import LucioleComponent from './../../core/abstract/luciole-component'
 
 /**
  * LucioleSVG Component

src/app/module/contact/component/contact-form-component.js

@@ -26,7 +26,7 @@ export class ContactFormComponent extends FormComponent {
    */
   render () {
     return (
-      <form className='luciole-form' onSubmit={this.props.handleSubmit}>
+      <form className='luciole-form contact-form' onSubmit={this.props.handleSubmit}>
         <Field name='mail' type='email'
           component={this.formHelper.renderField.bind(this.formHelper)} label={this.i18n.t('application.contact.mail')}
           validate={[ this.formHelper.isRequired, this.formHelper.isValidEmail ]}
@@ -36,11 +36,13 @@ export class ContactFormComponent extends FormComponent {
           validate={[ this.formHelper.isRequired, this.formHelper.isLessThanMinLength(5), this.formHelper.isMoreThanMaxLength(100) ]}
           warn={this.formHelper.adviceDemo}
         />
-        <Field name='content' type='text'
+        <Field name='content' type='textarea'
           component={this.formHelper.renderField.bind(this.formHelper)} label={this.i18n.t('application.contact.content')}
           validate={[ this.formHelper.isRequired, this.formHelper.isLessThanMinLength(10), this.formHelper.isMoreThanMaxLength(2000) ]}
         />
-        <button type='submit'>Submit</button>
+        <div className='buttons'>
+          <button type='submit'>{this.i18n.t('application.contact.submit')}</button>
+        </div>
       </form>
     )
   }

src/app/module/contact/component/contact-form-component.spec.js

@@ -38,12 +38,20 @@ describe('ContactFormComponent', () => {
       expect(actual).to.have.length(1)
     })
 
-    it('Expect to contain 2 Field with type "text"', () => {
+    it('Expect to contain 1 Field with type "text"', () => {
       const wrapper = shallow(compo.render())
       const actual = wrapper.find(Field).findWhere(n => {
         return n.prop('type') === 'text'
       })
-      expect(actual).to.have.length(2)
+      expect(actual).to.have.length(1)
+    })
+
+    it('Expect to contain 1 Field with type "textarea"', () => {
+      const wrapper = shallow(compo.render())
+      const actual = wrapper.find(Field).findWhere(n => {
+        return n.prop('type') === 'textarea'
+      })
+      expect(actual).to.have.length(1)
     })
 
     it('Expect to contain 1 Field with name "mail"', () => {

src/app/module/contact/container/contact-container.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import ContactForm from './../component/contact-form-component'
 import ContactActions from './../action/contact-action'
+import LuciolePageHeader from './../../../common/component/page-header/page-header-component'
 
 /**
  * ContactPage container, used to define the composition of the ContactPage screen
@@ -13,8 +14,10 @@ import ContactActions from './../action/contact-action'
 export const ContactPage = (props) => {
   return (
     <div>
-      Contact page
-      <ContactForm onSubmit={props.contactActions.sendContactMessage} />
+      <LuciolePageHeader title='application.sidebar.contact' icon='envelope' />
+      <div className='lu-container'>
+        <ContactForm onSubmit={props.contactActions.sendContactMessage} />
+      </div>
     </div>
   )
 }

src/assets/lang/en.js

@@ -21,9 +21,10 @@ export default {
     contact: {
       toast_success_title: 'Let\'s go !',
       toast_success_text: 'Your message has been send.',
-      mail: 'Your email',
+      mail: 'Your mail address',
       subject: 'Subject',
-      content: 'Message content'
+      content: 'Message content',
+      submit: 'Send message'
     }
   },
   date: {

src/assets/lang/fr.js

@@ -21,9 +21,10 @@ export default {
     contact: {
       toast_success_title: 'C\'est parti !',
       toast_success_text: 'Votre message a bien été envoyé.',
-      mail: 'Votre mail',
+      mail: 'Votre adresse mail',
       subject: 'Sujet',
-      content: 'Contenu du message'
+      content: 'Contenu du message',
+      submit: 'Envoyer mon message'
     }
   },
   date: {

src/styles/_contact-container.scss

@@ -0,0 +1,22 @@
+/******************************
+* CONTACT CONTAINER
+* *****************************/
+
+.contact-form{
+  padding-left: 30%;
+  padding-right: 30%;
+  input{
+    width: 100%;
+  }
+  .buttons{
+    text-align: center;
+
+    button{
+      width: 100%;
+      margin: 0 0 0 0;
+    }
+  }
+  textarea{
+    height: 20em;
+  }
+}

src/styles/app-container.scss

@@ -23,6 +23,7 @@ $app-text-font: 'Play', serif;
 @import "main-container";
 @import "modals";
 @import "forms";
+@import "contact-container";
 
 // font-family: 'PT Sans', sans-serif;
 // font-family: 'Maitree', serif;
@@ -135,3 +136,31 @@ $app-text-font: 'Play', serif;
      color: $app-button-bg-color;
    }
  }
+
+ /******************************
+ * CONTAINERS
+ * *****************************/
+
+ .lu-container{
+   background-color: rgba(18, 25 ,46, 0.5);
+   padding: 10px 10px 10px 10px;
+   border-radius: 5px 5px 5px 5px;
+   margin-right: 5%;
+ }
+
+ /******************************
+ * PAGE HEADER
+ * *****************************/
+.page-header{
+  background-color: rgba(18, 25 ,46, 0.5);
+  display: inline-block;
+  padding: 10px 10px 10px 10px;
+  border-radius: 5px 5px 5px 5px;
+  text-transform: uppercase;
+  border: none;
+
+  h2{
+    display: inline;
+    margin-left: 10px;
+  }
+}