Merge pull request #72 from navikt/designendringer

Designendringer søket

Author: bdahle

legacy-archive/client/components/left-section/search/search-input/search-settings/SearchSettings.tsx

@@ -46,11 +46,16 @@ export const SearchSettings = () => {
                         variant={'tertiary'}
                         className={style.toggle}
                         onClick={() => setSearchSettingsIsOpen(!searchSettingsIsOpen)}
+                        icon={
+                            <ChevronDownIcon
+                                className={classNames(
+                                    style.icon,
+                                    searchSettingsIsOpen && style.open
+                                )}
+                            />
+                        }
                     >
                         {'Tilpass søket'}
-                        <ChevronDownIcon
-                            className={classNames(style.icon, searchSettingsIsOpen && style.open)}
-                        />
                     </Button>
                 </div>
             </div>

xp-archive/client/contentTree/NavigationBar.module.css

@@ -12,11 +12,13 @@
     gap: 0.5rem;
 }
 
-.radio {
-    :global(.navds-body-short) {
-        display: flex;
-        flex-direction: row;
-        gap: 0.5rem;
-        align-items: center;
-    }
+.chevronOpen {
+    transform: rotateX(180deg);
+}
+
+.radioGroupWrapper {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    background-color: var(--a-surface-subtle);
+    border-radius: 0.5rem;
 }

xp-archive/client/contentTree/NavigationBar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Tabs, Search, RadioGroup, Radio, HelpText } from '@navikt/ds-react';
+import { ChevronDownIcon } from '@navikt/aksel-icons';
+import { Tabs, Search, RadioGroup, Radio, Button } from '@navikt/ds-react';
 import { LayerPanel } from './layerPanel/LayerPanel';
 import { useAppState } from 'client/context/appState/useAppState';
 import { fetchJson } from '@common/shared/fetchUtils';
@@ -24,6 +25,7 @@ const getLabel = (locale: Locale) => {
 export const NavigationBar = () => {
     const { setSelectedLocale } = useAppState();
     const [searchResultIsOpen, setSearchResultIsOpen] = useState(false);
+    const [searchSettingsIsOpen, setSearchSettingsIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [isLoading, setIsLoading] = useState(false);
     const [searchType, setSearchType] = useState<'curated' | 'other'>('curated');
@@ -71,36 +73,40 @@ export const NavigationBar = () => {
                     searchData();
                 }}
             >
-                <RadioGroup
-                    legend="Søk i..."
-                    size="small"
-                    onChange={setSearchType}
-                    value={searchType}
-                >
-                    <Radio className={style.radio} value="curated">
-                        Utvalgte innholdstyper
-                        <HelpText>
-                            <ul>
-                                <li>Produktside</li>
-                                <li>Situasjonsside</li>
-                                <li>Temaartikkel</li>
-                                <li>Slik gjør du det</li>
-                                <li>Aktuelt</li>
-                                <li>Artikkel</li>
-                                <li>Intern lenke</li>
-                                <li>Ekstern lenke</li>
-                            </ul>
-                        </HelpText>
-                    </Radio>
-                    <Radio value="other">Andre innholdstyper</Radio>
-                </RadioGroup>
                 <Search
                     label={'Søk'}
                     value={searchQuery}
                     onChange={(value) => setSearchQuery(value)}
-                    size="small"
                 />
             </form>
+
+            <Button
+                size={'xsmall'}
+                variant={'tertiary'}
+                className={style.toggle}
+                icon={<ChevronDownIcon className={searchSettingsIsOpen ? style.chevronOpen : ''} />}
+                onClick={() => setSearchSettingsIsOpen(!searchSettingsIsOpen)}
+            >
+                {'Tilpass søket'}
+            </Button>
+            {searchSettingsIsOpen && (
+                <div className={style.radioGroupWrapper}>
+                    <RadioGroup
+                        legend="Treff i innholdstyper"
+                        size="small"
+                        onChange={setSearchType}
+                        value={searchType}
+                    >
+                        <Radio
+                            value="curated"
+                            description="Produktside, Situasjonsside, Temaartikkel, Slik gjør du det, Aktuelt, Artikkel, Intern lenke, Ekstern lenke"
+                        >
+                            Utvalgte
+                        </Radio>
+                        <Radio value="other">Andre</Radio>
+                    </RadioGroup>
+                </div>
+            )}
             {searchResultIsOpen ? (
                 <SearchResult
                     isLoading={isLoading}

xp-archive/client/contentTree/search/SearchResult.module.css

@@ -1,22 +1,20 @@
 .wrapper {
     display: flex;
     flex-direction: column;
+    padding-top: 1rem;
+    margin-top: 1rem;
+    border-top: 1px solid var(--a-gray-300);
 }
 
-.filteredHitsHeading {
+.heading {
     display: flex;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 }
 
-.filteredHitsHeadingText {
+.headingText {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 0.5rem;
 }
-
-.otherHitsHeading {
-    margin-top: 1.5rem;
-    margin-bottom: 0.5rem;
-}

xp-archive/client/contentTree/search/SearchResult.tsx

@@ -38,11 +38,11 @@ export const SearchResult = ({ isLoading, searchResult, closeSearchResult }: Sea
                 <Loader size={'3xlarge'} />
             ) : (
                 <div className={style.wrapper}>
-                    <div className={style.filteredHitsHeading}>
+                    <div className={style.heading}>
                         <div>
-                            <div className={style.filteredHitsHeadingText}>
+                            <div className={style.headingText}>
                                 <Heading size="small" level="2">
-                                    {`Treff for "${query}": (${total})`}
+                                    {`${total} treff på "${query}"`}
                                 </Heading>
                             </div>
                         </div>