diff --git a/client/src/components/IQContactForm/IQContactForm.tsx b/client/src/components/IQContactForm/IQContactForm.tsx new file mode 100644 index 00000000..2bf4e41f --- /dev/null +++ b/client/src/components/IQContactForm/IQContactForm.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +import * as CONTACT_COPY from '../../data/copy/contact'; + +interface IIQContactForm { + messageType: string + } + +const IQContactForm = ({messageType}:IIQContactForm) => { + if (messageType === '') return null; + if (messageType === CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT.defaultMessage) { + return ; + } else { + return ; + } +}; + +export default IQContactForm; diff --git a/client/src/components/IQContactForm/index.tsx b/client/src/components/IQContactForm/index.tsx new file mode 100644 index 00000000..f837b998 --- /dev/null +++ b/client/src/components/IQContactForm/index.tsx @@ -0,0 +1,3 @@ +import IQContactForm from './IQContactForm'; + +export default IQContactForm; diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx index ab79ee58..ebf5f4f2 100644 --- a/client/src/data/copy/contact.tsx +++ b/client/src/data/copy/contact.tsx @@ -29,4 +29,27 @@ export const CONTACT_VIA_EMAIL = { DEFAULT_MESSAGE: `For general feedback, email {general_email_address}`, }; +export const MESSAGE_TYPES = defineMessages({ + FORM_SELECTION_PROMPT: { + id: 'contact.page.message.type.prompt', + defaultMessage: 'What would you like to inform us about?', + description: 'prompt to select the message type', + }, + BUG_REPORT: { + id: 'contact.page.message.type.bug', + defaultMessage: 'Report a bug', + description: 'selecting a type of message, a bug', + }, + COMMUNITY_FEEDBACK: { + id: 'contact.page.message.type.community.feedback', + defaultMessage: 'Community feedback', + description: 'selecting a type of message, community feedback', + }, + DATASET_FEEDBACK: { + id: 'contact.page.message.type.dataset.feedback', + defaultMessage: 'Dataset feedback', + description: 'selecting a type of message, dataset feedback', + }, +}); + export const FEEDBACK_EMAIL = 'screeningtool.feedback@usds.gov'; diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index 1ddefaff..9879e97e 100644 --- a/client/src/pages/contact.tsx +++ b/client/src/pages/contact.tsx @@ -1,7 +1,8 @@ -import * as React from 'react'; -import {Grid} from '@trussworks/react-uswds'; +import React, {useState} from 'react'; +import {Grid, ComboBox, Label} from '@trussworks/react-uswds'; import {useIntl, FormattedMessage} from 'gatsby-plugin-intl'; +import IQContactForm from '../components/IQContactForm'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; @@ -13,6 +14,28 @@ interface IContactPageProps { const ContactPage = ({location}: IContactPageProps) => { const intl = useIntl(); + const [messageType, setMessageType] = useState(''); + + + const messageTypes = [ + { + value: CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT.defaultMessage, + label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT), + }, + { + value: CONTACT_COPY.MESSAGE_TYPES.COMMUNITY_FEEDBACK.defaultMessage, + label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.COMMUNITY_FEEDBACK), + }, + { + value: CONTACT_COPY.MESSAGE_TYPES.DATASET_FEEDBACK.defaultMessage, + label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.DATASET_FEEDBACK), + }, + ]; + + const onMessageTypeChange = (messageType:string | undefined) => { + console.log('messageType', messageType); + if (messageType) setMessageType(messageType); + }; return ( @@ -26,6 +49,20 @@ const ContactPage = ({location}: IContactPageProps) => {

{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}

+ + + onMessageTypeChange(messageType)} + ulProps={{'aria-labelledby': 'message-type-label'}} + /> + + +

{ , }}/>

+