Punkt

https://punkt.oslo.kommune.no/latest/
Admin
Punkt is a comprehensive design system for digital products in Oslo municipality, providing...
Tokens:49,272
Snippets:271
Trust Score:9.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Card Component with Tags and Image (HTML)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

A basic implementation of the Card component using HTML. It includes example data for tags and an image, demonstrating how to structure content within the card. This snippet is platform-agnostic and serves as a structural example.

```html
<pkt-card
  tags='[
    {
      "text": "Tag 1",
      "skin": "blue"
    },
    {
      "text": "Tag 2",
      "skin": "green"
    }
  ]'
  image='{
    "src": "https://img.oslo.kommune.no/_prod_/1319136-1444913631/Tjenester%20og%20tilbud/Barnehage/Finn%20barnehage%20i%20Oslo/Bydel%20Nordstrand/Symrahagen%20familiebarnehage/Galleri/hovedbilde.jpg?w=792&aspect_ratio=16%3A9&gravity=face",
    "alt": "Symrahagen"
  }'>
  <span>
    <p>Dette er en tekst om barnehagen</p>
  </span>
</pkt-card>
```

--------------------------------

### Install and Run axe-cli for WCAG Testing

Source: https://punkt.oslo.kommune.no/latest/universell-utforming/testverktoy

This snippet demonstrates how to install the axe-cli tool globally using npm and then run it against a local development server to test specified pages for WCAG compliance. It also shows an example of the output when a violation is found.

```shell
$ npm install @axe-core/cli -g
```

```shell
$ axe http://localhost:3000 http://localhost:3000/komponenter/badge
```

```text
  Violation of "landmark-no-duplicate-banner" with 1 occurrences!
    Ensures the document has at most one banner landmark. Correct invalid elements at:
     - #pkt-header
    For details, see: https://dequeuniversity.com/rules/axe/4.4/landmark-no-duplicate-banner


```

--------------------------------

### PktIcon Component Example

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/icon

An example of how to use the PktIcon component, likely within a web framework. This snippet demonstrates the basic structure for rendering an icon, with 'content' likely referring to the specific icon identifier.

```html
<p>Kodebygger</p>
<p>PktIcon</p>
<p>Innhold</p>
```

--------------------------------

### Web Component Messagebox

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/messagebox

Example of using the Messagebox as a web component. This is a framework-agnostic way to implement the component, useful for plain HTML or other JavaScript frameworks. It allows for similar customization as the React version.

```html
<pkt-messagebox
  title="Dette er en meldingsboks"
  skin="beige">
  <span> Dette er innholdet i meldingsboksen. </span>
</pkt-messagebox>
```

--------------------------------

### Default Text Styling Examples (HTML)

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/ressurser/typografi

Provides examples of basic HTML text elements and their default styling within the Punkt CSS framework, including paragraphs, italic, small text, bold text.

```html
<p>Dette er vanlig brødtekst.</p>
<p><em>Dette er skrevet i kursiv</em>.</p>
<p><small>Dette er skrevet i liten tekst</small>.</p>
<p><strong>Dette er skrevet i fet tekst</strong>.</p>
```

--------------------------------

### Punkt Spacing CSS Helper Classes Examples

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/ressurser/spacing

Demonstrates the usage of Punkt's CSS helper classes for applying responsive margins and padding. These classes follow a pattern of {type}{direction}-{size} and can include responsive modifiers like --{breakpoint}-up.

```html
<!-- Margin bunn settes til 24px (1.5rem) -->
<p class="mb-size-24">Margin bunn</p>

<!--
margin til høyre settes til 0
padding top settes til 24px (1.5rem)
-->
<p class="mr-size-0 pt-size-24">margin høyre og padding topp</p>

<!--
padding settes til 12px (0.75rem) til venstre og høyre
Ved breakpoint laptop og større endres dette til 24px (1.5rem)
-->
<p class="px-size-12 px-size-24--laptop-up">Horisontal padding</p>

```

--------------------------------

### Configure Responsive Gap/Gutter Sizes in Punkt Grid

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/ressurser/grid

Shows how to manage responsive gap and gutter sizes within the `pkt-grid`. This example applies a 16px gap for mobile and increases it to 32px for tablets and larger screens using classes like `pkt-grid--gap-size-16` and `pkt-grid--gap-size-32-tablet-up`.

