chore/PIN-9521: align with design required field

src/components/shared/RequiredTextLabel.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material'
+import { theme } from '@pagopa/mui-italia'
+import { useTranslation } from 'react-i18next'
+
+export const RequiredTextLabel: React.FC = () => {
+  const { t } = useTranslation('shared-components')
+  return (
+    <Typography
+      sx={{
+        fontSize: 16,
+        fontWeight: 700,
+        color: theme.palette.error.dark,
+      }}
+    >
+      {t('requiredLabel')}
+    </Typography>
+  )
+}

src/components/shared/react-hook-form-inputs/RHFRadioGroup.tsx

@@ -12,6 +12,7 @@ import type { InputRadioGroupOption } from '@/types/common.types'
 import type { ControllerProps } from 'react-hook-form/dist/types'
 import { useTranslation } from 'react-i18next'
 import { mapValidationErrorMessages } from '@/utils/form.utils'
+import { theme } from '@pagopa/mui-italia'
 
 export type RHFRadioGroupProps = Omit<MUIRadioGroupProps, 'onChange'> & {
   label?: string | JSX.Element
@@ -51,7 +52,17 @@ export const RHFRadioGroup: React.FC<RHFRadioGroupProps> = ({
   return (
     <InputWrapper error={error} sx={sx} infoLabel={infoLabel}>
       {label && (
-        <FormLabel sx={{ fontWeight: 600, mb: props.row ? 1 : 0 }} id={labelId} required={required}>
+        <FormLabel
+          sx={{
+            fontWeight: 600,
+            mb: props.row ? 1 : 0,
+            '& .MuiFormLabel-asterisk': {
+              color: required ? theme.palette.error.dark : 'inherit',
+            },
+          }}
+          id={labelId}
+          required={required}
+        >
           {label}
         </FormLabel>
       )}

src/components/shared/react-hook-form-inputs/RHFTextField.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { TextField as MUITextField, type TextFieldProps as MUITextFieldProps } from '@mui/material'
+import { theme } from '@pagopa/mui-italia'
 import { InputWrapper } from '../InputWrapper'
 import type { FieldErrors, FieldValues } from 'react-hook-form'
 import { useFormContext, Controller } from 'react-hook-form'
@@ -72,6 +73,11 @@ export const RHFTextField: React.FC<RHFTextFieldProps> = ({
             multiline={multiline}
             rows={multiline && !rows ? 2.5 : rows}
             error={!!error}
+            sx={{
+              '& .MuiFormLabel-asterisk': {
+                color: props.required ? theme.palette.error.dark : 'inherit',
+              },
+            }}
             InputLabelProps={
               labelType === 'external'
                 ? {

src/pages/ConsumerPurposeCreatePage/ConsumerPurposeCreate.page.tsx

@@ -3,7 +3,7 @@ import { PageContainer } from '@/components/layout/containers'
 import { useTranslation } from 'react-i18next'
 import { PurposeCreateForm } from './components/PurposeCreateForm'
 import { useParams } from '@/router'
-import { Typography } from '@mui/material'
+import { RequiredTextLabel } from '@/components/shared/RequiredTextLabel'
 
 const ConsumerPurposeCreatePage: React.FC = () => {
   const { t } = useTranslation('purpose')
@@ -17,15 +17,7 @@ const ConsumerPurposeCreatePage: React.FC = () => {
         to: 'SUBSCRIBE_PURPOSE_LIST',
       }}
     >
-      <Typography
-        sx={{
-          fontSize: 16,
-          fontWeight: 700,
-          color: 'text.secondary',
-        }}
-      >
-        {t('create.requiredLabel')}
-      </Typography>
+      <RequiredTextLabel />
       <PurposeCreateForm purposeTemplateId={purposeTemplateId} />
     </PageContainer>
   )

src/pages/ConsumerPurposeCreatePage/__tests__/ConsumerPurposeCreate.page.test.tsx

@@ -29,6 +29,6 @@ describe('ConsumerPurposeCreatePage', () => {
       withRouterContext: true,
     })
 
-    expect(screen.getByText('create.requiredLabel')).toBeInTheDocument()
+    expect(screen.getByText('requiredLabel')).toBeInTheDocument()
   })
 })

src/pages/ConsumerPurposeEditPage/ConsumerPurposeEdit.page.tsx

@@ -9,7 +9,7 @@ import { PurposeEditStepRiskAnalysis } from './components/PurposeEditStepRiskAna
 import { useParams, useNavigate } from '@/router'
 import { PurposeQueries } from '@/api/purpose'
 import { useQuery } from '@tanstack/react-query'
-import { Typography } from '@mui/material'
+import { RequiredTextLabel } from '@/components/shared/RequiredTextLabel'
 
 const ConsumerPurposeEditPage: React.FC = () => {
   const { t } = useTranslation('purpose')
@@ -61,15 +61,7 @@ const ConsumerPurposeEditPage: React.FC = () => {
         to: 'SUBSCRIBE_PURPOSE_LIST',
       }}
     >
-      <Typography
-        sx={{
-          fontSize: 16,
-          fontWeight: 700,
-          color: 'text.secondary',
-        }}
-      >
-        {t('create.requiredLabel')}
-      </Typography>
+      <RequiredTextLabel />
       {!isReceive && <Stepper steps={steps} activeIndex={activeStep} />}
       <Step {...stepProps} />
     </PageContainer>

src/pages/ProviderEServiceCreatePage/ProviderEServiceCreate.page.tsx

@@ -34,8 +34,9 @@ import {
   EServiceCreateStepThresholds,
   EServiceCreateStepThresholdsSkeleton,
 } from './components/EServiceCreateStepThresholds'
-import { Link, Typography } from '@mui/material'
+import { Link } from '@mui/material'
 import { PUBLIC_URL } from '@/config/env'
+import { RequiredTextLabel } from '@/components/shared/RequiredTextLabel'
 
 const ProviderEServiceCreatePage: React.FC = () => {
   const { t } = useTranslation('eservice')
@@ -127,9 +128,8 @@ const ProviderEServiceCreatePage: React.FC = () => {
         ]
 
   const templateId = eserviceTemplate?.id
-  const activeTemplateVersionId = eserviceTemplate?.versions.find(
-    (v) => v.state === 'PUBLISHED'
-  )?.id
+  const activeTemplateVersionId = eserviceTemplate?.versions.find((v) => v.state === 'PUBLISHED')
+    ?.id
 
   const intro = isNewEService
     ? { title: t('create.emptyTitle') }
@@ -172,15 +172,7 @@ const ProviderEServiceCreatePage: React.FC = () => {
       }}
       isLoading={!isReady}
     >
-      <Typography
-        sx={{
-          fontSize: 16,
-          fontWeight: 700,
-          color: 'text.secondary',
-        }}
-      >
-        {t('create.requiredLabel')}
-      </Typography>
+      <RequiredTextLabel />
       <Stepper steps={steps} activeIndex={activeStep} />
       {isReady && (
         <EServiceCreateContextProvider

src/pages/ProviderEServiceTemplateCreatePage/ProviderEServiceTemplateCreate.page.tsx

@@ -30,6 +30,7 @@ import {
   EServiceTemplateCreateStepTechnicalSpecs,
   EServiceTemplateCreateStepTechnicalSpecsSkeleton,
 } from './components/EServiceTemplateCreateStepTechnicalSpecs/EServiceTemplateCreateStepTechnicalSpecs'
+import { RequiredTextLabel } from '@/components/shared/RequiredTextLabel'
 
 const ProviderEServiceCreatePage: React.FC = () => {
   const { t } = useTranslation('eserviceTemplate')
@@ -161,17 +162,7 @@ const ProviderEServiceCreatePage: React.FC = () => {
       }}
       isLoading={!isReady}
     >
-      {showRequiredLabel && (
-        <Typography
-          sx={{
-            fontSize: 16,
-            fontWeight: 700,
-            color: 'text.secondary',
-          }}
-        >
-          {t('create.requiredLabel')}
-        </Typography>
-      )}
+      {showRequiredLabel && <RequiredTextLabel />}
       <Stepper steps={steps} activeIndex={activeStep} />
       {isReady && (
         <EServiceTemplateCreateContextProvider

src/static/locales/en/eservice.json

@@ -3,7 +3,6 @@
   "backToEServiceBtn": "Back to the e-service",
   "create": {
     "emptyTitle": "Create e-service",
-    "requiredLabel": "*Required fields.",
     "stepper": {
       "step1Label": "General",
       "step2Label": "Thresholds and attributes",

src/static/locales/en/eserviceTemplate.json

@@ -209,7 +209,6 @@
   "backToListBtn": "Back to templates",
   "create": {
     "emptyTitle": "Create e-service template",
-    "requiredLabel": "*Required fields",
     "stepper": {
       "step1Label": "General information",
       "step2Label": "Thresholds and attributes",

src/static/locales/en/purpose.json

@@ -2,7 +2,6 @@
   "backToListBtn": "Back to purposes",
   "create": {
     "emptyTitle": "Create purpose",
-    "requiredLabel": "*Required fields.",
     "preliminaryInformationSectionTitle": "Purpose information",
     "isTemplateField": {
       "label": "Clone from template"
@@ -64,7 +63,6 @@
   },
   "edit": {
     "emptyTitle": "Edit purpose",
-    "requiredLabel": "*Required fields.",
     "stepper": {
       "stepGeneralLabel": "General",
       "stepRiskAnalysisLabel": "Risk assessment"

src/static/locales/en/shared-components.json

@@ -465,6 +465,8 @@
   "documents": {
     "notAvailableYet": "The document will be available soon"
   },
+
+  "requiredLabel": "*Required fields.",
   "routeLabels": {
     "LOGOUT": "Logout",
     "TOS": "Terms of Service",

src/static/locales/it/eservice.json

@@ -3,7 +3,6 @@
   "backToEServiceBtn": "Torna all'e-service",
   "create": {
     "emptyTitle": "Crea e-service",
-    "requiredLabel": "*Campi obbligatori.",
     "stepper": {
       "step1Label": "Generale",
       "step2Label": "Soglie e attributi",

src/static/locales/it/eserviceTemplate.json

@@ -209,7 +209,6 @@
   "backToListBtn": "Torna ai template",
   "create": {
     "emptyTitle": "Crea template di e-service",
-    "requiredLabel": "*Campi obbligatori",
     "stepper": {
       "step1Label": "Informazioni generali",
       "step2Label": "Soglie e attributi",

src/static/locales/it/purpose.json

@@ -2,7 +2,6 @@
   "backToListBtn": "Torna alle finalità",
   "create": {
     "emptyTitle": "Crea finalità",
-    "requiredLabel": "*Campi obbligatori.",
     "preliminaryInformationSectionTitle": "Informazioni sulla finalità",
     "isTemplateField": {
       "label": "Usa un template precompilato"
@@ -64,7 +63,6 @@
   },
   "edit": {
     "emptyTitle": "Modifica finalità",
-    "requiredLabel": "*Campi obbligatori.",
     "stepper": {
       "stepGeneralLabel": "Informazioni generali",
       "stepRiskAnalysisLabel": "Analisi del rischio"

src/static/locales/it/shared-components.json

@@ -465,6 +465,9 @@
   "documents": {
     "notAvailableYet": "Il documento sarà disponibile a breve"
   },
+
+  "requiredLabel": "*Campi obbligatori",
+
   "routeLabels": {
     "LOGOUT": "Logout",
     "TOS": "Termini di servizio",