[B2BP-983] - Form : Add background image (#470)

* add background image * add review changes
pagopa · Oct 11, 2024 · 3dd56e8 · 3dd56e8
1 parent 2a64a37
commit 3dd56e8
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 128 deletions.
diff --git a/.changeset/rich-tigers-build.md b/.changeset/rich-tigers-build.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+add background image to form
diff --git a/apps/nextjs-website/react-components/components/Form/Form.tsx b/apps/nextjs-website/react-components/components/Form/Form.tsx
@@ -43,6 +43,7 @@ const Form = ({
  sectionID,
  buttonLabel,
  notes,
+ background,
 }: FormProps) => {
  const textColor = TextColor(theme);
  const graylinkColor = GrayLinkColor(theme);
@@ -249,156 +250,166 @@ const Form = ({
  return (
  <Box
  sx={{
- maxWidth: 900,
- mx: 'auto',
- p: 4,
- textAlign: 'center',
- borderRadius: 2,
- boxShadow: 3,
- color: textColor,
+ width: '100vw',
  position: 'relative',
+ backgroundImage: background ? `url(${background})` : undefined,
+ backgroundSize: 'cover',
+ backgroundPosition: 'center',
  }}
- component='section'
- {...(sectionID && { id: sectionID })}
  >
- <MailOutlineIcon
- sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
- />
- <Typography
- variant='h4'
- gutterBottom
- sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
+ <Box
+ sx={{
+ maxWidth: 900,
+ mx: 'auto',
+ p: 4,
+ textAlign: 'center',
+ borderRadius: 2,
+ boxShadow: 3,
+ color: textColor,
+ position: 'relative',
+ }}
+ component='section'
+ {...(sectionID && { id: sectionID })}
  >
- {title}
- </Typography>
- {subtitle && (
+ <MailOutlineIcon
+  sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
+  />
  <Typography
- variant='body1'
+ variant='h4'
  gutterBottom
- sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+ sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
  >
- {subtitle}
+ {title}
  </Typography>
- )}
- <Grid
- container
- spacing={2}
- sx={{ mb: 2, position: 'relative', zIndex: 3 }}
- >
- {inputFields.map(InputField)}
- </Grid>
- {categoriesTitle && categories.length > 0 && (
+ {subtitle && (
+ <Typography
+ variant='body1'
+ gutterBottom
+ sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+ >
+ {subtitle}
+ </Typography>
+ )}
+ <Grid
+ container
+ spacing={2}
+ sx={{ mb: 2, position: 'relative', zIndex: 3 }}
+ >
+ {inputFields.map(InputField)}
+ </Grid>
+ {categoriesTitle && categories.length > 0 && (
+ <Typography
+ variant='h6'
+ gutterBottom
+ sx={{
+ position: 'relative',
+ zIndex: 3,
+ mb: 2,
+ mt: 4,
+ color: textColor,
+ fontWeight: '700',
+ }}
+ >
+ {categoriesTitle}
+ </Typography>
+ )}
+ {categories.length > 0 && (
+ <FormCategories
+ categories={categories}
+ textColor={textColor}
+ borderColor={borderColor}
+ selectedCategory={formData.category}
+ handleRadioChange={handleRadioChange}
+ />
+ )}
  <Typography
- variant='h6'
- gutterBottom
+ variant='body2'
  sx={{
+ mb: 2,
  position: 'relative',
  zIndex: 3,
- mb: 2,
- mt: 4,
  color: textColor,
- fontWeight: '700',
+ textAlign: 'start',
  }}
  >
- {categoriesTitle}
+ *Campo obbligatorio
  </Typography>
- )}
- {categories.length > 0 && (
- <FormCategories
- categories={categories}
- textColor={textColor}
- borderColor={borderColor}
- selectedCategory={formData.category}
- handleRadioChange={handleRadioChange}
- />
- )}
- <Typography
- variant='body2'
- sx={{
- mb: 2,
- position: 'relative',
- zIndex: 3,
- color: textColor,
- textAlign: 'start',
- }}
- >
- *Campo obbligatorio
- </Typography>
- <Button
- variant='contained'
- sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
- onClick={handleSubmit}
- color={theme === 'dark' ? 'negative' : 'primary'}
- >
- {buttonLabel}
- </Button>
- {submissionStatus === 'success' && (
- <Alert
- severity='success'
- sx={{
- maxWidth: 'fit-content',
- margin: '16px auto 0px auto',
- padding: '8px 16px',
- border: 'none',
- backgroundColor: '#e1f4e1',
- textAlign: 'center',
- fontWeight: 'bold',
- '& .MuiAlert-icon': {
- display: 'none',
- },
- }}
+ <Button
+ variant='contained'
+ sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
+ onClick={handleSubmit}
+ color={theme === 'dark' ? 'negative' : 'primary'}
  >
- Grazie! La tua richiesta è stata registrata
- </Alert>
- )}
- {submissionStatus === 'failure' && (
- <Alert
- severity='error'
- sx={{
- maxWidth: 'fit-content',
- margin: '16px auto 0px auto',
- padding: '8px 16px',
- border: 'none',
- backgroundColor: '#ffd9d9',
- textAlign: 'center',
- fontWeight: 'bold',
- '& .MuiAlert-icon': {
- display: 'none',
- },
- }}
- >
- Purtroppo in questo momento non è possibile registrare la tua
- richiesta
- </Alert>
- )}
- {notes && (
- <Typography
- component='div'
- variant='body2'
- sx={{
- mt: 2,
- position: 'relative',
- zIndex: 3,
- color: graylinkColor,
- '& a': {
+ {buttonLabel}
+ </Button>
+ {submissionStatus === 'success' && (
+ <Alert
+ severity='success'
+ sx={{
+ maxWidth: 'fit-content',
+ margin: '16px auto 0px auto',
+ padding: '8px 16px',
+ border: 'none',
+ backgroundColor: '#e1f4e1',
+ textAlign: 'center',
+ fontWeight: 'bold',
+ '& .MuiAlert-icon': {
+ display: 'none',
+ },
+ }}
+ >
+ Grazie! La tua richiesta è stata registrata
+ </Alert>
+ )}
+ {submissionStatus === 'failure' && (
+ <Alert
+ severity='error'
+ sx={{
+ maxWidth: 'fit-content',
+ margin: '16px auto 0px auto',
+ padding: '8px 16px',
+ border: 'none',
+ backgroundColor: '#ffd9d9',
+ textAlign: 'center',
+ fontWeight: 'bold',
+ '& .MuiAlert-icon': {
+ display: 'none',
+ },
+ }}
+ >
+ Purtroppo in questo momento non è possibile registrare la tua
+ richiesta
+ </Alert>
+ )}
+ {notes && (
+ <Typography
+ component='div'
+ variant='body2'
+ sx={{
+ mt: 2,
+ position: 'relative',
+ zIndex: 3,
  color: graylinkColor,
- textDecoration: 'underline',
- '&:hover': {
+ '& a': {
  color: graylinkColor,
  textDecoration: 'underline',
+ '&:hover': {
+ color: graylinkColor,
+ textDecoration: 'underline',
+ },
  },
- },
- }}
- >
- {notes}
- </Typography>
- )}
+ }}
+ >
+ {notes}
+ </Typography>
+ )}
 
- <RECAPTCHA
- size='invisible'
- ref={recaptchaRef}
- sitekey={recaptchaSiteKey}
- />
+ <RECAPTCHA
+ size='invisible'
+ ref={recaptchaRef}
+ sitekey={recaptchaSiteKey}
+ />
+ </Box>
  </Box>
  );
 };

diff --git a/apps/nextjs-website/react-components/types/Form/Form.types.ts b/apps/nextjs-website/react-components/types/Form/Form.types.ts
@@ -24,6 +24,7 @@ export interface FormProps extends SectionProps, FormFields, FormCategories {
  readonly recaptchaSiteKey: string;
  readonly buttonLabel: string;
  readonly notes?: JSX.Element;
+ readonly background?: string;
 }
 
 export interface FormData {

diff --git a/apps/nextjs-website/src/components/Form.tsx b/apps/nextjs-website/src/components/Form.tsx
@@ -10,6 +10,7 @@ const makeFormProps = ({
  categoriesTitle,
  buttonLabel,
  notes,
+ background,
  ...rest
 }: FormSection): FormProps => ({
  categories: categories.map(({ additionalInfo, ...category }) => ({
@@ -20,6 +21,7 @@ const makeFormProps = ({
  ...(categoriesTitle && { categoriesTitle }),
  buttonLabel,
  ...(notes && { notes: MarkdownRenderer({ markdown: notes }) }),
+ ...(background.data && { background: background.data.attributes.url }),
  ...rest,
 });
 

diff --git a/apps/nextjs-website/src/lib/fetch/types/PageSection.ts b/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
@@ -200,6 +200,7 @@ const FormSectionCodec = t.strict({
  sectionID: t.union([t.string, t.null]),
  buttonLabel: t.string,
  notes: t.union([t.string, t.null]),
+ background: StrapiImageSchema,
 });
 
 const CounterCodec = t.strict({