1158 4/replace vzn with regulations regulation page fixes (#1193)

* Hide regulations from search * Add aria-label to RegulationCard * Remove unneeded comments * Style: display mainDocument and Attachments as rows in RegulationPageContent * Show message if fulltextregulation in RegulationCard * Style: make headings bigger in RegulationPage * Fix homepage search - use actual input instead of debounced
bratislava · Feb 29, 2024 · c1e35aa · c1e35aa
1 parent 7ff782f
commit c1e35aa
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 38 deletions.
diff --git a/next/components/molecules/HomePageSearch.tsx b/next/components/molecules/HomePageSearch.tsx
@@ -52,8 +52,8 @@ const HomePageSearch = ({ isOpen, setOpen }: HomePageSearchProps) => {
 
   const handleSearchPressed = useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    router.push(`${t('searchLink')}?keyword=${searchValue}`)
-  }, [router, searchValue, t])
+    router.push(`${t('searchLink')}?keyword=${input}`)
+  }, [router, input, t])
 
   return (
     <div ref={ref} className="relative">

diff --git a/next/components/molecules/Regulations/RegulationCard.tsx b/next/components/molecules/Regulations/RegulationCard.tsx
@@ -9,6 +9,7 @@ export type RegulationCardProps = {
   title: string
   path?: string
   className?: string
+  ariaLabel?: string
   isUplneZnenie?: boolean | null | undefined
 }
 
@@ -17,7 +18,13 @@ export type RegulationCardProps = {
  * Figma for FileCard: https://www.figma.com/file/17wbd0MDQcMW9NbXl6UPs8/DS-ESBS%2BBK%3A-Component-library?type=design&node-id=7367-17767&t=Km8W7qXXiWIDWSYw-0
  */
 
-const RegulationCard = ({ title, path, className, isUplneZnenie }: RegulationCardProps) => {
+const RegulationCard = ({
+  title,
+  path,
+  className,
+  isUplneZnenie,
+  ariaLabel,
+}: RegulationCardProps) => {
   const t = useTranslations()
 
   return (
@@ -35,6 +42,7 @@ const RegulationCard = ({ title, path, className, isUplneZnenie }: RegulationCar
           variant="underlineOnHover"
           target="_blank"
           rel="noreferrer"
+          aria-label={ariaLabel ?? t('Regulation.aria.linkToRegulationAriaLabel', { title })}
         >
           {title}
         </MLink>

diff --git a/next/components/molecules/Regulations/Regulations.tsx b/next/components/molecules/Regulations/Regulations.tsx
@@ -21,11 +21,10 @@ const Regulations = ({ className, regulations }: Props) => {
             {regulations?.map((regulation) => {
               return (
                 <div className="w-full">
-                  {/* TODO: consider adding english translation GBR instead of VZN  */}
                   <RegulationCard
                     title={`VZN ${regulation.attributes?.regNumber ?? ''}`}
                     key={regulation.attributes?.regNumber}
-                    isUplneZnenie={false}
+                    isUplneZnenie={regulation.attributes?.isFullTextRegulation}
                     path={`/vzn/${regulation.attributes?.slug}`}
                   />
                 </div>
@@ -35,11 +34,10 @@ const Regulations = ({ className, regulations }: Props) => {
           <div className="lg:hidden">
             <ResponsiveCarousel
               items={regulations?.map((regulation) => (
-                // TODO: consider adding english translation GBR instead of VZN
                 <RegulationCard
                   title={`VZN ${regulation.attributes?.regNumber ?? ''}`}
                   key={regulation.attributes?.regNumber}
-                  isUplneZnenie={false}
+                  isUplneZnenie={regulation.attributes?.isFullTextRegulation}
                   path={`/vzn/${regulation.attributes?.slug ?? ''}`}
                 />
               ))}

diff --git a/next/components/pages/RegulationPageContent.tsx b/next/components/pages/RegulationPageContent.tsx
@@ -1,14 +1,9 @@
-import {
-  Enum_Componentsectionsfilelist_Variant,
-  FileItemBlockFragment,
-  RegulationEntityFragment,
-} from '@backend/graphql'
+import { Enum_Componentsectionsfilelist_Variant, RegulationEntityFragment } from '@backend/graphql'
 import { Typography } from '@bratislava/component-library'
 import FileList from '@bratislava/ui-bratislava/FileList/FileList'
 import PageHeader from '@bratislava/ui-bratislava/PageHeader/PageHeader'
 import SectionContainer from '@bratislava/ui-bratislava/SectionContainer/SectionContainer'
 import MLink from '@components/forms/simple-components/MLink'
-import FileCard from '@components/molecules/presentation/FileCard'
 import RegulationCard from '@components/molecules/Regulations/RegulationCard'
 import RegulationDetailMessage from '@components/molecules/Regulations/RegulationDetailMessage'
 import { isDefined } from '@utils/isDefined'
@@ -25,8 +20,8 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
   const t = useTranslations('Regulation')
   const locale = useLocale()
 
-  const mainDocument = regulation.attributes?.mainDocument?.data?.attributes
-  const consolidatedDocument = regulation.attributes?.consolidatedText?.data?.attributes
+  const mainDocument = regulation.attributes?.mainDocument
+  const consolidatedDocument = regulation.attributes?.consolidatedText
   const amendments = regulation.attributes?.amendments?.data
     .filter((amendment) => isDefined(amendment))
     .sort((a, b) => {
@@ -35,14 +30,20 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
   const amending = regulation.attributes?.amending?.data.filter(isDefined)
   const cancelling = regulation.attributes?.cancelling?.data.filter(isDefined)
 
-  const attachmentFiles: FileItemBlockFragment[] =
+  const attachmentFiles =
     regulation.attributes?.attachments?.data.map((attachment) => {
       return {
         title: attachment.attributes?.name ?? 'Príloha',
         media: { data: attachment },
       }
     }) ?? []
 
+  if (consolidatedDocument?.data)
+    attachmentFiles.unshift({
+      title: `${t('consolidatedText')} - ${consolidatedDocument.data.attributes?.name}`,
+      media: { data: consolidatedDocument?.data },
+    })
+
   const breadcrumbs = [
     {
       title: t('regulations'),
@@ -66,32 +67,33 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
         <div className="mb-8 flex flex-col gap-y-8">
           <RegulationDetailMessage regulation={regulation} />
           <div className="flex flex-row flex-wrap gap-6">
-            <div className="flex shrink-0 basis-[280px] flex-col gap-y-4">
-              <Typography type="h2" size="h4">
+            <div className="flex grow basis-full flex-col gap-4">
+              <Typography type="h2" size="h3">
                 {t('mainDocument')}
               </Typography>
               {mainDocument ? (
-                <FileCard
-                  title={`VZN ${regulation.attributes?.regNumber ?? ''}`}
-                  downloadLink={mainDocument.url}
-                />
-              ) : null}
-            </div>
-            <div className="flex shrink-0 basis-[280px] flex-col gap-y-4">
-              <Typography type="h2" size="h4">
-                {t('consolidatedText')}
-              </Typography>
-              {consolidatedDocument ? (
-                <FileCard
-                  title={consolidatedDocument.name}
-                  downloadLink={consolidatedDocument.url}
+                <FileList
+                  variantFileList={Enum_Componentsectionsfilelist_Variant.Rows}
+                  fileSections={[
+                    {
+                      category: '',
+                      files: [
+                        {
+                          title: `VZN ${regulation.attributes?.regNumber}`,
+                          media: mainDocument,
+                        },
+                      ],
+                    },
+                  ]}
+                  hideCategory
+                  className="-mt-10"
                 />
               ) : (
-                <Typography type="p">{t('noConsolidatedTextMessage')}</Typography>
+                <Typography type="p">{t('noAttachmentsMessage')}</Typography>
               )}
             </div>
-            <div className="flex grow flex-col gap-4 md:basis-[400px]">
-              <Typography type="h2" size="h4">
+            <div className="flex grow basis-full flex-col gap-4">
+              <Typography type="h2" size="h3">
                 {t('attachments')}
               </Typography>
               {attachmentFiles?.length ? (
@@ -106,16 +108,17 @@ const RegulationPageContent = ({ regulation }: RegulationPageContentProps) => {
               )}
             </div>
           </div>
-          <div className="flex flex-col gap-y-4">
-            <Typography type="h2" size="h4">
+          <div className="flex w-full flex-col gap-y-4">
+            <Typography type="h2" size="h3">
               {t('amendments')}
             </Typography>
             {amendments?.length ? (
-              <div className="flex flex-row flex-wrap gap-6 [&>*]:basis-[280px]">
+              <div className="grid grid-cols-4 gap-6">
                 {amendments?.map((amendment) => {
                   return (
                     <RegulationCard
                       title={`VZN ${amendment.attributes?.regNumber ?? ''}`}
+                      className="w-full"
                       key={amendment.id}
                       isUplneZnenie={amendment.attributes?.isFullTextRegulation}
                       path={`/vzn/${amendment.attributes?.slug ?? ''}`}

diff --git a/next/messages/en.json b/next/messages/en.json
@@ -306,6 +306,9 @@
       "socialnaPomocASkolstvo": "Social services and Education",
       "ostatne": "Other",
       "archiv": "Archive"
+    },
+    "aria": {
+      "linkToRegulationAriaLabel": "Go to regulation {title}"
     }
   }
 }
diff --git a/next/messages/sk.json b/next/messages/sk.json
@@ -306,6 +306,9 @@
       "socialnaPomocASkolstvo": "Sociálna pomoc a školstvo",
       "ostatne": "Ostatné",
       "archiv": "Archív"
+    },
+    "aria": {
+      "linkToRegulationAriaLabel": "Prejsť na {title}"
     }
   }
 }