@oslokommune/punkt-css 0.21.6 → 0.22.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.22.1](https://github.com/oslokommune/punkt/compare/v0.22.0...v0.22.1) (2023-02-23)
+
+**Note:** Version bump only for package @oslokommune/punkt-css
+
+
+
+
+
+# [0.22.0](https://github.com/oslokommune/punkt/compare/v0.21.7...v0.22.0) (2023-02-23)
+
+
+### Features
+
+* **css:** [#659](https://github.com/oslokommune/punkt/issues/659) - Lagt på prefix på hjelpeklasser ([f95daec](https://github.com/oslokommune/punkt/commit/f95daece763b74f4197492a8623d421e48ef62b5))
+
+
+
+
+
 ## [0.21.6](https://github.com/oslokommune/punkt/compare/v0.21.5...v0.21.6) (2023-02-20)
 
 **Note:** Version bump only for package @oslokommune/punkt-css

package/CONTRIBUTING.md

@@ -1,11 +1,11 @@
-## Guide til hvordan du kan bidra ⭐
+## Hvordan bidra - CSS ⭐
 
 Vi er veldig happy med at du vurderer å bidra! Om du er usikker på noe som helst,
 ta kontakt. Eller bare send inn den buggen eller PRen uansett. Verste som skjer
 er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidrag!**
 
 Vi oppfordrer deg til å starte med å lese vår 
-[overordnede guide for å bidra](https://punkt.oslo.kommune.no/latest/bidra/index).
+[overordnede guide for å bidra](/kom-i-gang/bidra/).
 
 Happy coding!
 
@@ -46,7 +46,7 @@ Happy coding!
 ```
 
 
-### Litt mer detaljer om SCSS-folderen
+### SCSS
 
 Skal du jobbe med CSS-rammeverket er dette stedet å starte.
 
@@ -85,45 +85,37 @@ $breakpoints: (
   'desktop': 100rem /* ~1600px */,
 ) !default;
 ```
-## Nyttige script
 
-Enn så lenge må du bevege deg til `packages/css` og kjøre script fra der.
-
-```sh
-npm install           # Installer avhengigheter
-npm run watch         # Bygger koden til ./dist/ hver gang filer under ./src/ oppdateres
-npm run build         # Bygger koden til ./dist/
-```
-
-
-### 4. Testing
+## Testing
 
 Test css-komponentene i Vite-appen, kjør:
 
-```sh
-npm install
-npm run dev
-```
+Punkt er et monorepo og bruker `lerna`. Det betyr at alle kommandoer kjører
+fra repoets rot, og ikke i subrepoene.
 
-Vi bruker cli til å legge til svg'er i test-appen. 
-Legg inn ønsket ikon i `dev/punkt.config.json`, kjør `punkt svg sprite` så vil den være tilgjengelig globalt ved å bruke komponenten `pkt-icon`.
+Et utdrag fra rot-package.json viser noen scripts som er satt opp for å forenkle
+utvikling i dette subrepoet:
 
-```html
-<pkt-icon
-    name="oslologo"
-    viewBox="0 0 60 31"
-></pkt-icon>
+```sh
+  "scripts": {
+    "build-css": "npx lerna run build --scope=@oslokommune/punkt-css",
+    "build-css-app": "npx lerna run build-app --scope=@oslokommune/punkt-css",
+    "dev-css": "npx lerna run dev --scope=@oslokommune/punkt-css",
+  }
 ```
 
-Legg til ny komponent ved å lage en html-fil i components-mappen.
-Legg til komponenten i navigasjonen i `main.js` og legg til en `option` i `select` som du finner i `index.html`
+## Lag PR
+Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.
 
-### 5. GitHub Message
-Når du er klar for en PR skriv din GitHub-message med issue-nummer og [asset], [docs] eller [repo]:
+Vi bruker [Conventional Commits](https://www.conventionalcommits.org/) for å beskrive commits gjennom
+noen regler. Ingen fare om du ikke følger den, vi tar en gjennomgang og evt justerer 😎.
 
 ```sh
-[#NNN][docs] Oppdater dokumentasjonen
-[#NNN][assets] Legg til nytt ikon
+# fix(vue2): #NR Rett feil på alert-komponenten            # med issuenummer
+fix(vue2): Rett feil på alert-komponenten                  # patcher en bug i koden (patch i Semantic Versioning)
+feat(vue2): Legg til funksjonalitet                        # ny funksjonalitet i koden (minor i Semantic Versioning)
+feat(vue2)!: Legg til funksjonalitet og endre eksisterende # breaking change i koden (major i Semantic Versioning)
+docs: Endre dokumentasjon                                  # Endring i dokumentasjon
 ```
 
 ## Publisering og versjonering

package/README.md

@@ -1,18 +1,17 @@
-## Bruk av @oslokommune/punkt-css
+## Bruk av punkt-css
 
 <a href="https://www.npmjs.com/package/@oslokommune/punkt-css" target="_blank"><img src="https://img.shields.io/npm/v/@oslokommune/punkt-css?logo=sass&label=css&style=for-the-badge&color=bf4080" alt="CSS-rammeverk" /></a>
 
-
 Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er ikke automatikk mellom Figma og denne koden, så kode vil som regel henge litt etter hva som oppdateres i Figma.
 
 ## Innhold
 
 ```sh
 @oslokommune/punkt-css
-├── dist/                          # Distribusjonsversjonen av pakken (lagt til i 0.10.0)
+├── dist/                          # Distribusjonsversjonen av pakken
 |   ├── css/                       # generert css
 |   |   ├── components/            # hver komponent separat
-|   |   |   ├── alert.css          # komponent alert  
+|   |   |   ├── alert.css          # komponent alert
 |   |   |   └── ...
 |   |   ├── pkt.css                # alle moduler
 |   |   ├── pkt.min.css            # alle moduler minimert
@@ -32,16 +31,20 @@ Denne pakken inneholder CSS-rammeverket som gjenspeiler skissene i Figma. Det er
 └── README.md                      # kom i gang-informasjon
 ```
 
-## 🚀 Kom i gang
+## 🚀 Kom i gang - npm
 
-Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
+Eksempelet under viser installasjon i en applikasjon med `Vue 3` + `Vite`.
 
-### 1. Installer designsystemet
+### 1. Installer punkt-css
+For å kunne bruke logo, ikoner og fonter med CSS-pakken må du installere punkt-assets
 
 ```sh
 npm add -D sass                # Viktig å bruke denne og ikke node-sass
 npm add @oslokommune/punkt-css
 ```
+```sh
+npm add @oslokommune/punkt-assets
+```
 
 ### 2. Opprett en scss-fil
 
@@ -121,98 +124,211 @@ Legg til logo -->
 />
 
 <style lang="scss">
-/* Legg til moduler */
-@use "sass:map";
-@use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
-
-/* Legg til klassen for logoen */
-.oslologo {
-  margin-bottom: map.get(variables.$spacing, "size-30");
-  height: 12rem;
-}
+  /* Legg til moduler */
+  @use "sass:map";
+  @use "@oslokommune/punkt-css/dist/scss/abstracts/variables";
+
+  /* Legg til klassen for logoen */
+  .oslologo {
+    margin-bottom: map.get(variables.$spacing, "size-30");
+    height: 12rem;
+  }
 </style>
 ```
 
 ## CSS-rammeverket
 
-### Nøkkelegenskaper
-
 - Modulært - import modulene du selv ønsker.
 - Må bruke css-klasser - ingen overstyring utenom å bruke OsloSans.
 - Komponentbibliotekene bruker samme css.
 - Sass abstracts gir ekstra nytteverdi for deg som bruker.
 
-### Oppbygging
+### Innhold
 
 | Kategori   | Beskrivelse                                                                              |
-|:-----------|:-----------------------------------------------------------------------------------------|
+| :--------- | :--------------------------------------------------------------------------------------- |
 | Abstracts  | Variabler, funksjoner, mixins: Alle Sass-verktøy som brukes på tvers av rammeverket      |
-| Normalise  | En ganske liten normalisering for å ha en felles baseline                                |
-| Base       | Grunnleggende moduler som farger, grid, fonter, tekststiler, mm.                         |
+| Normalise  | Normalisering for å ha en felles baseline                                                |
+| Base       | Grunnleggende moduler som farger, grid, spacing, hjelpeklasser, mm.                      |
 | Elements   | HTML-elementer som er stylet, som knapper, lister og tabeller.                           |
 | Components | Komponenter som kombinerer elementer og komponenter for å lage mer komplekse komponenter |
 
-#### Noen ord om abstracts
+### Abstracts
 
-Abstracts består av `/variables`, `/functions`, og `/mixins` og samler 
-alle globale Sass variabler og verktøy på tvers av rammeverket. Disse 
+Abstracts består av `/variables`, `/functions`, og `/mixins` og samler
+alle globale Sass variabler og verktøy på tvers av rammeverket. Disse
 er et fundament for resten av rammeverket.
 
-Ingenting under denne folderen skal generere en eneste linje CSS når 
+Ingenting under denne folderen skal generere en eneste linje CSS når
 den er kompilert på egen hånd. Disse er bare Sass hjelpeverktøy.
 
-Folderen `/variables` er en samling Sass-variabler skrevet på formen 
-[Sass maps](https://sass-lang.com/documentation/modules/map). Dette 
-gir en fin måte å kategorisere variablene og gir mulighet for nested 
+#### Variables
+
+Folderen `/variables` er en samling Sass-variabler skrevet på formen
+[Sass maps](https://sass-lang.com/documentation/modules/map). Dette
+gir en fin måte å kategorisere variablene og gir mulighet for nested
 maps.
 
 ```scss
 /* abstracts/variables/_breakpoints.scss */
 
 $breakpoints: (
-  'mobile': 0,
-  'phablet': 36rem /* ~576px */,
-  'tablet': 48rem /* ~768px */,
-  'tablet-big': 64rem /* ~1024px */,
-  'laptop': 80rem /* ~1280px */,
-  'desktop': 100rem /* ~1600px */,
+  "mobile": 0,
+  "phablet": 36rem /* ~576px */,
+  "tablet": 48rem /* ~768px */,
+  "tablet-big": 64rem /* ~1024px */,
+  "laptop": 80rem /* ~1280px */,
+  "desktop": 100rem /* ~1600px */,
 ) !default;
 ```
 
-For prekompilerte `.css` er hver kategori pakket i en fil, mens for 
+For prekompilerte `.css` er hver kategori pakket i en fil, mens for
 `.scss` kan hver modul brukes hver for seg.
 
-## CDN
-
-De statiske ressursene vil finnes i en versjonert folder under 
-https://cdn.punkt.oslo.kommune.no/, slik at du kan ha full tillit til at de 
-kommer til å være stabile og tilgjengelige i lang tid. Her finnes de ferdig 
-genererte css-filene oppdelt i moduler eller komplett. I tillegg finnes 
-generert css for hver enkelt komponent under `css/components`.
-
-| Filnavn           | Url                                                                   |
-|:------------------|:----------------------------------------------------------------------|
-| Komplett          | https://cdn.punkt.oslo.kommune.no/latest/css/pkt.css                  |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt.min.css              |
-| Normalisering     | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-normalise.css        |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-normalise.min.css    |
-| Modul Base        | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-base.css             |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-base.min.css         |
-| Modul Elementer   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-elements.css         |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-elements.min.css     |
-| Modul Komponenter | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-components.css       |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/pkt-components.min.css   |
-| Alert komponent   | https://cdn.punkt.oslo.kommune.no/latest/css/components/alert.css     |
-|                   | https://cdn.punkt.oslo.kommune.no/latest/css/components/alert.min.css |
-
-
-Versjoner følger eksakt de samme versjonene som NPM-pakkene, slik at du har 
-oversikt over dem i GitHub repositoriet. I tillegg kan du bruke `/latest` 
-for å alltid peke mot nyeste versjon, med all gleder og sorger det kan føre 
-med seg.
-
-**NB!** Alt som kommer fra _versjonerte_ endepunkter på CDN blir cachet i 
-1 år vha. http-headeren `cache-control` sitt `max-age`-attributt.
+#### Functions
+
+Nedenfor er et eksempel på bruk av en SCSS `map-get`-funksjon. Den brukes til å hente ut verdier fra våre variabler.
+
+Man kan hente verdier med denne funksjonen fra:
+- [breakpoints](/ressurser/breakpoints)
+- [colors](/ressurser/colors/kode)
+- [spacing](/ressurser/spacing)
+- [typografi](/ressurser/typografi/kode)
+  
+```scss
+@use "sass:map";
+@use "@oslokommune/punkt-css/scss/abstracts/variables";
+
+.wrapper {
+  max-width: map.get(variables.$breakpoints, "phablet");
+  padding: map.get(variables.$spacing, "size-24");
+  background-color: map.get(variables.$colors, "color-red");
+  font-size: map.get(variables.$font-size, "size-54");
+}
+```
+
+#### Mixins
+
+Mixins er nyttige når du ønsker å gjenbruke en gruppe av CSS-regler på flere steder i stilsettet ditt.
+Se eksempel nedenfor på hva som finnes i Punkt:
+
+**Breakpoints**
+
+```scss
+@use '@oslokommune/punkt-css/scss/abstracts/mixins/breakpoints' as *;
+
+@include bp('phablet') { /* 576 til 767px */
+  ...;
+}
+```
+
+**Typografi**
+
+```scss
+@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/typography" as *;
+
+.page-header {
+  @include get-text("pkt-txt-40-light");
+  margin-top: 0.6em;
+  margin-bottom: 0.4em;
+}
+```
+
+Les mer om [breakpoints](/ressurser/breakpoints) og [typografi](/ressurser/typografi).
+
+### Normalise
+
+De fleste applikasjoner i dag bruker en eller annen form for normalisering eller reset. Dette gjør vi for å gi en mer konsistent utseende og oppførsel av HTML-elementer på tvers av ulike nettlesere.
+Nettlesere har sin egen innebygde stil, og disse stilene varierer fra nettleser til nettleser. For eksempel kan margins, padding og linjehøyde variere.
+
+Normaliseringen vi gjør i Punkt er forsøkt gjort så liten som mulig.
+
+[Se i koden](https://github.com/oslokommune/punkt/blob/main/packages/css/src/scss/normalise/_index.scss) for hva som er normalisert i Punkt.
+
+### Base
+
+Vår base har Oslo kommune-stiler som typografi, farger, spacing og hjelpeklasser som for eksempel synlighet og screen-readers-only.
+
+Les mer om:
+
+- [Farger](/ressurser/colors)
+- [Typografi](/ressurser/typografi)
+- [Spacing](/ressurser/spacing)
+- [Grid](/ressurser/grid)
+
+#### Hjelpeklasser
+
+| Type              | Klassenavn                                    | Modifier / Helper                           | Beskrivelse                                                 |
+| ----------------- | --------------------------------------------- | ------------------------------------------- | ----------------------------------------------------------- |
+| Synlighet         | .pkt-show, .pkt-hide                          | `-{synlighet}`-`{breakpoint}-up`            |                                                             |
+| Tekstjustering    | .pkt-txt-start, .pkt-txt-center, .pkt-txt-end |                                             |                                                             |
+| Screenreader only | .pkt-sr-only                                  |                                             | Innholdet blir skjult visuelt, men kan leses av skjermleser |
+| Avkortning        | .pkt-truncate-text                            |                                             | Krever `display: inline-block` eller `display: block`       |
+| Container         | .pkt-container                                | `--full`, `{--breakpoint}`, `{--alignment}` |                                                             |
+
+##### Eksempler
+
+**Synlighet**
+
+```html
+<!-- Skjul innholdet fra tablet og opp -->
+<p class="pkt-hide-tablet-up">...</p>
+
+<!-- Vis innholdet fra phablet og opp -->
+<p class="pkt-hide pkt-show-phablet-up">...</p>
+```
+
+**Tekstjustering**
+
+```html
+<p class="pkt-txt-start">Venstrejustert tekst.</p>
+<p class="pkt-txt-center">Senterjustert tekst.</p>
+<p class="pkt-txt-end">Høyrejustert tekst.</p>
+```
+
+**Screenreader only**
+
+```html
+<h2 class="pkt-sr-only">Tittel for skjermlesere</div>
+```
+
+**Avkorting**
+
+```html
+<div class="pkt-row">
+  <div class="pkt-col-4 pkt-truncate-text">
+    Oslo Origo er en kommunal etat i Oslo kommune, opprettet 1. januar 2020.
+  </div>
+</div>
+```
+
+**Container**
+
+```html
+<main class="pkt-container pkt-container--right">
+  <section><p>innhold</p></section>
+</main>
+```
+
+### Elements
+
+I et designsystem refererer elementer og komponenter til forskjellige nivåer av gjenbrukbarhet og abstraksjon i koden.
+Elementer er de minste byggeklossene i vårt designsystem, som for eksempel pkt-list eller pkt-section.
+
+```html
+<div class="pkt-section--grey p-size-20">
+  <p class="pkt-txt-18-medium">Lista:</p>
+  <ul class="pkt-list">
+    <li>listelement</li>
+  </ul>
+</div>
+```
+
+### Components
+
+Komponenter er sammensatte elementer som består av en gruppe av elementer og/eller andre komponenter. De representerer en mer kompleks visuell enhet, som en knapp eller en alert-boks. Komponenter har vanligvis flere egenskaper og kan ha flere avhengigheter, og dermed har de en mer kompleks struktur enn elementer.
+
+Alle våre komponenter er dokumentert [under komponenter](/komponenter/om-komponenter).
 
 ## 👮 Lisens
 

package/dist/css/pkt-base.css

@@ -9583,15 +9583,15 @@ a:active {
 /*
  * Alignment
  */
-.text-start {
+.pkt-txt-start {
   text-align: left !important;
 }
 
-.text-end {
+.pkt-txt-end {
   text-align: right !important;
 }
 
-.text-center {
+.pkt-txt-center {
   text-align: center !important;
 }
 
@@ -9599,7 +9599,7 @@ a:active {
  * Truncate text
  * requires inline-block or block
  */
-.truncate-text {
+.pkt-truncate-txt {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9710,7 +9710,7 @@ a:active {
  * Accessibility
  * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
  */
-.sr-only {
+.pkt-sr-only {
   border: 0 !important;
   clip: rect(1px, 1px, 1px, 1px) !important;
   -webkit-clip-path: inset(50%) !important;