```html
<section
  className="pkt-grid pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up"
>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
  <div class="pkt-cell pkt-cell--span3">
    .pkt-grid--gap-size-16 pkt-grid--gap-size-32-tablet-up
  </div>
</section>
```

--------------------------------

### Implement Punkt Grid with Phablet Breakpoint

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/ressurser/grid

Demonstrates the basic implementation of the `pkt-grid` component using the `pkt-grid--phablet` class. This sets up a grid layout that is responsive and adapts to different screen sizes, starting with a phablet breakpoint. The content scales with screen width, while gaps and margins remain consistent.

```html
<section className="pkt-grid pkt-grid--phablet">
  <div class="pkt-cell pkt-cell--span12">.pkt-grid--phablet</div>
</section>
```

--------------------------------

### Progressbar Implementation in HTML

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/progressbar

Shows the implementation of the progress bar using custom HTML elements. This example uses the 'pkt-progressbar' tag with attributes to define the title, minimum and maximum values, current value, and status type.

```html
<pkt-progressbar
  title="Fremdrift"
  valueMin="0"
  valueMax="100"
  valueCurrent="40"
  statusType="percentage"></pkt-progressbar>
```

--------------------------------

### PktTextinput Component Example - React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/textinput

This code snippet demonstrates how to use the PktTextinput component in React. It shows basic configuration with a label, name, placeholder, help text, input type, ID, and wrapper usage. The component is designed for text input with optional helper text and validation.

```jsx
<PktTextinput
  label="Fornavn"
  name="fornavn"
  placeholder="Skriv inn fornavn"
  helptext="Dette er hjelpetekst."
  type="text"
  id="textinput-1"
  useWrapper />
```

--------------------------------

### Import PktInputWrapper i React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/inputwrapper

Dette kodeeksemplet viser hvordan du importerer PktInputWrapper-komponenten fra Punkt React-biblioteket. Dette er nødvendig for å bruke komponenten i React-applikasjoner.

```javascript
import { PktInputWrapper } from '@oslokommune/punkt-react';
```

--------------------------------

### Import PktInputWrapper i Vanilla JS

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/inputwrapper

Dette kodeeksemplet viser hvordan du importerer PktInputWrapper-komponenten for bruk i vanilje JavaScript-prosjekter ved hjelp av Punkt Elements JS-modulen. Sørg for at filstien til .js-filen er korrekt.

```javascript
import @oslokommune/punkt-elements/dist/pkt-input-wrapper.js;
```

--------------------------------

### Installere og bruke Punkt Elements (Web Components)

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/kom-i-gang

Installerer Punkt Elements-pakken og demonstrerer import og bruk av Web Components for tekstinput og knapper direkte i HTML. Anbefaler innpakking av reaktivt innhold.

```bash
npm add @oslokommune/punkt-elements
```

```javascript
import @oslokommune/punkt-elements/dist/pkt-textinput.js;
import @oslokommune/punkt-elements/dist/pkt-button.js;
```

```html
<pkt-textinput label="Fornavn" name="fornavn"></pkt-textinput>
<pkt-button type="submit"><span>Dette er en knapp</span></pkt-button>
```

--------------------------------

### Import Loader Component (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/loader

This snippet demonstrates how to import the PktLoader component for use within a React application. It assumes the '@oslokommune/punkt-react' package is installed.

```javascript
import { PktLoader } from '@oslokommune/punkt-react';
```

--------------------------------

### Alert Component - Implementation

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/alert

Provides guidance on how to implement the Alert component using code, including options and testing.

```APIDOC
## Implementation in Code

### Options
Alerts can accept a JSON list as an attribute/prop in `options`, or a series of `<option>` elements. Use a JSON list if `options` are dynamic or if using `tagSkinColor`, `description`, or `prefix`. `options` are always converted to an array of objects.

### Usage

**Elements:**
```javascript
import "@oslokommune/punkt-elements/dist/pkt-alert.js";
```

**React:**
```javascript
import { PktAlert } from '@oslokommune/punkt-react';
```

**CDN:**
```html
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-alert.js" type="module"></script>
```

### Testing
For testing with JSDOM or similar, ensure the component is fully rendered before testing. Use:
```javascript
await window.customElements.whenDefined("pkt-alert");
```
Testing tools in `punkt-testing-utils` may handle this automatically.
```

--------------------------------

### Installere og bruke Punkt React-komponenter

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/kom-i-gang

