💄(frontend) change elements positions in mailbox creation form
- remove icon on top of mailbox creation form - change some text positions - fix fields error style on hover - update form field names translations - update related e2e tests
This commit is contained in:
daproclaima
committed by
Sebastien Nobour
Sebastien Nobour
parent
32e6602dda
commit
e0000ca89c
@@ -103,6 +103,10 @@
|
||||
color: var(--c--theme--colors--danger-600);
|
||||
}
|
||||
|
||||
.c__input__wrapper--error .labelled-box label.placeholder {
|
||||
color: var(--c--theme--colors--danger-600);
|
||||
}
|
||||
|
||||
.c__input__wrapper--error:not(.c__input__wrapper--disabled):hover label {
|
||||
color: var(--c--components--forms-input--border--color-error-hover);
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M21.34 26.04C20.9 26.02 20.46 26 20 26C15.16 26 10.64 27.34 6.78 29.64C5.02 30.68 4 32.64 4 34.7V40H22.52C20.94 37.74 20 34.98 20 32C20 29.86 20.5 27.86 21.34 26.04Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M20 24C24.4183 24 28 20.4183 28 16C28 11.5817 24.4183 8 20 8C15.5817 8 12 11.5817 12 16C12 20.4183 15.5817 24 20 24Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M33 24C28.032 24 24 28.032 24 33C24 37.968 28.032 42 33 42C37.968 42 42 37.968 42 33C42 28.032 37.968 24 33 24ZM36.6 33.9H33.9V36.6C33.9 37.095 33.495 37.5 33 37.5C32.505 37.5 32.1 37.095 32.1 36.6V33.9H29.4C28.905 33.9 28.5 33.495 28.5 33C28.5 32.505 28.905 32.1 29.4 32.1H32.1V29.4C32.1 28.905 32.505 28.5 33 28.5C33.495 28.5 33.9 28.905 33.9 29.4V32.1H36.6C37.095 32.1 37.5 32.505 37.5 33C37.5 33.495 37.095 33.9 36.6 33.9Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 925 B |
@@ -19,16 +19,15 @@ import { createGlobalStyle } from 'styled-components';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { Box, Text, TextErrors } from '@/components';
|
||||
import { useCunninghamTheme } from '@/cunningham';
|
||||
|
||||
import { CreateMailboxParams, useCreateMailbox } from '../../api';
|
||||
import IconCreateMailbox from '../../assets/create-mailbox.svg';
|
||||
import { MailDomain } from '../../types';
|
||||
|
||||
const FORM_ID: string = 'form-create-mailbox';
|
||||
|
||||
const GlobalStyle = createGlobalStyle`
|
||||
.c__field__footer__top > .c__field__text {
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
}
|
||||
`;
|
||||
@@ -42,20 +41,12 @@ export const CreateMailboxForm = ({
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToastProvider();
|
||||
const { colorsTokens } = useCunninghamTheme();
|
||||
|
||||
const messageInvalidMinChar = t('You must have minimum 1 character');
|
||||
|
||||
const createMailboxValidationSchema = z.object({
|
||||
first_name: z
|
||||
.string()
|
||||
.min(
|
||||
1,
|
||||
t('Please enter {{fieldName}}', { fieldName: 'your first name' }),
|
||||
),
|
||||
last_name: z
|
||||
.string()
|
||||
.min(1, t('Please enter {{fieldName}}', { fieldName: 'your last name' })),
|
||||
first_name: z.string().min(1, t('Please enter your first name')),
|
||||
last_name: z.string().min(1, t('Please enter your last name')),
|
||||
local_part: z
|
||||
.string()
|
||||
.regex(
|
||||
@@ -70,8 +61,7 @@ export const CreateMailboxForm = ({
|
||||
.regex(
|
||||
/[^@\s]+@[^@\s]+\.[^@\s]+/,
|
||||
t('Please enter a valid email address.\nE.g. : jean.dupont@mail.fr'),
|
||||
)
|
||||
.min(1, messageInvalidMinChar),
|
||||
),
|
||||
});
|
||||
|
||||
const methods = useForm<CreateMailboxParams>({
|
||||
@@ -149,22 +139,15 @@ export const CreateMailboxForm = ({
|
||||
}
|
||||
size={ModalSize.MEDIUM}
|
||||
title={
|
||||
<Box $align="center" $gap="1rem">
|
||||
<IconCreateMailbox
|
||||
width={48}
|
||||
color={colorsTokens()['primary-text']}
|
||||
title={t('Mailbox creation form')}
|
||||
/>
|
||||
<Text
|
||||
$size="h3"
|
||||
$margin="none"
|
||||
role="heading"
|
||||
aria-level={3}
|
||||
title={t('Create a mailbox')}
|
||||
>
|
||||
{t('Create a mailbox')}
|
||||
</Text>
|
||||
</Box>
|
||||
<Text
|
||||
$size="h3"
|
||||
$margin="none"
|
||||
role="heading"
|
||||
aria-level={3}
|
||||
title={t('Create a mailbox')}
|
||||
>
|
||||
{t('Create a mailbox')}
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<GlobalStyle />
|
||||
@@ -172,6 +155,14 @@ export const CreateMailboxForm = ({
|
||||
{!!causes?.length && (
|
||||
<TextErrors $margin={{ bottom: 'small' }} causes={causes} />
|
||||
)}
|
||||
<Text
|
||||
$margin={{ horizontal: 'none', vertical: 'big' }}
|
||||
$size="m"
|
||||
$display="inline-block"
|
||||
$textAlign="left"
|
||||
>
|
||||
{t('All fields are mandatory.')}
|
||||
</Text>
|
||||
{methods ? (
|
||||
<Form
|
||||
methods={methods}
|
||||
|
||||
@@ -101,7 +101,8 @@
|
||||
"Owner": "Propriétaire",
|
||||
"Personal data and cookies": "Données personnelles et cookies",
|
||||
"Please enter a valid email address.\nE.g. : jean.dupont@mail.fr": "Veuillez entrer une adresse e-mail valide.\nEx. : jean.dupont@mail.fr",
|
||||
"Please enter {{fieldName}}": "Veuillez entrer {{fieldName}}",
|
||||
"Please enter your first name": "Veuillez saisir votre prénom",
|
||||
"Please enter your last name": "Veuillez saisir votre nom",
|
||||
"Publication Director": "Directeur de la publication",
|
||||
"Publisher": "Éditeur",
|
||||
"Radio buttons to update the roles": "Boutons radio pour mettre à jour les rôles",
|
||||
|
||||
@@ -166,11 +166,11 @@ test.describe('Mail domain create mailbox', () => {
|
||||
|
||||
await page.getByRole('button', { name: 'Cancel' }).click();
|
||||
|
||||
await expect(page.getByTitle('Mailbox creation form')).toBeHidden();
|
||||
await expect(page.getByTitle('Create a mailbox')).toBeHidden();
|
||||
|
||||
await page.getByRole('button', { name: 'Create a mailbox' }).click();
|
||||
|
||||
await expect(page.getByTitle('Mailbox creation form')).toBeVisible();
|
||||
await expect(page.getByTitle('Create a mailbox')).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole('heading', { name: 'Create a mailbox' }),
|
||||
).toBeVisible();
|
||||
@@ -208,7 +208,7 @@ test.describe('Mail domain create mailbox', () => {
|
||||
await page.getByRole('button', { name: 'Create the mailbox' }).click();
|
||||
|
||||
expect(isCreateMailboxRequestSentWithExpectedPayload).toBeTruthy();
|
||||
await expect(page.getByAltText('Mailbox creation form')).toBeHidden();
|
||||
await expect(page.getByTitle('Create a mailbox')).toBeHidden();
|
||||
await expect(page.getByText('Mailbox created!')).toBeVisible({
|
||||
timeout: 1500,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user