Support contributions from outside Nav + update some README files (#3483

) Co-authored-by: Ken <[email protected]>
navikt · Jan 6, 2025 · ef3464c · ef3464c
1 parent 0480d78
commit ef3464c
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 513 deletions.
diff --git a/.changeset/README.md b/.changeset/README.md
@@ -1,31 +1,35 @@
 # Changesets
 
-For versjonering bruker vi løsningen [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
+Vi bruker [Changesets](https://github.com/changesets/changesets) for [versjonering](https://semver.org/) og publisering av pakker.
 
-## Howto
+## Lage ny versjon
 
-- For å lage en ny versjons-entry: `yarn changeset`
-- Velg pakkene som skal versjoneres med `arrowkeys` + `Space`
+1. `yarn changeset`
+2. Svar på spørsmålene som kommer opp:
 
 `🦋 Which packages would you like to include?`
 
-Trykk `Space` for å velge pakkene som skal versjoneres, for så trykke `Enter` for å gå videre.
+Trykk `Space` for å velge pakkene som skal versjoneres, trykk så `Enter` for å gå videre.
 
 `🦋 Which packages should have a major bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`.
 
 `🦋 Which packages should have a minor bump?`
 
-Trykk `Enter` for å gå videre _*eller*_ velg pakkene som skal marjor-bumpes med `arrowkeys` + `Space`
+Trykk `Enter` for å gå videre _eller_ velg pakkene som skal minor-bumpes med `arrowkeys` + `Space`.
 
-Hvis du ikke velger major eller minor, så blir pakkene få en patch-bump
+Hvis du ikke velger major eller minor, så vil pakkene få en patch-bump.
 
-- Commit og push.
+`Please enter a summary for this change`
+
+Skriv inn en kort beskrivelse av endringen på formatet `<Komponent>: <gitmoji?> <Beskrivelse>`, f.eks. "Button: ✨ Add feature xyz".
+
+3. Commit og push.
 
 ## Fixed versjonering
 
-Alle base-pakkene våre har `fixed versjonering`. Dette tilsier at en bump på en av disse vil bumpe alle til samme versjon
+Alle base-pakkene våre har `fixed versjonering`. Dette betyr at en bump på en av disse vil bumpe alle til samme versjon
 
 ```sh
   "@navikt/ds-react",

diff --git a/@navikt/aksel-icons/README.md b/@navikt/aksel-icons/README.md
@@ -1,6 +1,6 @@
 # Aksel icons
 
-800+ open source icons made by Aksel, NAVs designsystem-team
+800+ open source icons made by Aksel, Nav's design system team.
 
 - Designed for 24x24px
 - Available in React and SVG
@@ -30,7 +30,7 @@ Tip: Use the `title` prop for accessible icons.
 
 ### Sizing
 
-Each icons `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.
+Each icon's `width` and `height` is default `1em`. This allows you to use the native `fontSize`-prop to adjust sizing. We recommend using at least 1.5rem/24px for the best possible visual representation.
 
 ```jsx
 <StarIcon fontSize="1.5rem" />

diff --git a/@navikt/aksel-icons/figma-plugin/README.md b/@navikt/aksel-icons/figma-plugin/README.md
@@ -2,9 +2,9 @@
 
 # Aksel Icons plugin
 
-Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene i fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
+Pluginen gir deg mulighet til å se gjennom og hente ut alle ikonene fra ikonpakken `@navikt/aksel-icons`. Du slipper da å hente nye oppdateringer fra Figma Community.
 
-Referer til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
+Gå til [ikon-dokumentasjonen](https://aksel.nav.no/ikoner) for å se alle ikonene.
 Har du ønsker om nye ikoner, eller ønsker å bidra med å lage nye, lag et issue på [GitHub-repoet for designsystemet](https://github.com/navikt/aksel).
 
 ## Quickstart

diff --git a/@navikt/core/css/README.md b/@navikt/core/css/README.md
@@ -1,11 +1,11 @@
 # Aksel styling
 
-CSS for NAVs designsystem.
+CSS for Nav's design system.
 
-- Css tokens (Colors, border, shadows etc)
-- Component-styling for `@navikt/ds-react` packages
+- Css tokens (Colors, border, shadows etc.)
+- Component styling for `@navikt/ds-react` packages
 - Normalize.css v8
-- Font-loading
+- Font loading
 
 ## Installation
 
@@ -16,7 +16,7 @@ CSS for NAVs designsystem.
 
 ## Usage
 
-Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file.
+Import styles once to make it accessible for your entire project. Typically you will add the following line to your root .tsx file:
 
 ```javascript
 import "@navikt/ds-css";
@@ -26,7 +26,7 @@ function App() {
 }
 ```
 
-But you can import it in a .css-file
+But you can import it in a .css-file as well:
 
 ```css
 @import "@navikt/ds-css";

diff --git a/@navikt/core/react/README.md b/@navikt/core/react/README.md
@@ -1,9 +1,9 @@
 # Aksel React-components
 
-React-components for NAVs designsystem.
+React-components for Nav's design system.
 
 - Uses styling defined in `@navikt/ds-css`
-- All components implemented with React.forwardRef!
+- All components are implemented with React.forwardRef!
 - Most components extend native html-elements.
 
 ## Installation

diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
@@ -627,6 +627,7 @@
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jscodeshift": "^0.11.11",
+    "aksel": "workspace:^",
     "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
     "jscodeshift": "^0.15.1",
@@ -648,5 +649,6 @@
     "@types/react": {
       "optional": true
     }
-  }
+  },
+  "_comment": "The 'aksel' dependency tells yarn to install the root deps when installing deps for this package. Helps make it possible to contribute without access to GPR."
 }
