Merge branch 'next' into chore/understanding-color-scale

digdir · Mar 4, 2025 · cdbd5ff · cdbd5ff
2 parents c11ca25 + 675508e
commit cdbd5ff
Show file tree

Hide file tree

Showing 187 changed files with 2,890 additions and 3,628 deletions.
diff --git a/.changeset/beige-needles-matter.md b/.changeset/beige-needles-matter.md
diff --git a/.changeset/breezy-walls-change.md b/.changeset/breezy-walls-change.md
diff --git a/.changeset/eleven-hounds-mix.md b/.changeset/eleven-hounds-mix.md
diff --git a/.changeset/fair-geckos-judge.md b/.changeset/fair-geckos-judge.md
diff --git a/.changeset/fast-years-push.md b/.changeset/fast-years-push.md
diff --git a/.changeset/kind-lizards-tickle.md b/.changeset/kind-lizards-tickle.md
diff --git a/.github/workflows/deploy-storefront.yml b/.github/workflows/deploy-storefront.yml
@@ -38,22 +38,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview' }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == '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
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if:  steps.environment.outputs.vercel == 'preview'
         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'
diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml
@@ -43,22 +43,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview'  }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == '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
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if: steps.environment.outputs.vercel == 'preview'
         run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.storybook.designsystemet.no
-        if: steps.defaultenvironment.outputs.value == 'next'
diff --git a/.github/workflows/deploy-theme.yml b/.github/workflows/deploy-theme.yml
@@ -38,22 +38,22 @@ jobs:
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
 
-      - name: Set default environment value if push event is triggered
-        id: defaultenvironment
+      - name: Set Vercel environment
+        id: environment
         run: |
-          ENVIRONMENT=${{ github.event.inputs.environment }}
-          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+          ENVIRONMENT=${{ github.event.inputs.environment == 'production' && 'production' || 'preview'  }}
+          echo "vercel=${ENVIRONMENT}" >> "$GITHUB_OUTPUT"
 
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{steps.environment.outputs.vercel}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.environment.outputs.vercel == '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
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.environment.outputs.vercel == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
 
       - name: Set Vercel alias
+        if: steps.environment.outputs.vercel == 'preview'
         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'
diff --git a/.github/workflows/preview-storefront.yml b/.github/workflows/preview-storefront.yml
@@ -8,6 +8,8 @@ on:
   workflow_dispatch:
   pull_request:
     types: [opened, synchronize]
+    branches-ignore:
+      - main
     paths:
       - 'apps/storefront/**'
 jobs:

diff --git a/.github/workflows/preview-storybook.yml b/.github/workflows/preview-storybook.yml
@@ -8,6 +8,8 @@ on:
   workflow_dispatch:
   pull_request:
     types: [opened, synchronize]
+    branches-ignore:
+      - main
     paths:
       - 'packages/**'
       - 'apps/storybook/**'

diff --git a/.github/workflows/preview-theme.yml b/.github/workflows/preview-theme.yml
@@ -8,6 +8,8 @@ on:
   workflow_dispatch:
   pull_request:
     types: [opened, synchronize]
+    branches-ignore:
+      - main
     paths:
       - 'apps/theme/**'
 jobs:

