Skip to content

Feat: layout forms #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
May 27, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions messages/cs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
51 changes: 29 additions & 22 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -35,4 +35,4 @@
"prettier": "^3.5.3",
"typescript": "^5"
}
}
}
10 changes: 10 additions & 0 deletions public/assets/icons/components/check-circle-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/assets/icons/components/download.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions public/assets/icons/components/exclamation-circle-fill.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -34,6 +35,7 @@ export default function Home() {
<GovIcon name="x" slot="icon-start" />
</GovButton>
</section>
<FormSection />
<InfoSection />
<FaqSection />
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/components/faq/FaqSection.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client';

import { GovAccordion } from '@gov-design-system-ce/react';
import { useTranslations } from 'next-intl';

Expand Down
19 changes: 19 additions & 0 deletions src/components/formSection/FormSection.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
31 changes: 31 additions & 0 deletions src/components/formSection/step1/FileForm.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
26 changes: 26 additions & 0 deletions src/components/formSection/step1/SearchForm.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
48 changes: 48 additions & 0 deletions src/components/formSection/step1/Step1.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
Loading