wip

navikt · Oct 4, 2024 · 58dd823 · 58dd823
1 parent 340de7b
commit 58dd823
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 26 deletions.
diff --git a/src/felles/header/modiadekoratør/Modiadekoratør.module.css b/src/felles/header/modiadekoratør/Modiadekoratør.module.css
@@ -4,6 +4,10 @@
     background-color: #3e3832;
 }
 
+:global {
+    @import url('https://cdn.nav.no/personoversikt/internarbeidsflate-decorator-v3/dev/latest/dist/index.css');
+}
+
 .placeholder {
     display: flex;
     gap: 2rem;

diff --git a/src/felles/header/modiadekoratør/Modiadekoratør.tsx b/src/felles/header/modiadekoratør/Modiadekoratør.tsx
@@ -5,7 +5,7 @@ import { ComponentType, FunctionComponent, useEffect, useRef, useState } from 'r
 import { NavKontorMedNavn } from '../../ApplikasjonContext';
 import { getMiljø, Miljø } from '../../miljø';
 import { DecoratorProps } from './DekoratørProps';
-
+import styles from './Modiadekoratør.module.css';
 const appName = 'internarbeidsflate-decorator-v3';
 
 enum Status {
@@ -21,34 +21,11 @@ type Props = {
 
 const Modiadekoratør: FunctionComponent<Props> = ({ navKontor, onNavKontorChange }) => {
     const microfrontend = useRef<ComponentType<DecoratorProps>>();
-    const hostRef = useRef<any>(null);
+
     const [status, setStatus] = useState<Status>(
         loadjs.isDefined(appName) ? Status.Klar : Status.LasterNed
     );
 
-    useEffect(() => {
-        if (hostRef.current) {
-            const root = hostRef.current.attachShadow({ mode: 'open' });
-
-            const style = document.createElement('style');
-            style.textContent = `
-            @import url('https://cdn.nav.no/personoversikt/internarbeidsflate-decorator-v3/dev/latest/dist/index.css')
-            layer(modiadekorator);
-          `;
-
-            const content = document.createElement('div');
-            content.id = 'modia-decorator-content';
-
-            root.appendChild(style);
-            root.appendChild(content);
-
-            // Move children into shadow DOM
-            while (hostRef.current.firstChild) {
-                content.appendChild(hostRef.current.firstChild);
-            }
-        }
-    }, []);
-
     useEffect(() => {
         const loadAssets = async (staticPaths: string[]) => {
             try {
@@ -103,7 +80,7 @@ const Modiadekoratør: FunctionComponent<Props> = ({ navKontor, onNavKontorChang
                     const MicrofrontendComponent =
                         microfrontend.current as React.ComponentType<any>;
                     return (
-                        <div ref={hostRef}>
+                        <div className={styles.modiaDecorator}>
                             <MicrofrontendComponent {...props} />
                         </div>
                     );