Lerna versionbump [ci skip]

- @navikt/ds-icons@0.5.6 - @navikt/ds-react@0.10.6 - @navikt/ds-react-internal@0.5.4
[fix] simplify tsconfig of @navikt/ds-react-internal (#1285 )
2026-10-15 02:02:02 +00:00 · 2021-10-19 11:53:52 +00:00 · 2021-10-19 13:39:30 +02:00 · 2021-10-18 17:37:22 +02:00 · 2021-10-18 13:21:09 +00:00 · 2021-10-18 15:04:26 +02:00
27 changed files with 572 additions and 157 deletions
@@ -0,0 +1,269 @@
+import { Table as DsTable } from "@navikt/ds-react";
+import {
+  SuccessFilled as SuccessIcon,
+  ErrorFilled as ErrorIcon,
+} from "@navikt/ds-icons";
+import styled from "styled-components";
+
+const Success = styled(SuccessIcon)`
+  color: var(--navds-color-green-50);
+`;
+
+const Error = styled(ErrorIcon)`
+  color: var(--navds-color-red-50);
+`;
+
+const Table = styled(DsTable)`
+  .navds-table__cell > svg,
+  .navds-table__cell > span {
+    vertical-align: middle;
+    margin-left: 50%;
+    transform: translateX(-50%);
+  }
+`;
+
+type CompT = {
+  name: string;
+  status: Partial<[boolean, boolean, boolean]>;
+  desc?: React.ReactNode;
+};
+
+const Components: CompT[] = [
+  {
+    name: "Alertstriper",
+    status: [true, true, true],
+    desc: "Navn: Alert",
+  },
+  { name: "Chevron", status: [false], desc: "" },
+  {
+    name: "Core",
+    status: [true, true, false],
+    desc: <code>@navikt/ds-css</code>,
+  },
+  {
+    name: "Ekspanderbartpanel",
+    status: [true, true, true],
+    desc: "Navn: Accordion, styling ikke oppdatert til nyeste versjon",
+  },
+  { name: "Etiketter", status: [true, true, false], desc: "Navn: Tag" },
+  {
+    name: "Fullbreddeknapp-style",
+    status: [false],
+    desc: "",
+  },
+  { name: "Grid", status: [true, true, false], desc: "Navn: Grid" },
+  { name: "Hjelpetekst", status: [true, true, true], desc: "Navn: HelpText" },
+  {
+    name: "Ikoner-assets",
+    status: [true, true, true],
+    desc: <code>@navikt/ds-icons</code>,
+  },
+  {
+    name: "js-utils",
+    status: [true, true, false],
+    desc:
+      "Diverse util-funksjoner blir eksponert gjennom ds-react, men tar for det meste i bruk npm pakker",
+  },
+  { name: "Knapper", status: [true, true, true], desc: "Navn: Button" },
+  { name: "Lenkepanel", status: [true, true, true], desc: "Navn: LinkPanel" },
+  { name: "Lenker", status: [true, true, true], desc: "Navn: Link" },
+  { name: "Lesmerpanel", status: [false], desc: "" },
+  { name: "Lukknapp", status: [false], desc: `Bruk Button med "Close"-ikon` },
+  { name: "Modal", status: [true, true, true], desc: "Navn: Modal" },
+  { name: "Paneler", status: [true, true, true], desc: "Navn: Panel" },
+  {
+    name: "Bekrefcheckbokspanel",
+    status: [true, true, true],
+    desc: "Navn: ConfirmationPanel",
+  },
+  {
+    name: "Checkbokspanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbokspanel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Checkbox-gruppe",
+    status: [true, true, true],
+    desc: "Navn: CheckboxGroup",
+  },
+  { name: "Checkbox", status: [true, true, true], desc: "Navn: Checkbox" },
+  {
+    name: "Feiloppsummering",
+    status: [true, true, false],
+    desc: "Navn: ErrorSummary, API vil bli endret for denne",
+  },
+  {
+    name: "Fnr-input",
+    status: [false],
+    desc:
+      "Skjema-elementer med validering vil ikke bli lagt til med det første, men vil diskuteres i fremtiden",
+  },
+  { name: "Input", status: [true, true, true], desc: "Navn: TextField" },
+  {
+    name: "Label",
+    status: [false],
+    desc: "Skjema-elementer fikser dette selv",
+  },
+  { name: "Radio-Gruppe", status: [true, true, true], desc: "RadioGroup" },
+  { name: "Radio", status: [true, true, true], desc: "Navn: Radio" },
+  {
+    name: "Radiopanel-gruppe",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  {
+    name: "Radio-panel",
+    status: [false],
+    desc: "Panel-versjon vil ikke tas videre i nytt system",
+  },
+  { name: "Select", status: [true, true, true], desc: "Navn: Select" },
+  { name: "Skjema-gruppe", status: [true, true, true], desc: "Navn: Fieldset" },
+  {
+    name: "Skjemaelement-feilemelding",
+    status: [false],
+    desc: "",
+  },
+  { name: "Textarea", status: [true, true, true], desc: "Navn: Textarea" },
+  { name: "Togglegruppe", status: [true, false, false], desc: "" },
+  { name: "ToggleKnapp", status: [true, false, false], desc: "" },
+  {
+    name: "Toggle",
+    status: [true, false, false],
+    desc: "Vil bli samme komponent som ToggleKnapp",
+  },
+  { name: "Popover", status: [true, true, true], desc: "Navn: Popover" },
+  { name: "Snakkeboble", status: [true, true, true], desc: "SpeechBubble" },
+  { name: "Spinner", status: [true, true, true], desc: "Navn: Loader" },
+  { name: "Stegindikator", status: [true, false, false], desc: "" },
+  {
+    name: "Tabell-style",
+    status: [true, true, false],
+    desc: "Navn: Table, Er nå publisert som React-component",
+  },
+  { name: "Tabs", status: [true, false, false], desc: "" },
+  { name: "Tekstomrade", status: [false], desc: "" },
+  {
+    name: "Typografi",
+    status: [true, true, true],
+    desc: "Navn: se typography-mappen i storybook",
+  },
+  { name: "veileder", status: [false], desc: "" },
+  {
+    name: "Veilederpanel",
+    status: [true, true, true],
+    desc: "Navn: GuidePanel",
+  },
+];
+
+const NewComps: CompT[] = [
+  {
+    name: "AccordionMenu",
+    status: [true, true, true],
+    desc: "",
+  },
+  {
+    name: "SearcField",
+    status: [true, true, false],
+    desc: "Denne vil undergå større endringer",
+  },
+  {
+    name: "MicroCard",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "PageHeader",
+    status: [true, true, false],
+    desc: "Vil flyttes over i egen navno pakke for eksterne sider",
+  },
+  {
+    name: "CopyToClipboard",
+    status: [true, true, false],
+    desc: "Vil flyttes over til @navikt/ds-react-internal pakke",
+  },
+  {
+    name: "Table",
+    status: [true, true, false],
+    desc:
+      "Implementer stylingen til nav-frontend-table-styles, API vil videreutvikles",
+  },
+  {
+    name: "Switch",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Tooltip",
+    status: [true, false, false],
+    desc: "",
+  },
+  {
+    name: "Timeline",
+    status: [true, false, false],
+    desc: "",
+  },
+];
+
+const CompTable = ({ list }) => (
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>Komponent</Table.HeaderCell>
+        <Table.HeaderCell>Med i nytt system</Table.HeaderCell>
+        <Table.HeaderCell>Publisert i pakker</Table.HeaderCell>
+        <Table.HeaderCell>Fullført**</Table.HeaderCell>
+        <Table.HeaderCell>Info</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      {list.map((comp) => {
+        return (
+          <Table.Row>
+            <Table.HeaderCell>{comp.name}</Table.HeaderCell>
+            <Table.DataCell>
+              {comp.status?.[0] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[0] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[1] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>
+              {comp.status?.[2] === undefined ? (
+                <span>-</span>
+              ) : comp.status?.[1] ? (
+                <Success />
+              ) : (
+                <Error />
+              )}
+            </Table.DataCell>
+            <Table.DataCell>{comp.desc ? comp.desc : "-"}</Table.DataCell>
+          </Table.Row>
+        );
+      })}
+    </Table.Body>
+  </Table>
+);
+
+export const NewCompTable = () => {
+  return <CompTable list={NewComps} />;
+};
+
+export const OldCompTable = () => {
+  return <CompTable list={Components} />;
+};
@@ -1,16 +1,30 @@
 import { Meta } from "@storybook/addon-docs";
+import { NewCompTable, OldCompTable } from "./roadmap-table.tsx";

 <Meta title="ds-react/Roadmap" />

-# Plan videre
+# Roadmap

-Arbeidet med det nye pakke-oppsettet har nå foregått en stund og skulle egentlig vært
-lengre på vei en det er nå. Men arbeidet har på ingen måte stoppet opp! Vi jobber kontinuerlig med
-å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
-ny dokumentasjons-side bygd med Sanity, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider. Dette vil da forhåpentligvis la oss
-bygge mer robuste og fleksible løsninger for fremtiden.
+## Komponenter

-(Rekkefølgen representer ikke faktisk tidsline eller prioritet)
+\*\* Fullført betyr i denne konteksten at vi føler API-et er ok og da kan forvente mindre breaking changes.
+Komponenten kan fortsatt bli utsatt for endringer i selve designet.
+
+### Nye komponenter / wip
+
+<NewCompTable />
+
+### Migrering av gamle komponenter
+
+<OldCompTable />
+
+## Plan videre
+
+Vi jobber kontinuerlig med å finne bedre løsninger for å kunne bygge systemet opp fra bunnen av. Dette innegår da
+ny dokumentasjon-side under Verktøykassen, nye byggeblokker helt fra token-nivå og bedre sizing for eksterne/interne sider.
+Dette vil la oss bygge mer robuste og fleksible løsninger for fremtiden som skal være bedre tilpasset produktene våre.
+
+(Rekkefølgen representer ikke faktisk tidslinje)

 ## Tokens

@@ -20,12 +34,11 @@ Dette vil gjøre styling og overriding av komponenter enklere da man kan bruke c
 ## Intern / Ekstern sizing

 Komponenter tilpasses og standariseres bedre for skillet mellom interne/eksterne flater.
-Løsning er ikke fast bestemt, men eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.
-Dette vil da eksempelvis kunne være en standard som er gjennomgående for de fleste komponentene.
+Eksempel på dette er `size="small" -> 32px, size="medium"-> 48px`.

 ## Ny dokumentasjon-side

-Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i nav med "Verktøykassen"
+Vi bygger en ny side for å dokumentere systemet, og mer rundt utvikling/design i NAV med "Verktøykassen"

 ## Migrere komponenter/styling fra nav-frontend-\* -> `@navikt/ds-css / @navikt/ds-react`

@@ -46,6 +59,6 @@ noe vi kunne ta en titt på hvis vi ser at det trengs.

 ## Versjonering

-To av de nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
+De nye pakkene under `@navikt`, da `ds-css` og `ds-react` er nå versjonert under to store pakker med alle komponentene. I fremtiden vil vi se på å
 ha både samversjonering (alle pakker under en eks ds-react versjon) og induvduell verjsonering da eks ds-react/button har en egen versjon
 slik at man kan ha mer finkontroll over komponentbruk på siden sin.
@@ -44,12 +44,12 @@
  flex-shrink: 0;
  font-size: 1.5rem;
  align-self: flex-start;
-  height: var(--navds-font-line-height-xl);
+  height: var(--navds-font-line-height-xlarge);
 }

 .navds-alert--small > .navds-alert__icon {
  font-size: 1.25rem;
-  height: var(--navds-font-line-height-l);
+  height: var(--navds-font-line-height-large);
 }

 .navds-alert--error {
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-css",
-  "version": "0.9.2",
+  "version": "0.9.3",
  "private": false,
  "description": "Css for NAV Designsystem components",
  "author": "NAV Designsystem team",
@@ -21,7 +21,7 @@
    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
  },
  "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.2",
+    "@navikt/ds-tokens": "^0.5.3",
    "normalize.css": "^8.0.1",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
@@ -65,6 +65,6 @@
    height: 3rem;
  }
  .navds-page-header__title {
-    font-size: var(--navds-font-size-title-xl);
+    font-size: var(--navds-font-size-heading-xlarge);
  }
 }