Installerer Punkt React-pakken og viser et eksempel på hvordan man importerer og bruker React-komponenter som knapper og input-felt. Merk at React-komponenter kan kreve spesifikk håndtering i enhetstester.

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

```javascript
import { PktButton, PktInput } from "@oslokommune/punkt-react";
...
<PktTextInput label="First name" id="firstName" />
<PktButton skin="primary" variant="icon-left" iconName="user">
	Testbutton
</PktButton>
```

--------------------------------

### Override Fetch Function for Custom Icon Loading

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/icon

Provides an example of overriding the global fetch function to control how icons are loaded, useful for testing.

```javascript
window.pktFetch = () =>  
  Promise.resolve({  
    ok: true,  
    text: () => Promise.resolve('<div>FakeIcon</div>'),  
  }); 
```

--------------------------------

### Import Stepper Component in React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/stepper

This code snippet demonstrates how to import the PktStepper component from the '@oslokommune/punkt-react' library in a React application. Ensure you have the library installed as a dependency.

```javascript
import { PktStepper } from '@oslokommune/punkt-react';
```

--------------------------------

### Inkluder PktInputWrapper via CDN

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/inputwrapper

Dette kodeeksemplet viser hvordan du inkluderer PktInputWrapper-komponenten i et HTML-dokument ved hjelp av en CDN-lenke. Dette er en enkel måte å ta komponenten i bruk uten en byggeprosess.

```html
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-input-wrapper.js" type="module"></script>
```

--------------------------------

### Import Punkt React Components

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/accordion

Import the PktAccordion and PktAccordionItem components for use within a React application. This assumes you have the Punkt React library installed.

```javascript
import { PktAccordion, PktAccordionItem } from '@oslokommune/punkt-react';
```

--------------------------------

### Import PktSelect Component (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/select

This snippet shows the import statement for the 'PktSelect' component within a React application. It assumes the '@oslokommune/punkt-react' library is installed.

```javascript
import { PktSelect } from '@oslokommune/punkt-react';
```

--------------------------------

### Input wrapper i HTML

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/inputwrapper

Viser hvordan Input wrapper-komponenten brukes i ren HTML. Den omslutter inputfelt med standard etikett, hjelpetekst og innhold for konsistent visning.

```html
<pkt-input-wrapper
  label="Feltetikett"
  helptext="Dette er hjelpetekst.">
  <span> Her kan du skrive inn tekst </span>
</pkt-input-wrapper>
```

--------------------------------

### Import Button Component - React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/button

Demonstrates how to import and use the Button component within a React application. This assumes the necessary package is installed in the project.

```jsx
import { PktButton } from '@oslokommune/punkt-react';
```

--------------------------------

### PktCard Component Structure (HTML)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

Demonstrates the basic HTML structure for the PktCard component, including slots for heading, subheading, metadata, and links.

```html
<PktCard>
  <div slot="heading">Overskrift</div>
  <div slot="subheading">Undertittel</div>
  <div slot="metaLead">Forfatter eller annen metadata</div>
  <div slot="metaTrail">Dato eller annen metadata</div>
  <div slot="clickCardlink">Lenke for klikkbart card</div>
</PktCard>
```

--------------------------------

### HTML Accordion Implementation with Details and Summary

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/accordion

Demonstrates the basic HTML structure for an accordion component using the semantic `<details>` and `<summary>` elements. This approach provides built-in keyboard navigation and accessibility features. The content within `<details>` is revealed when the `<summary>` is activated.

```html
<details>
  <summary>Overskrift for rad 1</summary>
  <p>Innhold for rad 1. Dette er en kort og konsis beskrivelse.</p>
</details>
<details>
  <summary>Overskrift for rad 2</summary>
  <p>Innhold for rad 2. Mer informasjon som logisk hører sammen.</p>
</details>
```

--------------------------------

### Importing PktTextinput in React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/textinput

This snippet shows how to import the PktTextinput component from the '@oslokommune/punkt-react' library for use in a React project. Ensure the library is installed in your project.

```javascript
import { PktTextinput } from '@oslokommune/punkt-react';

```

--------------------------------

### PktModal Component - Testing

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/modal

Guidance on how to properly test the PktModal component, especially when using JSDOM or similar environments, to ensure it renders correctly.

