Merge branch 'docs/getting-started-for-designers' of https://github.c…

…om/digdir/designsystemet into docs/getting-started-for-designers

.github/workflows/check-storefront.yml

@@ -1,15 +1,10 @@
-# Runs conventional commit check on PR
-name: Checks storefront
+name: Checks Storefront
 on:
   workflow_dispatch:
   pull_request:
-    branches:
-      - main
     paths:
       - 'apps/storefront/**'
   push:
-    branches:
-      - main
     paths:
       - 'apps/storefront/**'
 jobs:

.github/workflows/checks-packages.yml

@@ -1,16 +1,11 @@
-# Runs conventional commit check on PR
-name: Checks packages
+name: Checks Packages
 on:
   workflow_dispatch:
   pull_request:
-    branches:
-      - main
     paths:
       - 'packages/**'
       - '*.*js'
   push:
-    branches:
-      - main
     paths:
       - 'packages/**'
 jobs:

.github/workflows/conventional-pr.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - next
     types:
       - opened
       - edited

.github/workflows/development-deploy.yml → .github/workflows/deploy-dev.yml

@@ -1,4 +1,4 @@
-name: Deploy Development Production
+name: Deploy Development
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_DEVELOPMENT }}
@@ -7,6 +7,7 @@ on:
   push:
     branches:
       - main
+      - next
     paths:
       - 'apps/dev/**'
 jobs:

.github/workflows/deploy-storefront.yml

@@ -0,0 +1,59 @@
+name: Deploy Storefront
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STOREFRONT }}
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        type: choice
+        default: next
+        description: Deploy to environment
+        options:
+          - production
+          - next
+  push:
+    branches:
+      - next
+    paths:
+      - 'apps/storefront/**'
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v4
+        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: Set default environment value if push event is triggered
+        id: defaultenvironment
+        run: |
+          ENVIRONMENT=${{ github.event.inputs.environment }}
+          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - id: deploy
+        name: Deploy Project Artifacts to Vercel
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+
+      - name: Set Vercel alias
+        run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.designsystemet.no
+        if: steps.defaultenvironment.outputs.value == 'next'

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

@@ -8,6 +8,7 @@ on:
     inputs:
       environment:
         type: choice
+        default: next
         description: Deploy to environment
         options:
           - production

.github/workflows/deploy-theme.yml

@@ -0,0 +1,63 @@
+name: Deploy Theme
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_THEME }}
+on:
+  workflow_dispatch:
+    inputs:
+      environment:
+        type: choice
+        default: next
+        description: Deploy to environment
+        options:
+          - production
+          - next
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - 'apps/theme/**'
+  push:
+    branches:
+      - next
+    paths:
+      - 'apps/theme/**'
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use node 20 and yarn cache
+        uses: actions/setup-node@v4
+        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: Set default environment value if push event is triggered
+        id: defaultenvironment
+        run: |
+          ENVIRONMENT=${{ github.event.inputs.environment }}
+          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+
+      - id: deploy
+        name: Deploy Project Artifacts to Vercel
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+
+      - name: Set Vercel alias
+        run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.theme.designsystemet.no
+        if: steps.defaultenvironment.outputs.value == 'next'

.github/workflows/storefront-preview.yml → .github/workflows/preview-storefront.yml

@@ -1,4 +1,4 @@
-name: Deploy Storefront Preview
+name: Deploy Storefront PR
 env:
   VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

.github/workflows/storybook-preview.yml → .github/workflows/preview-storybook.yml

@@ -1,4 +1,4 @@
-name: Deploy Storybook PR Preview
+name: Deploy Storybook PR
 env:
   VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

apps/storefront/components/ImageBanner/ImageBanner.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import type React from 'react';
+import type { ButtonProps } from '@digdir/designsystemet-react';
 import { useEffect, useState, createElement } from 'react';
 import cn from 'clsx';
 import { Link, Button } from '@digdir/designsystemet-react';
@@ -33,6 +34,8 @@ type ImageSectionButtonProps = {
   text: string;
   prefix?: React.ReactNode;
   href: string;
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
 };
 
 const ImageBanner = ({
@@ -126,7 +129,8 @@ const ImageBanner = ({
                 <Button
                   key={index}
                   asChild
-                  variant='secondary'
+                  variant={item.variant ?? 'secondary'}
+                  color={item.color}
                 >
                   <a
                     href={item.href}

apps/storefront/pages/index.mdx

@@ -94,6 +94,7 @@ export default ({ children }) => <FrontpageLayout content={children} />;
       text: 'Bli med på Slack',
       href: 'https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ',
       prefix: <PersonChatIcon fontSize={24} />,
+      variant: 'primary'
     },
     {
       text: 'Bidra på GitHub',