diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml
index da439e4d..1330435a 100644
--- a/.github/workflows/publish-npm.yml
+++ b/.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() }}
diff --git a/.releaserc b/.releaserc
index 513c2a78..1e8fef93 100644
--- a/.releaserc
+++ b/.releaserc
@@ -18,6 +18,7 @@
{
"assets": [
"package.json",
+ "package-lock.json",
"CHANGELOG.md"
],
"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
diff --git a/README.md b/README.md
index 2383cf2e..36e60d3e 100644
--- a/README.md
+++ b/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
diff --git a/doc-site/.vitepress/config.mts b/doc-site/.vitepress/config.mts
index ed088aa9..2e908b1f 100644
--- a/doc-site/.vitepress/config.mts
+++ b/doc-site/.vitepress/config.mts
@@ -49,7 +49,7 @@ 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',
@@ -57,13 +57,13 @@ export default defineConfig({
{ 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' },
],
diff --git a/doc-site/introduction/forDevelopers/import.md b/doc-site/introduction/forDevelopers/import.md
new file mode 100644
index 00000000..8416ce7f
--- /dev/null
+++ b/doc-site/introduction/forDevelopers/import.md
@@ -0,0 +1,87 @@
+
+
+# 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 en .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
+
+```
+
+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
+
+```
+
+### 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
+
+```
+
+For Varsom-tema, bruk:
+
+```html
+
+```
+
+Det samme gjelder for mørke temaer.
diff --git a/package.json b/package.json
index 8584af74..5914cb95 100644
--- a/package.json
+++ b/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",
diff --git a/public/css/global.css b/public/css/global.css
index 17adc5b1..39565de7 100644
--- a/public/css/global.css
+++ b/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 {
diff --git a/scripts/buildForDev.js b/scripts/buildForDev.js
new file mode 100644
index 00000000..60bc7601
--- /dev/null
+++ b/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);
+}
diff --git a/scripts/createCustomElementsManifest.js b/scripts/createCustomElementsManifest.js
deleted file mode 100644
index cab285c2..00000000
--- a/scripts/createCustomElementsManifest.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/*Brukes til å kjøre dev mode. Siden vue app krever dist/custom-elements.json, må vi opprette denne filen før vi starter
-dev modus */
-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';
-
-// get mode type. Production is default.
-//sjekk om custom-element.json' i dist mappa finnes
-if (!fs.existsSync('./dist/custom-elements.json')) {
- const execPromise = util.promisify(exec);
- await nextTask('Creating custom-elements.json in dist folder', () => {
- return execPromise('npm run manifest');
- });
- console.log(`${chalk.green('✔')} dist/custom-element.json created successfully`);
-} else {
- console.log(`${chalk.green('✔')} dist/custom-element.json found`);
- process.exit(0);
-}
diff --git a/src/nve-designsystem.ts b/src/nve-designsystem.ts
index d5942ead..d1bfba3d 100644
--- a/src/nve-designsystem.ts
+++ b/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';
-
\ No newline at end of file