```APIDOC
## PktModal Component - Testing

### Description
This section provides essential information for testing the `PktModal` component, particularly when using headless browser environments like JSDOM. It highlights the importance of waiting for the custom element to be fully defined before proceeding with tests.

### Method
Asynchronous testing with `customElements.whenDefined`

### Endpoint
`window.customElements.whenDefined("pkt-modal")`

### Parameters
(No specific parameters for the testing method itself)

### Request Example
```javascript
// Ensure the custom element is defined before running tests
await window.customElements.whenDefined("pkt-modal");

// Now you can proceed with your JSDOM or other environment tests
// For example, checking if the modal element exists and its content.
```

### Response
(This is a utility function for testing; it doesn't return a value but ensures the component is ready for interaction and inspection.)

**Note**: If you are using the testing utilities provided within `punkt-testing-utils`, this `whenDefined` call might be handled automatically.
```

--------------------------------

### Import PktSearchInput Component in React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/searchinput

This snippet shows how to import the PktSearchInput component from the @oslokommune/punkt-react library into a React project. Ensure the library is installed as a dependency.

```javascript
import { PktSearchInput } from '@oslokommune/punkt-react';

```

--------------------------------

### Import PktTable React Component

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/table

This snippet shows how to import the PktTable component from the '@oslokommune/punkt-react' library. Ensure this package is installed in your React project to use the table component.

```javascript
import { PktTable } from '@oslokommune/punkt-react';
```

--------------------------------

### Import PktCheckbox Component using React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/checkbox

This snippet shows the import statement for the PktCheckbox component when using it within a React project. It assumes you have installed the @oslokommune/punkt-react package.

```javascript
import { PktCheckbox } from '@oslokommune/punkt-react';
```

--------------------------------

### Konfigurer Git Hooks

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/bidra

Dette snippetet viser hvordan man konfigurerer Git hooks for å automatisk kjøre scripts ved commits. Dette er viktig for å sikre at kodekvalitet og dokumentasjon oppdateres konsistent.

```bash
git config core.hooksPath scripts/git-hooks
```

--------------------------------

### Import Punkt Link Component (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/link

This code snippet shows how to import the PktLink component from the Punkt React library for use in React applications. Ensure the library is installed as a dependency.

```javascript
import { PktLink } from '@oslokommune/punkt-react';
```

--------------------------------

### Apply Icon Sizes with CSS Classes

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/icon

Demonstrates how to apply predefined CSS classes to change the size of the PktIcon component.

```html
<style>
  .green-layout pkt-icon {
    --fg-color: var(--pkt-color-brand-green-1000);
  }
</style>
<div class="green-layout">
  <pkt-icon name="user"></pkt-icon>
</div>
```

--------------------------------

### Utviklingsmiljø Kommandoer

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/bidra

En samling av vanlige npm-kommandoer for å administrere utviklingsmiljøet i et Lerna-basert monorepo. Disse kommandoene brukes for bygging, testing, og kjøring av dev-servere for ulike pakker som CSS og React-komponenter.

```bash
npm run build
npm run dev-css
npm run dev-docs
npm run dev-react
npm run svgo
npm run test-react
npm run test-testutils
npm run watch-css
```

--------------------------------

### Importing Punkt Elements Messagebox (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/messagebox

Demonstrates how to import the Messagebox component from the Punkt Elements library for use in a React project. Ensure the library is installed in your project's dependencies.

```javascript
import { PktMessagebox } from '@oslokommune/punkt-react';
```

--------------------------------

### Create Link with Content and URL - PktLink Component

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/link

This component allows for the creation of links with specified content and a target URL. It offers options for controlling the link's appearance and text.

```html
<PktLink
  href="/" 
  content="Dette er en lenke"
/>
```

--------------------------------

### Elements React CDN: Importere PktBackLink

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/backlink

Instruksjoner for å importere PktBackLink-komponenten via CDN for bruk i React-applikasjoner. Dette gir tilgang til komponenten uten behov for npm-installasjon.

```javascript
import { PktBackLink } from '@oslokommune/punkt-react';
```

--------------------------------

### React Messagebox Component

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/messagebox

Example of how to use the Messagebox component in React. It displays a title and content within a styled box. This component helps group information without requiring user interaction.

```jsx
<PktMessagebox
  title="Dette er en meldingsboks"
  skin="beige">
  <span> Dette er innholdet i meldingsboksen. </span>
</PktMessagebox>
```

--------------------------------

### Controlled Accordion Item State (Web Components)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/accordion

