Endrer UI for valg av kategorier i søket

Author: anders-nom

src/components/common/paginator/Paginator.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const Paginator = ({ numPages, pageNumber, onPageChange }: Props) => {
-    if (numPages === 0) {
+    if (numPages <= 1) {
         return null;
     }
 

src/components/left-section/AppLeftSection.module.css

@@ -58,5 +58,6 @@
         right: 0;
         visibility: visible;
         opacity: 1;
+        background-color: var(--a-white);
     }
 }

src/components/left-section/categories/CategoriesMenu.tsx

@@ -2,14 +2,18 @@ import React from 'react';
 import { CmsCategoryListItem } from '../../../../common/cms-documents/category';
 import { ChevronDownIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 import { TreeView } from '@mui/x-tree-view';
-import { CategoriesList } from './CategoriesList';
+import { RootCategory } from './root-category/RootCategory';
+import { CheckboxGroup } from '@navikt/ds-react';
+import { useSearchState } from '../../../context/search-state/useSearchState';
 
 type Props = {
     rootCategories: CmsCategoryListItem[];
     className?: string;
 };
 
 export const CategoriesMenu = ({ rootCategories, className }: Props) => {
+    const { updateSearchParams } = useSearchState();
+
     return (
         <TreeView
             defaultExpandIcon={<ChevronRightIcon />}
@@ -18,7 +22,15 @@ export const CategoriesMenu = ({ rootCategories, className }: Props) => {
                 root: className,
             }}
         >
-            <CategoriesList categories={rootCategories} />
+            <CheckboxGroup
+                legend={'Velg kategorier for søket'}
+                hideLegend={true}
+                onChange={(values) => updateSearchParams({ categoryKeys: values })}
+            >
+                {rootCategories.map((category) => (
+                    <RootCategory category={category} key={category.key} />
+                ))}
+            </CheckboxGroup>
         </TreeView>
     );
 };

src/components/left-section/categories/root-category/RootCategory.module.css

@@ -0,0 +1,30 @@
+.rootCategory {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+}
+
+.checkbox {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    left: -2rem;
+    overflow: hidden;
+    margin-left: 0.5rem;
+    padding: 0.0625rem 0;
+    background-color: var(--a-white);
+
+    transition-duration: 150ms;
+    transition-timing-function: ease-out;
+    transition-property: visibility, opacity, left;
+
+    &.open {
+        left: 0;
+        opacity: 1;
+        visibility: visible;
+    }
+
+    & > label:global(.navds-checkbox__label) {
+        padding: 0;
+    }
+}

src/components/left-section/categories/root-category/RootCategory.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CmsCategoryListItem } from '../../../../../common/cms-documents/category';
+import { Category } from '../category/Category';
+import { Checkbox } from '@navikt/ds-react';
+import { useSearchState } from '../../../../context/search-state/useSearchState';
+import { classNames } from '../../../../utils/classNames';
+
+import style from './RootCategory.module.css';
+
+type Props = {
+    category: CmsCategoryListItem;
+};
+
+export const RootCategory = ({ category }: Props) => {
+    const { searchSettingsIsOpen } = useSearchState();
+
+    return (
+        <div className={style.rootCategory}>
+            <Checkbox
+                size={'small'}
+                value={category.key}
+                className={classNames(style.checkbox, searchSettingsIsOpen && style.open)}
+                hideLabel={true}
+            >
+                {`Filtrer ${category.title} i søket`}
+            </Checkbox>
+            <Category category={category} />
+        </div>
+    );
+};

src/components/left-section/search/search-input/search-settings/SearchSettings.module.css

@@ -28,7 +28,7 @@
     visibility: hidden;
     overflow: hidden;
 
-    transition-duration: 250ms;
+    transition-duration: 200ms;
     transition-timing-function: ease-out;
     transition-property: visibility, max-height, padding, overflow;
 
@@ -38,11 +38,11 @@
 
     background-color: var(--a-gray-200);
     border-radius: var(--a-border-radius-medium);
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.5rem;
     padding: 0 0.5rem;
 
     &.open {
-        max-height: 500px;
+        max-height: 150px;
         visibility: visible;
         padding: 0.5rem;
         overflow: visible;
@@ -58,10 +58,3 @@
     display: flex;
     align-items: center;
 }
-
-.categoriesSelector {
-    ul {
-        gap: 0.25rem;
-        font-size: 0.875rem;
-    }
-}

src/components/left-section/search/search-input/search-settings/SearchSettings.tsx

@@ -1,26 +1,21 @@
-import React, { useState } from 'react';
-import { Button, Label, Radio, RadioGroup, UNSAFE_Combobox } from '@navikt/ds-react';
+import React from 'react';
+import { Button, Label, Radio, RadioGroup } from '@navikt/ds-react';
 import { ChevronDownIcon, XMarkIcon } from '@navikt/aksel-icons';
 import { classNames } from '../../../../../utils/classNames';