@@ -5,9 +5,9 @@
 }

 .navds-heading--2xlarge {
-  font-size: var(--navds-font-size-heading-2xl);
+  font-size: var(--navds-font-size-heading-2xlarge);
  letter-spacing: -0.01em;
-  line-height: var(--navds-font-line-height-heading-2xl);
+  line-height: var(--navds-font-line-height-heading-2xlarge);
 }

 .navds-heading--2xlarge.navds-typo--spacing {
@@ -15,9 +15,9 @@
 }

 .navds-heading--xlarge {
-  font-size: var(--navds-font-size-heading-xl);
+  font-size: var(--navds-font-size-heading-xlarge);
  letter-spacing: -0.008em;
-  line-height: var(--navds-font-line-height-heading-xl);
+  line-height: var(--navds-font-line-height-heading-xlarge);
 }

 .navds-heading--xlarge.navds-typo--spacing {
@@ -25,9 +25,9 @@
 }

 .navds-heading--large {
-  font-size: var(--navds-font-size-heading-l);
+  font-size: var(--navds-font-size-heading-large);
  letter-spacing: -0.004em;
-  line-height: var(--navds-font-line-height-heading-l);
+  line-height: var(--navds-font-line-height-heading-large);
 }

 .navds-heading--large.navds-typo--spacing {
@@ -35,9 +35,9 @@
 }

 .navds-heading--medium {
-  font-size: var(--navds-font-size-heading-m);
+  font-size: var(--navds-font-size-heading-medium);
  letter-spacing: -0.002em;
-  line-height: var(--navds-font-line-height-heading-m);
+  line-height: var(--navds-font-line-height-heading-medium);
 }

 .navds-heading--medium.navds-typo--spacing {
@@ -45,9 +45,9 @@
 }

 .navds-heading--small {
-  font-size: var(--navds-font-size-heading-s);
+  font-size: var(--navds-font-size-heading-small);
  letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-s);