Example of controlling the open/closed state of AccordionItems in native JavaScript. This approach manually manages the `isOpen` state and prevents default behavior to ensure consistent UI updates.

```javascript
<script>
  @state() private openedItem: string = ''
  function toggleCurrentOpenItem(e: MouseEvent, id: string) {
    e.preventDefault() // Prevent default behavior to ensure controlled state
    if (this.openedItem === id) {
      this.openedItem = ''
    } else {
      this.openedItem = id
    }
  }
</script>

<pkt-accordion skin="blue" aria-labelledby="accordion-standard">
  <pkt-accordion-item
    id=${item.id}
    title=${item.title}
    .isOpen=${this.openedItem == item.id}
    @click=${(e: MouseEvent) => this.toggleCurrentOpenItem(e, item.id)}
  >
    ${item.content}
    <p>Element innhold</p>
  </pkt-accordion-item>
</pkt-accordion>
```

--------------------------------

### Bruke PktIcon-komponenten for ikoner

Source: https://punkt.oslo.kommune.no/latest/ikoner

Illustrerer hvordan man bruker PktIcon-komponenten for å vise ikoner i applikasjoner. Denne komponenten er en del av Punkt-biblioteket og krever at du importerer den først.

```javascript
import PktIcon from "@/components/icon.vue";

// Bruk i template:
<PktIcon name="arrow-return" />
```

--------------------------------

### Tabs Component Anatomy Example (HTML)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/tabs

Demonstrates the structural elements of a tab component, including active and inactive tabs, titles, optional tags and icons, and separators. This is a visual representation of the component's anatomy.

```html
<div class="pkt-tabs">
  <div role="tablist" class="pkt-tabs__list">
    <a aria-selected="true" role="tab" href="#tab1" class="pkt-tabs__link">
      <pkt-icon name="info"></pkt-icon>Tab 1
      <pkt-tag size="small" skin="blue">
        <span class="pkt-tag pkt-tag--small pkt-tag--blue">
          <span><div class="pkt-contents">Ny</div></span>
        </span>
      </pkt-tag>
    </a>
    <a aria-selected="false" role="tab" href="#tab2" class="pkt-tabs__link" tabindex="-1">
      Tab 2
    </a>
    <a aria-selected="false" role="tab" href="#tab3" class="pkt-tabs__link" tabindex="-1">
      Tab 3
    </a>
  </div>
</div>
```

--------------------------------

### Vente på Rendering i Tester (JSDOM)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

En kodelinje for å sikre at PktCard-komponenten er ferdig rendret før tester utføres med JSDOM.

```javascript
await window.customElements.whenDefined("pkt-card");
```

--------------------------------

### Inkluder PktCard via Script Tag

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

Legg til PktCard-komponenten i HTML-dokumentet ved å bruke en script-tag som peker til CDN-ressursen.

```html
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-card.js" type="module"></script>
```

--------------------------------

### Import PktCheckbox Component using ES Modules

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/checkbox

This snippet demonstrates how to import the PktCheckbox component when using ES Modules in your JavaScript project. It assumes you have installed the necessary package via npm or a similar package manager.

```javascript
import @oslokommune/punkt-elements/dist/pkt-checkbox.js;
```

--------------------------------

### Implement Combobox with Web Components

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/combobox

Eksempel på bruk av pkt-combobox web-komponenten. Denne komponenten tilbyr lignende funksjonalitet som React-varianten, inkludert søkefiltrering, fritekstinput og valg av alternativer, men implementert som en ren web-komponent.

```html
<pkt-combobox
  label="Velg bydel"
  placeholder="Søk eller velg…"
  typeahead
  allowUserInput
  value="bgr"
  options='[
    {
      "value": "bfr",
      "label": "Frogner",
      "fulltext": "bfrFrogner",
      "selected": false
    },
    {
      "value": "bgo",
      "label": "Gamle Oslo",
      "fulltext": "bgoGamle Oslo",
      "selected": false
    },
    {
      "value": "bgr",
      "label": "Grorud",
      "fulltext": "bgrGrorud",
      "selected": true
    },
    {
      "value": "bxx",
      "label": "Andre bydeler",
      "fulltext": "bxxAndre bydeler",
      "selected": false
    }
  ]'
  useWrapper></pkt-combobox>

```

--------------------------------

### Alert Component Implementation in Web Components

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/alert

Shows how to use the Alert component as a custom HTML element (web component). This approach is framework-agnostic and demonstrates the same functionality as the React example using standard HTML attributes.

