-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/master' into refactor-core-0
- Loading branch information
Showing
65 changed files
with
1,087 additions
and
203 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # Kode i Jøkul | ||
|
|
||
| Jøkul er et design system, og dermed et bibliotek. Det gir litt andre utfordringer enn klient-utvikling. I denne guiden får du en liten innføring i hvordan vi jobber med Jøkul. Jøkul brukes av mange forskjellige klienter, med forskjellige behov og ønsker. Det er viktig å balansere funksjonalitet, brukervennlighet, pakkestørrelse og kompleksitet i hver enkelt komponent. | ||
|
|
||
| ## Hva brukes | ||
|
|
||
| - Språk: Typescript | ||
| - JS-rammeverk: React | ||
| - Byggverktøy: Rollup | ||
| - Test runner: Jest | ||
| - Test rammeverk: | ||
| - CSS-preprosessor: Scss | ||
|
|
||
| ## Pakke organisering | ||
|
|
||
| Alle komponentene er organisert under `/packages`. De som slutter på `-react` er react-pakker, de som ikke har en ending er stilpakker. Stilpakkene skal være generelle og kunne brukes uten noe javascript rammeverk. Hver enkelt pakke inneholder et eksempel som kan startes med `yarn dev` fra hver enkelt pakke. Enkelte stilpakker har ikke eksempel, da det kreves en del javascript for å få eksempelet til å kjøre, feks `Dropdown`. | ||
|
|
||
| ## Hvordan lage en ny pakke | ||
|
|
||
| 1. På rotnivå, kjør kommandoen `lerna create pakke-navn`. | ||
| 2. Du får noen spørsmål om pakken. Fyll ut etter beste evne. | ||
| 3. Når pakken er opprettet, finner du en pakke som er lik den du har laget og kopierer de script- og oppsettfilene du trenger, for eksempel tsconfig-for-declarations.json for React-pakker. | ||
|
|
||
| ## Hvordan lenke pakker sammen | ||
|
|
||
| 1. Fra hvor som helst i projektet kjør `lerna add pakke-som-skal-legges-til --scope=pakken-den-skal-inn-i` | ||
|
|
||
| ## Legg til avhengighet | ||
|
|
||
| Det finnes avhengigheter på ulike nivå i Jøkul. De som gjelder globalt, feks til å kjøre bygg-jobben, ligger på rot-nivå. For å legge til en ny pakke her kjøres `yarn add pakke -W` evt `-DW` om det er for bare utvikling. Normalt legges avhengigheter på pakke-nivå, hvis det er en lokal avhengighet til en annen pakke, se "Hvordan lenke pakker sammen". Avhengigheter legges til som normalt her med `yarn add`, men tenk på om det skal sendes med komponenten eller om brukeren av komponenten har ansvaret for å ha avhengigheten i sitt prosjekt. React feks bør sannsynligvis være en `peerDependency` så ikke brukeren ender opp med flere utgaver av React i sin pakke. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # Bidragsguide | ||
|
|
||
| Vi er avhengige av at folk vil bidra til Jøkul. Der er «så mye å gjøre og så lite tid å gjøre det på», når man skal betjene en hel organisasjon i den digitale tidsalderen. Fremtind har mange ulike fagsystemer og kundeløsninger som ikke bare skal over i Fremtind-drakt, men som også skal forbedres og forenkles i tråd med Fremtinds visjon om å være et forsikringsselskap for morgendagens behov. | ||
|
|
||
| ## Vi utvikler på GitHub | ||
|
|
||
| Du finner all koden, feilrapportene og backlogen til designsystemet i GitHub. Alt er er åpent, og du har mulighet til å påvirke ved å bidra i samtalen på GitHub. | ||
|
|
||
| ## Dette trenger du | ||
|
|
||
| - Node v.8.0.0 eller nyere | ||
| - Yarn | ||
| - Git 2.0.0 eller nyere | ||
|
|
||
| Vi bruker Yarn i stedet for npm, siden Yarn har bedre integrasjon mot monorepo-verktøyet Lerna, som brukes i Jøkul. | ||
|
|
||
| ## Slik håndterer vi brancher og versjoner | ||
|
|
||
| - Vi bruker monorepo med Lerna for å holde kontroll på de individuelle pakkene i repositoriet. | ||
| - Hver enkelt pakke følger semantisk versjonering. | ||
| - Nye versjoner blir automatisk generert fra commit-loggen, derfor er det satt regler for hvordan en commit skal se ut. | ||
|
|
||
| ## Slik organiserer vi branchene | ||
|
|
||
| Vi gjør vårt beste for å holde masteren ren og pen og sørger for at den alltid virker. Masteren er grunnlaget for pakkene som vi publiserer i npm-registeret. Vi sender normalt pull requester mot master. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| # Pull requests | ||
|
|
||
| Kjerneteamet følger med på det som skjer på GitHub-repoet til Jøkul. | ||
| Når du sender inn en pull request, får du alltid tilbakemelding fra noen i kjerneteamet. | ||
| Da kan pull requested bli merget eller du vil kunne få tilbakemelding på hva som skal til for at den kan merges. | ||
|
|
||
| Hvis det gjelder større API-endringer, kan det ta litt tid før vi kan merge, fordi vi må kanskje må teste i noen interne applikasjoner først. | ||
|
|
||
| ## Din første pull request | ||
|
|
||
| Flott at du vil bidra! Her er noen smarte tips før du setter i gang: | ||
|
|
||
| - Sjekk i tråden på en oppgave at ingen andre har tatt den. | ||
| - Sjekk med den personen som eventuelt har tatt oppgaven og legg igjen en kommentar om at du ser på den. | ||
| - Kjerneteamet jobber etter en prioritert backlog, men vi er takknemlige for alle som vil ta tak i oppgaver som har lavere prioritet. | ||
| - Følg gjerne med på andres pull requests og kom med kommentarer og tilbakemeldinger. Da plukker du kjapt opp hva som er viktig og ikke for Jøkul. | ||
|
|
||
| ## Slik sender du en pull request | ||
|
|
||
| 1. Fork prosjektet og lag en ny branch. ( Om du har tilgang til prosjektet trenger du ikke lage en fork) | ||
| 2. Kjør `yarn` og `yarn build` på rot i prosjektet. | ||
| 3. Løs feilen eller legg til ny funksjonalitet og legg til tester. | ||
| 4. Pass på at alle tester blir grønne når du tester med `yarn test` på rot. | ||
| 5. Legg til endrede filer i stage med `git add`. | ||
| 6. Commit med `yarn commit` fra rot, for å få hjelp til å lage en korrekt commit-melding. Hvis du kjenner godt til conventional commit style, kan du utføre commit med Git som vanlig. Lint, prettier og typesjekk kjøres automatisk. | ||
| 7. Push og opprett pull request mot Jøkul. Fyll ut malen som dukker opp i GitHub. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| # `accordion` | ||
| Trekkspillister gjør at vi kan gi brukerne mer innhold på liten plass, fordi vi viser informasjonen gradvis. Vi antyder for brukerne at det finnes noe mer, og de kan selv velge å vise eller skjule den ekstra informasjonen. | ||
|
|
||
| Style for accordion component in Jøkul | ||
| Trekkspillister er spesielt nyttig når du designer for mobil, eller i andre tilfeller der du trenger å legge mye informasjon vertikalt. | ||
|
|
||
| Vi unngår _nestede_ lister, altså trekkspillister inni andre trekkspillister. | ||
| Vi bruker et vinkeltegn (chevron) for å angi at brukeren kan vise og skjule informasjon, men brukerne kan også klikke på selve tekstområdet for å vise og skjule. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| # `datepicker-react` | ||
|
|
||
| > TODO: description | ||
| ## Usage | ||
|
|
||
| ``` | ||
| const datepickerReact = require('datepicker-react'); | ||
| // TODO: DEMONSTRATE API | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <title>Example datepicker</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
| </head> | ||
| <body> | ||
| <div id="app"></div> | ||
| <script src="index.tsx"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| //import "@fremtind/jkl-DatePicker/DatePicker.css"; | ||
| import "@fremtind/jkl-core/build/css/core.css"; | ||
| import React from "react"; | ||
| import ReactDOM from "react-dom"; | ||
| import { DatePicker } from "../src"; | ||
| import "@fremtind/jkl-datepicker/datepicker.scss"; | ||
| import "@fremtind/jkl-core/build/css/normalize.css"; | ||
|
|
||
| const App = () => ( | ||
| <> | ||
| <div style={{ margin: "20px" }}> | ||
| <DatePicker /> | ||
| </div> | ||
| <div style={{ margin: "20px" }}> | ||
| <DatePicker | ||
| onlyFuture={false} | ||
| initialDate={new Date(new Date().setFullYear(new Date().getFullYear() + 1))} | ||
| /> | ||
| </div> | ||
| <div style={{ margin: "20px" }}> | ||
| <DatePicker onChange={(date) => alert(`Date selected is ${date}`)} /> | ||
| </div> | ||
| <div style={{ margin: "20px" }}> | ||
| <DatePicker | ||
| onlyFuture={false} | ||
| label="Select the best date" | ||
| yearLabel="1988 is good" | ||
| monthLabel="Try september" | ||
| onChange={(date) => { | ||
| if (date.toDateString() === "Mon Sep 26 1988") { | ||
| alert("The greatest date is selected"); | ||
| } | ||
| }} | ||
| /> | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| ReactDOM.render(<App />, document.getElementById("app")); |
Oops, something went wrong.