Skip to content

Commit

Permalink
Support contributions from outside Nav + update some README files (#3483
Browse files Browse the repository at this point in the history
)

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
  • Loading branch information
HalvorHaugan and KenAJoh authored Jan 6, 2025
1 parent 0480d78 commit ef3464c
Show file tree
Hide file tree
Showing 14 changed files with 261 additions and 513 deletions.
24 changes: 14 additions & 10 deletions .changeset/README.md
Original file line number Diff line number Diff line change
@@ -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 trykke `Enter` for å gå videre.
Trykk `Space` for å velge pakkene som skal versjoneres, trykk`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",
Expand Down
4 changes: 2 additions & 2 deletions @navikt/aksel-icons/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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" />
Expand Down
4 changes: 2 additions & 2 deletions @navikt/aksel-icons/figma-plugin/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
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
Expand Down
12 changes: 6 additions & 6 deletions @navikt/core/css/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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";
Expand All @@ -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";
Expand Down
4 changes: 2 additions & 2 deletions @navikt/core/react/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
4 changes: 3 additions & 1 deletion @navikt/core/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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."
}
12 changes: 6 additions & 6 deletions @navikt/core/tokens/README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -23,7 +23,7 @@ Formats

```css
color: var(--a-text-default);
backgroundcolor: var(--a-surface-default);
background-color: var(--a-surface-default);
```

## Learn more
Expand Down
28 changes: 18 additions & 10 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 git@github.com:navikt/aksel.git
Expand All @@ -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

Expand Down
40 changes: 16 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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:

Expand All @@ -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

Expand All @@ -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.
28 changes: 13 additions & 15 deletions aksel.nav.no/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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)

Expand All @@ -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`
Loading

0 comments on commit ef3464c

Please sign in to comment.