+  line-height: var(--navds-font-line-height-heading-small);
 }

 .navds-heading--small.navds-typo--spacing {
@@ -55,9 +55,9 @@
 }

 .navds-heading--xsmall {
-  font-size: var(--navds-font-size-heading-xs);
+  font-size: var(--navds-font-size-heading-xsmall);
  letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-heading-xs);
+  line-height: var(--navds-font-line-height-heading-xsmall);
 }

 .navds-heading--xsmall.navds-typo--spacing {
@@ -66,10 +66,10 @@

 /* Ingress */
 .navds-ingress {
-  font-size: var(--navds-font-size-xl);
+  font-size: var(--navds-font-size-xlarge);
  font-weight: var(--navds-font-weight-regular);
  letter-spacing: -0.001em;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
  margin: 0;
 }

@@ -79,10 +79,10 @@

 /* Body */
 .navds-body-long {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
  font-weight: var(--navds-font-weight-regular);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-xl);
+  line-height: var(--navds-font-line-height-xlarge);
  margin: 0;
 }

@@ -91,9 +91,9 @@
 }

 .navds-body-long--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
  letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
 }

 .navds-body-long--small.navds-typo--spacing {
@@ -101,10 +101,10 @@
 }

 .navds-body-short {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
  font-weight: var(--navds-font-weight-regular);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
  margin: 0;
 }