```html
<pkt-alert
  title="Dette er en alert"
  skin="info">
  <span> Dette er innholdet i meldingen. </span>
</pkt-alert>
```

--------------------------------

### Testing: Venter på definisjon av webkomponent

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/backlink

En kodelinje som sikrer at webkomponenten 'pkt-backlink' er fullstendig lastet og definert før testing starter. Dette er viktig for å unngå feil i tester som bruker JSDOM eller lignende.

```javascript
await window.customElements.whenDefined("pkt-backlink");
```

--------------------------------

### Web Component Button with Icon and Text

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/button

This web component code snippet shows the usage of the pkt-button element. It mirrors the React example, displaying an icon on the left and text, configured with primary skin, large size, and 'icon-left' variant.

```html
<pkt-button
  skin="primary"
  size="large"
  variant="icon-left"
  iconName="heart">
  <span> Dette er en knapp </span>
</pkt-button>
```

--------------------------------

### Importer PktCard med Punkt React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

Importer PktCard-komponenten fra @oslokommune/punkt-react biblioteket for bruk i React-applikasjoner.

```javascript
import { PktCard } from '@oslokommune/punkt-react';
```

--------------------------------

### Controlled Accordion Item State (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/accordion

Manage the open/closed state of AccordionItems in React using local state. This example demonstrates how to handle clicks and prevent default behavior for consistent state management, especially when dealing with the underlying `<details>` element.

```javascript
const [openedItem, setOpenedItem] = useState<string>('')

const toggleCurrentOpenItem = (e: React.MouseEvent, id: string) => {
  if (openedItem.includes(id)) {
    setOpenedItem('')
  } else {
    setOpenedItem(id)
  }
}

return (
  <PktAccordion compact skin={"borderless"}>
    {accordionItems.map((item, index) => {
      return (
        <PktAccordionItem
          id={item.id}
          key={item.id}
          title={item.title}
          defaultOpen={index === 0}
          isOpen={openedItem === item.id}
          onClick={(e) => toggleCurrentOpenItem(e, item.id)}
        >
          {item.content}
        </PktAccordionItem>
      );
    })}
  </PktAccordion>
)
```

--------------------------------

### Import Link Card Component (React)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/linkcard

Slik importerer du PktLinkCard-komponenten fra @oslokommune/punkt-react-biblioteket for bruk i React-applikasjoner.

```javascript
import { PktLinkCard } from '@oslokommune/punkt-react';

```

--------------------------------

### Import Punkt Textarea - CDN

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/textarea

How to import the PktTextarea component using a CDN link for direct use in HTML.

```html
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-textarea.js" type="module"></script>
```

--------------------------------

### Loading PktTextinput from CDN

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/textinput

This snippet demonstrates how to load the `pkt-textinput.js` component from a CDN using a script tag. This method is suitable for projects that do not use a module bundler or for quick integration.

```html
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-textinput.js" type="module"></script>

```

--------------------------------

### Input wrapper i React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/inputwrapper

Viser hvordan Input wrapper-komponenten brukes i React. Den omslutter inputfelt med standard etikett, hjelpetekst og innhold for konsistent visning.

```jsx
<PktInputWrapper
  label="Feltetikett"
  helptext="Dette er hjelpetekst.">
  <span> Her kan du skrive inn tekst </span>
</PktInputWrapper>
```

--------------------------------

### Vue Form State Management and Validation Example

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/maler/skjema-mal

This Vue code snippet demonstrates form state management and input validation for fields like address, postal code, and city. It utilizes Vue's reactivity system and component-based structure to handle user input, error states, and display relevant error messages. Dependencies include Vue.js and potentially a UI component library like Pkt.

