open-index/open-npm huggingface dataset:
npm package: @oslokommune/punkt-assets
Description: Punkt - designsystem av Oslo Origo - Assets
Author: Team Designsystem, Oslo Origo
Latest version: 16.0.0

## Bruk av punkt-assets

<a href="https://www.npmjs.com/package/@oslokommune/punkt-assets" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-assets?logo=svg&label=ressurser&style=for-the-badge&color=FFB13B" alt="Ressurser" /></a>

Denne pakken inneholder Punkts ressurser, og består i all hovedsak av svg-elementer.

## 📖 Innhold

```sh
@oslokommune/punkt-assets
 ├── fonts/                     # oslosans font
 ├── icons/                     # alle svg-ikoner
 ├── logos/                     # oslologo og diverse favicons
```

## 🚀 Kom i gang - npm

```sh
npm add @oslokommune/punkt-assets
```

Se eksempler på hvordan ta i bruk assets her:

- [Font](/grunnleggende/for-utviklere/kom-i-gang/#css-og-assets)
- [Ikoner](/ikoner/)
- [Logo](/grunnleggende/ressurser/oslologo/)

## 🏎️ Kom i gang - cdn

Ved å inkludere Punkts ressurser via vår CDN på
[punkt-cdn.oslo.kommune.no](https://punkt-cdn.oslo.kommune.no/),
er du kjapt igang uten noe byggesteg.

Du kan peke til SVG-ikoner, fonter og logoer.

Se tilgjengelige filer på [cdn](https://punkt-cdn.oslo.kommune.no/).

```html
<!doctype html>
<html lang="no">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Punkt</title>
    <link href="https://punkt-cdn.oslo.kommune.no/latest/css/pkt.min.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Velkommen til Punkt</h1>
    <img
      src="https://punkt-cdn.oslo.kommune.no/latest/logos/oslologo.svg"
      alt="Oslo kommune logo"
      height="64"
    />
  </body>
</html>
```

## 🔢 Versjonering

Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.

## 👮 Lisens

`@oslokommune/punkt-assets` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/assets/LICENSE) for åpen kildekode.

![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-assets?style=for-the-badge)
npm package: @oslokommune/punkt-elements
Description: Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
Author: Team Designsystem, Oslo Origo
Latest version: 16.7.0

## Bruk av punkt-elements

<a href="https://www.npmjs.com/package/@oslokommune/punkt-elements" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-elements?logo=webcomponentsdotorg&label=customelements&style=for-the-badge&color=bf4080" alt="Custom elements" /></a>

Denne pakken inneholder custom elements for Punkts komponentbibliotek. Den er under utarbeiding men den
vil etterhvert holde på absolutt alle Punkts komponenter.

## 🚀 Kom i gang - npm

```sh
npm add @oslokommune/punkt-css
npm add @oslokommune/punkt-elements
```

```js
import '@oslokommune/punkt-elements/dist/pkt-card.js'
import '@oslokommune/punkt-elements/dist/pkt-datepicker.js'
import '@oslokommune/punkt-elements/dist/pkt-link.js'
```

Se dokumentasjon for punkt-css for instrukser for bruk av CSS-pakken.

## 🏎️ Kom i gang - cdn

```html
<link href="https://punkt-cdn.oslo.kommune.no/latest/css/pkt.min.css" rel="stylesheet" />
<!-- importer elementene du vil bruke -->
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-card.js"></script>
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-datepicker.js"></script>
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-link.js"></script>
```
npm package: @oslokommune/punkt-react
Description: React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
Author: Team Designsystem, Oslo Origo
Latest version: 16.7.0

## Bruk av punkt-react

<a href="https://www.npmjs.com/package/@oslokommune/punkt-react" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-react?logo=react&label=react&style=for-the-badge&color=61dafb" alt="React komponenter" /></a>

Dette repoet inneholder Punkt sine UI-komponenter for React. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`. De fleste komponenter tar i bruk custom elements fra `@oslokommune/punkt-elements`. Enn så lenge støtter vi ikke full bruk i server-side-genererte apper.

## 📝 Forutsetninger

Peer dependencies:

- nodejs `20.19.1`
- react `>= 18`
- @oslokommune/punkt-assets `*`
- @oslokommune/punkt-css `*`

## 🚀 Kom i gang - npm

### 1. Installer komponentbiblioteket

```sh
npm add @oslokommune/punkt-react
```

### 2. Importer komponentene

```js
// src/App.tsx

import { PktButton, PktTextInput } from "@oslokommune/punkt-react";

...

  <PktTextInput label="First name" id="firstName" />
  <PktButton skin="primary" variant="icon-left" iconName="user">
    Testbutton
  </PktButton>

```

## 🟪 Ikoner

Alle våre komponenter bruker PktIcon-komponenten for å importere
ikonene via vår [CDN](https://punkt-cdn.oslo.kommune.no/).

Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.

## 🔢 Versjonering

Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.

## 👮 Lisens

`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/react/LICENSE) for åpen kildekode.

![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-react?style=for-the-badge)
npm package: @oslokommune/punkt-vue
Description: Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
Author: Team Designsystem, Oslo Origo
Latest version: 16.7.0

## Bruk av punkt-vue

<a href="https://www.npmjs.com/package/@oslokommune/punkt-vue" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-vue?logo=vue.js&label=vue&style=for-the-badge&color=42b883" alt="Vue komponenter" /></a>

Dette repoet inneholder Punkt sine UI-komponenter for Vue 3. Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`. Dersom vi har komponenter som ikke eksisterer i Vue, kan man ta i bruk komponenter fra `@oslokommune/punkt-elements` i Vue.

## 📝 Forutsetninger

Peer dependencies:

- nodejs `20.19.1`
- vue `>= 3.0.0`
- @oslokommune/punkt-assets `>= 1.0`
- @oslokommune/punkt-css `>= 1.0`

## 🚀 Kom i gang - npm

### 1. Installer komponentbiblioteket

```sh
npm add @oslokommune/punkt-vue
```

### 2. Importer komponentene

```js
/* src/main.js

Velg å installere hele bundlen */
import { createApp } from 'vue'
import PktVue from '@oslokommune/punkt-vue'

const app = createApp({})

app.use(PktVue)

/* eller kun individuelle komponenter (med ikoner)*/
import { createApp } from 'vue'
import { PktHeader, PktFooter, PktIcon } from '@oslokommune/punkt-vue'

const app = createApp({})

app.component('pkt-header', PktHeader)
app.component('pkt-footer', PktFooter)
app.component('pkt-icon', PktIcon)
```

## 🟪 Ikoner

Alle våre komponenter bruker PktIcon-komponenten for å importere ikonene via vår [CDN](https://punkt-cdn.oslo.kommune.no/).

Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.

Les mer om ikoner [her.](/ressurser/ikoner/kode)

## 🔵 Bruk av `punkt-elements`

En del komponenter i punkt-vue-pakken tar i bruk elementer fra punkt-elements-pakken. Det skal i all hovedsak fungere veldig bra, men dersom dere skulle oppleve utfordringer med reaktive objekter eller verdier i slots, så kan det hjelpe å pakke innholdet i slots i en `div` eller annet wrapper-element. OG dersom dette skulle oppstå, ta gjerne kontakt med Punkt-teamet så vi kan feilsøke og forbedre koden vår!

Vi utvikler i dag ikke nye komponenter i Vue, så om dere ser komponenter dere ønsker å bruke i Vue som ikke eksisterer i punkt-vue-pakken, så kan dere bruke elementene fra punkt-elements-pakken som om de skulle vært Vue-komponenter.

## 🧩 Komponentbiblioteket

For beskrivelse av hvordan ta i bruk hver enkelt komponent se [om komponenter](/komponenter/).

## 🔢 Versjonering

Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.

## 👮 Lisens

`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/vue/LICENSE) for åpen kildekode.

