1093/search redesign

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

@@ -3,21 +3,19 @@ import { Tag, TagProps } from 'react-aria-components'
 
 interface ChipProps extends TagProps {
   variant?: 'large' | 'small'
-  className?: string
 }
 
 /*
 /* FIGMA: https://www.figma.com/file/17wbd0MDQcMW9NbXl6UPs8/DS-ESBS%2BBK%3A-Component-library?node-id=10277%3A26616&mode=dev
 /* For Chips to be responsive, we don't have three separate variants as in style guide, but only two which respond to window size.
  */
 
-const Chip = ({ variant = 'large', className, ...props }: ChipProps) => {
+const Chip = ({ variant = 'large', ...props }: ChipProps) => {
   return (
     <Tag
       {...props}
       className={cx(
         'flex cursor-pointer items-center rounded-lg border-2 hover:bg-gray-200 selected:border-category-700 selected:bg-category-700 selected:text-gray-0 hover:selected:bg-category-700',
-        className,
         {
           'px-3 py-1.5 text-size-p-small lg:px-4 lg:py-2.5 lg:text-size-p-default':
             variant === 'large',

next/components/molecules/SearchPageNew/GeneralSearchResults.tsx

@@ -32,7 +32,7 @@ const GeneralSearchResults = ({
     estimatedTotalHits <= DEFAULT_PAGE_SIZE && estimatedTotalHits <= filters.pageSize
 
   return (
-    <div className="flex flex-col gap-y-8 border border-warning-300">
+    <div className="flex flex-col gap-y-8">
       <div className="flex flex-col gap-y-4">
         {variant === 'allResults' && (
           <SearchResultsHeader

next/components/molecules/SearchPageNew/SearchResultsHeader.tsx

@@ -1,4 +1,5 @@
 import { ArrowRightIcon } from '@assets/ui-icons'
+import Button from '@components/forms/simple-components/Button'
 import { useTranslations } from 'next-intl'
 
 type SearchResultsHeaderProps = {
@@ -12,12 +13,10 @@ 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>
-      <button className="flex items-center gap-2" type="button" onClick={handleShowMore}>
-        <span className="text-size-p-large font-medium underline">
-          {t('SearchPage.moreResults')}
-        </span>
+      <Button variant="black-link" onPress={handleShowMore}>
+        {t('SearchPage.moreResults')}
         <ArrowRightIcon />
-      </button>
+      </Button>
     </div>
   )
 }

next/components/pages/searchPageContentNew.tsx

@@ -3,6 +3,7 @@ import AdvancedSearchNew from '@components/molecules/SearchPageNew/AdvancedSearc
 import GeneralSearchResults from '@components/molecules/SearchPageNew/GeneralSearchResults'
 import { SearchFilters } from '@components/molecules/SearchPageNew/searchDataFetchers'
 import { SectionContainer } from '@components/ui/SectionContainer/SectionContainer'
+import { ColorCategory, getCategoryColorLocalStyle } from '@utils/colors'
 import { useRouter } from 'next/router'
 import { useTranslations } from 'next-intl'
 import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
@@ -21,15 +22,8 @@ export type SearchOption = {
 const SearchPageContentNew = () => {
   const t = useTranslations()
 
-  const { asPath } = useRouter()
-
-  const [routerQueryValue, setRouterQueryValue] = useQueryParam(
-    'keyword',
-    // FIXME: be better
-    withDefault(StringParam, asPath.split('keyword=')[1] ?? ''),
-    // withDefault(StringParam, ''),
-  )
-  const [input, setInput] = useState(routerQueryValue)
+  const [routerQueryValue] = useQueryParam('keyword', withDefault(StringParam, ''))
+  const [input, setInput] = useState('')
   const debouncedInput = useDebounce(input, 300)
   const [searchValue, setSearchValue] = useState(debouncedInput)
 
@@ -39,7 +33,6 @@ const SearchPageContentNew = () => {
 
   useEffect(() => {
     setSearchValue(debouncedInput)
-    setRouterQueryValue(debouncedInput)
   }, [debouncedInput])
 
   const searchOptions: SearchOption[] = [
@@ -107,10 +100,10 @@ const SearchPageContentNew = () => {
               {searchOptions.map((option) => {
                 return (
                   <Chip
-                    className="selected:border-gray-700 selected:bg-gray-700 hover:selected:bg-gray-700"
                     variant="large"
                     key={option.key}
                     id={option.key}
+                    style={getCategoryColorLocalStyle({ category: 'gray' })}
                   >
                     {`${option.displayName} `}
                   </Chip>

next/utils/colors.tsx

@@ -8,6 +8,7 @@ export type ColorCategory =
   | 'social'
   | 'education'
   | 'culture'
+  | 'gray'
 
 const colorCategoryMap = {
   red: 'main',