diff --git a/@navikt/core/tokens/README.md b/@navikt/core/tokens/README.md
@@ -1,16 +1,16 @@
 # Aksel tokens
 
-Design-tokens for NAVs designsystem and used when implementing @navikt/ds-css.
+Design-tokens for Nav's design system.
 
-Node: This package is consumed by `@navikt/ds-css`, so not needed separately for regular use of css-variables.
+Node: This package is consumed by `@navikt/ds-css`, so not needed separately for regular use of CSS-variables.
 
-Formats
+Formats:
 
 - CSS-variables <- Used in `@navikt/ds-css`
-- Commonjs
+- CommonJS
 - ESM
 - Less
-- Scss
+- Sass
 
 ## Installation
 
@@ -23,7 +23,7 @@ Formats
 
 ```css
 color: var(--a-text-default);
-backgroundcolor: var(--a-surface-default);
+background-color: var(--a-surface-default);
 ```
 
 ## Learn more

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,7 +2,7 @@
 
 ## TL;DR
 
-Vi bruker yarn for pakkeversjonering. Har du ikke yarn? `npm i -g yarn`
+Vi bruker yarn for pakkeversjonering. Har du ikke yarn? `corepack enable`
 
 ```sh
 git clone [email protected]:navikt/aksel.git
@@ -17,43 +17,51 @@ yarn storybook
 yarn dev
 ```
 
