1093/search redesign #1150

Ty-ci · 2023-12-18T14:49:32Z

Refactored main search page to follow recent design changes and allow searching for more content types.

Figma: https://www.figma.com/file/A9aoQH2FGhR1D14wvvk6FW/Mestsky-web-(bratislava.sk)?type=design&node-id=1223-1739&mode=design&t=lVTUvjy2sRM3DzOD-0

Satus 2024/01/05

Implemented:

Search bar and options row building on top of React Aria Components, with updated design
Search categories: articles, webpages, contacts

Ready but hidden:

Search category: inBA articles (because currently there is only one inBA article in the production database)

To be implemented:

Search categories: Official Board, inBA releases, Regulation (VZN), events, zverejnovanie,
Secondary search filter for some categories
"didnt't find what you were looking for?" section at the bottom of the page

Details can be found in #1072

…y yet

…unnecessary code duplication

…mage displaying in search result cards

…ions

…ables

next/messages/sk.json

next/components/pages/searchPageContentNew.tsx

radoslavzeman

Round 2 of comments

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

next/components/molecules/SearchPageNew/SearchCardComposed.tsx

next/components/molecules/SearchPageNew/GeneralSearchResults.tsx

next/components/molecules/SearchPageNew/AdvancedSearchNew.tsx

next/components/forms/simple-components/Chip.tsx

… review comments

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

next/utils/colors.tsx

… type

next/components/molecules/SearchPageNew/SearchCardComposed.tsx

radoslavzeman · 2024-01-07T13:20:02Z

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

@@ -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">


In this kind of situations, we always want confront and change Figma to follow design system rules. --> Write a comment to Figma and tag Patrik.
DS Foundations can be found here https://www.figma.com/file/ctDKMhAPIjLUVNNmq430D4/DS-ESBS%3A-Foundations?node-id=59-21&t=M4lXbCEzOWWIiekd-0

radoslavzeman · 2024-01-07T13:33:15Z

next/components/ui/Pagination/Pagination.tsx

