Merge branch 'main' into docs/guidelines-checkbox

.eslintignore

@@ -4,3 +4,4 @@ dist/
 coverage/
 storybook-static/
 packages/tokens/brand/**/*
+tsc-build/

.eslintrc.js

@@ -47,6 +47,8 @@ module.exports = {
     'react/display-name': 'off',
     'import/no-unresolved': 'error',
     'import/namespace': ['error', { allowComputed: true }],
+    'import/no-named-as-default': 'off',
+    '@next/next/no-html-link-for-pages': ['error', '/storefront/pages/'],
     'import/order': [
       'warn',
       {

.github/workflows/check-storefront.yml

@@ -0,0 +1,38 @@
+# Runs conventional commit check on PR
+name: Checks storefront
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'storefront/**'
+  push:
+    branches:
+      - main
+    paths:
+      - 'storefront/**'
+jobs:
+  checks:
+    name: Builds, lints and tests code
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build packages
+        run: yarn build
+      - name: Build storefront
+        run: yarn build:storefront
+      - name: Lint Code
+        run: yarn lint ./storefront
+      - name: Lint CSS
+        run: yarn lint-style ./storefront/**/*.css
+      - name: Test
+        run: yarn test

.github/workflows/checks.yml → .github/workflows/checks-packages.yml

@@ -1,16 +1,20 @@
 # Runs conventional commit check on PR
-name: Checks
+name: Checks packages
 on:
   workflow_dispatch:
   pull_request:
     branches:
       - main
+    paths:
+      - 'packages/**'
   push:
     branches:
       - main
+    paths:
+      - 'packages/**'
 jobs:
   checks:
-    name: Checks, builds and tests code
+    name: Builds, lints and tests code
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository

.github/workflows/storybook-deploy-vercel.yml

@@ -0,0 +1,41 @@
+name: Deploy Storybook Production
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STORYBOOK }}
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    name: Build & deploy to Vercel
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn build
+
+      - name: Install Vercel CLI
+        run: yarn add vercel@latest
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+
+      - id: deploy
+        name: Deploy Project Artifacts to Vercel
+        run: echo "url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT

.gitignore

@@ -1,6 +1,7 @@
 # Built files
 dist
 ignore
+tsc-build
 
 # Yarn stuff; we're not using PnP/Zero installs
 .pnp.*

CODEOWNERS

@@ -1 +1 @@
-* @mimarz @Thuneer @TomasEng @framitdavid @Magnusrm
+* @mimarz @Thuneer @Barsnes @Magnusrm

README.md

@@ -52,6 +52,11 @@
 
 ---
 
+## Quick links
+
+- [Storefront](https://designsystemet.no)
+- [Storybook](https://digdir.github.io/designsystem/)
+
 ## About the design system 📖
 
 The Common Designsystem is a collection of important design elements and building blocks that can be used when creating different services. It's like a toolbox that everyone can use to work together and create the best foundation for public services across the country. By using this Designsystem, we aim to create consistent and user-friendly experiences in digital solutions for public services, making them more efficient and reliable.

design-tokens/Base/Semantic.json

@@ -78,76 +78,6 @@
         "checked": {
           "value": "{colors.blue.700}",
           "type": "color"
-        },
-        "primary": {
-          "subtle": {
-            "value": "{colors.blue.100}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.800}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          },
-          "no_fill": {
-            "value": "{colors.white}",
-            "type": "color"
-          },
-          "no_fill-hover": {
-            "value": "{colors.blue.100}",
-            "type": "color"
-          },
-          "no_fill-active": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "subtle": {
-            "value": "{colors.grey.100}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.grey.200}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "rgba({colors.blue.900}, 0.9)",
-            "type": "color"
-          },
-          "active": {
-            "value": "rgba({colors.blue.900}, 0.8)",
-            "type": "color",
-            "description": "Standard farge for handlinger"
-          },
-          "no_fill": {
-            "value": "{colors.white}",
-            "type": "color"
-          },
-          "no_fill-hover": {
-            "value": "rgba({colors.blue.900}, 0.1)",
-            "type": "color"
-          },
-          "no_fill-active": {
-            "value": "rgba({colors.blue.900}, 0.2)",
-            "type": "color"
-          }
         }
       },
       "success": {
@@ -304,50 +234,6 @@
         "dark-hover": {
           "value": "{colors.blue.700}",
           "type": "color"
-        },
-        "primary": {
-          "subtle": {
-            "value": "{colors.blue.200}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.blue.400}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.800}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "subtle": {
-            "value": "{colors.grey.200}",
-            "type": "color"
-          },
-          "subtle-hover": {
-            "value": "{colors.grey.300}",
-            "type": "color"
-          },
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          }
         }
       },
       "neutral": {
@@ -490,42 +376,6 @@
         "on_action": {
           "value": "{colors.white}",
           "type": "color"
-        },
-        "primary": {
-          "default": {
-            "value": "{colors.blue.700}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "#004e95",
-            "type": "color"
-          },
-          "active": {
-            "value": "#00315d",
-            "type": "color"
-          },
-          "on_action": {
-            "value": "{colors.white}",
-            "type": "color"
-          }
-        },
-        "secondary": {
-          "default": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "hover": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "active": {
-            "value": "{colors.blue.900}",
-            "type": "color"
-          },
-          "on_action": {
-            "value": "{colors.white}",
-            "type": "color"
-          }
         }
       },
       "warning": {
@@ -856,6 +706,20 @@
       }
     },
     "error_message": {
+      "large": {
+        "value": {
+          "fontFamily": "{fontFamilies.inter}",
+          "fontWeight": "{fontWeights.regular}",
+          "lineHeight": "{lineHeights.300}",
+          "fontSize": "{font-size.f1}",
+          "letterSpacing": "{letterSpacing.1}",
+          "paragraphSpacing": "{paragraphSpacing.0}",
+          "paragraphIndent": "{paragraphIndent.0}",
+          "textCase": "{textCase.none}",
+          "textDecoration": "{textDecoration.none}"
+        },
+        "type": "typography"
+      },
       "medium": {
         "value": {
           "fontFamily": "{fontFamilies.inter}",