IS-2728: Combine filterpanel to one

src/components/filters/ClearFiltersButton.tsx → src/components/Filter/ClearFiltersButton.tsx

@@ -13,14 +13,11 @@ const ClearFiltersWrapper = styled.div`
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  border: 2px solid transparent;
   justify-content: flex-end;
-  border-radius: 2px;
   color: ${themes.color.navBla};
-  margin-bottom: 0.5em;
   font-size: 1em;
   font-weight: 500;
-  padding: 0.25em;
+  padding: 0.5rem 0.25rem;
   -webkit-user-select: none;
   user-select: none;
   :hover {

src/components/HendelseFilterPanel.tsx → src/components/Filter/HendelseFilter.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import EkspanderbartPanel from 'nav-frontend-ekspanderbartpanel';
 import { PersonregisterState } from '@/api/types/personregisterTypes';
 import { filterOnPersonregister } from '@/utils/hendelseFilteringUtils';
 import { OverviewTabType } from '@/konstanter';
@@ -231,7 +230,7 @@ function CheckboxLabel({ labelText, antallHendelser }: CheckboxLabelProps) {
   );
 }
 
-export function HendelseFilterPanel({ personRegister }: Props) {
+export function HendelseFilter({ personRegister }: Props) {
   const { toggles } = useFeatureToggles();
   const { filterState, dispatch: dispatchFilterAction } = useFilters();
   const { selectedTab } = useTabType();
@@ -268,24 +267,22 @@ export function HendelseFilterPanel({ personRegister }: Props) {
   };
 
   return (
-    <EkspanderbartPanel apen tittel="Hendelse" className="mb-4">
-      <CheckboxGroup legend="Hendelse" hideLegend={true} size="small">
-        {checkboxElements.map((checkbox) => {
-          return (
-            <Checkbox
-              key={checkbox.hendelse}
-              checked={checkbox.isChecked}
-              value={checkbox.hendelse}
-              onChange={(e) => onChange(e.target.value)}
-            >
-              <CheckboxLabel
-                labelText={checkbox.tekst}
-                antallHendelser={checkbox.antallHendelser}
-              />
-            </Checkbox>
-          );
-        })}
-      </CheckboxGroup>
-    </EkspanderbartPanel>
+    <CheckboxGroup legend="Hendelse" size="small">
+      {checkboxElements.map((checkbox) => {
+        return (
+          <Checkbox
+            key={checkbox.hendelse}
+            checked={checkbox.isChecked}
+            value={checkbox.hendelse}
+            onChange={(e) => onChange(e.target.value)}
+          >
+            <CheckboxLabel
+              labelText={checkbox.tekst}
+              antallHendelser={checkbox.antallHendelser}
+            />
+          </Checkbox>
+        );
+      })}
+    </CheckboxGroup>
   );
 }

src/components/Filter/PersonFilter.tsx

@@ -1,23 +1,17 @@
-import React, { ReactElement, useState } from 'react';
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
-import BirthDateFilter from '../filters/BirthDateFilter';
-import CompanyFilter from '../filters/CompanyFilter';
+import React, { ReactElement } from 'react';
+import BirthDateFilter from './BirthDateFilter';
+import CompanyFilter from './CompanyFilter';
 import { PersonregisterState } from '@/api/types/personregisterTypes';
 import { mapPersonregisterToCompanyList } from '@/utils/personDataUtil';
 import { useFilters } from '@/context/filters/FilterContext';
 import { ActionType } from '@/context/filters/filterContextActions';
-import { FristFilter } from '@/components/filters/FristFilter';
+import { FristFilter } from '@/components/Filter/FristFilter';
 import {
   AgeFilterOption,
   FristFilterOption,
 } from '@/utils/hendelseFilteringUtils';
-import { AgeFilter } from '@/components/filters/AgeFilter';
-
-const texts = {
-  panelTitle: 'Filter',
-  trackingLabelCompanies: 'Filter - Virksomheter',
-  trackingLabelDate: 'Filter - Fødselsdato',
-};
+import { AgeFilter } from '@/components/Filter/AgeFilter';
+import { VStack } from '@navikt/ds-react';
 
 interface PersonFilterProps {
   personregister: PersonregisterState;
@@ -27,11 +21,6 @@ export const PersonFilter = ({
   personregister,
 }: PersonFilterProps): ReactElement => {
   const { filterState, dispatch: dispatchFilterAction } = useFilters();
-  const [panelOpen, setPanelOpen] = useState(true);
-
-  const togglePanel = () => {
-    setPanelOpen(panelOpen);
-  };
 
   const onBirthDateChange = (birthDates: string[]) => {
     dispatchFilterAction({
@@ -62,30 +51,24 @@ export const PersonFilter = ({
   };
 
   return (
-    <Ekspanderbartpanel
-      apen={panelOpen}
-      onClick={togglePanel}
-      tittel={texts.panelTitle}
-    >
-      <div className="flex flex-col gap-4">
-        <CompanyFilter
-          selectedCompanies={filterState.selectedCompanies}
-          options={mapPersonregisterToCompanyList(personregister)}
-          onSelect={onCompanyChange}
-        />
-        <BirthDateFilter
-          onSelect={onBirthDateChange}
-          selectedDates={filterState.selectedBirthDates}
-        />
-        <AgeFilter
-          onChange={onAgeFilterChange}
-          selectedAgeFilters={filterState.selectedAgeFilters}
-        />
-        <FristFilter
-          onChange={onFristFilterChange}
-          selectedFristFilters={filterState.selectedFristFilters}
-        />
-      </div>
-    </Ekspanderbartpanel>
+    <VStack className="gap-4">
+      <CompanyFilter
+        selectedCompanies={filterState.selectedCompanies}
+        options={mapPersonregisterToCompanyList(personregister)}
+        onSelect={onCompanyChange}
+      />
+      <BirthDateFilter
+        onSelect={onBirthDateChange}
+        selectedDates={filterState.selectedBirthDates}
+      />
+      <AgeFilter
+        onChange={onAgeFilterChange}
+        selectedAgeFilters={filterState.selectedAgeFilters}
+      />
+      <FristFilter
+        onChange={onFristFilterChange}
+        selectedFristFilters={filterState.selectedFristFilters}
+      />
+    </VStack>
   );
 };

src/components/Filter/TekstFilter.tsx

@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react';
+import { useFilters } from '@/context/filters/FilterContext';
+import { ActionType } from '@/context/filters/filterContextActions';
+import { TextField } from '@navikt/ds-react';
+
+const texts = {
+  undertittel: 'Navn / Fødselsnummer',
+};
+
+export const TekstFilter = (): ReactElement => {
+  const { filterState, dispatch: dispatchFilterAction } = useFilters();
+
+  return (
+    <TextField
+      size="small"
+      label={texts.undertittel}
+      value={filterState.tekstFilter}
+      onChange={(e) => {
+        dispatchFilterAction({
+          type: ActionType.SetTekstFilter,
+          tekstFilter: e.target.value,
+        });
+      }}
+    />
+  );
+};

src/containers/Oversikt.tsx

@@ -7,8 +7,8 @@ import { toPersonData } from '@/utils/toPersondata';
 import { PersonFilter } from '@/components/Filter/PersonFilter';
 import Sokeresultat from '@/components/Sokeresultat';
 import styled from 'styled-components';
-import { TekstFilter } from '@/components/filters/TekstFilter';
-import { ClearFiltersButton } from '@/components/filters/ClearFiltersButton';
+import { TekstFilter } from '@/components/Filter/TekstFilter';
+import { ClearFiltersButton } from '@/components/Filter/ClearFiltersButton';
 import {
   Filterable,
   filterEventsOnVeileder,
@@ -18,7 +18,8 @@ import { PersonOversiktStatusDTO } from '@/api/types/personoversiktTypes';
 import { useFilters } from '@/context/filters/FilterContext';
 import { useTabType } from '@/context/tab/TabTypeContext';
 import { useAktivVeilederQuery } from '@/data/veiledereQueryHooks';
-import { HendelseFilterPanel } from '@/components/HendelseFilterPanel';
+import { HendelseFilter } from '@/components/Filter/HendelseFilter';
+import { Box } from '@navikt/ds-react';
 
 const SokeresultatFiltre = styled.div`
   margin-right: 1rem;
