Fix missing styles for demo-banner (#1179)

navikt · Aug 25, 2023 · d13814e · d13814e
1 parent dba377f
commit d13814e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
+    "dev:gh-pages": "VITE_USE_HASH_ROUTER=true vite",
     "build:dev-ekstern": "vite build --mode=dev-ekstern",
     "build:dev-intern": "vite build --mode=dev-intern --base=https://cdn.nav.no/dab/aktivitetsplan-dev-intern/build/",
     "build:prod-ekstern": "vite build --mode=prod-ekstern",

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,8 +5,7 @@ import * as ReactDOM from 'react-dom';
 
 import { initAmplitude } from './amplitude/amplitude';
 import { ER_INTERN_FLATE, USE_MOCK } from './constant';
-import DemoBanner from './mocks/demo/DemoBanner';
-import {mockfnr} from "./mocks/utils";
+import { mockfnr } from './mocks/utils';
 
 setDefaultOptions({ locale: nn });
 
@@ -32,15 +31,16 @@ const renderApp = () => {
 };
 
 if (USE_MOCK) {
-    const webComponentTag = document.createElement("dab-aktivitetsplan")
-    webComponentTag.setAttribute("data-fnr", mockfnr)
-    document.getElementById("root")!!.appendChild(webComponentTag)
-    import('./mocks')
-        .then(({ default: startWorker }) => startWorker())
-        .then(() => {
+    const webComponentTag = document.createElement('dab-aktivitetsplan');
+    webComponentTag.setAttribute('data-fnr', mockfnr);
+    document.getElementById('root')?.appendChild(webComponentTag);
+    Promise.all([import('./mocks'), import('./mocks/demo/DemoBanner')]).then(
+        ([{ default: startWorker }, { default: DemoBanner }]) => {
+            startWorker();
             ReactDOM.render(<DemoBanner />, document.getElementById('demo'));
             renderApp();
-        });
+        },
+    );
 } else {
     initAmplitude();
     renderApp();

diff --git a/src/mocks/demo/DemoBanner.tsx b/src/mocks/demo/DemoBanner.tsx
@@ -1,6 +1,11 @@
 import { Modal } from '@navikt/ds-react';
 import React, { useState } from 'react';
 
+// CSS is imported twice when in demo mode to support switching between web-components and normal render
+import '@navikt/ds-css';
+import '../../tailwind.css';
+import '../../index.less';
+
 import DemoDashboard from './demoDashboard';
 import DemoIkon from './DemoIkon';
 
@@ -9,7 +14,7 @@ const DemoBanner = () => {
 
     return (
         <div>
-            <DemoIkon alt="" onClick={() => setOpen(true)} />
+            <DemoIkon onClick={() => setOpen(true)} />
             <Modal open={open} onClose={() => setOpen(false)}>
                 <DemoDashboard />
             </Modal>