nve-designsystem 0.1.11 → 0.1.13

package/README.md

@@ -20,29 +20,26 @@ export default defineConfig({
   plugins: [
     vue({
       template: {
+        transformAssetUrls,
         compilerOptions: {
           isCustomElement: (tag) => tag.includes('nve-'),
         },
       },
     }),
+  ],
+});
 ```
 
-3. Importer stiler fra global.css i enten main.ts eller index.html:
-
-```
-import 'nve-designsystem/src/styles/global.css';
-```
-
-4. I tillegg trenger du å importere en .css-fil for farge-tema i main.ts. Filene finnes i mappa `nve-designsystem/build/css/`. For NVE-tema, bruk:
+3. I tillegg trenger du å importere en .css-fil for farge-tema i main.ts. Filene finnes i mappa `nve-designsystem/build/css/`. For NVE-tema, bruk:
 
 ```ts
-import 'nve-designsystem/build/css/nve.css';
+import 'nve-designsystem/dist/css/nve.css';
 ```
 
 For Varsom-tema, bruk:
 
 ```ts
-import 'nve-designsystem/build/css/varsom.css';
+import 'nve-designsystem/dist/css/varsom.css';
 ```
 
 Du har også mulighet til å velge enten lyst eller mørkt tema. Lyst er standard.
@@ -54,7 +51,7 @@ Du har også mulighet til å velge enten lyst eller mørkt tema. Lyst er standar
   <nve-button variant="primary" size="small" @click="send">Button</nve-button>
 </template>
 <script setup lang="ts">
-  import { NveButton } from 'nve-designsystem/src/components/nve-button/nve-button';
+  import { NveButton } from 'nve-designsystem';
 </script>
 ```
 