```vue
<template>
  <page-main class="pkt-container pkt-container--laptop">
    <h1>Mal for skjema</h1>
    <p class="pkt-txt-22-light">
      Dette er en mal for et skjema. Kun adresse, postnr, poststed og spørsmålet
      om transportmiddel har validering. Dette er kun for å vise et eksempel på
      hvordan de kan valideres. ✨
    </p>

    <div
      :class="[responsivePhabletGrid, 'pkt-grid--gap-size-32', 'pkt-grid--gap-size-48-phablet-up']"
    >
      <div :class="cellClass(12)">
        <h1 class="pkt-txt-28 pkt-txt-54--phablet-up mb-size-24">
          Påmelding til fjelltur
        </h1>
        <p class="pkt-txt-20-light pkt-txt-24-light--phablet-up mb-size-0">
          Meld deg på bedriftsidrettslagets årlige fjelltur til Rondane.
          Påmeldingsskjemaet har 5 steg, og det tar 3-4 minutter å fylle det ut.
        </p>
      </div>

      <PktMessagebox
        :class="cellClass(12)"
        skin="blue"
        title="Før du fyller ut"
      >
        Du kan melde deg på turen dersom du
        <ul>
          <li>har vært fast ansatt i Oslo kommune i mer enn 1 år</li>
          <li>ikke er redd for høyder</li>
          <li>har godt humør</li>
        </ul>
        For å fylle ut skjemaet trenger du dokumentasjon som viser hvor lenge du
        har vært ansatt i Oslo kommune
      </PktMessagebox>
      <section
        :class="[cellClass(10), responsivePhabletGrid, responsiveSectionGap]"
      >
        <h2
          :class="[cellClass(12), 'pkt-txt-22', 'pkt-txt-24--phablet-up', 'mb-size-0']"
        >
          Informasjon om deg
        </h2>
        <PktTextinput id="firstName" label="Fornavn" :class="cellClass(12)" />
        <PktTextinput id="lastName" label="Etternavn" :class="cellClass(12)" />

        <PktTextinput
          id="birthdate"
          label="Fødselsdato (dd.mm.åååå)"
          :class="cellClass(12)"
          placeholder="datepicker"
        />
        <PktTextinput
          id="address"
          label="Adresse"
          :class="cellClass(12)"
          helptext="Adressen trenger vi for å sende deg informasjon om turen."
          @input="(event) => setAddress(event.target.value)"
          @blur="(event) => setAddressError(!isAddressValid(event.target.value))"
          v-model="address"
          errorMessage="Adressen du har skrevet er ikke gyldig. Skriv adressen på nytt."
          :hasError="hasAddressError"
        />
        <div
          :class="[cellClass(12), responsivePhabletGrid, 'pkt-grid--gap-size-8']"
        >
          <PktTextinput
            id="postalCode"
            label="Postnr."
            class="pkt-cell pkt-cell--span4 pkt-cell--span3-tablet-up"
            :hasError="hasPostalCodeError"
            @input="(event) => setPostalCode(event.target.value)"
            @blur="(event) => setPostalCodeError(!isPostalCodeValid(event.target.value))"
            v-model="postalCode"
          />
          <PktTextinput
            id="postalArea"
            label="Poststed"
            class="pkt-cell pkt-cell--span8 pkt-cell--span9-tablet-up"
            :hasError="hasPostalAreaError"
            @input="(event) => setPostalArea(event.target.value)"
            @blur="(event) => setPostalAreaError(!isPostalAreaValid(event.target.value))"
            v-model="postalArea"
          />
          <PktAlert
            v-if="hasPostalCodeError"
            :class="cellClass(12)"
            skin="error"
            aria-live="assertive"
            id="postalCode-error"
            compact
          >
            Postnummeret er ikke gyldig. Du må skrive et postnummer med 4 tegn.
          </PktAlert>
          <PktAlert
            v-if="hasPostalAreaError"

```

--------------------------------

### Import av PktHeader i React

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/header

Dette kodeeksemplet viser hvordan du importerer PktHeader-komponenten fra @oslokommune/punkt-react-biblioteket for bruk i dine React-applikasjoner. Det er en forutsetning for å benytte header-komponenten.

```javascript
import { PktHeader } from '@oslokommune/punkt-react';
```

--------------------------------

### Textarea Component - HTML

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/textarea

Eksempel på bruk av pkt-textarea-komponenten i ren HTML. Denne komponenten lar brukere skrive inn tekst over flere linjer og inkluderer funksjoner som label, placeholder, hjelpetekst, rader og mulighet for å bruke en wrapper.

```html
<pkt-textarea
  label="Fyll inn teksten din"
  name="kommentar"
  placeholder="Skriv inn kommentar"
  helptext="Dette er hjelpetekst."
  rows="4"
  id="textarea-1"
  useWrapper></pkt-textarea>
```

--------------------------------

### Installere og inkludere Punkt CSS

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/kom-i-gang

Installasjon av Sass og Punkt CSS-pakker for bruk i prosjekter. Inkluderer hvordan man setter opp font-stier og importerer Punkts stiler ved bruk av SCSS.

