Lerna versionbump [ci skip]

- @navikt/ds-icons@0.6.0
 - @navikt/ds-react@0.12.0
 - @navikt/ds-react-internal@0.7.0

.github/workflows/update-icons.yml

@@ -0,0 +1,45 @@
+name: Update Icons
+
+on:
+  schedule:
+    - cron: 0 0 * * *
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Required to retrieve git history
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - name: Node-modules cache
+        uses: actions/cache@v2
+        id: node-cache
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+      - 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: add Figma token to .env
+        run: echo "FIGMA_TOKEN=${{ secrets.FIGMA_IKONER_API }}" >> @navikt/core/icons/.env
+      - name: Update Icons
+        run: yarn update:icons
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v3
+        with:
+          token: ${{ secrets.GIT_REPO }}
+          commit-message: "Oppdatert ikoner fra figma"
+          committer: GitHub <noreply@github.com>
+          branch: figma-icons-sync
+          delete-branch: true
+          title: "[FIX] Automatisk PR for ikoner"
+          labels: |
+            Icons
+            automated pr

.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
   ],
   addons: [
     "@storybook/addon-docs",
+    "@storybook/addon-a11y",
     {
       name: "@storybook/addon-storysource",
       options: {

.storybook/stories/introduction.stories.mdx

@@ -20,3 +20,16 @@ import "@navikt/ds-css"
 Dette vil også legge css-variabler på :root. For å få dette til å fungere med IE11, kan denne pakken tas i bruk: https://jhildenbiddle.github.io/css-vars-ponyfill/#/
 
 Note: Disse komponentene kan ikke garanteres at fungerer som forventet i IE11 da vi har valgt og ikke unngå styling-valg basert på IE11 støtte eller ikke.
+
+## Bruke styled-components eller emotion
+
+Flere av våre komponenter er implementert med OverridableComponent. Dette vil si at komponenten tar i mot en prop, `as` som lar deg endre hvilken tag som blir satt.
+Bruk for dette er eks hvis du ønsker `Heading` stilen, men ikke en heading-tag. Da kan man lett skrive `<Heading as="div">` og man vil få en `div`-tag istedenfor.
+
+Flere css-in-js bibliotek har også denne funksjonaliteten bygd inne, noe som kan komplisere ting når alle bruker samme navn `as` for dette.
+
+### Løsninger
+
+[Styled-components](https://styled-components.com/docs/api#forwardedas-prop)
+
+> TLDR: Bruk `forwardedAs` istendenfor `as` på komponentene, SD fikser resten.

.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.

.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`
 
@@ -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.

@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/index.css

@@ -7,7 +7,6 @@
 @import "alert.css";
 @import "button.css";
 @import "content-container.css";
-@import "copy-to-clipboard.css";
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "0.9.2",
+  "version": "0.10.0",
   "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",

@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/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/.svgrrc.js

@@ -0,0 +1,16 @@
+const template = require("./template");
+
+module.exports = {
+  typescript: true,
+  ref: true,
+  icon: true,
+  titleProp: true,
+  svgProps: {
+    focusable: false,
+    role: "img",
+  },
+  replaceAttrValues: {
+    "#262626": "currentColor",
+  },
+  template,
+};

@navikt/core/icons/README.md

@@ -1,6 +1,6 @@
 # @navikt/ds-icons
 
-Denne pakken leverer [NAVs ikoner](https://design.nav.no/resources/icons) i en pakke med React-komponenter og SVGer.
+Leverer [NAVs ikoner](https://design.nav.no/resources/icons) i React og SVG.
 
 ## Installering
 
@@ -12,7 +12,17 @@ yarn add @navikt/ds-icons
 npm install @navikt/ds-icons
 ```
 
+## Bruk
+
+```jsx
+/* ESM (anbefalt for tree-shaking)*/
+import { Down } from "@navikt/ds-icons";
+/* CJS */
+import { Down } from "@navikt/cjs/ds-icons";
+
+<Down aria-label="Åpne meny" />;
+```
+
 ## Dokumentasjon
 
 - [Ikonsøk](https://design.nav.no/resources/icons)
-- [Installering](https://design.nav.no/resources/icons/install)

@navikt/core/icons/figma-api/api.mjs

@@ -1,49 +0,0 @@
-// https://levelup.gitconnected.com/learn-svg-to-react-using-figma-api-be0a5f9c0ca
-// used for reference/implementation
-
-import Axios from "axios";
-const { create, get } = Axios;
-
-// Requires user to add a personalized figma token in .env
-const headers = {
-  "X-FIGMA-TOKEN": process.env.FIGMA_TOKEN,
-};
-/**
- * Api connection for icon components
- * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/NAV-ikoner-2.1-Figma-i-test?node-id=0%3A1
- */
-const instanceFiles = create({
-  baseURL: `https://api.figma.com/v1/files/${process.env.FILE_KEY}/components`,
-  headers,
-});
-
-/**
- * api endpoint for images
- */
-const instanceImages = create({
-  baseURL: `https://api.figma.com/v1/images/${process.env.FILE_KEY}`,
-  headers,
-});
-
-/**
- * get Figma node components children
- */
-export const getNodeChildren = async () => {
-  const { data } = await instanceFiles.get();
-  return data.meta.components;
-};
-
-/**
- * get svg image resource urls
- */
-export const getSvgImageUrls = async (nodeIds) => {
-  const {
-    data: { images },
-  } = await instanceImages.get(`/?ids=${nodeIds}&format=svg`);
-  return Object.values(images);
-};
-
-/**
- * Gets raw svg data from url
- */
-export const getIconContent = async (url) => get(url);

@navikt/core/icons/figma-api/index.mjs

@@ -1,105 +0,0 @@
-import { getNodeChildren, getSvgImageUrls, getIconContent } from "./api";
-import { existsSync, unlinkSync, writeFileSync, mkdirSync } from "fs";
-import { resolve } from "path";
-import pLimit from "p-limit";
-import rimraf from "rimraf";
-import startCase from "lodash.startcase";
-
-const generateMetadata = (iconNodesArr) => {
-  return iconNodesArr
-    .map(({ name, description, created_at, updated_at, containing_frame }) => {
-      return {
-        name: startCase(name).replace(/\s/g, ""),
-        description,
-        created_at,
-        updated_at,
-        //strip emojis
-        pageName: containing_frame.pageName.replace(
-          /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
-          ""
-        ),
-        visible: true,
-      };
-    })
-    .sort((a, b) => a.name.localeCompare(b.name));
-};
-
-const main = async () => {
-  const iconFolder = "./svg";
-  const metadataFileName = "./figma-api/metadata.json";
-  const misses = [];
-
-  // Limiting to ~20 concurrent downloads seems to lead to fewer erros
-  const limit = pLimit(20);
-
-  const iconNodesArr = await getNodeChildren().catch((e) => {
-    throw e;
-  });
-
-  if (existsSync(metadataFileName)) {
-    unlinkSync(metadataFileName);
-  }
-  writeFileSync(
-    metadataFileName,
-    JSON.stringify(generateMetadata(iconNodesArr), null, 4),
-    {
-      encoding: "utf8",
-    }
-  );
-
-  const iconUrls = await getSvgImageUrls(
-    iconNodesArr.map((node) => node.node_id).join(",")
-  );
-
-  if (existsSync(iconFolder)) {
-    rimraf.sync(iconFolder);
-  }
-  mkdirSync(iconFolder);
-
-  console.log("Total icons: " + iconNodesArr.length);
-
-  await Promise.all(
-    iconUrls.map((url, x) =>
-      limit(() =>
-        getIconContent(url)
-          .then(({ data }) => {
-            writeFileSync(
-              resolve(
-                iconFolder,
-                `${startCase(iconNodesArr[x].name).replace(/\s/g, "")}.svg`
-              ),
-              data,
-              {
-                encoding: "utf8",
-              }
-            );
-          })
-          .catch((e) => {
-            misses.push({
-              name: iconNodesArr[x].name,
-              error: e.message,
-            });
-          })
-      )
-    )
-  );
-
-  if (misses.length > 0) {
-    writeFileSync(
-      resolve("./", `misses.txt`),
-      JSON.stringify(misses, null, 4),
-      {
-        encoding: "utf8",
-      }
-    );
-    console.log(`\nCould not download ${misses.length} icons\n`);
-  } else {
-    console.log("\nDownloaded all icons from Figma successfully!\n");
-  }
-};
-
-try {
-  main();
-} catch (e) {
-  console.error(e);
-}

@navikt/core/icons/figma/api.ts

@@ -0,0 +1,48 @@
+import Axios from "axios";
+const { create, get } = Axios;
+
+const FILE_KEY = "UmEVH3pZ71uJPsSz9ilP3Y";
+
+const FigmaAxion = (token?: string) =>
+  create({
+    headers: {
+      "X-FIGMA-TOKEN": token,
+    },
+  });
+
+/**
+ * Published Figma-components
+ * https://www.figma.com/file/UmEVH3pZ71uJPsSz9ilP3Y/%F0%9F%92%A0NAV-ikoner-2.5-Figma
+ */
+export const getPublishedIcons = async () => {
+  const { data } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(`https://api.figma.com/v1/files/${FILE_KEY}/components`)
+    .catch((e) => {
+      console.log("Failed getPublishedIcons ");
+      throw e;
+    });
+  return data?.meta?.components;
+};
+
+/**
+ * Downloadable link to each icon in SVG-format
+ */
+export const getIconsDownloadableUrl = async (nodeIds: string) => {
+  const {
+    data: { images },
+  } = await FigmaAxion(process.env.FIGMA_TOKEN)
+    .get(
+      `https://api.figma.com/v1/images/${FILE_KEY}/?ids=${nodeIds}&format=svg`
+    )
+    .catch((e) => {
+      console.log("Failed getIconsDownloadableUrl ");
+      throw e;
+    });
+
+  return Object.values(images) as string[];
+};
+
+/**
+ * Download icon @url
+ */
+export const getIconContent = async (url: string) => get(url);

@navikt/core/icons/figma/index.ts

@@ -0,0 +1,85 @@
+import {
+  getPublishedIcons,
+  getIconsDownloadableUrl,
+  getIconContent,
+} from "./api";
+import { existsSync, writeFileSync, mkdirSync } from "fs";
+import { resolve } from "path";
+import pLimit from "p-limit";
+import rimraf from "rimraf";
+import startCase from "lodash.startcase";
+import { writeMeta } from "./write-meta";
+import dotenv from "dotenv";
+dotenv.config();
+
+export type ComponentT = {
+  key: string;
+  file_key: string;
+  node_id: string;
+  thumbnail_url: string;
+  name: string;
+  description: string;
+  updated_at: string;
+  created_at: string;
+  user: any;
+  containing_frame: any;
+};
+
+const main = async () => {
+  if (!process.env.FIGMA_TOKEN) {
+    throw new Error("FIGMA_TOKEN not set in .env");
+  }
+  const iconFolder = "./svg";
+
+  // Limiting to ~20 concurrent downloads seems to lead to less errors
+  const limit = pLimit(20);
+
+  const publishedIconNodes: ComponentT[] = await getPublishedIcons();
+
+  writeMeta(publishedIconNodes);
+  /* Get all urls in one fetch rather than 300+ */
+  const iconUrls: string[] = await getIconsDownloadableUrl(
+    publishedIconNodes.map((node) => node.node_id).join(",")
+  );
+
+  if (existsSync(iconFolder)) {
+    rimraf.sync(iconFolder);
+  }
+  mkdirSync(iconFolder);
+
+  console.log("Total icons: " + publishedIconNodes.length);
+
+  await Promise.all(
+    iconUrls.map((url, x) =>
+      limit(() =>
+        getIconContent(url)
+          .then(({ data }) => {
+            writeFileSync(
+              resolve(
+                iconFolder,
+                `${startCase(publishedIconNodes[x].name).replace(
+                  /\s/g,
+                  ""
+                )}.svg`
+              ),
+              data,
+              {
+                encoding: "utf8",
+              }
+            );
+          })
+          .catch((e) => {
+            throw e;
+          })
+      )
+    )
+  );
+
+  console.log("\nDownloaded all icons from Figma!\n");
+};
+
+try {
+  main();
+} catch (e) {
+  throw e;
+}

@navikt/core/icons/figma/write-meta.ts

@@ -0,0 +1,35 @@
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import startCase from "lodash.startcase";
+import { ComponentT } from ".";
+
+const generateMetadata = (publishedIconNodes: ComponentT[]) => {
+  return publishedIconNodes
+    .map(({ name, description, created_at, containing_frame }) => {
+      return {
+        name: startCase(name).replace(/\s/g, ""),
+        description,
+        created_at,
+        // strip emojis
+        pageName: containing_frame.pageName.replace(
+          /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+          ""
+        ),
+      };
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+};
+
+export const writeMeta = (publishedIconNodes: ComponentT[]) => {
+  const metadataFileName = "./meta.json";
+
+  if (existsSync(metadataFileName)) {
+    unlinkSync(metadataFileName);
+  }
+  writeFileSync(
+    metadataFileName,
+    JSON.stringify(generateMetadata(publishedIconNodes)),
+    {
+      encoding: "utf8",
+    }
+  );
+};

@navikt/core/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "private": false,
   "description": "NAVs egne ikoner i SVG og React format",
   "repository": {
@@ -22,22 +22,28 @@
     "/cjs",
     "/esm",
     "/src",
-    "/svg"
+    "/svg",
+    "/meta.json"
   ],
   "scripts": {
     "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 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"
+    "create-icons": "svgr --out-dir src svg",
+    "convert-icons": "node scripts/pngConverter.mjs",
+    "clean": "rimraf src cjs esm png NAV-ikonpakke-png.zip NAV-ikonpakke-svg.zip",
+    "zip-icons": "node scripts/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",
+    "update": "ts-node figma/index.ts dotenv/config"
+  },
+  "dependencies": {
+    "uuid": "^8.3.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^5.5.0",
+    "@types/lodash.startcase": "^4.4.6",
+    "@types/uuid": "^8.3.1",
     "copyfiles": "^2.4.1",
     "dotenv": "^10.0.0",
     "lodash.kebabcase": "^4.1.1",
@@ -45,6 +51,7 @@
     "react": "^16.8.0 || ^17.0.0",
     "rimraf": "3.0.2",
     "sharp": "0.29.1",
+    "ts-node": "^10.4.0",
     "zip-dir": "^2.0.0"
   }
 }

@navikt/core/icons/stories/icons.stories.mdx

@@ -16,9 +16,7 @@ yarn add @navikt/ds-icons
 Import { Expand } from `@navikt/ds-icons`;
 
 <Expand
-	aria-label="Åpne meny"
-	role="img"
-	focusable="false"
+	title="Åpne meny"
 />
 ```