diff --git a/src/app/common/component/page-header/page-header-component.js b/src/app/common/component/page-header/page-header-component.js
new file mode 100644
index 0000000..ac05566
--- /dev/null
+++ b/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 (
+
+
+
+
+ )
+ }
+}
+
+/**
+ * The component properties' types
+ * @type {Object}
+ */
+LuciolePageHeader.propTypes = {
+ icon: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired
+}
+
+/**
+ * Export the component
+ */
+export default LuciolePageHeader
diff --git a/src/app/common/component/page-header/page-header-component.spec.js b/src/app/common/component/page-header/page-header-component.spec.js
new file mode 100644
index 0000000..24d09aa
--- /dev/null
+++ b/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()
+ expect(wrapper.find(ReactSVG)).to.be.length(1)
+ })
+
+ it('Expect to contain ReactSVG with good prop path', () => {
+ const wrapper = shallow()
+ 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()
+ 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()
+ const actual = wrapper.find(ReactSVG).props().className
+ const expected = 'classnameprop'
+ expect(actual).to.be.equal(expected)
+ })
+ })
+})
+*/
diff --git a/src/app/common/component/svg/luciole-svg-component.js b/src/app/common/component/svg/luciole-svg-component.js
index 35b2648..0472e16 100644
--- a/src/app/common/component/svg/luciole-svg-component.js
+++ b/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
diff --git a/src/app/module/contact/component/contact-form-component.js b/src/app/module/contact/component/contact-form-component.js
index 9a98813..0feb7e6 100644
--- a/src/app/module/contact/component/contact-form-component.js
+++ b/src/app/module/contact/component/contact-form-component.js
@@ -26,7 +26,7 @@ export class ContactFormComponent extends FormComponent {
*/
render () {
return (
-
)
}
diff --git a/src/app/module/contact/component/contact-form-component.spec.js b/src/app/module/contact/component/contact-form-component.spec.js
index 5d34b31..b9e2278 100644
--- a/src/app/module/contact/component/contact-form-component.spec.js
+++ b/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"', () => {
diff --git a/src/app/module/contact/container/contact-container.js b/src/app/module/contact/container/contact-container.js
index 09c59ad..8a08b11 100644
--- a/src/app/module/contact/container/contact-container.js
+++ b/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 (
)
}
diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js
index 6ad6209..cac3856 100644
--- a/src/assets/lang/en.js
+++ b/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: {
diff --git a/src/assets/lang/fr.js b/src/assets/lang/fr.js
index 45ca6fb..8e8b0f5 100644
--- a/src/assets/lang/fr.js
+++ b/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: {
diff --git a/src/styles/_contact-container.scss b/src/styles/_contact-container.scss
new file mode 100644
index 0000000..fca7759
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/styles/app-container.scss b/src/styles/app-container.scss
index 7aecafe..94b0125 100644
--- a/src/styles/app-container.scss
+++ b/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;
+ }
+}