fix: støtte css-filer import via cdn

.github/workflows/publish-npm.yml

@@ -47,7 +47,8 @@ jobs:
         id: semantic_release
         run: npx semantic-release
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}
 
       - name: Configure Git for version bump
         if: ${{ success() }}

.releaserc

@@ -18,6 +18,7 @@
       {
         "assets": [
           "package.json",
+          "package-lock.json",
           "CHANGELOG.md"
         ],
         "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"

README.md

@@ -16,7 +16,17 @@ Dette prosjektet inneholder to applikasjoner:
 - I rot-mappa ligger selve komponentbiblioteket med nve-komponentene
 - I mappa `doc-site` ligger test-applikasjonen som viser brukerveiledninga for biblioteket. Teknisk beskrivelse av denne ligger i egen [readme](doc-site/README.md)
 
-Kjør `npm install` og `npm run dev` for å starte test-applikasjonen. Applikasjonen er selve brukerveiledninga for komponentbiblioteket, så her ligger api-dokumentasjon, beskrivelse av funksjonalitet og ikke minst kodeeksempler.
+Kjør `npm install` og `npm run dev` for å starte test-applikasjonen.
+
+Dersom applikasjonen ikke er bygget på forhånd, vil npm run dev automatisk sørge for at den bygges og at dist-mappen opprettes.
+
+Vi bygger applikasjonen før kjøring for å sikre at den importerer custom-elements.json og nve-designsystem.css fra dist. Siden begge filer ganske statiske man trenger ikke å å bygge
+appen på nytt hver gang man gjør noen endringer i component filen. Disse to filene kunne vært plassert i src, men vi
+unngår det – særlig for shoelace.css – fordi filen da måtte blitt manuelt kopiert fra node_modules til src (eller håndtert via et script).
+
+Ved å importere shoelace.css direkte i main.ts, sørger Vite for korrekt bundling. Dette eliminerer behovet for å endre @import-referanser i global.css og gir dist-mappen som eneste source of truth.
+
+Applikasjonen er selve brukerveiledninga for komponentbiblioteket, så her ligger api-dokumentasjon, beskrivelse av funksjonalitet og ikke minst kodeeksempler.
 
 ## Pull requests
 

doc-site/.vitepress/config.mts

@@ -49,21 +49,21 @@ export default defineConfig({
               { text: 'Avstander og luft', link: '/introduction/designelementer/avstander' },
               { text: 'Visuell form', link: '/introduction/designelementer/visuellform' },
               { text: 'Animasjoner', link: '/introduction/designelementer/animasjoner' },
-            ]
+            ],
           },
           {
             text: 'For designere',
             items: [
               { text: 'Design', link: '/introduction/forDesigner/design' },
               { text: 'Kom igang', link: '/introduction/forDesigner/getStarted' },
               { text: 'Bidrag', link: '/introduction/forDesigner/contribution' },
-
-            ]
+            ],
           },
           {
             text: 'For utviklere',
             items: [
               { text: 'Utvikling', link: '/introduction/forDevelopers/development' },
+              { text: 'Importering av filer', link: '/introduction/forDevelopers/import' },
               { text: 'Bruk i Vue', link: '/introduction/forDevelopers/vue' },
               { text: 'Validering', link: '/introduction/forDevelopers/validation' },
             ],

doc-site/introduction/forDevelopers/import.md

@@ -0,0 +1,87 @@
+<PageHeader title="For utviklere" imagePath="developer"  pageLevel=2></PageHeader>
+
+# Importering av filer
+
+## Import av komponenter
+
+Etter du har innstallert pakken komponentene kan enkelt importeres slik:
+
+```js
+import 'nve-designsystem/components/nve-component/nve-component.component.js';
+```
+
+Du kan velge om du vil importere en komponent der den brukes i koden eller på et globalt nivå (f.eks. i `main.js` eller `index.html`).
+Hvis du bruker mange designsystem-komponenter, anbefaler vi ikke å importere alle globalt, da dette kan føre til lengre lastetid.
+
+Dersom en parent-komponent i applikasjonen importerer en designsystem-komponent, trenger du ikke å importere den igjen i en child-komponent.
+Web-komponenter blir registrert i nettleseren første gang de importeres. Det betyr at hvis du importerer en komponent flere steder, registreres den bare én gang, og du unngår duplikater.
+
+## Import av stiler
+
+Importer <em>en</em> .css-fil for farge-tema i en hovedfil i applikasjonen (f.eks. `main.ts` eller `index.html`). Filene finnes i mappa `nve-designsystem/css/`.
+For NVE-tema, bruk:
+
+```js
+import 'nve-designsystem/css/nve.css';
+```
+
+For Varsom-tema, bruk:
+
+```js
+import 'nve-designsystem/css/varsom.css';
+```
+
+Det finnes også varianter av disse to filene med mørkt tema.
+
+## Import via CDN
+
+Både stiler og komponenter kan importeres via CDN.
+
+### Komponenter via CDN
+
+Du kan importere en komponent i `index.html` slik:
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/nve-designsystem@latest/components/nve-component/nve-component.component.js"
+></script>
+```
+
+Skal du bruke komponenter som inneholder ikoner (som f.eks nve-select, nve-checkbox, nve-carousel, nve-menu-item, nve-input) må du også sørge for at du riktig registrerer ikoner i appen din. For eksempel kan du gjøre dette i `index.html` filen:
+
+```html
+<script>
+  const registerIconLibraryHelper = () => {
+    import('https://cdn.jsdelivr.net/npm/nve-designsystem@latest/registerIcons/systemLibraryCustomization.js').then(
+      (module) => {
+        const { icons, registerIconLibrary } = module;
+        registerIconLibrary('system', {
+          resolver: (name) => {
+            return `data:image/svg+xml, ${encodeURIComponent(icons[name])}`;
+          },
+        });
+      }
+    );
+  };
+  registerIconLibraryHelper();
+</script>
+```
+
+### CSS via CDN
+
+Dersom du ikke trenger å innstallere (eller ikke kan bruke) hele nve-designsystem-pakken, men kun vil ha tilgang til CSS-variablene, anbefaler vi å bruke CDN.
+
+Importer NVE-tema i `index.html` slik:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nve-designsystem@latest/css/nve.css" />
+```
+
+For Varsom-tema, bruk:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nve-designsystem@latest/css/varsom.css" />
+```
+
+Det samme gjelder for mørke temaer.

package.json

@@ -23,7 +23,7 @@
   "types": "nve-designsystem.d.ts",
   "scripts": {
     "add-component": "node scripts/createNewComponent.js",
-    "dev": "node scripts/createCustomElementsManifest.js && cd doc-site && npm run dev",
+    "dev": "node scripts/buildForDev.js && cd doc-site && npm run dev",
     "doc:build": "cd doc-site && npm run build",
     "doc:preview": "cd doc-site && npm run preview",
     "pack": "node scripts/prepublish.js pack",

public/css/global.css

@@ -1,4 +1,4 @@
-@import '@shoelace-style/shoelace/dist/themes/light.css';
+@import '../../dist/nve-designsystem.css';
 @import url('https://fonts.cdnfonts.com/css/source-sans-pro');
 
 :root {

scripts/buildForDev.js

@@ -0,0 +1,24 @@
+/*Brukes til å kjøre dev mode. 
+Vi trenger to filer fra dist mappen for å kjøre dev mode. Vi kunne importere disse filene inn i src direkte, men
+vi bestemte å ikke gjøre det foreløpig. Grunnen er at vi må huske å importere disse filene i src hver gang enten shoelace 
+eller manifest filen oppdateres. Appen krever både dist/custom-elements.json og dist/nve-designsystem.css (inneholder shoelace sine
+css-variabler som vi importerer i global.css)
+*/
+import { exec } from 'child_process';
+import util from 'util';
+import chalk from 'chalk';
+import nextTask from './nextTask.js';
+import fs from 'fs';
+import process from 'process';
+
+// sjekker om dist mappa finnes
+if (!fs.existsSync('./dist')) {
+  const execPromise = util.promisify(exec);
+  await nextTask('Building app', () => {
+    return execPromise('npm run build');
+  });
+  console.log(`${chalk.green('✔')} Application built successfully`);
+} else {
+  console.log(`${chalk.green('✔')} Build folder exists`);
+  process.exit(0);
+}

src/nve-designsystem.ts

@@ -1,7 +1,6 @@
 /** Alle komponenter som er tilgjengelige, i alfabetisk rekkefølge. */
 /** Denne filen blir genererert av npm run add-component */
-
-
+import '../node_modules/@shoelace-style/shoelace/dist/themes/light.css';
 export { default as NveAccordion } from './components/nve-accordion/nve-accordion.component';
 export { default as NveAccordionItem } from './components/nve-accordion-item/nve-accordion-item.component';
 export { default as NveAlert } from './components/nve-alert/nve-alert.component';
@@ -39,4 +38,3 @@ export { default as NveSwitch } from './components/nve-switch/nve-switch.compone
 export { default as NveTag } from './components/nve-tag/nve-tag.component';
 export { default as NveTextarea } from './components/nve-textarea/nve-textarea.component';
 export { default as NveTooltip } from './components/nve-tooltip/nve-tooltip.component';
-