From bb824ab495ac79f75480d9e74326c15178301db7 Mon Sep 17 00:00:00 2001
From: ebelegu <89395215+ebelegu@users.noreply.github.com>
Date: Fri, 10 Mar 2023 10:37:45 +0100
Subject: [PATCH] =?UTF-8?q?Fiks=20posisjonering=20p=C3=A5=20velgeren=20(#1?=
 =?UTF-8?q?18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Velger tar valgfri parameter friKomponent

* Bugfix for virksomhetsvelger som enkel komponent
---
 package-lock.json                             | 4 ++--
 package.json                                  | 2 +-
 src/bedriftsmeny/Bedriftsmeny.tsx             | 5 +++--
 src/bedriftsmeny/velger/Dropdown.css          | 7 +++++--
 src/bedriftsmeny/velger/Dropdown.tsx          | 5 +++--
 src/bedriftsmeny/velger/Virksomhetsvelger.css | 5 ++++-
 src/bedriftsmeny/velger/Virksomhetsvelger.tsx | 7 +++++--
 src/index.tsx                                 | 2 +-
 8 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index abc93a9..17171c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@navikt/bedriftsmeny",
-    "version": "6.4.1",
+    "version": "6.4.2",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "@navikt/bedriftsmeny",
-            "version": "6.4.1",
+            "version": "6.4.2",
             "license": "MIT",
             "dependencies": {
                 "@types/amplitude-js": "^8.9.4",
diff --git a/package.json b/package.json
index ec4a4c7..28fc1ae 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@navikt/bedriftsmeny",
-    "version": "6.4.1",
+    "version": "6.4.2",
     "description": "Bedriftsvelger og -meny for innlogget arbeidsgiver. Laget av TAG (Tjenester for Arbeidsgivere).",
     "author": "NAVIKT",
     "license": "MIT",
diff --git a/src/bedriftsmeny/Bedriftsmeny.tsx b/src/bedriftsmeny/Bedriftsmeny.tsx
index cbf54f8..ab12e4c 100644
--- a/src/bedriftsmeny/Bedriftsmeny.tsx
+++ b/src/bedriftsmeny/Bedriftsmeny.tsx
@@ -31,7 +31,7 @@ const Bedriftsmeny: FunctionComponent<EgneProps> = (props) => {
             tittel={sidetittel}
             undertittel={props.undertittel}
             piktogram={props.piktogram}
-            virksomhetsvelger={<Virksomhetsvelger {...props} />}
+            virksomhetsvelger={<Virksomhetsvelger {...props} friKomponent={false}/>}
             bjelle={props.children}
         />
     );
@@ -43,6 +43,7 @@ export type VirksomhetsvelgerProps = {
     /**
      * Hook som styrer hvordan man skal oppdatere søkeparametere i urlen
      */
+    friKomponent?: boolean;
     orgnrSearchParam?: OrgnrSearchParamType;
     amplitudeClient?: AmplitudeClient;
 }
@@ -78,7 +79,7 @@ export const Virksomhetsvelger = (props: VirksomhetsvelgerProps): ReactElement =
             organisasjonstre={organisasjonstre ?? []}
             onOrganisasjonChange={props.onOrganisasjonChange ?? (() => {})}
         >
-            <Velger />
+            <Velger friKomponent={props.friKomponent ?? true}/>
         </VirksomhetsvelgerProvider>
     </AmplitudeProvider>
 }
diff --git a/src/bedriftsmeny/velger/Dropdown.css b/src/bedriftsmeny/velger/Dropdown.css
index 7f512a2..2b322c4 100644
--- a/src/bedriftsmeny/velger/Dropdown.css
+++ b/src/bedriftsmeny/velger/Dropdown.css
@@ -2,10 +2,9 @@
   display: flex;
   z-index: 999;
   position: absolute;
-  top: 5rem;
-  right: 0;
   margin: 0;
   padding: 0;
+  top: 5rem;
   width: 100%;
   max-width: 30rem;
   border: solid 2px var(--a-deepblue-700);
@@ -13,6 +12,10 @@
   max-height: 65vh;
 }
 
+.Dropdown-panel-Bedriftsmeny{
+  right: 0;
+}
+
 .Dropdown-panel > * {
   flex-grow: 1;
 }
