From e0000ca89cc9a7cd394e2206de680c29ddc05bb0 Mon Sep 17 00:00:00 2001 From: daproclaima Date: Tue, 9 Jul 2024 11:47:28 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20change=20elements=20po?= =?UTF-8?q?sitions=20in=20mailbox=20creation=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../desk/src/cunningham/cunningham-style.css | 4 ++ .../mail-domains/assets/create-mailbox.svg | 14 ----- .../components/forms/CreateMailboxForm.tsx | 51 ++++++++----------- .../apps/desk/src/i18n/translations.json | 3 +- .../mail-domain-create-mailbox.spec.ts | 6 +-- 5 files changed, 30 insertions(+), 48 deletions(-) delete mode 100644 src/frontend/apps/desk/src/features/mail-domains/assets/create-mailbox.svg diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-style.css b/src/frontend/apps/desk/src/cunningham/cunningham-style.css index 55036a6..97c1ea3 100644 --- a/src/frontend/apps/desk/src/cunningham/cunningham-style.css +++ b/src/frontend/apps/desk/src/cunningham/cunningham-style.css @@ -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); } diff --git a/src/frontend/apps/desk/src/features/mail-domains/assets/create-mailbox.svg b/src/frontend/apps/desk/src/features/mail-domains/assets/create-mailbox.svg deleted file mode 100644 index 08de3aa..0000000 --- a/src/frontend/apps/desk/src/features/mail-domains/assets/create-mailbox.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx index 658f15b..e8c95f8 100644 --- a/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx +++ b/src/frontend/apps/desk/src/features/mail-domains/components/forms/CreateMailboxForm.tsx @@ -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({ @@ -149,22 +139,15 @@ export const CreateMailboxForm = ({ } size={ModalSize.MEDIUM} title={ - - - - {t('Create a mailbox')} - - + + {t('Create a mailbox')} + } > @@ -172,6 +155,14 @@ export const CreateMailboxForm = ({ {!!causes?.length && ( )} + + {t('All fields are mandatory.')} + {methods ? (
{ 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, });