Feat: layout forms

messages/cs.json

@@ -51,6 +51,94 @@
       "Link": "Popis dat.",
       "CloseButtonAria": "Zavřít zprávu"
     },
+    "FormSection": {
+      "Step1": {
+        "Headline": "Vyberte slovník ke zkontrolování a převodu",
+        "Annotation": "Máte na výběr ze slovníku ze souboru na Vašem zařízení, z adresy URL, nebo ze Sémantického slovníku pojmů.",
+        "FileForm": {
+          "Label": "Nahrát ze souboru",
+          "Placeholder": "Přetáhněte soubor nebo",
+          "Button": "Nahrát ze zařízení",
+          "SupportedFormatsLabel": "Podporované formáty XLSX, XML, TTL, JSON-LD"
+        },
+        "UrlForm": {
+          "Label": "Nahrát z URL"
+        },
+        "DictForm": {
+          "Label": "Vybrat ze Sémantického slovníku pojmů"
+        }
+      },
+      "Step2": {
+        "Headline": "Zkontrolujte a převeďte slovník",
+        "Annotation": "Klikněte na tlačítko 'Zkontrolovat a převést' a počkejte, až systém kontrolu a převod dokončí.",
+        "Button": "Zkontrolovat a převést"
+      },
+      "Step3": {
+        "Headline": "Stáhněte si výstupy z převodu a kontroly",
+        "Annotation": "Přečtěte si podrobnosti níže.",
+        "Dialog": {
+          "Title": "Slovník zákona o silničním provozu",
+          "Message": {
+            "Success": "Skvělá práce! Ve slovníku nebyly nalezeny žádné chyby.",
+            "Warning": "Ve slovníku byly nalezeny přípustné chyby. Slovník si ale přesto můžete stáhnout.",
+            "Error": "Ve slovníku byly nalezeny závažné chyby. Upravte slovník a zkuste kontrolu znovu."
+          },
+          "InfoTable": {
+            "AffectedConcepts": "Zjištění se týká",
+            "FindingDescription": "Popis zjištění",
+            "FindingType": "Typ zjištění"
+          },
+          "DownloadSection": {
+            "Success-Warning": {
+              "Row1": {
+                "Title": "Pro další využití si slovník stáhněte do Vašeho zařízení.",
+                "Tooltips": {
+                  "Title1": "Co mám dělat se staženým slovníkem?",
+                  "Description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                },
+                "ButtonText": "Stáhnout slovník"
+              },
+              "Row2": {
+                "Title": "Podrobnosti zjištění jsou dostupné ve výpisu z kontroly.",
+                "Tooltips": {
+                  "Title1": "Jaké typy zjištění se rozlišují?",
+                  "Description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                },
+                "ButtonText": "Stáhnout výpis z kontroly"
+              },
+              "Row3": {
+                "Title": "Pro publikování slovníku je nezbytný katalogizační záznam.",
+                "Tooltips": {
+                  "Title1": "Co mám dělat s nekompletním katalogizačním záznamem?",
+                  "Description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+                  "Title2": "Proč je katalogizační záznam nekompletní?",
+                  "Description2": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                },
+                "ButtonText": "Stáhnout nekompletní katalogizační záznam"
+              }
+            },
+            "Error": {
+              "Row1": {
+                "Title": "Slovník s chybami nelze stáhnout.",
+                "Tooltips": {
+                  "Title1": "Co mám dělat dále?",
+                  "Description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                },
+                "ButtonText": "Stáhnout slovník"
+              },
+              "Row2": {
+                "Title": "Podrobnosti zjištění jsou dostupné ve výpisu z kontroly.",
+                "Tooltips": {
+                  "Title1": "Jaké typy zjištění se rozlišují?",
+                  "Description1": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                },
+                "ButtonText": "Stáhnout výpis z kontroly"
+              }
+            }
+          }
+        }
+      }
+    },
     "InfoSection": {
       "Headline": "Mohlo by se vám hodit",
       "Item1": {

package.json

@@ -13,7 +13,7 @@
     "copy:fonts": "copyfiles --flat ./node_modules/@gov-design-system-ce/fonts/lib/* ./src/fonts"
   },
   "dependencies": {
-    "@gov-design-system-ce/react": "^2.3.1",
+    "@gov-design-system-ce/react": "^2.4.2",
     "@tailwindcss/postcss": "^4.1.5",
     "next": "14.2.28",
     "next-intl": "^4.1.0",
@@ -35,4 +35,4 @@
     "prettier": "^3.5.3",
     "typescript": "^5"
   }
-}
+}

src/app/page.tsx

@@ -2,6 +2,7 @@ import { GovBanner, GovButton, GovIcon } from '@gov-design-system-ce/react';
 import { useTranslations } from 'next-intl';
 
 import { FaqSection } from '@/components/faq/FaqSection';
+import { FormSection } from '@/components/formSection/FormSection';
 import { InfoSection } from '@/components/infoSection/InfoSection';
 
 export default function Home() {
@@ -34,6 +35,7 @@ export default function Home() {
             <GovIcon name="x" slot="icon-start" />
           </GovButton>
         </section>
+        <FormSection />
         <InfoSection />
         <FaqSection />
       </div>

src/components/faq/FaqSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { GovAccordion } from '@gov-design-system-ce/react';
 import { useTranslations } from 'next-intl';
 

src/components/formSection/FormSection.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { GovWizard } from '@gov-design-system-ce/react';
+
+import { Step1 } from './step1/Step1';
+import { Step2 } from './step2/Step2';
+import { Step3 } from './step3/Step3';
+
+export const FormSection = () => {
+  return (
+    <section>
+      <GovWizard>
+        <Step1 />
+        <Step2 />
+        <Step3 status="Error" />
+      </GovWizard>
+    </section>
+  );
+};

src/components/formSection/step1/FileForm.tsx

@@ -0,0 +1,31 @@
+import {
+  GovButton,
+  GovFormControl,
+  GovFormFile,
+  GovFormGroup,
+  GovFormLabel,
+} from '@gov-design-system-ce/react';
+import { useTranslations } from 'next-intl';
+
+export const FileForm = () => {
+  const t = useTranslations('Home.FormSection.Step1.FileForm');
+
+  return (
+    <GovFormControl className="w-full">
+      <GovFormLabel slot="top">{t('Placeholder')}</GovFormLabel>
+      <GovFormGroup>
+        <GovFormFile accept=".xlsx,.xml,.ttl,.json,.json-ld" expanded>
+          <span>{t('Placeholder')}</span>
+          <p>
+            <GovButton color="primary" size="m" type="outlined">
+              {t('Button')}
+            </GovButton>
+          </p>
+          <span className="gov-form-file__note">
+            {t('SupportedFormatsLabel')}
+          </span>
+        </GovFormFile>
+      </GovFormGroup>
+    </GovFormControl>
+  );
+};

src/components/formSection/step1/SearchForm.tsx

@@ -0,0 +1,26 @@
+import {
+  GovButton,
+  GovFormControl,
+  GovFormGroup,
+  GovFormInput,
+  GovFormSearch,
+  GovIcon,
+} from '@gov-design-system-ce/react';
+
+export const SearchForm = () => {
+  return (
+    <GovFormControl className="w-full">
+      <GovFormGroup>
+        <GovFormSearch>
+          <GovFormInput
+            slot="input"
+            placeholder="Vyberte slovník z Výrobní linky..."
+          />
+          <GovButton slot="button">
+            <GovIcon name="search" slot="icon-start" />
+          </GovButton>
+        </GovFormSearch>
+      </GovFormGroup>
+    </GovFormControl>
+  );
+};

src/components/formSection/step1/Step1.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import {
+  GovFormLabel,
+  GovFormRadio,
+  GovFormRadioGroup,
+  GovWizardItem,
+} from '@gov-design-system-ce/react';
+import { useTranslations } from 'next-intl';
+
+import { FileForm } from './FileForm';
+import { SearchForm } from './SearchForm';
+import { UrlForm } from './UrlForm';
+
+type OptionType = 'file' | 'url' | 'dict';
+
+export const Step1 = () => {
+  const t = useTranslations('Home.FormSection.Step1');
+  const [selectedOption, setSelectedOption] = useState<OptionType>('file');
+
+  return (
+    <GovWizardItem color="primary" collapsible isExpanded>
+      <span slot="prefix">1</span>
+      <span slot="headline">{t('Headline')}</span>
+      <span slot="annotation">{t('Annotation')}</span>
+      <div className="text-dark-primary max-w-[808px]">
+        <GovFormRadioGroup
+          value={selectedOption}
+          onGovChange={(val) =>
+            setSelectedOption(val.detail.value as OptionType)
+          }
+        >
+          <GovFormRadio value="file">
+            <GovFormLabel slot="label">{t('FileForm.Label')}</GovFormLabel>
+          </GovFormRadio>
+          {selectedOption === 'file' && <FileForm />}
+          <GovFormRadio value="url">
+            <GovFormLabel slot="label">{t('UrlForm.Label')}</GovFormLabel>
+          </GovFormRadio>
+          {selectedOption === 'url' && <UrlForm />}
+          <GovFormRadio value="dict">
+            <GovFormLabel slot="label">{t('DictForm.Label')}</GovFormLabel>
+          </GovFormRadio>
+          {selectedOption === 'dict' && <SearchForm />}
+        </GovFormRadioGroup>
+      </div>
+    </GovWizardItem>
+  );
+};