IS-2728: Combine filterpanel to one

navikt · Nov 25, 2024 · bba0c44 · bba0c44
1 parent d82a9a6
commit bba0c44
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 88 deletions.
diff --git a/src/components/Filter/PersonFilter.tsx b/src/components/Filter/PersonFilter.tsx
@@ -1,5 +1,4 @@
-import React, { ReactElement, useState } from 'react';
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
+import React, { ReactElement } from 'react';
 import BirthDateFilter from '../filters/BirthDateFilter';
 import CompanyFilter from '../filters/CompanyFilter';
 import { PersonregisterState } from '@/api/types/personregisterTypes';
@@ -13,12 +12,6 @@ import {
 } from '@/utils/hendelseFilteringUtils';
 import { AgeFilter } from '@/components/filters/AgeFilter';
 
-const texts = {
-  panelTitle: 'Filter',
-  trackingLabelCompanies: 'Filter - Virksomheter',
-  trackingLabelDate: 'Filter - Fødselsdato',
-};
-
 interface PersonFilterProps {
   personregister: PersonregisterState;
 }
@@ -27,11 +20,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 +50,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>
+    <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>
   );
 };
diff --git a/src/components/HendelseFilterPanel.tsx b/src/components/HendelseFilterPanel.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';
@@ -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>
   );
 }
diff --git a/src/components/filters/ClearFiltersButton.tsx b/src/components/filters/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 {

diff --git a/src/components/filters/TekstFilter.tsx b/src/components/filters/TekstFilter.tsx
@@ -1,37 +1,26 @@
 import React, { ReactElement } from 'react';
 import { useFilters } from '@/context/filters/FilterContext';
 import { ActionType } from '@/context/filters/filterContextActions';
-import { Box, Heading, TextField } from '@navikt/ds-react';
+import { TextField } from '@navikt/ds-react';
 
 const texts = {
   undertittel: 'Navn / Fødselsnummer',
-  placeholder: 'Søk på navn eller fødselsnummer',
 };
 
 export const TekstFilter = (): ReactElement => {
   const { filterState, dispatch: dispatchFilterAction } = useFilters();
 
   return (
-    <Box
-      borderRadius="medium"
-      background="surface-default"
-      borderColor="border-strong"
-      padding="4"
-      borderWidth="1"
-      className="mb-4"
-    >
-      <TextField
-        size="small"
-        label={<Heading size="small">{texts.undertittel}</Heading>}
-        description={texts.placeholder}
-        value={filterState.tekstFilter}
-        onChange={(e) => {
-          dispatchFilterAction({
-            type: ActionType.SetTekstFilter,
-            tekstFilter: e.target.value,
-          });
-        }}
-      />
-    </Box>
+    <TextField
+      size="small"
+      label={texts.undertittel}
+      value={filterState.tekstFilter}
+      onChange={(e) => {
+        dispatchFilterAction({
+          type: ActionType.SetTekstFilter,
+          tekstFilter: e.target.value,
+        });
+      }}
+    />
   );
 };
diff --git a/src/containers/Oversikt.tsx b/src/containers/Oversikt.tsx
@@ -19,6 +19,7 @@ import { useFilters } from '@/context/filters/FilterContext';
 import { useTabType } from '@/context/tab/TabTypeContext';
 import { useAktivVeilederQuery } from '@/data/veiledereQueryHooks';
 import { HendelseFilterPanel } from '@/components/HendelseFilterPanel';
+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 />
+          <HendelseFilterPanel personRegister={allEvents.value} />
 
-        <PersonFilter personregister={personData} />
+          <PersonFilter personregister={personData} />
+        </Box>
       </SokeresultatFiltre>
 
       <Sokeresultat allEvents={allEvents} />