-Storybook: [http://localhost:6006](http://localhost:6006)
+Storybook: http://localhost:6006
 
-Nettside: [http://localhost:3000](http://localhost:3000)
+Nettside: http://localhost:3000
+
+### Ikke Nav-ansatt?
+
+Nettsiden avhenger av pakker som ikke er åpent tilgjengelig. Du kan likevel bidra på andre deler av repoet ved å kjøre denne kommandoen i stedet for `yarn install`:
+
+```sh
+yarn workspaces focus @navikt/aksel-icons @navikt/ds-tokens @navikt/ds-css @navikt/ds-react @navikt/ds-tailwind @navikt/aksel @navikt/aksel-stylelint
+```
 
 ## Utviklingsmiljø
 
-Vi bruker storybook [https://storybook.js.org/](https://storybook.js.org/) for utvikling av nye komponenter.
-Lag `stories` for komponentene man vil teste [(hvordan skrive storybook stories)](https://storybook.js.org/docs/react/writing-stories/introduction)
+Vi bruker [Storybook](https://storybook.js.org/) for utvikling av nye komponenter.
+Lag [stories](https://storybook.js.org/docs/writing-stories) for komponentene du vil teste.
 
 ## Utvikling av nye komponenter
 
-Det er ikke satt opp en template for nye komponenter, men vi følger en mal.
+Det er ikke satt opp noen template for nye komponenter, men vi følger en mal.
 
 ```sh
 @navikt/pakkenavn
 └─ src                  # Komponenter
    ├─ index.ts          # Alle exports
-   └─ pakkenavn
+   └─ komponent
       ├─ index.ts       # Alle exports fra komponent
       ├─ komponent.tsx  # Komponentkode
       └─ komponent.stories.tsx # Stories
 ```
 
 ## Dokumentasjon
 
-Dokumentasjon for komponenter finner man på [aksel.nav.no](https://aksel.nav.no/). Hvis man ønsker å skrive noe dokumentasjon selv gjør vi det via CMS et Sanity. Kode-eksempler blir skrevet lokalt i [/pages/eksempler](https://github.com/navikt/aksel/tree/main/aksel.nav.no/website/pages/eksempler)
+Dokumentasjon for komponenter finner man på [aksel.nav.no](https://aksel.nav.no/). Hvis man ønsker å skrive noe dokumentasjon selv gjør vi det via CMS-et Sanity. Kode-eksempler blir skrevet lokalt i [/pages/eksempler](https://github.com/navikt/aksel/tree/main/aksel.nav.no/website/pages/eksempler)
 
 ## Versjonering av pakker
 
 Vi bruker `changeset` for versjonering av pakker. Se [README](https://github.com/navikt/aksel/blob/main/.changeset/README.md) for mer informasjon.
 
 ## Kodekvalitet og testing
 
-Komponenter og løsninger blir testet med jest + react-testing-library.
+Komponenter og løsninger blir testet med vitest + react-testing-library.
 
 - Commit: Kjører prettier på endrede filer + linter
-- Ved PR: Kjører tester, linter og visuell regresjonstester
+- Ved PR: Kjører tester, linter og visuelle regresjonstester
 
 ## Oppdatere Aksel.nav.no
 

diff --git a/README.md b/README.md
@@ -1,24 +1,18 @@
 <h1 align="center">
-    <img src="/aksel.nav.no/website/public/favicon.svg" style="width:13rem"/>
+    <img src="/aksel.nav.no/website/public/favicon.svg" style="width:13rem" />
     <br/><br/>Aksel
 </h1>
 
 <div align="center">
+    <p>Nav's design system + Aksel.nav.no</p>
     <p>
-        Navs designsystem + Aksel.nav.no
+      <a href="https://aksel.nav.no/storybook/"><img alt="Storybook" src="https://shields.io/badge/storybook-white?logo=storybook&style=flat" /></a>&nbsp;
+      <a href="https://github.com/navikt/aksel/pulls"><img alt="PRs" src="https://img.shields.io/badge/PRs-welcome-green.svg?color=%23262626" /></a>&nbsp;
+      <a href="https://www.npmjs.com/package/@navikt/ds-css"><img alt="npm" src="https://img.shields.io/npm/v/@navikt/ds-css?label=version" /></a>&nbsp;
+    </p>
+    <p>
+      <a href="https://aksel.nav.no">Nettside</a> | <a href="https://github.com/navikt/aksel/issues">Issues</a>
     </p>
-    <div align="center">
-      <a href="https://aksel.nav.no/storybook/">
-          <img src="https://shields.io/badge/storybook-white?logo=storybook&style=flat"" />
-      </a>
-      <a href="https://github.com/navikt/aksel/pulls">
-          <img src="https://img.shields.io/badge/PRs-welcome-green.svg?color=%23262626"" />
-      </a>
-        <a href="https://www.npmjs.com/package/@navikt/ds-css"><img alt="npm" src="https://img.shields.io/npm/v/@navikt/ds-css?label=version"></a>
-    </div>
-    <br/>
-    <a href="https://aksel.nav.no">Nettside</a> | <a href="https://github.com/navikt/aksel/issues">Issues</a>
-<br/>
 </div>
 
 ## Innhold
@@ -34,23 +28,22 @@
 └── aksel           # @navikt/aksel, kommandolinje-verktøy
 
 aksel.nav.no/
-├── website # NEXT.JS app (v13)
-├── website/sanity # Sanity CMS-app (v3)
-└── playroom # aksel.nav.no/sandbox
-
+├── website         # Next.js-app
+├── website/sanity  # Sanity CMS-app
+└── playroom        # aksel.nav.no/sandbox
 ```
 
-## Commands
+## Kommandoer
 
-Installer dependencies og bygg workspace
+Installer dependencies og bygg workspace:
 
 ```sh
 yarn && yarn boot
 ```
 
 ### Tilgang til Github Package Registry
 
-Siden vi bruker avhengigheter som ligger i GPR, så må man sette opp tilgang til GPR med en PAT (personal access token) som har `read:packages`. Du kan [opprette PAT her](https://github.com/settings/tokens).
+Siden vi bruker avhengigheter som ligger i GPR, så må man sette opp tilgang til GPR med en PAT (personal access token) som har `read:packages` og er autorisert for organisasjonen "navikt". Du kan [opprette PAT her](https://github.com/settings/tokens). (Ikke Nav-ansatt? Se [CONTRIBUTING.md](https://github.com/navikt/aksel/blob/main/CONTRIBUTING.md))
 
 I din `.bashrc` eller `.zshrc`, sett følgende miljøvariabel:
 
@@ -64,14 +57,14 @@ I din `.bashrc` eller `.zshrc`, sett følgende miljøvariabel:
 | `yarn storybook`          | Starter storybook                                                                                      |
 | `yarn dev`                | Starter aksel-nettsiden [(Mer info)](https://github.com/navikt/aksel/blob/main/aksel.nav.no/README.md) |
 | `yarn example:shadow-dom` | Starter demo-app med shadow-dom                                                                        |
-| `yarn lint`               | Linter react and css workspaces                                                                        |
+| `yarn lint`               | Linter kode og css                                                                                     |
 | `yarn test`               | Kjører tester                                                                                          |
 | `yarn clean`              | Fjerner genererte filer                                                                                |
 | `yarn changeset`          | Ny versjon-entry [(how-to)](https://github.com/navikt/aksel/blob/main/.changeset/README.md)            |
 
 ## Bidra
 
-Vi tar gjerne i mot PR-er! [CONTRIBUTING.md](https://github.com/navikt/aksel/blob/main/CONTRIBUTING.md)
+Vi tar gjerne imot PR-er! [CONTRIBUTING.md](https://github.com/navikt/aksel/blob/main/CONTRIBUTING.md)
 
 ## Lisenser
 
@@ -95,7 +88,6 @@ Løsningen forvaltes av team Aksel
 
 Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
 
-
 ## Kode generert av GitHub Copilot
 
 Dette repoet bruker GitHub Copilot til å generere kode.
diff --git a/aksel.nav.no/README.md b/aksel.nav.no/README.md
@@ -1,17 +1,17 @@
 CMS og nettside for [aksel.nav.no](https://aksel.nav.no/)
 
 ```sh
-├── /website        # NEXT.JS app (v13)
-└── /website/sanity # Sanity CMS-app (v3)
+├── /website        # Next.js-app
+└── /website/sanity # Sanity CMS-app
 ```
 
 ### /website
 
-[Nextjs](https://nextjs.org/) applikasjon som henter data fra et [sanity-datasett](https://www.sanity.io/).
+[Next.js](https://nextjs.org/)-applikasjon som henter data fra et [Sanity](https://www.sanity.io/)-datasett.
 
 ### /website/sanity
 
-Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin)(krever Nav SSO for innlogging).
+Det publiserte studioet finner man på [aksel.nav.no/admin](https://aksel.nav.no/admin) (krever Nav SSO for innlogging).
 
 `production`-datasettet er privat, så man må ha riktige tilganger for å kunne lese/jobbe med dataen der.
 
@@ -23,9 +23,7 @@ Branch `main` pusher rett til prod -> aksel.nav.no. For å utvikle nye features
 
 ## Kode-eksempler
 
-Alle eksemplene våre ligger under `/website/pages/eksempler` og `/website/pages/templates`. For å se endringene live kan man starte opp storybook med `yarn storybook:aksel`.
-
-> Du trenger ikke secrets for å teste storybook
+Alle eksemplene våre ligger under `/website/pages/eksempler` og `/website/pages/templates`. For å se endringene live kan man starte opp storybook med `yarn storybook:aksel`. Du trenger ikke secrets for å kjøre storybook.
 
 ### Nettside (localhost:3000)
 
@@ -41,28 +39,28 @@ yarn serve:next
 
 **Rettigheter**
 
-Sanity-datasettet er privat, noe som betyr du må ha tilgang til sanity applikasjonen + følgende token for å få data lokalt:
+Sanity-datasettet er privat, noe som betyr du må ha tilgang til Sanity-applikasjonen og følgende tokens:
 
 ```env
 SANITY_READ
 SANITY_READ_NO_DRAFTS
 ```
-
+`SANITY_READ` er bare nødvendig for lokal forhåndsvisning.
 ### .env
 
-Blir brukt flere keys i .env under `./website`, men kun `SANITY_READ_NO_DRAFTS` trengs for å teste lokalt
+Det blir brukt flere keys i .env under `./website`, men kun `SANITY_READ_NO_DRAFTS` trengs for å teste lokalt.
 
 - SANITY_WRITE:
-  For å sende dokumenter til sanity, brukt til å oppdatere sandboxes/examples/farger. Trengs bare hvis kode skal synkes fra lokal branch/teste feedback-løsning
-- SANITY_READ: Gir appen tilgang til å lese draft innhold fra sanity i "preview"-mode. Trengs for å teste ikke publiserte-sider
-- SANITY_READ_NO_DRAFTS: Gir appen tilgang til å lese innhold fra Sanity da datasettet er privat
+  For å sende dokumenter til Sanity. Blir brukt i lokale scripts til å synke data til nettsiden, som f.eks. kode-eksempler og changelog. Trengs normalt ikke lokalt.
+- SANITY_READ: Gir appen tilgang til å lese både publisert og upublisert innhold fra Sanity. Trengs for å teste ikke-publiserte sider i "preview"-mode.
+- SANITY_READ_NO_DRAFTS: Gir appen tilgang til å lese kun publisert innhold fra Sanity.
 
 ## Backups
 
-Kjøres backups hver 3 dag til GCP-bucket under `designsystem-prod`
+Det kjøres backups hver 3. dag til GCP-bucket under `designsystem-prod`.
 
 ## Henvendelser
 
-Spørsmål og kontakt kan rettes til team Aksel
+Spørsmål og kontakt kan rettes til team Aksel.
 
 Aksel har også en egen Slack-kanal `#aksel-designsystemet`