Feat/general/622 use new search component (#680)

* new search in singlerights * added debounce and fixed filter * new search component on api-delegation * added spacing * remove outside label * fixes from QA
Altinn · Jan 23, 2024 · a3da9e5 · a3da9e5
1 parent 9e03a6b
commit a3da9e5
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 757 deletions.
diff --git a/package.json b/package.json
@@ -18,9 +18,9 @@
   },
   "dependencies": {
     "@altinn/altinn-design-system": "0.30.0",
-    "@digdir/design-system-react": "0.38.0",
-    "@digdir/design-system-tokens": "0.10.0",
-    "@navikt/aksel-icons": "^5.0.3",
+    "@digdir/design-system-react": "0.42.0",
+    "@digdir/design-system-tokens": "0.11.0",
+    "@navikt/aksel-icons": "^5.12.2",
     "@reduxjs/toolkit": "^2.0.0",
     "@tanstack/react-query": "^4.32.6",
     "axios": "^1.3.4",

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -35,6 +35,8 @@ export interface FilterProps {
   fullScreenModal?: boolean;
   /** The ARIA label for the close button in modal view */
   closeButtonAriaLabel?: string;
+  /** className used for external styling of the filter button*/
+  className?: string;
 }
 
 /**
@@ -77,6 +79,7 @@ export const Filter = ({
   icon,
   values,
   searchable,
+  className,
   fullScreenModal = false,
   closeButtonAriaLabel,
   onApply,
@@ -139,6 +142,7 @@ export const Filter = ({
       aria-labelledby={filterButtonID}
       trigger={
         <FilterButton
+          className={className}
           id={filterButtonID}
           onClick={handleOpenOrClose}
           iconLeft={icon}

diff --git a/src/components/Filter/Floatover.module.css b/src/components/Filter/Floatover.module.css
@@ -6,7 +6,7 @@
   overflow: clip;
   z-index: 2;
   box-shadow: var(--fds-shadow-medium);
-  width: 286px;
+  width: 307px;
   margin-top: 10px;
   background-color: var(--fds-semantic-surface-neutral-subtle);
   border-radius: 20px;

diff --git a/src/components/Filter/OptionDisplay.module.css b/src/components/Filter/OptionDisplay.module.css
@@ -11,20 +11,20 @@
   display: flex;
   align-items: start;
   flex-direction: column;
-  border-left: 1px solid var(--fds-semantic-border-neutral-divider);
-  border-right: 1px solid var(--fds-semantic-border-neutral-divider);
-  border-top: 1px solid var(--fds-semantic-border-neutral-divider);
+  border-left: 1px solid var(--fds-semantic-border-divider-default);
+  border-right: 1px solid var(--fds-semantic-border-divider-default);
+  border-top: 1px solid var(--fds-semantic-border-divider-default);
 }
 
 .option {
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--fds-semantic-border-neutral-divider);
+  border-bottom: 1px solid var(--fds-semantic-border-divider-default);
   background-color: var(--fds-semantic-background-default);
   cursor: pointer;
   font: inherit;
   text-align: left;
-  padding: 0;
+  padding: 4px 0;
 }
 
 .option:hover {
@@ -47,5 +47,5 @@
 }
 
 .searchField {
-  padding: 12px 0px 12px 0px;
+  padding: 12px 0px;
 }
diff --git a/src/components/Filter/OptionDisplay.tsx b/src/components/Filter/OptionDisplay.tsx
@@ -113,7 +113,7 @@ export const OptionDisplay = ({
             onChange={() => {
               handleSelection(option.value);
             }}
-            size={compact ? 'xsmall' : 'small'}
+            size={compact ? 'small' : 'medium'}
             value={option.value}
             checked={isSelected}
           >

diff --git a/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx b/src/features/apiDelegation/offered/ChooseApiPage/ChooseApiPage.tsx
@@ -1,5 +1,4 @@
-import { SearchField } from '@altinn/altinn-design-system';
-import { Button, Spinner } from '@digdir/design-system-react';
+import { Button, Spinner, Search } from '@digdir/design-system-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FilterIcon } from '@navikt/aksel-icons';
@@ -29,6 +28,7 @@ import {
 } from '@/rtk/features/apiDelegation/delegableApi/delegableApiSlice';
 import type { DelegableApi } from '@/rtk/features/apiDelegation/delegableApi/delegableApiSlice';
 import { Filter, type FilterOption } from '@/components/Filter';
+import { debounce } from '@/resources/utils';
 
 import classes from './ChooseApiPage.module.css';
 
@@ -161,6 +161,10 @@ export const ChooseApiPage = () => {
     );
   });
 
+  const debouncedSearch = debounce((searchString: string) => {
+    handleSearch(searchString);
+  }, 300);
+
   return (
     <PageContainer>
       <Page
@@ -182,13 +186,16 @@ export const ChooseApiPage = () => {
           )}
           <div className={classes.searchSection}>
             <div className={classes.searchField}>
-              <SearchField
-                value={searchString}
+              <Search
+                label={t('api_delegation.search_for_api')}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  handleSearch(event.target.value);
+                  debouncedSearch(event.target.value);
+                }}
+                size='medium'
+                onClear={() => {
+                  handleSearch('');
                 }}
-                aria-label={String(t('api_delegation.search_for_api'))}
-              ></SearchField>
+              ></Search>
             </div>
             <div className={classes.filter}>
               <Filter

diff --git a/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx b/src/features/apiDelegation/offered/ChooseOrgPage/ChooseOrgPage.tsx
@@ -1,5 +1,5 @@
-import { Alert, Button, Heading, Paragraph, Spinner } from '@digdir/design-system-react';
-import { SearchField, Panel, PanelVariant } from '@altinn/altinn-design-system';
+import { Alert, Button, Heading, Paragraph, Spinner, Search } from '@digdir/design-system-react';
+import { Panel, PanelVariant } from '@altinn/altinn-design-system';
 import type { Key } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as React from 'react';
@@ -242,14 +242,18 @@ export const ChooseOrgPage = () => {
             </div>
           )}
           <div className={classes.searchSection}>
-            <SearchField
-              label={String(t('api_delegation.search_for_buisness'))}
-              value={searchString}
+            <Search
+              label={t('api_delegation.search_for_buisness')}
+              hideLabel={false}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                 handleSearch(event.target.value);
               }}
-              aria-label={String(t('api_delegation.search_for_buisness'))}
-            ></SearchField>
+              value={searchString}
+              size='medium'
+              onClear={() => {
+                handleSearch('');
+              }}
+            ></Search>
           </div>
           {viewLoading ? (
             <div className={common.spinnerContainer}>

diff --git a/src/features/singleRight/components/SearchSection/SearchSection.module.css b/src/features/singleRight/components/SearchSection/SearchSection.module.css
@@ -88,4 +88,8 @@
   .notDelegableAlert {
     margin-bottom: 30px;
   }
+
+  .filter {
+    padding-bottom: 5px;
+  }
 }
diff --git a/src/features/singleRight/components/SearchSection/SearchSection.tsx b/src/features/singleRight/components/SearchSection/SearchSection.tsx
@@ -2,10 +2,17 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 import * as React from 'react';
 import { FilterIcon } from '@navikt/aksel-icons';
-import { SearchField } from '@altinn/altinn-design-system';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Chip, Heading, Paragraph, Pagination, Spinner, Alert } from '@digdir/design-system-react';
+import {
+  Chip,
+  Heading,
+  Paragraph,
+  Pagination,
+  Spinner,
+  Alert,
+  Search,
+} from '@digdir/design-system-react';
 
 import { Filter } from '@/components';
 import { useMediaQuery } from '@/resources/hooks';
@@ -20,6 +27,7 @@ import {
   ServiceStatus,
   type ServiceWithStatus,
 } from '@/rtk/features/singleRights/singleRightsSlice';
+import { debounce } from '@/resources/utils';
 
 import { ResourceActionBar } from '../ResourceActionBar';
 
@@ -224,19 +232,30 @@ export const SearchSection = ({ onAdd, onUndo }: SearchSectionParams) => {
     );
   });
 
+  const debouncedSearch = debounce((searchString: string) => {
+    setSearchString(searchString);
+    setCurrentPage(1);
+  }, 300);
+
   return (
     <div className={classes.searchSection}>
       <div className={classes.searchInputs}>
         <div className={classes.searchField}>
-          <SearchField
+          <Search
             label={t('single_rights.search_label')}
+            hideLabel={false}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-              setSearchString(event.target.value);
+              debouncedSearch(event.target.value);
+            }}
+            size='medium'
+            onClear={() => {
+              setSearchString('');
               setCurrentPage(1);
             }}
-          ></SearchField>
+          ></Search>
         </div>
         <Filter
+          className={classes.filter}
           icon={<FilterIcon />}
           label={t('single_rights.filter_label')}
           options={filterOptions}

diff --git a/src/resources/utils/debounce.ts b/src/resources/utils/debounce.ts
@@ -0,0 +1,19 @@
+/**
+ * Delays the execution of a function by a specified amount of time.
+ *
+ * @param {(...args: any[]) => void} func - The function to delay.
+ * @param {number} [timeout=300] - The amount of time in milliseconds to delay the function call.
+ * @returns {Function} A new function that delays the invocation of the input function.
+ *
+ * @example
+ * debounce(() => console.log('Hello, world!'), 500);
+ */
+export function debounce(func: (...args: any[]) => void, timeout = 300) {
+  let timer: NodeJS.Timeout;
+  return (...args: any[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func(...args);
+    }, timeout);
+  };
+}
diff --git a/src/resources/utils/index.ts b/src/resources/utils/index.ts
@@ -1 +1,2 @@
 export * from './arrayUtils';
+export * from './debounce';