-import { CmsCategoryListItem } from '../../../../../../common/cms-documents/category';
-import { useAppState } from '../../../../../context/app-state/useAppState';
 import { useSearchState } from '../../../../../context/search-state/useSearchState';
 
 import style from './SearchSettings.module.css';
 
 export const SearchSettings = () => {
-    const [isOpen, setIsOpen] = useState(false);
+    const {
+        searchParams,
+        updateSearchParams,
+        resetSearchSettings,
+        searchSettingsIsOpen,
+        setSearchSettingsIsOpen,
+    } = useSearchState();
 
-    const { appContext } = useAppState();
-    const { rootCategories } = appContext;
-
-    const { searchParams, updateSearchParams, resetSearchSettings } = useSearchState();
-    const { sort, categoryKeys, type, isCustom } = searchParams;
-
-    const { titlesToKeys, keysToTitles } = createKeysTitlesMaps(rootCategories);
-    const categoryKeysSelected = new Set<string>(categoryKeys);
-    const categoryTitlesSelected = [...categoryKeysSelected].map((key) => keysToTitles[key]);
-    const categoryTitlesAll = Object.keys(titlesToKeys);
+    const { sort, type, isCustom } = searchParams;
 
     return (
         <div className={style.container}>
@@ -42,14 +37,16 @@ export const SearchSettings = () => {
                         size={'xsmall'}
                         variant={'tertiary'}
                         className={style.toggle}
-                        onClick={() => setIsOpen(!isOpen)}
+                        onClick={() => setSearchSettingsIsOpen(!searchSettingsIsOpen)}
                     >
                         {'Tilpass søket'}
-                        <ChevronDownIcon className={classNames(style.icon, isOpen && style.open)} />
+                        <ChevronDownIcon
+                            className={classNames(style.icon, searchSettingsIsOpen && style.open)}
+                        />
                     </Button>
                 </div>
             </div>
-            <div className={classNames(style.settings, isOpen && style.open)}>
+            <div className={classNames(style.settings, searchSettingsIsOpen && style.open)}>
                 <div className={style.radioGroups}>
                     <RadioGroup
                         size={'small'}
@@ -72,41 +69,7 @@ export const SearchSettings = () => {
                         <Radio value={'datetime'}>{'Sist endret'}</Radio>
                     </RadioGroup>
                 </div>
-                <UNSAFE_Combobox
-                    label={'Avgrens søket til valgte kategorier:'}
-                    size={'small'}
-                    className={style.categoriesSelector}
-                    clearButton={true}
-                    isMultiSelect={true}
-                    allowNewValues={false}
-                    options={categoryTitlesAll}
-                    selectedOptions={categoryTitlesSelected}
-                    onToggleSelected={(value, isSelected) => {
-                        const key = titlesToKeys[value];
-                        if (isSelected) {
-                            categoryKeysSelected.add(key);
-                        } else {
-                            categoryKeysSelected.delete(key);
-                        }
-
-                        updateSearchParams({ categoryKeys: [...categoryKeysSelected] });
-                    }}
-                />
             </div>
         </div>
     );
 };
-
-const createKeysTitlesMaps = (categories: CmsCategoryListItem[]) => {
-    return categories.reduce<{
-        keysToTitles: Record<string, string>;
-        titlesToKeys: Record<string, string>;
-    }>(
-        (acc, category) => {
-            acc.titlesToKeys[category.title] = category.key;
-            acc.keysToTitles[category.key] = category.title;
-            return acc;
-        },
-        { keysToTitles: {}, titlesToKeys: {} }
-    );
-};

src/context/search-state/SearchStateContext.ts

@@ -6,6 +6,8 @@ export type SearchState = {
     setSearchResult: (result: ContentSearchResult) => void;
     searchResultIsOpen: boolean;
     setSearchResultIsOpen: (isOpen: boolean) => void;
+    searchSettingsIsOpen: boolean;
+    setSearchSettingsIsOpen: (isOpen: boolean) => void;
     searchParams: ContentSearchParams;
     setSearchParams: (params: ContentSearchParams) => void;
     updateSearchParams: (params: Partial<ContentSearchParams>) => void;
@@ -31,6 +33,8 @@ export const SearchStateContext = createContext<SearchState>({
     setSearchResult: () => ({}),
     searchResultIsOpen: false,
     setSearchResultIsOpen: () => ({}),
+    searchSettingsIsOpen: false,
+    setSearchSettingsIsOpen: () => ({}),
     searchParams: initialSearchParams,
     setSearchParams: () => ({}),
     updateSearchParams: () => ({}),

src/context/search-state/SearchStateProvider.tsx

@@ -19,6 +19,7 @@ export const SearchStateProvider = ({ children }: Props) => {
         getInitialSearchParams(basePath)
     );
     const [searchResultIsOpen, setSearchResultIsOpen] = useState(false);
+    const [searchSettingsIsOpen, setSearchSettingsIsOpen] = useState(false);
 
     const updateSearchParams = (params: Partial<ContentSearchParams>) => {
         const newParams: ContentSearchParams = { ...searchParams, ...params, isCustom: true };
@@ -56,6 +57,8 @@ export const SearchStateProvider = ({ children }: Props) => {
                 setSearchParams,
                 searchResultIsOpen,
                 setSearchResultIsOpen,
+                searchSettingsIsOpen,
+                setSearchSettingsIsOpen,
                 updateSearchParams,
                 resetSearchSettings,
                 runSearch,