nve-designsystem 0.0.9 → 0.1.0

package/.github/workflows/azure-static-web-app-kind-mushroom-03c272603.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - main
+    paths:
+      - 'src/**'
   pull_request:
     types: [opened, synchronize, reopened, closed]
     branches:

package/.storybook/DocTemp.mdx

@@ -0,0 +1,36 @@
+import { Story, Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+
+<Meta isTemplate />
+
+<Title />
+
+# Default implementation
+
+<div style={{ display: 'flex' }}>
+  <span style={{ margin: '1rem' }}>
+    <Story name="Primary" height="50px">
+      {() => <Primary />}
+    </Story>
+  </span>
+  <span style={{ margin: '1rem' }}>
+    <Story name="Secondary" height="50px">
+      {() => <Primary />}
+    </Story>
+  </span>
+</div>
+
+<Primary />
+
+## Inputs
+
+The component accepts the following inputs (props):
+
+<Controls />
+
+---
+
+## Additional variations
+
+Listed below are additional variations of the component.
+
+<Stories />

package/.storybook/main.ts

@@ -7,8 +7,8 @@ const varsomCSSPath = process.env.NODE_ENV === 'production' ? '/assets/varsom.cs
 // we have to add another styling files after they will be in use
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/web-components-vite',
     options: {},
@@ -17,11 +17,16 @@ const config: StorybookConfig = {
   ${head}
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/cdn/themes/light.css" />
   <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/source-sans-pro" />
+  <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
   <link rel="stylesheet" href="${varsomCSSPath}" />
   <link rel="stylesheet" href="${globalCSSPath}" />
 `,
   docs: {
     autodocs: 'tag',
+
   },
 };
 export default config;

package/.storybook/preview.ts

@@ -1,7 +1,10 @@
 import type { Preview } from "@storybook/web-components";
-
+import DocTemp from './../.storybook/DocTemp.mdx';
 const preview: Preview = {
   parameters: {
+    docs: {
+      //page: DocTemp, kan sette custom mdx-fil her.
+    },
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {

package/.vscode/settings.json

@@ -4,8 +4,8 @@
   "editor.formatOnSave": true,
   "editor.formatOnSaveMode": "file",
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": false
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",

package/README.md

@@ -33,7 +33,7 @@ export default defineConfig({
 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 `nve-designsystem/build/css/` mappe. For NVE-tema, bruk:
+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:
 
 ```ts
 import 'nve-designsystem/build/css/nve.css';
@@ -52,12 +52,10 @@ Du har også mulighet til å velge enten lyst eller mørkt tema. Lyst er standar
 ```html
 <template>
   <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';
-    </script></template
-  ></template
->
+</template>
+<script setup lang="ts">
+  import { NveButton } from 'nve-designsystem/src/components/nve-button/nve-button';
+</script>
 ```
 
 Husk å alltid bruke både opening og closing tag individuelt, (`<nve-button />` fungerer ikke).
@@ -72,10 +70,76 @@ De fleste komponentene bygger på [Shoelace](https://shoelace.style/), men er ti
 
 ### **Kjøremiljø**
 
-Kjør `npm run dev` for å vise test-applikasjonen.
-Lag en testside for komponenten din, `nve-komponentnavn-demo.ts`, og inkluder denne i `main.ts`. Sida bør vise de forskjellige variantene av komponenten.
+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>
 
-### Storybook
+### **Styling**
+
+Når vi styler shoelace-komponenter kan vi enten overskrive Shoelace sine css-klasser eller bruke parts i shadow-DOM.
+Bruk helst parts fordi koden blir lettere å lese.
+Dette:
+
+```css
+::part(control) {
+  color: red;
+}
+```
+
+ser bedre ut enn dette:
+
+```css
+.checkbox checkbox--medium checkbox__control {
+  color: red;
+}
+```
+
+Hvis det ikke er mulig å style med ::part, bruk css-klasser.
+
+### **Typografi**
+
+Det finnes tokens for typografi i Figma.
+Sett Figma i utviklermodus og klikk på en tekst.
+I typografi-seksjonen til høyre ser vi css'en som er generert. Vi skal ikke bruke selve css'en, men <b>kommentaren</b> over css'en gir et hint om navnet på tokenet. Eksempel i Figma:
+
+```css
+color: var(--neutrals-foreground-mute, #3c3f44);
+
+/* Label/small */
+font-family: Source Sans Pro;
+font-size: 1rem;
+font-style: normal;
+font-weight: 600;
+line-height: 110%; /* 1.1rem */
+```
+
+Kommentaren `/* Label/small */` betyr at vi skal bruke css-variabelen `--label-small`, f.eks. slik:
+
+```css
+.button-label {
+  font: var(--label-small);
+}
+```
+
+### **Mapping av shoelace tokes til NVE-tokens**
+
+Det hadde vært fint om vi kunne sette en NVE-verdi for alle Shoelace-tokens. Men dette går ikke fordi strukturen i Shoelace og NVE Designsystem er forskjellig.
+Vi har satt NVE-verdier for en del Shoelace-tokens, og disse ligger i global.css.
+Foreslå gjerne flere Shoelace-tokens som kan mappes på denne måten.
+
+Vi trenger ikke å style:
+
+- fokus-tilstand på alle komponenter. Dette settes globalt
+- høyde på input-felter, knapper og select
+- border-radius på alle komponenter (med mindre border radius mangler på en Shoelace-komponent, men designsystemet spesifiserer border-radius)
+- bakgrunn, font-farge, font-størrelse, ikon-farge, ramme i input, select og textarea i både variantene filled og not filled
+
+### **Test-app for designere når man lager en PR**
+
+Pull requests på komponenter skal godkjennes av designere. Derfor har vi satt opp en azure static app med Storybook. Denne bygges og kjøres når man lager en PR.
+
+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`
 
@@ -95,3 +159,26 @@ For å bygge css filer som inneholder verdier basert på tokens fra Figma, kjør
 ### **npm**
 
 For å publisere på npm, må man oppdatere versjonsnr. i package.json og package-lock.json. Deretter kjør kommando `npm publish --access public`. Dette krever at man er innlogget på npm. For at CSS-variabler skal være tilgjengelig i npm-pakken, må css-filer kopieres. Dette gjøres ved å kjøre kommando `npm run copy-files`.
+<<<<<<< HEAD
+
+### **Kjøremiljø**
+
+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>
+
+### Storybook
+
+For å kjøre Storybook lokalt, kjør `npm run storybook`
+
+Det skal opprettes en story for hver nye komponent som lages. Story opprettes på følgende måte: <br>
+
+<ul>
+<li>Opprett en fil i mappen stories med filnavn "NavnPåKomponent.stories.ts." F.eks. NveButton.stories.ts.</li>
+<li>Se på eksisterende stories-filer og bruk samme oppsett </li>
+<li>Storbyook lager toggle-buttons for boolean verdier. For dropdown-meny må man selv definere alternativene </li>
+<li>Komponent-filen, f.eks. NavnPåKomponent.ts må eksportere props. Se eksisterende filer for eksempel (export interface NavnPåKomponentProps)</li>
+<li>Minimum et eksempel på komponent må opprettes og eksporteres i stories-filen, f.eks. "export const Primary..." for Primary-vaiant av NveButton</li>
+<li>Informasjon om komponenten (fra Figma og ev. ekstra info) kan legges inn i stories-files under parameters -> docs --> description -->  component</li>
+</ul>
+
+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\>`