diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js index bdb5e1f9a3d3ef7dd4e59e970497070591fb5498..c7847176eb07db927e9e4acaf27bec7113e98c1d 100644 --- a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js +++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js @@ -1,5 +1,45 @@ -import React from 'react'; +import React, {Component} from 'react'; -const ApplicationDisplay = () => <div>Application Display</div> +import './styles.scss' -export default ApplicationDisplay; +const Meta = ({ question, answer }) => { + return ( + <div> + <h5>{question}</h5> + <p>{answer}</p> + </div> + ) +} + +const Response = ({question, answer}) => { + return ( + <section> + <h4>{question}</h4> + <p>{answer}</p> + </section> + ) +} + +export default class ApplicationDisplay extends Component { + render() { + const { metaResponses, responses } = this.props.submissionData; + + return ( + <div className="application-display"> + <h3>Proposal Information</h3> + + <div className="grid grid--proposal-info"> + {metaResponses.map(response => ( + <Meta question={response.question} answer={response.answer} /> + ))} + </div> + + <div className="rich-text rich-text--answers"> + {responses.map(response => ( + <Response question={response.question} answer={response.answer} /> + ))} + </div> + </div> + ) + } +} diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss new file mode 100644 index 0000000000000000000000000000000000000000..e7d2cac37ac3bb0110235a697dcd4e772586b381 --- /dev/null +++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/styles.scss @@ -0,0 +1,3 @@ +.application-display { + padding: 20px; +} diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js index d3d719c4ab0799fccc8a71905e7a5a92d1d0bc28..e04a9cbd32f24751441db3ede282486c5a9c5883 100644 --- a/opentech/static_src/src/app/src/components/DisplayPanel/index.js +++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js @@ -3,11 +3,39 @@ import ApplicationDisplay from '@components/ApplicationDisplay' import Tabber from '@components/Tabber' import './style.scss'; -const DisplayPanel = () => ( - <div className="display-panel"> - <ApplicationDisplay /> - <Tabber /> - </div> -); +const DisplayPanel = () => { + const data = { + metaResponses: [{ + question: 'Requested Funding', + answer: '123', + },{ + question: 'Proposal Duration', + answer: '1 month', + },{ + question: 'Legal name', + answer: 'Maya Summit' + }], + responses: [{ + question: 'Have you ever applied to or received funding as an OTF project?', + answer: 'This is a string. Nisi officia ea exercitation anim fugiat ut nulla elit voluptate nostrud aliqua. Incididunt incididunt occaecat esse nostrud. Ad duis do cupidatat et voluptate amet sint sint velit deserunt.' + },{ + question: 'Have you ever applied to or received funding as an OTF project?', + answer: '<p>Yes</p><ul><li>one</li><li>two</li></ul>' + }, { + question: 'Have you ever applied to or received funding as an OTF project?', + answer: ['One', 'Two', 'Three', 'Four', 'Five'] + }, { + question: 'Have you ever applied to or received funding as an OTF project?', + answer: ['<p>One</p>', '<b>Two</b>'] + }] + } + + return ( + <div className="display-panel"> + <ApplicationDisplay submissionData={data} /> + <Tabber /> + </div> + ) +}; export default DisplayPanel;