From 8fb98b71d990d4e4efed85d2e12879c3becf47ac Mon Sep 17 00:00:00 2001 From: SebDez Date: Sun, 5 Mar 2017 00:53:33 +0100 Subject: [PATCH] feat : set design for contact page --- .../page-header/page-header-component.js | 38 +++++++++++++++++ .../page-header/page-header-component.spec.js | 42 +++++++++++++++++++ .../component/svg/luciole-svg-component.js | 2 +- .../component/contact-form-component.js | 8 ++-- .../component/contact-form-component.spec.js | 12 +++++- .../contact/container/contact-container.js | 7 +++- src/assets/lang/en.js | 5 ++- src/assets/lang/fr.js | 5 ++- src/styles/_contact-container.scss | 22 ++++++++++ src/styles/app-container.scss | 29 +++++++++++++ 10 files changed, 158 insertions(+), 12 deletions(-) create mode 100644 src/app/common/component/page-header/page-header-component.js create mode 100644 src/app/common/component/page-header/page-header-component.spec.js create mode 100644 src/styles/_contact-container.scss 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 (
- Contact page - + +
+ +
) } 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; + } +}