Lerna versionbump [ci skip]

- @navikt/ds-react@0.11.1
 - @navikt/ds-react-internal@0.6.1

.github/workflows/build-publish.yml

@@ -30,10 +30,15 @@ jobs:
       - name: install
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: yarn install
+      - name: postinstall
+        if: steps.node-cache.outputs.cache-hit == 'true'
+        run: yarn postinstall
       - name: Boot
         run: yarn boot
       - name: Eslint and Stylelint
         run: yarn lint
+      - name: Test
+        run: yarn test
       - name: add access token to .env
         run: echo "ACCESS_TOKEN=${{ secrets.VERKTOYKASSE_INNHOLD_TOKEN }}" >> website/.env
       - name: add branch token to .env
@@ -50,15 +55,17 @@ jobs:
   publish-npm:
     needs: test-build
     runs-on: ubuntu-latest
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTOMATION }}
     if: github.event_name == 'push' && contains(github.event.head_commit.message, '[fix]') || contains(github.event.head_commit.message, '[feature]') || contains(github.event.head_commit.message, '[breaking]')
     steps:
       - uses: actions/checkout@v2
         with:
           fetch-depth: "0"
           token: ${{secrets.GIT_REPO}}
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          registry-url: http://registry.npmjs.org
+          registry-url: https://registry.npmjs.org
           node-version: 14
       - name: Node-modules cache
         uses: actions/cache@v2
@@ -88,17 +95,9 @@ jobs:
       - name: Update changed packages with MAJOR
         if: "contains(github.event.head_commit.message, '[breaking]')"
         run: yarn lerna version major --include-merged-tags --yes
-
-      - name: Create a .npmrc file for NPM
-        run: |
-          echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> .npmrc
-          npm whoami
-        env:
-          NPM_TOKEN: ${{secrets.NPM_AUTOMATION}}
       - name: Publish to NPM registry
-        run: |
-          yarn lerna publish from-package --yes
-          rm .npmrc
+        run: yarn lerna publish --no-verify-access from-package --yes
+
       - name: Create a .npmrc file for the github package repository
         uses: FerLuisxd/create-npmrc@3
         with:

.gitignore

@@ -100,7 +100,6 @@ examples/webpack/out
 
 *.d.ts
 *-exports.less
-**/css/
 */figma-api/icons
 */ds-icons/png
 packages/**/css
@@ -108,8 +107,8 @@ utilities/**/css
 
 */static/*.zip
 */static/png
-@navikt/ds-icons/NAV-ikonpakke-png.zip
-@navikt/ds-icons/NAV-ikonpakke-svg.zip
+@navikt/core/icons/NAV-ikonpakke-png.zip
+@navikt/core/icons/NAV-ikonpakke-svg.zip
 */**/NAV-ikonpakke-png.zip
 */**/NAV-ikonpakke-svg.zip
 

.specifyrc.json