diff --git a/.github/workflows/release-snapshot.yml b/.github/workflows/release-snapshot.yml
@@ -34,3 +34,5 @@ jobs:
           git diff
           echo '---'
           yarn run publish --tag "${{ steps.variables.outputs.tag }}" --no-git-tag
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -22,7 +22,7 @@
   ],
   "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}",
   "[github-actions-workflow]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "redhat.vscode-yaml"
   },
   "[html]": {
     "editor.defaultFormatter": "biomejs.biome"

diff --git a/RELEASE.md b/RELEASE.md
@@ -0,0 +1,39 @@
+Follow these steps to ensure a smooth and consistent release process.
+# Release 
+
+We currently use [changesets](https://github.com/changesets/changesets) for tracking changes, generating changelogs, and publishing releases.
+
+We don't use changesets prerelease mode yet as we want to avoid additonal steps when creating a new release.
+
+## 1. Update Main with changes from next
+
+- Make a PR from `next` into `main` branch
+
+- Merge PR into `main` using a merge commit
+
+## 2. Publish new package version
+
+- [Changeset bot](https://github.com/apps/changeset-bot) should now pickup the changesets (inside `.changeset/`) and generate a PR with bumped version and changelog.
+
+- Approve and merge the PR.
+
+- [Changeset bot](https://github.com/apps/changeset-bot) will now publish new a package version to npmjs and create [github releases](https://github.com/digdir/designsystemet/releases)
+
+- Verify that new version is available in [npmjs](https://www.npmjs.com/package/@digdir/designsystemet) (under `latest` tag) and on [github releases](https://github.com/digdir/designsystemet/releases)
+
+## 3. Deploy new application version to production
+
+- Manually trigger the github action deployment to `production` environment from `main` branch: 
+  - Deploy Storefront
+  - Deploy Theme
+  - Deploy Storybook
+
+## 4. Update next branch with changes from main
+
+- Make a PR from `main` into `next` branch
+
+- Merge PR into `next` using a merge commit
+
+### **Next**
+
+- Use Release Snapshot to publish new version for testing on `@next` before releasing to production
diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx
@@ -41,7 +41,7 @@ export const ClipboardButton = ({
           data-size='sm'
           aria-label={ariaLabel}
         >
-          <ClipboardIcon fontSize={'1.4rem'} />
+          <ClipboardIcon fontSize={'1.4rem'} aria-hidden='true' />
           {text && <span className={classes.text}>{text}</span>}
         </Button>
       </Tooltip>

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -92,12 +92,12 @@ const CodeSnippet = ({
               onMouseEnter={() => setToolTipText('Kopier')}
               onClick={() => onButtonClick()}
               className={classes.copyButton}
-              aria-label='Kopier'
+              aria-label='Kopier kodesnutt'
               icon
               data-color='neutral'
               data-size='sm'
             >
-              <FilesIcon fontSize='1.5rem' />
+              <FilesIcon fontSize='1.5rem' aria-hidden='true' />
             </Button>
           </Tooltip>
           {/* @ts-ignore -- This has yet to be updated to use react 19 */}

diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx
@@ -45,10 +45,10 @@ export const ColorModal = ({
   return (
     <Dialog
       ref={colorModalRef}
+      closedby='any'
       style={{
         maxWidth: '1100px',
       }}
-      backdropClose
     >
       <Dialog.Block>
         <Heading data-size='xs'>

diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -53,7 +53,7 @@
 }
 
 .tag {
-  background-color: var(--ds-global-purple-4);
+  background-color: light-dark(#e0d6eb, #4f2776);
   border-radius: 4px;
   padding: 4px 10px;
   font-size: 16px;

diff --git a/apps/_components/src/Showcase/Showcase.tsx b/apps/_components/src/Showcase/Showcase.tsx
@@ -4,17 +4,19 @@ import {
   Button,
   Card,
   Checkbox,
-  Combobox,
   Details,
   Divider,
+  Field,
   Fieldset,
   Heading,
+  Label,
   Link,
   Pagination,
   Paragraph,
   Radio,
   Search,
   Select,
+  EXPERIMENTAL_Suggestion as Suggestion,
   Switch,
   Table,
   Tabs,
@@ -28,6 +30,16 @@ import cl from 'clsx/lite';
 import { type HTMLAttributes, useState } from 'react';
 import classes from './Showcase.module.css';
 
+const DATA_PLACES = [
+  'Sogndal',
+  'Oslo',
+  'Brønnøysund',
+  'Stavanger',
+  'Trondheim',
+  'Bergen',
+  'Lillestrøm',
+];
+
 type ShowcaseProps = HTMLAttributes<HTMLDivElement>;
 
 export function Showcase({ className, ...props }: ShowcaseProps) {
@@ -240,22 +252,22 @@ export function Showcase({ className, ...props }: ShowcaseProps) {
             <ToggleGroup.Item value='sweden'>Sverige</ToggleGroup.Item>
             <ToggleGroup.Item value='utlandet'>Utlandet</ToggleGroup.Item>
           </ToggleGroup>
-          <Combobox
-            description='Velg et sted'
-            label='Hvor går reisen?'
-            portal={false}
-            multiple
-          >
-            <Combobox.Empty>Fant ingen treff</Combobox.Empty>
-            <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
-            <Combobox.Option value='oslo'>Oslo</Combobox.Option>
-            <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
-            <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
-            <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
-            <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
-            <Combobox.Option value='bergen'>Bergen</Combobox.Option>
-            <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
-          </Combobox>
+          <Field>
+            <Label>Velg en destinasjon</Label>
+            <Suggestion>
+              <Suggestion.Input />
+              <Suggestion.Clear />
+              <Suggestion.List>
+                <Suggestion.Empty>Tomt</Suggestion.Empty>
+                {DATA_PLACES.map((place) => (
+                  <Suggestion.Option key={place} value={place}>
+                    {place}
+                    <div>Kommune</div>
+                  </Suggestion.Option>
+                ))}
+              </Suggestion.List>
+            </Suggestion>
+          </Field>
         </div>
       </div>
       <div className={cl(classes.card, classes.tabs)}>

diff --git a/apps/storefront/app/(frontpage)/layout.module.css b/apps/storefront/app/(frontpage)/layout.module.css
@@ -32,6 +32,10 @@
   width: 550px;
   text-align: center;
   margin-bottom: 38px;
+
+  &:not(:has(.betaTag)) h1 {
+    margin-top: var(--ds-size-6);
+  }
 }
 
 .container {
@@ -51,7 +55,7 @@
 }
 
 .betaTag {
-  background-color: var(--ds-global-purple-5);
+  background-color: light-dark(#e0d6eb, #4f2776);
   display: inline-block;
   padding: 3px 12px;
   border-radius: 4px;