diff --git a/src/bedriftsmeny/velger/Dropdown.tsx b/src/bedriftsmeny/velger/Dropdown.tsx
index 9465983..5b3f41a 100644
--- a/src/bedriftsmeny/velger/Dropdown.tsx
+++ b/src/bedriftsmeny/velger/Dropdown.tsx
@@ -3,14 +3,15 @@ import React from "react";
 interface Props {
   children: React.ReactNode,
   ariaLabel: string,
+  friKomponent: boolean,
   erApen: boolean,
 }
 
-const Dropdown = ({erApen, ariaLabel, children}: Props) => {
+const Dropdown = ({erApen, ariaLabel, friKomponent,  children}: Props) => {
   return erApen ? <div
     role='dialog'
     aria-label={ariaLabel}
-    className="Dropdown-panel"
+    className={`Dropdown-panel ${!friKomponent ? "Dropdown-panel-Bedriftsmeny" : ""}`}
   >
     {children}
   </div> : null
diff --git a/src/bedriftsmeny/velger/Virksomhetsvelger.css b/src/bedriftsmeny/velger/Virksomhetsvelger.css
index 9501c58..0a79cb7 100644
--- a/src/bedriftsmeny/velger/Virksomhetsvelger.css
+++ b/src/bedriftsmeny/velger/Virksomhetsvelger.css
@@ -6,7 +6,6 @@
     padding: var(--a-spacing-3) var(--a-spacing-5);
 }
 
-
 .navbm-virksomhetsvelger:active {
     color: white;
 }
@@ -28,6 +27,10 @@
     }
 }
 
+.navbm-virksomhetsvelger-fri-komponent{
+    position: relative;
+}
+
 .navbm-virksomhetsvelger__innhold svg {
     width: 1.25rem;
     height: 1.25rem;
diff --git a/src/bedriftsmeny/velger/Virksomhetsvelger.tsx b/src/bedriftsmeny/velger/Virksomhetsvelger.tsx
index 517103b..7f87351 100644
--- a/src/bedriftsmeny/velger/Virksomhetsvelger.tsx
+++ b/src/bedriftsmeny/velger/Virksomhetsvelger.tsx
@@ -5,6 +5,7 @@ import {Expand, Collapse, Office1, Close} from '@navikt/ds-icons';
 import {VirksomhetsvelgerContext} from './VirksomhetsvelgerProvider';
 import JuridiskEnhet from './JuridiskEnhet';
 import Dropdown from "./Dropdown";
+import {Props} from "react-modal";
 
 export const useKeyboardEvent = (type: 'keydown' | 'keypress' | 'keyup', containerRef: React.RefObject<HTMLElement>, handler: (event: KeyboardEvent) => void) => {
     React.useEffect(() => {
@@ -27,7 +28,7 @@ export const useKeyboardEvent = (type: 'keydown' | 'keypress' | 'keyup', contain
     }, [type, containerRef, handler]);
 }
 
-const Velger = () => {
+const Velger = ({friKomponent} : {friKomponent: boolean} ) => {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const lukkKnappRef = useRef<HTMLButtonElement>(null);
     const søkefeltRef = useRef<HTMLInputElement>(null);
@@ -46,6 +47,7 @@ const Velger = () => {
     const [valgtUnderenhetIntern, velgOrganisasjonIntern] = useState(valgtOrganisasjon)
     const underenheterFlat = aktivtOrganisasjonstre.flatMap(({Underenheter }) => [...Underenheter]);
     const antallTreff = underenheterFlat.length;
+    console.log("friKomponent ", friKomponent)
 
     useKeyboardEvent('keydown', listeRef, (e) => {
         if (e.key === 'Tab') {
@@ -128,7 +130,7 @@ const Velger = () => {
 
 
     return (
-        <div ref={dropdownRef}>
+        <div ref={dropdownRef} className={`${friKomponent ? "navbm-virksomhetsvelger-fri-komponent" : ""}`}>
             <Button
                 className="navbm-virksomhetsvelger"
                 onClick={() => toggleVelger()}
@@ -155,6 +157,7 @@ const Velger = () => {
             </Button>
             <Dropdown
                 ariaLabel="Virksomhetsvelger"
+                friKomponent={friKomponent}
                 erApen={åpen}
             >
                 <div
diff --git a/src/index.tsx b/src/index.tsx
index cc65e13..9a2b069 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -58,7 +58,7 @@ const App = () => {
                     <p>
                         Her er en annen virksomhetsvelger:
                     </p>
-                    {/*<Virksomhetsvelger organisasjoner={organisasjoner}/>*/}
+                    <Virksomhetsvelger organisasjoner={organisasjoner}/>
 
                 </section>
             </div>