@@ -1,46 +0,0 @@
-{
-  "repository": "@nav/designsystem",
-  "head": "specify-sync",
-  "base": "specify-token-parsing",
-  "rules": [
-    {
-      "name": "Color sync",
-      "path": "@navikt/ds-tokens/src/colors.js",
-      "filter": {
-        "types": ["color"]
-      },
-      "parsers": [
-        {
-          "name": "to-theme-ui",
-          "options": {
-            "formatConfig": {
-              "module": "commonjs"
-            },
-            "formatTokens": {
-              "colorFormat": {
-                "format": "rgb"
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "name": "Spacing sync",
-      "path": "@navikt/ds-tokens/src/spacing.js",
-      "filter": {
-        "types": ["measurement"]
-      },
-      "parsers": [
-        {
-          "name": "to-theme-ui",
-          "options": {
-            "formatConfig": {
-              "module": "commonjs"
-            }
-          }
-        }
-      ]
-    }
-  ]
-}

.storybook/preview.js

@@ -1,5 +1,6 @@
 import "nav-frontend-core";
 import "@navikt/ds-css/index.css";
+import "@navikt/ds-css-internal/index.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

.storybook/stories/migration.stories.mdx

@@ -2,7 +2,33 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="ds-react/Migration" />
 
-# Migrering til ds-react, ds-css v0.8.0
+# Migreringsguider
+
+## Migrering til ds-react v0.11, ds-css v0.10
+
+### ErrorSummary
+
+- ErrorSummaryItem -> ErrorSummary.Item
+  Må da slette import "ErrorSummaryItem" da denne ikke er eksponert alene lengre
+
+### SearchField
+
+- SearchFieldButton -> SearchField.Button
+- SearchFieldClearButton -> SearchField.Clear
+- SearchFieldInput -> SearchField.Input
+
+SearchFieldButton, SearchFieldClearButton og SearchFieldInput må da slettes fra imports da de ikke er eksponert lengre.
+
+### CopyToClipBoard
+
+Komponenten er flyttet til pakkene "@navikt/ds-react-internal" og "@navikt/ds-css-internal". API er ikke endret
+så fikses med
+
+```bash
+yarn install @navikt/ds-react-internal @navikt/ds-css-internal
+```
+
+## Migrering til ds-react, ds-css v0.8.0
 
 Denne guiden vil være til hjelp for de som allerede har begynt å ta i bruk de nye pakkene våre tidligere enn v0.8.0.
 For de som ikke har begynt å ta i bruk pakkene kan man se bort fra denne.
@@ -219,3 +245,11 @@ Props må fikses for de som har brukt denne komponenten, i tilleg til å endre n
 ## MicroCard
 
 - Oppdatert med OverridableComponent
+
+## SpeechBubble
+
+Implementert med Dot-notasjon
+
+- `<Bubble/>` -> `<SpeechBubble.Bubble/>`
+
+Bubble er fortsatt eksportert så vil ikke brekke noe for de som har begynt å ta denne i bruk.

.storybook/stories/roadmap-table.tsx

@@ -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} />;
+};

.storybook/stories/roadmap.stories.mdx

@@ -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`
 
@@ -44,14 +57,8 @@ eks darkmode.
 Dette er noe vi ikke har på planene for tiden, men etterhvert som ting faller på plass så vil dette være
 noe vi kunne ta en titt på hvis vi ser at det trengs.
 
-## Feature-flagging
-
-Ideen om å ta i bruk feature-flagging er noe som virker veldig interessant og vil da se på muligheten for å kunne levere
-større endringe i feature-flags for testing, og da publisere under eks major-bump i faste intervaller. Dette vil da kunne
-gjøre det enklere for deg som consumer av pakkene å ha oversikt over endringer og hva som må migreres.
-
 ## 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.

.storybook/webpack.config.js

@@ -6,7 +6,7 @@ module.exports = (baseConfig) => {
       test: /\.css$/,
       use: ["style-loader", "css-loader"],
       include: [
-        path.resolve(__dirname, "../node_modules/@navikt/ds-css/index.css"),
+        path.resolve(__dirname, "../node_modules/@navikt/core/css/index.css"),
       ],
     },
     {

@navikt/core/css/alert.css

@@ -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 {

@navikt/core/css/baseline/baseline.css

@@ -7,6 +7,7 @@
 @import "utility.css";
 
 /* Disabled because of UU concerns */
+
 /* @import "smooth-scroll.css"; */
 
 html {
@@ -14,8 +15,8 @@ html {
 }
 
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 

@navikt/core/css/button.css

@@ -1,41 +1,37 @@
 :root {
-  --navds-button-color-text: var(--navds-color-action-default);
-  --navds-button-color-background: var(--navds-color-background);
-  --navds-button-color-border: var(--navds-color-action-default);
-
   /* Primary */
   --navds-button-color-primary-text: var(--navds-color-white);
+  --navds-button-color-primary-border-focus: var(--navds-color-white);
   --navds-button-color-primary-background: var(--navds-color-action-default);
-  --navds-button-color-primary-border: var(--navds-color-action-default);
   --navds-button-color-primary-background-hover: var(
     --navds-color-action-hover
   );
-  --navds-button-color-primary-border-hover: var(--navds-color-action-hover);
   --navds-button-color-primary-background-active: var(
     --navds-color-action-active
   );
-  --navds-button-color-primary-border-focus: var(--navds-color-white);
 
-  /* secondary */
+  /* Secondary */
+  --navds-button-color-secondary-text: var(--navds-color-action-default);
   --navds-button-color-secondary-text-hover: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-background-hover: var(
-    --navds-color-action-hover
-  );
   --navds-button-color-secondary-text-active: var(--navds-color-text-inverse);
-  --navds-button-color-secondary-background-active: var(
-    --navds-color-action-active
-  );
+  --navds-button-color-secondary-border: var(--navds-color-action-default);
   --navds-button-color-secondary-border-focus-active-hover: var(
     --navds-color-white
   );
+  --navds-button-color-secondary-background: var(--navds-color-background);
+  --navds-button-color-secondary-background-hover: var(
+    --navds-color-action-hover
+  );
+  --navds-button-color-secondary-background-active: var(
+    --navds-color-action-active
+  );
 
-  /* tertiary */
-  --navds-button-color-tertiary-border: transparent;
-  --navds-button-color-tertiary-background: transparent;
+  /* Tertiary */
+  --navds-button-color-tertiary-text: var(--navds-color-action-default);
+  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
   --navds-button-color-tertiary-border-hover: var(--navds-color-action-default);
   --navds-button-color-tertiary-border-focus: var(--navds-color-action-default);
   --navds-button-color-tertiary-border-active: var(--navds-color-white);
-  --navds-button-color-tertiary-text-active: var(--navds-color-text-inverse);
   --navds-button-color-tertiary-background-active: var(
     --navds-color-action-active
   );
@@ -43,9 +39,7 @@
   /* Danger */
   --navds-button-color-danger-text: var(--navds-color-white);
   --navds-button-color-danger-background: var(--navds-color-danger-default);
-  --navds-button-color-danger-border: var(--navds-color-danger-default);
   --navds-button-color-danger-background-hover: var(--navds-color-danger-hover);
-  --navds-button-color-danger-border-hover: var(--navds-color-danger-hover);
   --navds-button-color-danger-background-active: var(
     --navds-color-danger-active
   );
@@ -59,25 +53,31 @@
 .navds-button {
   display: inline-flex;
   cursor: pointer;
-  background-color: var(--navds-button-color-background);
-  color: var(--navds-button-color-text);
   margin: 0;
   text-align: center;
   text-decoration: none;
-  border-color: var(--navds-button-color-border);
+  border: none;
+  background: none;
   border-radius: 2px;
-  border-style: solid;
-  border-width: 2px;
-  min-height: 48px;
   min-width: 48px;
-  padding: var(--navds-spacing-2) var(--navds-spacing-2);
-  flex-shrink: 0;
+  padding: var(--navds-spacing-3);
+}
+
+.navds-button--small {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  min-width: 32px;
+}
+
+.navds-button:focus {
+  outline: none;
+  box-shadow: var(--navds-shadow-focus);
 }
 
 .navds-button__inner {
+  margin: auto;
   display: flex;
   align-items: center;
-  margin: auto;
   gap: var(--navds-spacing-2);
 }
 
@@ -89,42 +89,60 @@
   font-size: 1.25rem;
 }
 
-.navds-button--small {
-  padding: var(--navds-spacing-1) var(--navds-spacing-2);
-  min-height: 32px;
+/*************************
+ * .navds-button--primary *
+ *************************/
+
+.navds-button--primary {
+  background-color: var(--navds-button-color-primary-background);
+  color: var(--navds-button-color-primary-text);
 }
 
-.navds-button:focus {
-  outline: none;
-  box-shadow: var(--navds-shadow-focus);
+.navds-button--primary:hover {
+  background-color: var(--navds-button-color-primary-background-hover);
+}
+
+.navds-button--primary:active {
+  background-color: var(--navds-button-color-primary-background-active);
+}
+
+.navds-button--primary:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus),
+    var(--navds-shadow-focus);
 }
 
 /**************************
  * .navds-button--secondary *
  **************************/
 
+.navds-button--secondary {
+  color: var(--navds-button-color-secondary-text);
+  background-color: var(--navds-button-color-secondary-background);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+}
+
 .navds-button--secondary:hover {
   color: var(--navds-button-color-secondary-text-hover);
   background-color: var(--navds-button-color-secondary-background-hover);
-  border-color: transparent;
+  box-shadow: none;
+}
+
+.navds-button--secondary:focus {
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border),
+    var(--navds-shadow-focus);
 }
 
 .navds-button--secondary:active {
   color: var(--navds-button-color-secondary-text-active);
   background-color: var(--navds-button-color-secondary-background-active);
-  border-color: transparent;
-}
-
-.navds-button--secondary:focus:hover {
-  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
-  border-width: 1px;
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+  box-shadow: none;
 }
 
+.navds-button--secondary:focus:hover,
 .navds-button--secondary:focus:active {
-  border-color: var(--navds-button-color-secondary-border-focus-active-hover);
-  border-width: 1px;
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+  box-shadow: inset 0 0 0 1px
+      var(--navds-button-color-secondary-border-focus-active-hover),
+    var(--navds-shadow-focus);
 }
 
 /****************************
@@ -132,76 +150,49 @@
  ****************************/
 
 .navds-button--tertiary {
-  border-color: var(--navds-button-color-tertiary-border);
-  background-color: var(--navds-button-color-tertiary-background);
+  color: var(--navds-button-color-tertiary-text);
 }
 
 .navds-button--tertiary:hover {
-  border-color: var(--navds-button-color-tertiary-border-hover);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-hover);
 }
 
 .navds-button--tertiary:focus {
-  border-color: var(--navds-button-color-tertiary-border-focus);
+  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus),
+    var(--navds-shadow-focus);
 }
 
 .navds-button--tertiary:active {
   color: var(--navds-button-color-tertiary-text-active);
   background-color: var(--navds-button-color-tertiary-background-active);
-  border-color: var(--navds-button-color-tertiary-border-active);
-  border-width: 1px;
-  padding: calc(0.5rem + 1px) calc(0.5rem + 1px);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
 }
 
-.navds-button--small.navds-button--tertiary:active {
-  padding: calc(0.25rem + 1px) calc(0.5rem + 1px);
+.navds-button--tertiary:active:focus {
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active),
+    var(--navds-shadow-focus);
 }
 
 /*************************
- * .navds-button--primary *
  * .navds-button--danger *
  *************************/
 
-.navds-button--primary {
-  background-color: var(--navds-button-color-primary-background);
-  border-color: var(--navds-button-color-primary-border);
-  color: var(--navds-button-color-primary-text);
-}
-
 .navds-button--danger {
   background-color: var(--navds-button-color-danger-background);
-  border-color: var(--navds-button-color-danger-border);
   color: var(--navds-button-color-danger-text);
 }
 
-.navds-button--primary,
-.navds-button--danger {
-  border-width: 1px;
-}
-
-.navds-button--primary:hover {
-  background-color: var(--navds-button-color-primary-background-hover);
-  border-color: var(--navds-button-color-primary-border-hover);
-}
-
 .navds-button--danger:hover {
   background-color: var(--navds-button-color-danger-background-hover);
-  border-color: var(--navds-button-color-danger-border-hover);
-}
-
-.navds-button--primary:active {
-  background-color: var(--navds-button-color-primary-background-active);
 }
 
 .navds-button--danger:active {
   background-color: var(--navds-button-color-danger-background-active);
 }
 
-.navds-button--primary:focus {
-  border-color: var(--navds-button-color-primary-border-focus);
-}
-
 .navds-button--danger:focus {
-  border-color: var(--navds-button-color-danger-border-focus);
+  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus),
+    var(--navds-shadow-focus);
 }
 
 /**************************
@@ -212,11 +203,6 @@
   color: var(--navds-button-color-text-disabled);
   background-color: var(--navds-button-color-background-disabled);
   cursor: not-allowed;
-  border-width: 0;
   box-shadow: none;
   transform: none;
 }
-
-.navds-button:disabled.navds-button--tertiary:active {
-  padding: var(--navds-spacing-2) var(--navds-spacing-2);
-}

@navikt/core/css/form/radio.css

@@ -74,7 +74,6 @@
   border: 1px solid var(--navds-radio-color-border);
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: 4px;
   flex-shrink: 0;
   border-radius: 50%;
 }

@navikt/core/css/form/search-field.css

@@ -29,34 +29,21 @@
   border-bottom-left-radius: 0;
 }
 
+.navds-search-field__input-wrapper > :last-child:first-child {
+  border-radius: 4px;
+}
+
 .navds-search-field__input-wrapper :focus {
   z-index: var(--navds-z-index-focus);
 }
 
+.navds-search-field__button,
+.navds-search-field__clear-button {
+  flex-shrink: 0;
+}
+
 .navds-search-field--error
   .navds-search-field__input:not(:hover):not(:focus):not(:disabled) {
   box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
   border-color: var(--navds-search-field-color-border-error);
 }
-
-.navds-search-field__clear-button {
-  background-color: initial;
-  border: 1px solid var(--navds-search-field-color-clearbutton-border);
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-  padding: 0 0.5rem;
-}
-
-.navds-search-field__clear-button:focus {
-  border-color: transparent;
-}
-
-.navds-search-field__clear-button:not(:first-child) {
-  border-left: none;
-}
-
-.navds-search-field__clear-button:not(:last-child) {
-  border-right: none;
-}

@navikt/core/css/index.css

@@ -7,8 +7,6 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
-@import "internal-header.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
@@ -20,6 +18,7 @@
 @import "panel.css";
 @import "link-panel.css";
 @import "speech-bubble.css";
+@import "table.css";
 
 /* Navno spesific packages */
 @import "page-header.css";

@navikt/core/css/loader.css

@@ -88,7 +88,7 @@
   stroke: var(--navds-loader-color-on-button-background);
 }
 
-.navds-button--action .navds-loader .navds-loader__background,
+.navds-button--primary .navds-loader .navds-loader__background,
 .navds-button--danger .navds-loader .navds-loader__background {
   stroke: var(--navds-loader-color-on-button-background);
 }

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "private": false,
   "description": "Css for NAV Designsystem components",
   "author": "NAV Designsystem team",
@@ -18,13 +18,13 @@
   "main": "./dist/index.css",
   "scripts": {
     "build": "postcss --use postcss-import -o dist/index.css index.css",
-    "watch-css": "postcss -w --use postcss-import -o dist/index.css index.css"
+    "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^0.5.0",
+    "@navikt/ds-tokens": "^0.5.3",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.2.7",
+    "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.0"
+    "postcss-import": "^14.0.2"
   }
 }

@navikt/core/css/page-header.css

@@ -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);
   }
 }

@navikt/core/css/speech-bubble.css

@@ -71,9 +71,12 @@
 .navds-speechbubble--right .navds-speechbubble__bubble {
   border-radius: 12px;
   border-bottom-right-radius: 2px;
-  align-items: flex-end;
 }
 
 .navds-speechbubble__top-text {
   color: var(--navds-speechbubble-color-detail-text);
 }
+
+.navds-speechbubble--right .navds-speechbubble__top-text {
+  align-self: flex-end;
+}

@navikt/core/css/table.css

@@ -0,0 +1,28 @@
+.navds-table {
+  border-collapse: collapse;
+  width: 100%;
+  display: table;
+}
+
+.navds-table__header {
+  display: table-header-group;
+}
+
+.navds-table__body {
+  display: table-row-group;
+}
+
+.navds-table__row {
+  display: table-row;
+}
+
+.navds-table__cell {
+  display: table-cell;
+  padding: var(--navds-spacing-4);
+  text-align: left;
+  border-bottom: var(--navds-border-default);
+}
+
+.navds-table--small .navds-table__cell {
+  padding: var(--navds-spacing-2);
+}

@navikt/core/css/typography.css

@@ -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;
 }
 

@navikt/core/icons/.gitignore

@@ -0,0 +1,2 @@
+/src
+/png

@navikt/core/icons/README.md

@@ -1,6 +1,6 @@
 # @navikt/ds-icons
 
-Denne pakken leverer [NAV sine ikoner](https://design.nav.no/resources/icons) i en pakke med React-komponenter og SVG er.
+Denne pakken leverer [NAVs ikoner](https://design.nav.no/resources/icons) i en pakke med React-komponenter og SVGer.
 
 ## Installering
 

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.2",
+  "version": "0.5.6",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -25,26 +25,26 @@
     "/svg"
   ],
   "scripts": {
-    "create-package-json-pointers-to-esm": "node ../../utilities/scripts/createPackageJsonsWithESMPointers.js",
+    "create-package-json-pointers-to-esm": "node ../../../utilities/scripts/createPackageJsonsWithESMPointers.js",
     "dl-icons": "FILE_KEY=UmEVH3pZ71uJPsSz9ilP3Y node --experimental-modules --es-module-specifier-resolution=node -r dotenv/config figma-api/index.mjs dotenv_config_path=figma-api/.env",
     "create-icons": "svgr --silent --typescript --ref --icon --title-prop --replace-attr-values \"#262626=currentColor\" -d src svg",
     "convert-icons": "node figma-api/pngConverter.mjs",
-    "clean": "rimraf src esm cjs png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "clean": "rimraf src png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
     "zip-icons": "node figma-api/zipIcons.mjs",
-    "build": "npm run clean && npm run create-icons && tsc && tsc -p tsconfig-esm.json && yarn create-package-json-pointers-to-esm && npm 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"
   },
   "devDependencies": {
-    "@svgr/cli": "^5.4.0",
+    "@svgr/cli": "^5.5.0",
     "copyfiles": "^2.4.1",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.startcase": "4.4.0",
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
-    "sharp": "0.27.1",
+    "sharp": "0.29.1",
     "zip-dir": "^2.0.0"
   }
 }

@navikt/core/icons/svg/AttachmentFilled.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1502 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06213 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4858 7.11888C20.7324 5.94771 20.7324 4.04887 19.4858 2.87769C18.2838 1.74835 16.3616 1.70802 15.1081 2.75669L14.9716 2.87769L3.6862 13.4807L3.52649 13.6372C1.61004 15.5983 1.66328 18.6487 3.6862 20.5493C4.61095 21.4181 5.79143 21.9002 7 21.9956V22H24V24L7 24C5.24586 23.9013 3.52179 23.2223 2.18147 21.963C-0.666561 19.2872 -0.725895 14.9835 2.00347 12.2399L2.18147 12.0669L13.4669 1.46396C15.5445 -0.487988 18.913 -0.487988 20.9905 1.46396C23.0135 3.36455 23.0667 6.41493 21.1503 8.37603L20.9905 8.53261L9.7051 19.1356L9.56865 19.2566C8.31517 20.3053 6.39296 20.2649 5.19092 19.1356C3.98889 18.0062 3.94596 16.2003 5.06214 15.0226L5.19092 14.8944L16.4764 4.29142L17.9811 5.70515L6.69565 16.3081L6.61297 16.3953C6.28225 16.7877 6.30981 17.3593 6.69565 17.7219C7.08149 18.0844 7.68993 18.1103 8.10757 17.7995L8.20038 17.7219L19.4858 7.11888Z" fill="#262626"/>
 </svg>