```bash
npm add -D sass
npm add @oslokommune/punkt-assets
npm add @oslokommune/punkt-css
```

```scss
/* Overstyr stien til fontene. */
@use "@oslokommune/punkt-css/dist/scss/abstracts/variables" with (
  $font-path: "@oslokommune/punkt-assets/dist"
);

/* Hent inn Punkts stiler */
@use "@oslokommune/punkt-css/dist/scss/pkt";
```

--------------------------------

### Import Punkt Icon Component (Elements)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/icon

How to import the PktIcon component for use in web projects using the Elements library via CDN.

```javascript
import @oslokommune/punkt-elements/dist/pkt-icon.js;
```

--------------------------------

### Bruke Oslologoen fra npm-pakken

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/ressurser/oslologo

Dette kodeeksempelet viser hvordan du kan inkludere Oslo kommunes offisielle logo i et HTML-dokument ved å bruke en SVG-fil fra npm-pakken '@oslokommune/punkt-assets'. Sørg for at pakken er installert i prosjektet ditt.

```html
<img
  alt="Oslo kommune logo"
  src="@oslokommune/punkt-assets/dist/logos/oslologo.svg"
/>
```

--------------------------------

### Importer PktCard med Elements CDN

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

Slik importerer du PktCard-komponenten ved hjelp av CDN-lenken for punkt-elements.

```javascript
import @oslokommune/punkt-elements/dist/pkt-card.js;
```

--------------------------------

### Simple Footer Props

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/footer

Configuration options for the simple footer component.

```APIDOC
### Footer Simple

Prop| Type| Beskrivelse
---|---|---
`**personvernOgInfoLink**`| `string`| Link to personvern og info page
`**tilgjengelighetLink**`| `string`| Link to tilgjengelighet page
`**includeConsent**`| `boolean`| Whether to include Consent component in the footer
`**googleAnalyticsId**`| `string`| Google Analytics ID for tracking when using Consent component
`**hotjarId**`| `string`| Hotjar ID for tracking when using Consent component
`**links**`| `array`| Array of links for the footer
```

--------------------------------

### PktModal Component - React Implementation

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/modal

Instructions for integrating the PktModal component within a React application using the dedicated React package.

```APIDOC
## PktModal Component - React Implementation

### Description
This section guides you on how to use the `PktModal` component in your React projects. It assumes you have installed the `@oslokommune/punkt-react` package.

### Method
React component import and usage

### Endpoint
`@oslokommune/punkt-react` package

### Parameters
(Component props are listed below in the 'Props and Tokens' section)

### Request Example
```jsx
import { PktModal } from '@oslokommune/punkt-react';

function MyComponent() {
  return (
    <PktModal headingText="React Modal Example">
      <p>Content for the React modal.</p>
      <button>Action Button</button>
    </PktModal>
  );
}
```

### Response
(The `PktModal` component renders a modal UI element.)
```

--------------------------------

### SCSS Breakpoint-variabler for Responsivt Design

Source: https://punkt.oslo.kommune.no/latest/grunnleggende/for-utviklere/bidra

Dette SCSS-kodeeksemplet definerer en Sass map for breakpoints, som er essensielt for responsivt webdesign. Variablene gir en standardisert måte å håndtere skjermstørrelser på tvers av prosjektet.

```scss
/* abstracts/variables/_breakpoints.scss */

$breakpoints: (
  "mobile": 0,
  "phablet": 36rem /* ~576px */,
  "tablet": 48rem /* ~768px */,
  "tablet-big": 64rem /* ~1024px */,
  "laptop": 80rem /* ~1280px */,
  "desktop": 100rem /* ~1600px */,
) !default;
```

--------------------------------

### PktCard Appearance and Layout (HTML)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/card

Illustrates how to customize the appearance (e.g., 'outlined', 'gray') and layout ('vertical', 'horizontal') of the PktCard component.

```html
<PktCard appearance="outlined" layout="vertical">
  <!-- Card content -->
</PktCard>
```

--------------------------------

### Importing Punkt Elements Messagebox (CDN)

Source: https://punkt.oslo.kommune.no/latest/komponenter-og-maler/komponenter/messagebox

Shows how to include the Messagebox web component in an HTML file using a CDN link. This method is useful for quick implementation without a build process or package management.

```javascript
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-messagebox.js" type="module"></script>
```
Tokens:
Raw