@@ -113,9 +113,9 @@
 }

 .navds-body-short--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
  letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }

 .navds-body-short--small.navds-typo--spacing {
@@ -124,10 +124,10 @@

 /* Label */
 .navds-label {
-  font-size: var(--navds-font-size-l);
+  font-size: var(--navds-font-size-large);
  font-weight: var(--navds-font-weight-bold);
  letter-spacing: 0;
-  line-height: var(--navds-font-line-height-l);
+  line-height: var(--navds-font-line-height-large);
  margin: 0;
 }

@@ -136,9 +136,9 @@
 }

 .navds-label--small {
-  font-size: var(--navds-font-size-m);
+  font-size: var(--navds-font-size-medium);
  letter-spacing: 0.002em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
 }

 .navds-label--small.navds-typo--spacing {
@@ -147,10 +147,10 @@

 /* Small text */
 .navds-detail {
-  font-size: var(--navds-font-size-s);
+  font-size: var(--navds-font-size-small);
  font-weight: var(--navds-font-weight-bold);
  letter-spacing: 0.004em;
-  line-height: var(--navds-font-line-height-m);
+  line-height: var(--navds-font-line-height-medium);
  margin: 0;
 }

@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-icons",
-  "version": "0.5.5",
+  "version": "0.5.6",
  "private": false,
  "description": "NAVs egne ikoner i SVG og React format",
  "repository": {
@@ -31,7 +31,7 @@
    "convert-icons": "node figma-api/pngConverter.mjs",
    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
    "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
+    "build": "yarn clean && yarn create-icons && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn run convert-icons && yarn zip-icons"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0"
@@ -1,13 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "outDir": "./esm",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,13 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
-    "module": "commonjs",
    "outDir": "./cjs",
-    "target": "es2015",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"]
+    "module": "commonjs"
+  }
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react",
-  "version": "0.10.4",
+  "version": "0.10.6",
  "private": false,
  "description": "NAV designsystem react components",
  "author": "NAV Designsystem team",
@@ -29,13 +29,13 @@
  "scripts": {
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json",
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json",
    "test": "jest"
  },
  "dependencies": {
    "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.5.5",
+    "@navikt/ds-icons": "^0.5.6",
    "@popperjs/core": "^2.10.1",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
@@ -23,7 +23,7 @@ const ConfirmationPanel = forwardRef<HTMLDivElement, ConfirmationPanelProps>(
      <div
        ref={ref}
        className={cl("navds-confirmation-panel", className, {
-          "navds-confirmation-panel--s": props.size === "small",
+          "navds-confirmation-panel--small": props.size === "small",
          "navds-confirmation-panel--error": !!props.error,
          "navds-confirmation-panel--checked": !!props.checked,
        })}
@@ -84,7 +84,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
          className,
          "navds-text-field__input",
          "navds-body-short",
-          `navds-body-${size ?? "m"}`
+          `navds-body-${size ?? "medium"}`
        )}
        size={htmlSize}
      />
@@ -22,7 +22,7 @@ import { ConfirmationPanelExample } from "./live-examples";

 ## Størrelser

-Kommer i størrelsene "m" og "s".
+Kommer i størrelsene "medium" og "small".

 ```jsx
 <ConfirmationPanel
@@ -1,12 +1,11 @@
 import React from "react";
-import { SpeechBubble, Bubble } from "../index";
+import { SpeechBubble } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { Illustration } from "./illustration";

 export default {
  title: "ds-react/speechbubble",
  component: SpeechBubble,
-  subcomponents: { Bubble },
 } as Meta;

 export const All = () => {
@@ -0,0 +1,112 @@
+import { Table } from "../index";
+import { Meta, Canvas } from "@storybook/addon-docs";
+
+<Meta title="ds-react/table/intro" />
+
+# Hvordan ta i bruk Table
+
+Komponenten er fortsatt WIP. Dette vil si at komponenten ikke er tilpasset for eks ikoner, inputelementer og lignende.
+Dette er noe vi har planer om å få på plass etterhvert.
+
+```jsx
+<Table>
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell>ID</Table.HeaderCell>
+      <Table.HeaderCell>Fornavn</Table.HeaderCell>
+      <Table.HeaderCell>Etternavn</Table.HeaderCell>
+      <Table.HeaderCell>Rolle</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.HeaderCell>1</Table.HeaderCell>
+      <Table.DataCell>Jean-Luc</Table.DataCell>
+      <Table.DataCell>Picard</Table.DataCell>
+      <Table.DataCell>Kaptein</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>2</Table.HeaderCell>
+      <Table.DataCell>William</Table.DataCell>
+      <Table.DataCell>Riker</Table.DataCell>
+      <Table.DataCell>Kommandør</Table.DataCell>
+    </Table.Row>
+    <Table.Row>
+      <Table.HeaderCell>3</Table.HeaderCell>
+      <Table.DataCell>Geordi</Table.DataCell>
+      <Table.DataCell>La Forge</Table.DataCell>
+      <Table.DataCell>Sjefsingeniør</Table.DataCell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
+
+<Canvas>
+  <Table>
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>
+
+## Sizing
+
+Størrelse kan justeres med `size`-proppen. Valg: `medium | small`
+
+<Canvas>
+  <Table size="small">
+    <Table.Header>
+      <Table.Row>
+        <Table.HeaderCell>ID</Table.HeaderCell>
+        <Table.HeaderCell>Fornavn</Table.HeaderCell>
+        <Table.HeaderCell>Etternavn</Table.HeaderCell>
+        <Table.HeaderCell>Rolle</Table.HeaderCell>
+      </Table.Row>
+    </Table.Header>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell>1</Table.HeaderCell>
+        <Table.DataCell>Jean-Luc</Table.DataCell>
+        <Table.DataCell>Picard</Table.DataCell>
+        <Table.DataCell>Kaptein</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>2</Table.HeaderCell>
+        <Table.DataCell>William</Table.DataCell>
+        <Table.DataCell>Riker</Table.DataCell>
+        <Table.DataCell>Kommandør</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell>3</Table.HeaderCell>
+        <Table.DataCell>Geordi</Table.DataCell>
+        <Table.DataCell>La Forge</Table.DataCell>
+        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
+</Canvas>
@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/addon-docs";
+import { Alert, Heading, BodyLong } from "@navikt/ds-react";

 <Meta title="ds-react/Typography/intro" />

@@ -21,15 +22,15 @@ Denne stylingen vil overskrive default variablene og tilpasse font-size.
 ```css
 /* autogenerated fix for 18px root-font-size*/
 :root {
-  --navds-font-size-title-2xl: 2.2222222222222223rem;
-  --navds-font-size-title-xl: 1.7777777777777777rem;
-  --navds-font-size-title-l: 1.5555555555555556rem;
-  --navds-font-size-title-m: 1.3333333333333333rem;
-  --navds-font-size-title-s: 1.1111111111111112rem;
-  --navds-font-size-xl: 1.1111111111111112rem;
-  --navds-font-size-l: 1rem;
-  --navds-font-size-m: 0.8888888888888888rem;
-  --navds-font-size-s: 0.7777777777777778rem;
+  --navds-font-size-heading-2xlarge: 2.2222222222222223rem;
+  --navds-font-size-heading-xlarge: 1.7777777777777777rem;
+  --navds-font-size-heading-large: 1.5555555555555556rem;
+  --navds-font-size-heading-medium: 1.3333333333333333rem;
+  --navds-font-size-heading-small: 1.1111111111111112rem;
+  --navds-font-size-xlarge: 1.1111111111111112rem;
+  --navds-font-size-large: 1rem;
+  --navds-font-size-medium: 0.8888888888888888rem;
+  --navds-font-size-small: 0.7777777777777778rem;
 }
 ```

@@ -37,3 +38,46 @@ Vi anbefaler å før eller siden endre tilbake til default root font size da des
 komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
 forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
 for å tilpasse systemet for alle de forskjellige variantene av font size på root.
+
+## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
+
+De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
+
+### Overskrifter
+
+Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
+
+En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
+
+`<Sidetittel> -> <Heading size="2xlarge">`
+
+`<Innholdstittel> -> <Heading size="xlarge">`
+
+`<Systemtittel> -> <Heading size="medium">`
+
+`<Undertittel> -> <Heading size="small">`
+
+<Alert variant="warning">
+  Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
+  hierarkiet (h1-h6).
+</Alert>
+
+### Brødtekst
+
+De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
+
+Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
+
+`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
+
+### Andre komponenter
+
+`<Ingress> -> <Ingress>`
+
+`<Element> -> <Label>`
+
+`<UndertekstBold> -> <Detail>`
+
+`<Undertekst> -> <Detail size="small">`
+
+`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.
@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,14 +1,9 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
    "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
+    "noImplicitAny": false
  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+  "include": ["./src"]
 }
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-tokens",
-  "version": "0.5.2",
+  "version": "0.5.3",
  "private": false,
  "description": "Auto-generated design-tokens for NAV design-systems framework",
  "author": "NAV Designsystem team",