![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-vue?style=for-the-badge)
npm package: @oslokommune/punkt-vue2
Description: Vue2 komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
Author: Team Designsystem, Oslo Origo
Latest version: 11.19.3
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

## Bruk av punkt-vue2

<a href="https://www.npmjs.com/package/@oslokommune/punkt-vue2" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-vue2?logo=vue.js&label=vue2&style=for-the-badge&color=42b883" alt="Vue komponenter" /></a>

Dette repoet inneholder Punkt sine UI-komponenter for Vue 2.6+. Vue 3 finner du i pakken som heter "punkt-vue". Komponentene er laget for å fungere sammen med `@oslokommune/punkt-assets` og `@oslokommune/punkt-css`.

## 📝 Forutsetninger

Peer dependencies:

- nodejs `18.19`
- vue `>= 2.6.12 < 3.0.0`
- @oslokommune/punkt-assets `>= 1.0`
- @oslokommune/punkt-css `>= 1.0`

## 🚀 Kom i gang - npm

### 1. Installer komponentbiblioteket

```sh
npm add @oslokommune/punkt-vue2
```

### 2. Importer komponentene

```js
/* src/main.js

Velg å installere hele bundlen */
import Vue from 'vue'
import PktVue from '@oslokommune/punkt-vue2'

Vue.use(PktVue)

/* eller kun individuelle komponenter (med ikoner)*/
import Vue from 'vue'
import { PktHeader, PktFooter, PktIcon } from '@oslokommune/punkt-vue2'

Vue.component('pkt-header', PktHeader)
Vue.component('pkt-footer', PktFooter)
Vue.component('pkt-icon', PktIcon)
```

## 🟪 Ikoner

Alle våre komponenter bruker PktIcon-komponenten for å importere
ikonene via vår [CDN](https://punkt-cdn.oslo.kommune.no/).

Om du har en content security policy(CSP) satt opp må du åpne for https://punkt-cdn.oslo.kommune.no/ i din CSP.

Les mer om ikoner [her.](/ressurser/ikoner/kode)

## 🧩 Komponentbiblioteket

For beskrivelse av hvordan ta i bruk hver enkelt komponent se [om komponenter](/komponenter/om-komponenter).

## 🔢 Versjonering

Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.

## 👮 Lisens

`Punkt` er distribuert under [MIT-lisens](https://github.com/oslokommune/punkt/blob/main/packages/vue2/LICENSE) for åpen kildekode.

![NPM License](https://img.shields.io/npm/l/@oslokommune/punkt-vue2?style=for-the-badge)
npm package: @osls/compose
Description: Deploy and orchestrate multiple Serverless Framework services in monorepositories.
Latest version: 1.4.0

This repository contains the code for Serverless Framework Compose.

Check out the [Serverless Framework Compose documentation](https://github.com/oss-serverless/serverless/blob/main/docs/guides/compose.md).

<p align="center"><a href="https://github.com/oss-serverless/serverless/blob/main/docs/guides/compose.md"><img src="https://assets.website-files.com/6178ec21bdb27bb4cd52c72d/625d76707477fa1efbb3559d_blog%20header.png" width="600px"></a></p>