💄(frontend) update doc export modal

In the new interface, the export modal changes a little.

- We put the buttons on the right
- We remove the alert
- We transform the radio into select

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -10,6 +10,37 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Export', () => {
+  test('it check if all elements are visible', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-editor', browserName, 1);
+    await page
+      .getByRole('button', {
+        name: 'download',
+      })
+      .click();
+
+    await expect(
+      page
+        .locator('div')
+        .filter({ hasText: /^Download$/ })
+        .first(),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'Upload your docs to a Microsoft Word, Open Office or PDF document',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('combobox', { name: 'Template' }),
+    ).toBeVisible();
+    await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Close the modal' }),
+    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
+  });
   test('it converts the doc to pdf with a template integrated', async ({
     page,
     browserName,
@@ -25,10 +56,9 @@ test.describe('Doc Export', () => {
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 
@@ -62,14 +92,14 @@ test.describe('Doc Export', () => {
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 
-    await page.getByText('Docx').click();
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'Word / Open Office' }).click();
 
     await page
       .getByRole('button', {
@@ -190,10 +220,9 @@ test.describe('Doc Export', () => {
       .click();
 
     // Download
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -532,6 +532,12 @@ input:-webkit-autofill:focus {
   overflow-y: auto;
 }
 
+.c__modal__title {
+  padding: 0;
+  font-size: 1.125rem;
+  margin-bottom: var(--c--theme--spacings--sm);
+}
+
 @media screen and (width <= 420px) {
   .c__modal__scroller {
     padding: 0.7rem;

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -1,11 +1,8 @@
 import {
-  Alert,
   Button,
   Loader,
   Modal,
   ModalSize,
-  Radio,
-  RadioGroup,
   Select,
   VariantType,
   useToastProvider,
@@ -21,6 +18,11 @@ import { useExport } from '../api/useExport';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { adaptBlockNoteHTML, downloadFile } from '../utils';
 
+export enum DocDownloadFormat {
+  PDF = 'pdf',
+  DOCX = 'docx',
+}
+
 interface ModalPDFProps {
   onClose: () => void;
   doc: Doc;
@@ -41,7 +43,9 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
     error,
   } = useExport();
   const [templateIdSelected, setTemplateIdSelected] = useState<string>();
-  const [format, setFormat] = useState<'pdf' | 'docx'>('pdf');
+  const [format, setFormat] = useState<DocDownloadFormat>(
+    DocDownloadFormat.PDF,
+  );
 
   const templateOptions = useMemo(() => {
     if (!templates?.pages) {
@@ -123,46 +127,37 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
 
   return (
     <Modal
+      data-testid="modal-export"
       isOpen
       closeOnClickOutside
       hideCloseButton
-      leftActions={
-        <Button
-          aria-label={t('Close the modal')}
-          color="secondary"
-          fullWidth
-          onClick={() => onClose()}
-        >
-          {t('Cancel')}
-        </Button>
-      }
       onClose={() => onClose()}
       rightActions={
-        <Button
+        <>
-          aria-label={t('Download')}
+          <Button
-          color="primary"
+            aria-label={t('Close the modal')}
-          fullWidth
+            color="secondary"
-          onClick={() => void onSubmit()}
+            fullWidth
-          disabled={isPending || !templateIdSelected}
+            onClick={() => onClose()}
-        >
+          >
-          {t('Download')}
+            {t('Cancel')}
-        </Button>
+          </Button>
+          <Button
+            aria-label={t('Download')}
+            color="primary"
+            fullWidth
+            onClick={() => void onSubmit()}
+            disabled={isPending || !templateIdSelected}
+          >
+            {t('Download')}
+          </Button>
+        </>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Box $align="center" $gap="1rem">
+        <Text $size="h6" $align="flex-start">
-          <Text
+          {t('Download')}
-            className="material-icons"
+        </Text>
-            $size="3.5rem"
-            $theme="primary"
-            $variation="600"
-          >
-            picture_as_pdf
-          </Text>
-          <Text as="h2" $size="h3" $margin="none" $theme="primary">
-            {t('Export')}
-          </Text>
-        </Box>
       }
     >
       <Box
@@ -170,14 +165,11 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
         aria-label={t('Content modal to export the document')}
         $gap="1.5rem"
       >
-        <Alert canClose={false} type={VariantType.INFO}>
+        <Text $variation="600">
-          <Text>
+          {t(
-            {t(
+            'Upload your docs to a Microsoft Word, Open Office or PDF document.',
-              'Export your document, it will be inserted in the selected template.',
+          )}
-            )}
+        </Text>
-          </Text>
-        </Alert>
-
         <Select
           clearable={false}
           label={t('Template')}
@@ -187,22 +179,19 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
             setTemplateIdSelected(options.target.value as string)
           }
         />
-
+        <Select
-        <RadioGroup>
+          clearable={false}
-          <Radio
+          fullWidth
-            label={t('PDF')}
+          label={t('Format')}
-            value="pdf"
+          options={[
-            name="format"
+            { label: t('Word / Open Office'), value: DocDownloadFormat.DOCX },
-            onChange={(evt) => setFormat(evt.target.value as 'pdf')}
+            { label: t('PDF'), value: DocDownloadFormat.PDF },
-            defaultChecked={true}
+          ]}
-          />
+          value={format}
-          <Radio
+          onChange={(options) =>
-            label={t('Docx')}
+            setFormat(options.target.value as DocDownloadFormat)
-            value="docx"
+          }
-            name="format"
+        />
-            onChange={(evt) => setFormat(evt.target.value as 'docx')}
-          />
-        </RadioGroup>
 
         {isPending && (
           <Box $align="center" $margin={{ top: 'big' }}>