Merge branch 'issue/20' into 'development'

Issue/20

See merge request !20

src/components/fieldsAnswerForm/FormFieldCheckbox.js

@@ -100,7 +100,11 @@ function FormFieldCheckbox(props) {
   const options = props.options.map((x, index) => {
     return (
       <span>
-        <Typography className={classes.text} variant="h7">
+        <Typography
+          style={{ wordWrap: "break-word" }}
+          className={classes.text}
+          variant="h7"
+        >
           {x.value}
         </Typography>
         <Checkbox onChange={() => handleArray(index)} />
@@ -117,10 +121,16 @@ function FormFieldCheckbox(props) {
     <Paper className={classes.paper}>
       <Grid container>
         <Grid item xs={12} className={classes.questionsGrid}>
-          <Typography className={classes.text} variant="h6">
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.text}
+            variant="h6"
+          >
             {props.question}
           </Typography>
-          <Typography variant="h8">{props.description}</Typography>
+          <Typography style={{ wordWrap: "break-word" }} variant="h8">
+            {props.description}
+          </Typography>
         </Grid>
         <Grid
           item
@@ -133,7 +143,12 @@ function FormFieldCheckbox(props) {
         >
           {options}
           <div>
-            <Typography className={classes.validation}>{valid}</Typography>
+            <Typography
+              style={{ wordWrap: "break-word" }}
+              className={classes.validation}
+            >
+              {valid}
+            </Typography>
           </div>
         </Grid>
       </Grid>

src/components/fieldsAnswerForm/FormFieldRadio.js

@@ -111,7 +111,11 @@ function FormFieldRadio(props) {
   const options = props.options.map(function(x, index) {
     return (
       <span>
-        <Typography className={classes.text} variant="h7">
+        <Typography
+          style={{ wordWrap: "break-word" }}
+          className={classes.text}
+          variant="h7"
+        >
           {x.value}
         </Typography>
         <Radio
@@ -133,10 +137,16 @@ function FormFieldRadio(props) {
     <Paper className={classes.paper}>
       <Grid container>
         <Grid item xs={12} className={classes.questionsGrid}>
-          <Typography className={classes.text} variant="h6">
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.text}
+            variant="h6"
+          >
             {props.question}
           </Typography>
-          <Typography variant="h8">{props.description}</Typography>
+          <Typography style={{ wordWrap: "break-word" }} variant="h8">
+            {props.description}
+          </Typography>
         </Grid>
         <Grid
           item
@@ -149,7 +159,12 @@ function FormFieldRadio(props) {
         >
           <RadioGroup>
             {options}
-            <Typography className={classes.validation}>{valid}</Typography>
+            <Typography
+              style={{ wordWrap: "break-word" }}
+              className={classes.validation}
+            >
+              {valid}
+            </Typography>
           </RadioGroup>
         </Grid>
       </Grid>

src/components/fieldsAnswerForm/FormFieldSelect.js

@@ -122,10 +122,18 @@ function FormFieldSelect(props) {
     <Paper className={classes.paper}>
       <Grid container>
         <Grid item xs={12} className={classes.questionsGrid}>
-          <Typography className={classes.text} variant="h6">
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.text}
+            variant="h6"
+          >
             {props.question}
           </Typography>
-          <Typography variant="h8" gutterBottom>
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            variant="h8"
+            gutterBottom
+          >
             {props.description}
           </Typography>
         </Grid>
@@ -145,7 +153,12 @@ function FormFieldSelect(props) {
           >
             {options}
           </Select>
-          <Typography className={classes.validation}>{valid}</Typography>
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.validation}
+          >
+            {valid}
+          </Typography>
         </Grid>
       </Grid>
     </Paper>

src/components/fieldsAnswerForm/FormFieldText.js

@@ -99,10 +99,16 @@ function FormFieldText(props) {
     <Paper className={classes.paper}>
       <Grid container>
         <Grid item xs={12} className={classes.questionsGrid}>
-          <Typography className={classes.text} variant="h6">
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.text}
+            variant="h6"
+          >
             {props.question}
           </Typography>
-          <Typography variant="h8">{props.description}</Typography>
+          <Typography style={{ wordWrap: "break-word" }} variant="h8">
+            {props.description}
+          </Typography>
         </Grid>
         <Grid item xs={9} className={classes.questionsGrid}>
           <TextField
@@ -112,7 +118,12 @@ function FormFieldText(props) {
             placeholder="Resposta"
             onChange={handleChange}
           />
-          <Typography className={classes.validation}>{valid}</Typography>
+          <Typography
+            style={{ wordWrap: "break-word" }}
+            className={classes.validation}
+          >
+            {valid}
+          </Typography>
         </Grid>
         <Grid
           item

src/components/fieldsAnswerForm/FormFieldTitle.js

-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import Paper from "@material-ui/core/Paper";
+import Typography from "@material-ui/core/Typography";
 
-import FieldFooterOptions from './FieldFooterOptions';
+import FieldFooterOptions from "./FieldFooterOptions";
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -12,7 +12,7 @@ const useStyles = makeStyles(theme => ({
     width: theme.spacing(100),
     height: theme.spacing(22),
     margin: theme.spacing(2),
-    color: '#000000',
+    color: "#000000",
     ["@media (max-width:827px)"]: {
       width: theme.spacing(70)
     },
@@ -21,32 +21,32 @@ const useStyles = makeStyles(theme => ({
     }
   },
   questionsGrid: {
-    marginBottom: '20px',
-    color: '#000000',
+    marginBottom: "20px",
+    color: "#000000",
     ["@media (max-width:827px)"]: {
       width: theme.spacing(70)
     }
   },
   title: {
-    fontSize: '45px',
-    color: '#000000',
+    fontSize: "45px",
+    color: "#000000",
     ["@media (max-width:827px)"]: {
-      fontSize: '35px'
+      fontSize: "35px"
     },
     ["@media (max-width:590px)"]: {
-      fontSize: '25px'
+      fontSize: "25px"
     }
   },
   description: {
-    fontSize: '30px',
-    color: '#000000',
+    fontSize: "30px",
+    color: "#000000",
     ["@media (max-width:827px)"]: {
-      fontSize: '25px'
+      fontSize: "25px"
     },
     ["@media (max-width:590px)"]: {
-      fontSize: '15px'
+      fontSize: "15px"
+    }
   }
-  },
 }));
 
 function FormFieldText(props) {
@@ -57,27 +57,37 @@ function FormFieldText(props) {
       <Paper className={classes.paper}>
         <Grid container>
           <Grid item xs={12} className={classes.questionsGrid}>
-            <Typography className={classes.title} variant="h3" gutterBottom>
+            <Typography
+              style={{ wordWrap: "break-word" }}
+              className={classes.title}
+              variant="h3"
+              gutterBottom
+            >
               {props.title}
             </Typography>
           </Grid>
           <Grid item xs={9} className={classes.questionsGrid}>
-            <Typography className={classes.description} variant="h4" gutterBottom>
+            <Typography
+              style={{ wordWrap: "break-word" }}
+              className={classes.description}
+              variant="h4"
+              gutterBottom
+            >
               {props.description}
             </Typography>
           </Grid>
-          <Grid item container
+          <Grid
+            item
+            container
             direction="row"
             justify="flex-end"
             alignItems="flex-end"
             xs={3}
-          >
-          </Grid>
+          ></Grid>
         </Grid>
       </Paper>
     </Grid>
   );
-
 }
 
 export default FormFieldText;

src/components/fieldsListForms/CardForm.jsx

@@ -97,7 +97,7 @@ function CardForm(props) {
   return (
     <ExpansionPanel>
       <ExpansionPanelSummary expandIcon={<MoreVertOutlinedIcon />}>
-        <Typography className={classes.title}>
+        <Typography noWrap className={classes.title}>
           {props.title}
           <br />
           <div className={classes.create} noWrap>