@@ -140,31 +140,31 @@ module.exports = {
      line: {
        height: {
          heading: {
-            "2xl": { value: getFontSize(52) },
-            xl: { value: getFontSize(40) },
-            l: { value: getFontSize(36) },
-            m: { value: getFontSize(32) },
-            s: { value: getFontSize(28) },
-            xs: { value: getFontSize(24) },
+            "2xlarge": { value: getFontSize(52) },
+            xlarge: { value: getFontSize(40) },
+            large: { value: getFontSize(36) },
+            medium: { value: getFontSize(32) },
+            small: { value: getFontSize(28) },
+            xsmall: { value: getFontSize(24) },
          },
-          xl: { value: getFontSize(28) },
-          l: { value: getFontSize(24) },
-          m: { value: getFontSize(20) },
+          xlarge: { value: getFontSize(28) },
+          large: { value: getFontSize(24) },
+          medium: { value: getFontSize(20) },
        },
      },
      size: {
        heading: {
-          "2xl": { value: getFontSize(40) },
-          xl: { value: getFontSize(32) },
-          l: { value: getFontSize(28) },
-          m: { value: getFontSize(24) },
-          s: { value: getFontSize(20) },
-          xs: { value: getFontSize(18) },
+          "2xlarge": { value: getFontSize(40) },
+          xlarge: { value: getFontSize(32) },
+          large: { value: getFontSize(28) },
+          medium: { value: getFontSize(24) },
+          small: { value: getFontSize(20) },
+          xsmall: { value: getFontSize(18) },
        },
-        xl: { value: getFontSize(20) },
-        l: { value: getFontSize(18) },
-        m: { value: getFontSize(16) },
-        s: { value: getFontSize(14) },
+        xlarge: { value: getFontSize(20) },
+        large: { value: getFontSize(18) },
+        medium: { value: getFontSize(16) },
+        small: { value: getFontSize(14) },
      },
      weight: {
        bold: { value: "600" },
@@ -1,6 +1,6 @@
 {
  "name": "@navikt/ds-react-internal",
-  "version": "0.5.2",
+  "version": "0.5.4",
  "private": false,
  "description": "NAV internal designsystem react components",
  "author": "NAV Designsystem team",
@@ -29,12 +29,12 @@
  "scripts": {
    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
    "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm",
-    "watch": "tsc --watch -p tsconfig-esm.json"
+    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm",
+    "watch": "tsc --watch -p tsconfig.esm.json"
  },
  "dependencies": {
-    "@navikt/ds-icons": "^0.5.5",
-    "@navikt/ds-react": "^0.10.4",
+    "@navikt/ds-icons": "^0.5.6",
+    "@navikt/ds-react": "^0.10.6",
    "classnames": "^2.3.1"
  },
  "devDependencies": {
@@ -1,14 +0,0 @@
-{
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
-  "compilerOptions": {
-    "outDir": "./esm",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "ES2020",
-    "target": "ES2015",
-    "sourceMap": true,
-    "declaration": true
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
-}
@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./esm",
+    "module": "esnext",
+    "sourceMap": true,
+    "declaration": true
+  }
+}
@@ -1,14 +1,7 @@
 {
-  "extends": "../../../utilities/build/tsconfig-pakker.json",
+  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./cjs",
-    "rootDir": "./src",
-    "esModuleInterop": true,
-    "module": "commonjs",
-    "target": "es2015",
-    "sourceMap": false,
-    "declaration": false
-  },
-  "include": ["./src"],
-  "exclude": ["./src/**/stories", "**/*.test.ts", "**/*.test.tsx"]
+    "module": "commonjs"
+  }
 }
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "strict": true,
+    "esModuleInterop": true,
+    "target": "es6",
+    "moduleResolution": "node"
+  },
+  "exclude": ["**/stories", "**/*.test.ts", "**/*.test.tsx"]
+}
Author	SHA1	Message	Date
github-actions[bot]	fc6bdd70c7	Lerna versionbump [ci skip] - @navikt/ds-icons@0.5.6 - @navikt/ds-react@0.10.6 - @navikt/ds-react-internal@0.5.4	2021-10-19 11:53:52 +00:00
Andreas Nordahl	998f0c7752	[fix] simplify tsconfig of @navikt/ds-react-internal (#1285 ) * simplify tsconfig of @navikt/ds-react-internal * new tsconfig for core react * new tsconfig in icons * rename tsconfig-esm to tsconfig.esm	2021-10-19 13:39:30 +02:00
Andreas NordahlandKen	900525fecf	Typo migration guide (#1293 ) * Typo migration guide draft * Update @navikt/core/react/src/typography/stories/typography.stories.mdx Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com> Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>	2021-10-18 17:37:22 +02:00
github-actions[bot]	b20fa69869	Lerna versionbump [ci skip] - @navikt/ds-css@0.9.3 - @navikt/ds-react@0.10.5 - @navikt/ds-tokens@0.5.3 - @navikt/ds-react-internal@0.5.3	2021-10-18 13:21:09 +00:00
Andreas Nordahl	1367a628d2	[fix] fix size naming of some classes and tokens (#1291 )	2021-10-18 15:04:26 +02:00
Ken	bf99605db2	Oppdaterte storybook-docs, Roadmap (#1288 ) * oppdatert docs * oppdatert comment * oppdatert tekst * fikset table	2021-10-18 14:50:32 +02:00