@@ -8,6 +8,7 @@ import React, { ReactNode } from 'react'
 type PaginationProps = {
  currentPage: number
  totalCount: number
+  style?: 'black' | 'category'


1: style is kind of reserved word. I this case variant is the best naming.

2: Please revert this change as it's not sustainable. Whole DS is now being updated (a "black" pagination is what "category" was used for before).
We want to make a global change that will solve this for all components at once, I would like to avoid local minor changes to specific components.

Please revert this change. (And if we want to have black pagination, we can still use getCategoryColorLocalStyle({category: 'gray'})

next/messages/sk.json

next/assets/icons-top-services/kontakty-a-uradne-hodiny.svg

next/components/molecules/SearchPageNew/useQueryBySearchOption.ts

next/components/molecules/SearchPageNew/GeneralSearchResults.tsx

radoslavzeman · 2024-01-08T20:15:46Z

next/components/pages/searchPageContentNew.tsx

-        {resultsCount.get(selectedKey) > 0 ? (
-          <p>{t('SearchPage.showingResults', { count: resultsCount.get(selectedKey) })}</p>
+        {getResultsCountById(selectedKey) > 0 ? (
+          <p>


Use <Typography> please

radoslavzeman

Very nice job! I think we are ready to merge 🥳

github-actions · 2024-01-09T08:41:15Z

Test build pipeline info 🚀

Changes in the code and tag info:

➡️ Changes in strapi: false

➡️ Changes in next: true

We are going to build 🚢

🔜 next

🥳 Bratiska-cli successfully created an kustomize file.

Ty-ci added 14 commits December 5, 2023 16:05

Created new react-aria-component based searchbar with tagbar

8726a45

Create new components for Search component, no style, no functionalit…

817c82b

…y yet

Add preliminary real data fetching to Search results

a220872

Add a variant to search result card with image

f98ab9e

Refactor search components and add localization

7680fae

Add localization and preliminary pagination

1e79f94

Remove unused files

78314dd

Undo unwanted change in PageCards component

c775746

Refactor search result cards to be more composable

c21793b

Refactor search page content and search results components to remove …

d6f8dd9

…unnecessary code duplication

add pictures, fix pagination and metadata

1adf937

Remove unused files

dc3f830

Add page header, fix style for small screens, fix translations, fix i…

4a6cec1

…mage displaying in search result cards

Add connection for search query and URL

73d85a8

Ty-ci added the pr: needs review 🙏 label Dec 18, 2023

Ty-ci requested a review from radoslavzeman December 18, 2023 14:49

Ty-ci linked an issue Dec 18, 2023 that may be closed by this pull request

Refactor vyhladavania #1072

Closed

Ty-ci and others added 3 commits December 18, 2023 15:51

Merge branch 'master' into 1093/Search-redesign

5e1145c

Fix bug where cards with no data were shown when switching search opt…

7792ffb

…ions

Refactor searchDataFetchers (remove redundant code), rename some vari…

bfa80f4

…ables

radoslavzeman reviewed Dec 19, 2023

View reviewed changes

Fix search data fetchers

6d45ade

radoslavzeman reviewed Dec 19, 2023

View reviewed changes

Ty-ci added 2 commits December 19, 2023 15:18

Refactor search page components and update translations based on some…

c1f2f89

… review comments

Fix small things with accordance to comments in review

dbdc812

radoslavzeman reviewed Dec 19, 2023

View reviewed changes

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx Outdated Show resolved Hide resolved

next/utils/colors.tsx Show resolved Hide resolved

Ty-ci added 2 commits December 20, 2023 00:20

Refactor types used in search components so there's no residual 'any'…

3ee6678

… type

Refactor - remove usage of index value as React element key property

9d049b4

Ty-ci commented Dec 19, 2023

View reviewed changes

next/components/molecules/SearchPageNew/SearchCardComposed.tsx Show resolved Hide resolved

Fix various thing according to review comments

e35c4ff

Ty-ci and others added 10 commits January 3, 2024 11:02

Add custom icon support

de4a53b

Fix SVG clip-path for kontakty-a-uradne-hodiny icon

abe053a

Add icon to official board search result cards

d8bea61

Fix React duplicate key error

5df7549

Hide 'more results' button when no search results are found

4297b3a

Add black color option to Pagination and implement in main search page

91be2dd

Merge branch 'master' into 1093/Search-redesign

5ea435f

Add paragraph showing number of search results

3d8b2b1

Fix plural in translation of 'Showing XY results' message

5e5193f

Show number of results in search option chips

6026188

radoslavzeman reviewed Jan 8, 2024

View reviewed changes

Ty-ci added 9 commits January 8, 2024 11:32

Fix style (contact result card background color)

b9f8729

fix minor issues from PR review comments

5482748

Remove clip path from top-services icons

710461e

Fix disappearing ring around search option Tags

22a684d

Add new dokumenty icon and remove debug elements from search page

4081aed

Revert changes to pagination, keep default red background

67d030f

Change type of resultsCount from Map to Object

e2c490c

Change cross icon in search bar

65c8cc5

Fix resultsCount state

82bb8fa

radoslavzeman reviewed Jan 8, 2024

View reviewed changes

radoslavzeman approved these changes Jan 8, 2024

View reviewed changes

github-actions bot added pr: fix & ship 🚢 No additional review needed before merge - some work may be required, if specified in last review and removed pr: needs review 🙏 labels Jan 8, 2024

Use Typography

e058b3b

github-actions bot added the pr: needs review 🙏 label Jan 9, 2024

Merge branch 'master' into 1093/Search-redesign

fd93624

Ty-ci merged commit 56dd7af into master Jan 9, 2024
7 of 8 checks passed

Ty-ci deleted the 1093/Search-redesign branch January 9, 2024 08:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1093/search redesign #1150

1093/search redesign #1150

Ty-ci commented Dec 18, 2023 •

edited

Loading

radoslavzeman left a comment

radoslavzeman Jan 7, 2024

radoslavzeman Jan 7, 2024

Ty-ci Jan 8, 2024

radoslavzeman Jan 8, 2024

Ty-ci Jan 9, 2024

radoslavzeman left a comment

github-actions bot commented Jan 9, 2024 •

edited

Loading

1093/search redesign #1150

1093/search redesign #1150

Conversation

Ty-ci commented Dec 18, 2023 • edited Loading

radoslavzeman left a comment

Choose a reason for hiding this comment

radoslavzeman Jan 7, 2024

Choose a reason for hiding this comment

radoslavzeman Jan 7, 2024

Choose a reason for hiding this comment

Ty-ci Jan 8, 2024

Choose a reason for hiding this comment

radoslavzeman Jan 8, 2024

Choose a reason for hiding this comment

Ty-ci Jan 9, 2024

Choose a reason for hiding this comment

radoslavzeman left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 9, 2024 • edited Loading

Ty-ci commented Dec 18, 2023 •

edited

Loading

github-actions bot commented Jan 9, 2024 •

edited

Loading