@@ -73,6 +70,28 @@ De fleste komponentene bygger på [Shoelace](https://shoelace.style/), men er ti
 Prosjektet importerer Shoelace sin npm-pakke. Kjør `npm run dev` for utvikling.
 For å teste en komponent i main.ts må man huske å legge til script tag med komponenten i index.html fila som f.eks. <script type="module" src="/src/nve-button.ts"></script>
 
+### **Mappe struktur**
+
+Ved å lage en ny komponent opprett en mappe under src/components med komponent navn. Fil som inneholder selve komponent burde ha
+
+- .component.ts suffiks på fil sin inneholder selve komponent f.eks. /components/nve-component/nve-component.component
+- .styles.ts på filer med styling f.eks. /components/nve-component/nve-component.styles.ts
+- .demo.ts på filer som skal demonstrere komponent (til utviklere) f.eks. /components/nve-component/nve-component.demo.ts
+
+### **Hvordan vi bygger komponenter**
+Vi setter reflect: true på alle properties i komponenter (se eksempel under) for å kunne se properties som oppdateres i DOMen. Gjelder reaktive applikasjoner.
+```js
+@property({ reflect: true }) title: string = '';
+```
+
+### **Komponent eksport**
+
+Komponenter skal eksponeres i src/index.ts fila med
+
+```js
+export { default as NveComponent } from './components/nve-component/nve-component.component';
+```
+
 ### **Styling**
 
 Når vi styler shoelace-komponenter kan vi enten overskrive Shoelace sine css-klasser eller bruke parts i shadow-DOM.
@@ -139,12 +158,6 @@ Pull requests på komponenter skal godkjennes av designere. Derfor har vi satt o
 
 Det er maks 10 apper som kan kjøres samtidig, så hvis det er flere enn 10 PR'er kan det være at appen ikke bygges. De skal slettes automatisk når en PR lukkes, men det er ikke alltid dette virker. I slike tilfeller må vi slette appene manuelt i Azure-portalen. Appene ligger i denne ressursgruppa: TEST-Designsystemet-RG.
 
-### **Storybook**
-
-For å kjøre Storybook lokalt, kjør `npm run storybook`
-
-For å publisere Storybook på Chromatic, kjør `npm run build; npm run build-storybook`. Deretter må det kjøres en kommando med project token fra Chromatic: `npx chromatic --project-token=\<project-token\>`
-
 ### Dokumentasjon
 
 - Vi dokumenterer på norsk
@@ -165,6 +178,18 @@ For å publisere på npm, må man oppdatere versjonsnr. i package.json og packag
 Prosjektet importerer Shoelace sin npm-pakke. Kjør `npm run dev` for utvikling.
 For å teste en komponent i main.ts må man huske å legge til script tag med komponenten i index.html fila som f.eks. <script type="module" src="/src/nve-button.ts"></script>
 
+### **Test pakke lokalt**
+
+Før man pusher til main er det lurt å teste pakke lokalt. Med `npm run pack` kan man teste hvordan pakken oppfører seg akkurat på samme måte som etter publisering. For å teste en nve-designsystem pakke lokalt:
+
+1. Kjør `npm run build`
+2. Kjør `npm run pack`. En .tgz fil med pakken navn og versjon burde dukke opp i dist mappe
+3. Åpen et annet prosjekt hvor du kan teste nve-designsystem pakken
+4. Kjør `npm  i` <nve-designsystem-x.y.z.tgz med full sti>`
+5. Importer komponent i prosjektet og sjekk om alt fungerer som det burde
+
+NB! Vi lager pakken i dist mappe fordi det er enklere å strukturere hvordan pakken skal se ut når man laster den ned. Vi prøvde med `exports` og `files` i package.json men det ga oss ikke result vi var fornøyd med.
+
 ### Storybook
 
 For å kjøre Storybook lokalt, kjør `npm run storybook`

package/dist/components/nve-alert/nve-alert.component.d.ts

@@ -0,0 +1,15 @@
+import { SlAlert } from '@shoelace-style/shoelace';
+export default class NveAlert extends SlAlert {
+    constructor();
+    title: string;
+    text: string;
+    emphasized: boolean;
+    leftStroke: boolean;
+    static styles: import("lit").CSSResultGroup[];
+    updated(changedProperties: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-alert': NveAlert;
+    }
+}

package/dist/components/nve-button/nve-button.component.d.ts

@@ -0,0 +1,21 @@
+import { SlButton } from '@shoelace-style/shoelace';
+/**
+ * En Shoelace-knapp i NVE-forkledning.
+ * Se https://shoelace.style/components/button
+ *
+ * For å lage en lenke knapp legg til href på nve-button og den skal automatisk bli gjort om til <a>
+ *
+ * Vi skal ikke bruke properties:
+ * - circle
+ * - caret
+ * - pill
+ */
+export default class NveButton extends SlButton {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-button': NveButton;
+    }
+}

package/dist/components/nve-checkbox/nve-checkbox.component.d.ts

@@ -0,0 +1,15 @@
+import { SlCheckbox } from '@shoelace-style/shoelace';
+/**
+ * foreløpig finnes ikke noe hove
+ */
+export default class NveCheckbox extends SlCheckbox {
+    constructor();
+    /** Checks if input is valid */
+    invalid: boolean;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-checkbox': NveCheckbox;
+    }
+}

package/dist/components/nve-checkbox-group/nve-checkbox-group.component.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+/**
+ * Representerer en tilpasset sjekboksgruppekomponent.
+ * Denne komponenten burde brukes kun med <nve-checkbox> komponent. isValid property endrer fargene på alle
+ * <nve-checkbox> komponenter som er wrappet i <nve-checkbox-group>
+ * @slot default - innholder alle nve-checkbox komponenter for global style styring og validering
+ * */
+export default class NveCheckboxGroup extends LitElement {
+    constructor();
+    /**
+     * Bestemmer om sjekkboksgruppe er valid. Hvis ikke alle sjekkbokser i gruppe blir markert som feil
+     */
+    invalid: boolean;
+    /**
+     * Disable eller enable gruppa
+     */
+    disabled: boolean;
+    /**
+     * Viser label til en gruppe
+     */
+    label?: string;
+    /**
+     * Viser i ikone og tooltip tekst ved siden av label. Skal ikke fungere uten label
+     */
+    tooltip?: string;
+    /**
+     * Om gruppen skal rendres horisontalt eller vertikalt
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Viser feil melding under gruppen
+     */
+    errorMessage?: string;
+    slot: any;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: any): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-checkbox-group': NveCheckboxGroup;
+    }
+}

package/dist/components/nve-dialog/nve-dialog.component.d.ts

@@ -0,0 +1,45 @@
+import { SlDialog } from '@shoelace-style/shoelace';
+/**
+ * En sl-dialog i NVE-forkledning.
+ * Mer info: https://shoelace.style/components/dialog
+ *
+ * Vil du ha ikon foran tittelen kan du angi navnet på ikonet som attributt "icon".
+ * Skal det ikke være mulig å trykke utenfor for å lukke dialogen, sett på disableDialog attributt
+ *
+ * @slot label - teksten som skal vises i overskriften. Eller du kan bruke label-attributtet
+ * @slot body - hovedinnholdet
+ * @slot footer - feltet i bunden hvor knappene er plassert
+ *
+ */
+export declare class NveDialog extends SlDialog {
+    /**
+     * Ikonet som skal vises
+     */
+    icon: string;
+    /**
+     * Hvis disableBacground er true, kan man ikke trykke utenfor dialogen for å lukke den.
+     */
+    disableBackground: boolean;
+    constructor();
+    /**
+     *
+     * Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor
+     */
+    handleRequestClose(event: any): void;
+    updated(changedProperties: any): void;
+    /**
+     * Oppdaterer ikonet som vises i dialogens tittel.
+     * Metoden søker først etter tittel-elementet i komponentens skygge-DOM.
+     * Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres
+     * tittel-elementets stil for å inkludere det angitte ikonet.
+     * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til 'none'
+     * for å unngå å skape unødvendig mellomrom i layouten.
+     */
+    updateIcon(): void;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-dialog': NveDialog;
+    }
+}

package/dist/components/nve-divider/nve-divider.component.d.ts

@@ -0,0 +1,14 @@
+import { SlDivider } from '@shoelace-style/shoelace';
+/**
+ * En Shoelace-divider i NVE-forkledning.
+ * Se https://shoelace.style/components/divider
+ */
+export declare class NveDivider extends SlDivider {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-divider': NveDivider;
+    }
+}

package/dist/components/nve-dropdown/nve-dropdown.component.d.ts

@@ -0,0 +1,18 @@
+import { SlDropdown } from '@shoelace-style/shoelace';
+import { NveMenu } from '../nve-menu/nve-menu.component';
+/**
+ * En Shoelace-dropdown i NVE-forkledning.
+ * Se https://shoelace.style/components/dropdown
+ */
+export default class NveDropdown extends SlDropdown {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+    getMenu(): NveMenu | undefined;
+    updateAccessibleTrigger(): void;
+    private handlePanelSelect;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-dropdown': NveDropdown;
+    }
+}

package/dist/components/nve-icon/nve-icon.component.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+/**
+ * Et ikon.
+ * Vi bruker ikoner fra Material Symbols.
+ * @see https://fonts.google.com/icons
+ */
+export default class NveIcon extends LitElement {
+    /**
+     * Navnet på ikonet i Material Symbols-biblioteket
+     */
+    name: string;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-icon': NveIcon;
+    }
+}

package/dist/components/nve-input/nve-input.component.d.ts

@@ -0,0 +1,27 @@
+import { SlInput } from '@shoelace-style/shoelace';
+/**
+ * En sl-input i NVE-forkledning.
+ * Mer info: https://shoelace.style/components/input
+ *
+ * Vil du ha info-ikon med hjelpetekst etter ledeteksten, putt en nve-label i label-slot.
+ *
+ * Disse attributtene skal ikke brukes:
+ * - pill
+ *
+ * TODO: Utropstegn-ikon ved valideringsfeil
+ * TODO: Vise valideringsfeil med rød tekst under tekstfeltet
+ */
+export default class NveInput extends SlInput {
+    /**
+     * Tekst som vises for å markere at et felt er obligatorisk. Er satt til "*Obligatorisk" som standard.
+     */
+    requiredLabel: string;
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+    updated(changedProperties: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-input': NveInput;
+    }
+}

package/dist/components/nve-label/nve-label.component.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * Ledetekst med valgfritt verktøy-hint (og tilhørende info-ikon)
+ *
+ * @slot (default) - teksten som skal vises. Eller du kan bruke value-attributtet
+ * @slot tooltip - innhold i denne blir vist som en tooltip hvis man svever over info-ikonet
+ *
+ * TODO: Skal være litt mer plass mellom tekst og info-ikon
+ * TODO: Hvis du angir både value og innhold i slot, er det value som vises. Det bør være motsatt.
+ */
+export default class NveLabel extends LitElement {
+    private readonly hasSlotController;
+    /**
+     * Teksten som skal vises
+     */
+    value: string;
+    /**
+     * Størrelse
+     */
+    size: 'x-small' | 'small' | 'medium' | 'large';
+    /**
+     * Sett denne hvis du vil ha litt lettere skriftvekt
+     */
+    light: boolean;
+    /**
+     * Denne teksten blir vist som et verktøyhint hvis man svever over info-ikonet
+     */
+    tooltip?: string;
+    static styles: import("lit").CSSResult[];
+    private renderInfoIconWithTooltip;
+    private renderValueProperty;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-label': NveLabel;
+    }
+}

package/dist/components/nve-menu/nve-menu.component.d.ts

@@ -0,0 +1,10 @@
+import { SlMenu } from '@shoelace-style/shoelace';
+export declare class NveMenu extends SlMenu {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-menu': NveMenu;
+    }
+}

package/dist/components/nve-menu-item/nve-menu-item.component.d.ts

@@ -0,0 +1,39 @@
+import { SlMenuItem } from '@shoelace-style/shoelace';
+/**
+ * En sl-menu-item i NVE-forkledning.
+ * Mer info: https://shoelace.style/components/menu-item
+ *
+ */
+export declare class NveMenuItem extends SlMenuItem {
+    /**
+     * Tekst som vises som subtext(undertekst).
+     */
+    subtext: string;
+    /**
+     * Setter en divider på toppen av item.
+     */
+    dividerTop: boolean;
+    /**
+     * Setter en divider på bunnen av item.
+     */
+    dividerBottom: boolean;
+    /**
+     * Gjør at teksten blir indent og mindre dominant farge
+     */
+    indent: boolean;
+    /**
+     * Gjør at teksten vises som en unclickable kategori
+     */
+    category: boolean;
+    constructor();
+    /**
+     * Sørger for at subtext blir satt på, hvis den er tilstede i properties
+     */
+    updated(changedProperties: any): void;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-menu-item': NveMenuItem;
+    }
+}

package/dist/components/nve-radio/nve-radio.component.d.ts

@@ -0,0 +1,16 @@
+import { SlRadio } from '@shoelace-style/shoelace';
+/**
+ * Representerer en tilpasset radio-komponent som utvider SlRadio-klassen og styler den i nve-drakt.
+ *
+ * @extends SlRadio
+ *
+ */
+export default class NveRadio extends SlRadio {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-radio': NveRadio;
+    }
+}

package/dist/components/nve-radio-button/nve-radio-button.component.d.ts

@@ -0,0 +1,10 @@
+import { SlRadioButton } from '@shoelace-style/shoelace';
+export default class NveRadioButton extends SlRadioButton {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-radio-button': NveRadioButton;
+    }
+}

package/dist/components/nve-radio-group/nve-radio-group.component.d.ts

@@ -0,0 +1,35 @@
+import { SlRadioGroup } from '@shoelace-style/shoelace';
+/**
+ * Representerer en tilpasset radiogruppekomponent som utvider SlRadioGroup-klassen.
+ * Denne komponenten tillater bruk av nve-radio og nve-radio-button elementer inne i <nve-radio-group></nve-radio-group>
+ * ved å overstyre noen private metoder i SlRadioGroup.
+ *
+ * @extends SlRadioGroup
+ *
+ * @dependency NveRadioButton, NveRadio
+ *
+ * @property {string} orientation = horizontal eller vertical - Om radio-gruppen skal rendres horisontalt
+ * @property {boolean} disabled = disable eller enable gruppen med radio-knapper
+ *
+ * @slot Standard slot hvor `<nve-radio>` eller `<nve-radio-button>` plasseres
+ *
+ * @example <nve-radio-group horizontal value="1"><nve-radio value="1">Value 1 (checked)</nve-radio></nve-radio-group>
+ * @example <nve-radio-group vertical value="1"><nve-radio value="1">Value 1 (checked)</nve-radio></nve-radio-group>
+ *
+ */
+export default class NveRadioGroup extends SlRadioGroup {
+    constructor();
+    orientation: 'horizontal' | 'vertical';
+    disabled: boolean;
+    handlePropChange(oldValue: any, newValue: any): boolean;
+    static styles: import("lit").CSSResultGroup[];
+    private getAllRadios;
+    private handleRadioClick;
+    private syncRadioElements;
+    private syncRadios;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-radio-group': NveRadioGroup;
+    }
+}

package/dist/components/nve-spinner/nve-spinner.component.d.ts

@@ -0,0 +1,14 @@
+import { SlSpinner } from '@shoelace-style/shoelace';
+/**
+ * En Shoelace-spinner i NVE-forkledning.
+ * Se https://shoelace.style/components/spinner
+ */
+export default class NveSpinner extends SlSpinner {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-spinner': NveSpinner;
+    }
+}

package/dist/components/nve-tooltip/nve-tooltip.component.d.ts

@@ -0,0 +1,13 @@
+import { SlTooltip } from '@shoelace-style/shoelace';
+/**
+ * En sl-tooltip i NVE-uniform. TODO: Denne har ingen NVE-styling ennå.
+ */
+export default class NveTooltip extends SlTooltip {
+    constructor();
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-tooltip': NveTooltip;
+    }
+}