@@ -72,10 +73,19 @@ export const Oversikt = ({
     <OversiktContainerInnhold>
       <SokeresultatFiltre>
         <ClearFiltersButton />
-        <TekstFilter />
-        <HendelseFilterPanel personRegister={allEvents.value} />
+        <Box
+          borderRadius="medium"
+          background="surface-default"
+          borderColor="border-strong"
+          padding="4"
+          borderWidth="1"
+          className="mb-4 flex flex-col gap-4"
+        >
+          <TekstFilter />
+          <HendelseFilter personRegister={allEvents.value} />
 
-        <PersonFilter personregister={personData} />
+          <PersonFilter personregister={personData} />
+        </Box>
       </SokeresultatFiltre>
 
       <Sokeresultat allEvents={allEvents} />

test/components/HendelseTypeFilter.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HendelseFilterPanel } from '@/components/HendelseFilterPanel';
+import { HendelseFilter } from '@/components/Filter/HendelseFilter';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it } from 'vitest';
@@ -39,7 +39,7 @@ describe('HendelseTypeFilter', () => {
           }}
         >
           <QueryClientProvider client={queryClient}>
-            <HendelseFilterPanel />
+            <HendelseFilter />
           </QueryClientProvider>
         </AktivEnhetContext.Provider>
       </NotificationProvider>
@@ -139,7 +139,7 @@ describe('HendelseTypeFilter', () => {
             }}
           >
             <QueryClientProvider client={queryClient}>
-              <HendelseFilterPanel />
+              <HendelseFilter />
             </QueryClientProvider>
           </AktivEnhetContext.Provider>
         </TabTypeContext.Provider>