1093/search redesign

next/components/molecules/SearchPageNew/AdvancedSearchNew.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@bratislava/component-library'
 import Button from '@components/forms/simple-components/Button'
 import { useTranslations } from 'next-intl'
 import { Dispatch, SetStateAction } from 'react'
@@ -36,30 +37,34 @@ const AdvancedSearchNew = ({
 
   const newSearch = (
     <div className="flex flex-col items-start gap-8 self-stretch">
-      <h1 className="text-h1 font-semibold text-gray-800 lg:w-[800px]">{title}</h1>
+      <Typography type="h1" className="text-gray-800 lg:w-[800px]">
+        {title}
+      </Typography>
       <div className="flex w-full flex-col gap-y-2">
-        <SearchField
-          className="flex w-full flex-col [&>*>input>button]:hidden"
-          aria-label={t('search')}
-          defaultValue={placeholder}
-          value={input}
-          name="Searchinput"
-          onChange={(val) => {
-            return setInput(val)
-          }}
-          onSubmit={handleSearch}
-        >
-          <Text slot="description" className="mb-1 font-semibold">
+        <div className="flex flex-col gap-y-1">
+          <Typography type="p" className="font-semibold text-gray-800">
             {t('SearchPage.whatAreYouLookingFor')}
-          </Text>
-          <div className="relative">
-            <Input
-              type="search"
-              className="w-full rounded-lg border-2 py-5 pl-[60px] pr-6 text-gray-700"
-            />
-            <Button className="absolute left-6 h-full" isDisabled startIcon={<SearchIcon />} />
-          </div>
-        </SearchField>
+          </Typography>
+          <SearchField
+            className="flex w-full flex-col [&>*>input>button]:hidden"
+            aria-label={t('search')}
+            defaultValue={placeholder}
+            value={input}
+            name="Searchinput"
+            onChange={(val) => {
+              return setInput(val)
+            }}
+            onSubmit={handleSearch}
+          >
+            <div className="relative">
+              <Input
+                type="search"
+                className="w-full rounded-lg border-2 py-5 pl-[60px] pr-6 text-gray-700"
+              />
+              <Button className="absolute left-6 h-full" isDisabled startIcon={<SearchIcon />} />
+            </div>
+          </SearchField>
+        </div>
       </div>
     </div>
   )

next/components/molecules/SearchPageNew/GeneralSearchResults.tsx

@@ -1,3 +1,4 @@
+import { Typography } from '@bratislava/component-library'
 import Pagination from '@bratislava/ui-bratislava/Pagination/Pagination'
 import SearchCardComposed from '@components/molecules/SearchPageNew/SearchCardComposed'
 import {
@@ -71,7 +72,7 @@ const GeneralSearchResults = ({
               : null}
           </div>
         ) : (
-          <p>{t('SearchPage.noResults')}</p>
+          <Typography type="p">{t('SearchPage.noResults')}</Typography>
         )}
       </div>
       {variant === 'specificResults' ? (

next/components/molecules/SearchPageNew/SearchCardComposed.tsx

@@ -1,5 +1,6 @@
 import { ChevronRightIcon } from '@assets/ui-icons'
 import { Enum_Page_Pagecolor, Enum_Pagecategory_Color } from '@backend/graphql'
+import { Typography } from '@bratislava/component-library'
 import ImagePlaceholder from '@components/atoms/ImagePlaceholder'
 import MLink from '@components/forms/simple-components/MLink'
 import Tag from '@components/forms/simple-components/Tag'
@@ -128,14 +129,16 @@ SearchCardComposed.InfoContainer = function ({
 
 SearchCardComposed.Title = function ({ title, className }: { title: string; className?: string }) {
   return (
-    <div
+    <Typography
+      type="h3"
+      size="h5"
       className={twMerge(
-        'line-clamp-3 text-size-h5 font-semibold group-hover:underline md:line-clamp-2 lg:line-clamp-1',
+        'line-clamp-3 font-semibold group-hover:underline md:line-clamp-2 lg:line-clamp-1',
         className,
       )}
     >
       {title}
-    </div>
+    </Typography>
   )
 }
 
@@ -159,8 +162,14 @@ SearchCardComposed.Metadata = function ({
     cleanedMetadata?.map((item: string, index: number) => {
       return (
         <>
-          {index > 0 && <p className="max-sm:hidden">•</p>}
-          <p className="max-sm:first-of-type:font-medium">{item}</p>
+          {index > 0 && (
+            <Typography type="p" className="max-sm:hidden">
+              •
+            </Typography>
+          )}
+          <Typography type="p" className="max-sm:first-of-type:font-medium">
+            {item}
+          </Typography>
         </>
       )
     }) ?? null

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from '@assets/ui-icons'
+import { Typography } from '@bratislava/component-library'
 import Button from '@components/forms/simple-components/Button'
 import { useTranslations } from 'next-intl'
 
@@ -12,7 +13,9 @@ export const SearchResultsHeader = ({ title, handleShowMore }: SearchResultsHead
 
   return (
     <div className="flex flex-col flex-wrap items-baseline justify-between gap-y-2 text-gray-800 sm:flex-row">
-      <h2 className="text-size-h4">{title}</h2>
+      <Typography type="h2" size="h4" className="text-gray-800">
+        {title}
+      </Typography>
       <Button variant="black-link" endIcon={<ArrowRightIcon />} onPress={handleShowMore}>
         {t('SearchPage.moreResults')}
       </Button>