Merge branch 'next' into feat/css-modules

.changeset/blue-singers-switch.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Chip: Support wrapping in group

.changeset/empty-singers-yell.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Chip: Text color is now `accent`

.changeset/famous-pillows-cheat.md

@@ -0,0 +1,5 @@
+---
+'@digdir/designsystemet': minor
+---
+
+Fix design-token warning contrast color reference

.changeset/pre.json

@@ -16,12 +16,14 @@
   },
   "changesets": [
     "blue-rocks-pull",
+    "blue-singers-switch",
     "brave-months-sleep",
     "bright-knives-remain",
     "chatty-cheetahs-fetch",
     "chilled-icons-chew",
     "cool-lamps-drive",
     "eighty-cougars-think",
+    "famous-pillows-cheat",
     "few-brooms-confess",
     "fifty-buses-beam",
     "five-apricots-scream",
@@ -33,6 +35,7 @@
     "mighty-days-eat",
     "plenty-vans-sneeze",
     "quiet-mangos-cry",
+    "serious-frogs-rescue",
     "shaggy-bears-tan",
     "shiny-kiwis-switch",
     "short-walls-judge",

.changeset/serious-frogs-rescue.md

@@ -0,0 +1,5 @@
+---
+'@digdir/designsystemet': minor
+---
+
+New create tokens script with color options support

.changeset/spotty-oranges-guess.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Avatar: new component

.github/workflows/deploy-theme.yml

@@ -12,10 +12,6 @@ on:
         options:
           - production
           - next
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - 'apps/theme/**'
   push:
     branches:
       - next

.github/workflows/preview-theme.yml

@@ -0,0 +1,94 @@
+name: Deploy Theme PR
+env:
+  VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_THEME }}
+  PR_NUMBER: ${{ github.event.number }}
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened, synchronize]
+    paths:
+      - 'packages/**'
+      - 'apps/theme/**'
+      - 'assets/**'
+jobs:
+  Deploy-Preview:
+    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: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - id: deploy
+        name: Deploy Project Artifacts to Vercel
+        run: echo "url=$(vercel deploy --prebuilt --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 }} pr-${{ env.PR_NUMBER }}.theme.designsystemet.no
+
+      - name: Find Preview comment
+        uses: peter-evans/find-comment@v2
+        id: fc
+        with:
+          issue-number: ${{ env.PR_NUMBER }}
+          body-includes: |
+            ## Preview deployments
+
+      - run: echo ${{ steps.fc.outputs.comment-id }}
+        if: success() && env.PR_NUMBER
+
+      - name: Find Storybook deployment
+        uses: actions-ecosystem/action-regex-match@v2
+        id: regex-storybook
+        with:
+          text: ${{ steps.fc.outputs.comment-body }}
+          regex: '📖 \[Storybook\]\((https:\/\/[^)]+)\) `[^`]+`'
+
+      - name: Find Storefront deployment
+        uses: actions-ecosystem/action-regex-match@v2
+        id: regex-storefront
+        with:
+          text: ${{ steps.fc.outputs.comment-body }}
+          regex: '🖥 \[Storefront\]\((https:\/\/[^)]+)\) `[^`]+`'
+
+      - name: Get current time in CEST
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: D. MMM YYYY - HH:mm
+          timezone: Europe/Oslo
+
+      - name: Update comment with deployment
+        uses: peter-evans/create-or-update-comment@v3
+        with:
+          issue-number: ${{ env.PR_NUMBER }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace
+          body: |
+            ## Preview deployments
+
+            ${{ steps.regex-storybook.outputs.match }}
+
+            [Theme](https://pr-${{ env.PR_NUMBER }}.theme.designsystemet.no) `${{ steps.current-time.outputs.formattedTime }} (Norwegian time)`
+
+            ${{ steps.regex-storefront.outputs.match }}

.github/workflows/test-coverage.yml

@@ -0,0 +1,30 @@
+name: 'Test Coverage'
+on:
+  pull_request:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    permissions:
+      # Required to checkout the code
+      contents: read
+      # Required to put a comment into the pull-request
+      pull-requests: write
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: 'Install Node'
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20.x'
+        cache: 'yarn'
+    - name: 'Install Deps'
+      run: yarn install --frozen-lockfile
+    - name: 'Test'
+      run: npx vitest --coverage.enabled true
+    - name: 'Report Coverage'
+      # Set if: always() to also generate the report if tests are failing
+      # Only works if you set `reportOnFailure: true` in your vite config as specified above
+      if: always()
+      uses:  davelosert/vitest-coverage-report-action@v2

.gitignore

@@ -1,6 +1,5 @@
 # Built files
 dist
-build
 ignore
 tsc-build
 

apps/_components/src/CodeSnippet/CodeSnippet.module.css

@@ -7,6 +7,10 @@
   height: fit-content;
 }
 
+.codeSnippet > pre {
+  padding-right: var(--ds-spacing-11) !important;
+}
+
 .copyButton {
   position: absolute;
   top: var(--ds-spacing-2);

apps/_components/src/CodeSnippet/CodeSnippet.tsx

@@ -15,6 +15,8 @@ import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import classes from './CodeSnippet.module.css';
 
+import cl from 'clsx/lite';
+
 const plugins = [
   prettierTypescript,
   prettierEstree,
@@ -25,13 +27,15 @@ const plugins = [
 ];
 
 type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json';
+  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json' | 'sh';
   children?: string;
+  className?: string;
 };
 
 const CodeSnippet = ({
   language = 'markdown',
   children = '',
+  className,
 }: CodeSnippetProps) => {
   const [toolTipText, setToolTipText] = useState('Kopier');
   const [snippet, setSnippet] = useState('');
@@ -67,7 +71,10 @@ const CodeSnippet = ({
   };
 
   return (
-    <div className={classes.codeSnippet} data-ds-color-mode='dark'>
+    <div
+      className={cl(classes.codeSnippet, className)}
+      data-ds-color-mode='dark'
+    >
       {snippet && (
         <>
           <Tooltip content={toolTipText}>
@@ -85,7 +92,7 @@ const CodeSnippet = ({
           </Tooltip>
           <SyntaxHighlighter
             style={nightOwl}
-            language='jsx'
+            language={language}
             customStyle={{
               fontSize: '15px',
               margin: 0,

apps/storefront/app/(frontpage)/layout.module.css

@@ -61,7 +61,7 @@
 
 .cluster {
   position: absolute;
-  z-index: 0;
+  z-index: 3;
 }
 
 .cluster1,

apps/storefront/app/(frontpage)/layout.tsx

@@ -74,7 +74,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         >
           <Container className={classes.container}>
             <div className={classes.text}>
-              <div className={classes.betaTag}>Beta</div>
+              <div className={classes.betaTag}>Next</div>
               <Heading size='lg'>
                 Designsystemet hjelper deg å lage gode digitale tjenester
               </Heading>

apps/storefront/app/(frontpage)/page.mdx

@@ -58,6 +58,14 @@ export const metadata = {
     gridTemplateColumns: 'repeat(3, minmax(min(100%, 320px), 1fr))',
   }}
 >
+  <BlogCard
+    title='Hvor blir det av V1?'
+    desc='Vi har fått flere verdifulle tilbakemeldinger fra våre brukere. Les mer om hvorfor vi ønsker å samle React-komponenter og CSS-rammeverk i en sammenhengende pakke.'
+    href='/bloggen/2024/v1rc2'
+    image='/img/bloggen/v1rc2-front.png'
+    tagText='Bloggen'
+    tagColor='brand1'
+  />
   <BlogCard
     title='Dette kommer i V1!'
     desc='Vi nærmer oss den første versjonen av Designsystemet uten betamerke! Versjon 1 skal være mer stabil, mer fleksibel og støtte flerdimensjonal tematisering.'
@@ -74,14 +82,6 @@ export const metadata = {
     tagText='Bloggen'
     tagColor='brand1'
   />
-  <BlogCard
-    title='Dynamiske font-størrelser og hvorfor vi gikk bort fra det'
-    desc='Det er mulig å bruke dynamiske font-størrelser uten breakpoints, men det medfører noen ulemper.'
-    href='/bloggen/2024/fluid-typography'
-    image='/img/bloggen/fluid-front.png'
-    tagText='Bloggen'
-    tagColor='brand1'
-  />
 </Section>
 
 <ImageBanner

apps/storefront/app/bloggen/(frontpage)/page.mdx

@@ -9,14 +9,24 @@ export const metadata = {
   description: 'Beskrivelse',
 };
 
+<BlogCard
+  title='Hvor blir det av V1?'
+  desc='Vi har fått flere verdifulle tilbakemeldinger fra våre brukere. Les mer om hvorfor vi ønsker å samle React-komponenter og CSS-rammeverk i en sammenhengende pakke.'
+  date='28.august 2024'
+  href='/bloggen/2024/v1rc2'
+  image='/img/bloggen/v1rc2-front.png'
+  author='Designsystemet'
+  featured={true}
+/>
+
 <BlogCard
   title='Dette kommer i V1! 🎉'
   desc='Vi nærmer oss den første versjonen av Designsystemet uten betamerke! Versjon 1 skal være mer stabil, mer fleksibel og støtte flerdimensjonal tematisering.'
   date='29.mai 2024'
   href='/bloggen/2024/v1rc1'
   image='/img/bloggen/v1rc1.png'
   author='Designsystemet'
-  featured={true}
+  featured={false}
 />
 
 <BlogCard

apps/storefront/app/bloggen/2024/v1rc2/page.mdx

@@ -0,0 +1,69 @@
+import { Link } from '@digdir/designsystemet-react';
+
+import { PostLayout, Contributors } from '../../_components';
+import { ResponsiveIframe, Image } from '@components';
+import { CodeSnippet } from '@repo/components';
+
+export default ({ children }) => (
+  <PostLayout
+    content={children}
+    heading='Hvor blir det av V1?'
+    ingress='En Release Candidate av V1 ble sluppet før sommeren. Etter det har vi fått flere verdifulle tilbakemeldinger fra våre brukere.'
+    date='28. august 2024'
+    author='Designsystemet'
+    imageSrc='/img/bloggen/v1rc2.png'
+    imageAlt='Illustrasjon av Designsystemet V1 og spørsmålstegn rundt'
+    imageCaption='Designsystemet trenger noen siste justeringer før en full lansering av V1. '
+  />
+);
+
+export const metadata = {
+  title: 'Hvor blir det av V1?',
+  description:
+    'En Release Candidate av V1 ble sluppet før sommeren. Etter det har vi fått flere verdifulle tilbakemeldinger fra våre brukere.',
+  openGraph: {
+    images: '/img/bloggen/v1rc2.png',
+  },
+};
+
+Som mange av dere vet, har vi jobbet hardt med å utvikle et designsystem som skal fungere for flere ulike aktører. Målet har alltid vært å skape et robust og helhetlig system som er fleksibelt og fremtidsrettet. Etter lansering av "V1 Release Cancidate" har vi fått verdifulle tilbakemeldinger fra dere som har testet systemet. Basert på denne innsikten har vi nådd et veiskille som krever at vi tar noen viktige beslutninger.
+
+Et av de mest sentrale spørsmålene vi står overfor, er hvordan vi skal strukturere lanseringen av V1. Vi har nå en fullt funksjonell React-pakke, som mange av dere har begynt å bruke i ulike løsninger. Dette er en stor milepæl for oss, og vi har fått positive tilbakemeldinger på at utvikler-opplevelsen med React-komponentene er god. Samtidig har vi også fått klare signaler om at mange av dere har behov for en rammeverk-uavhengig løsning, i første omgang med en uavhengig CSS-pakke. Et godt CSS-rammeverk vil ikke bare styrke React-pakken, men det vil også sikre en mer helhetlig tilnærming til hvordan vi bygger grensesnitt på tvers av ulike teknologier. 
+
+## Potensielle endringer og "breaking changes"
+Vi har identifisert at arbeidet med å utvikle et solid CSS-rammeverk vil påvirke de eksisterende React-komponentene. Dette kan til og med kreve noen endringer i komponent-APIet. Det siste vi ønsker er å påføre dere hyppige og unødvendige "breaking changes" i systemet. Derfor vurderer vi nå om det er bedre å samle opp disse endringene og implementere dem samlet i V1, slik at vi reduserer risikoen for breaking changes etter lansering. Dette krever imidlertid at vi tar oss litt mer tid til å ferdigstille React- og CSS-pakken som en helhet.
+
+<Image
+  src='/img/bloggen/v1-flyt.png'
+  alt='Flyt-illustrasjon av Designsystemets produkter og verktøy.'
+  caption='Designsystemet består i dag av flere produkter, inkludert Temabygger, Design-tokens, Figma bibliotek, CSS rammeverk, React bibliotek, Tema pakke og CLI (Kommandoverktøy). Alle disse delene av systemet skal fungere sømløst sammen og gi en sammenhengende opplevelse for brukerne.'
+  boxShadow={false}
+/>
+
+
+## Hvorfor utsetting kan være det riktige valget
+Å utsette en lansering er aldri en enkel beslutning, men i dette tilfellet tror vi at det kan være det riktige valget. Ved å utsette lanseringen, får vi tid til å sørge for at Designsystemet inkluderer både React-komponentene og CSS-rammeverket. Dette gir oss muligheten til å levere et mer komplett produkt, som favner flere etater og brukscenario, unngår potensielt unødvendige omskrivinger for dere, og vil være mer brukervennlig og enklere å vedlikeholde i det lange løp.
+
+Vi forstår at mange av dere ser frem til V1-lanseringen, og vi setter stor pris på tålmodigheten deres. Vi tror at denne utsettelsen vil resultere i et bedre produkt som vil gagne alle brukerne våre på sikt. Vi ønsker å holde dere oppdatert med jevnlige oppdateringer og åpen kommunikasjon gjennom hele prosessen, og vi ser frem til å dele et enda bedre designsystem med dere snart!
+
+## Din tilbakemelding er viktig
+I arbeidet med å bygge et designsystem som skal fungere for mange ulike aktører, er vi helt avhengige av tilbakemeldinger fra dere som faktisk bruker systemet i praksis. For å sikre at det nye systemet er godt testet og klart for lansering, oppfordrer vi så mange som mulig til å teste de nyeste endringene som legges ut i vår `next`-branch (`@next`). Der vil dere finne de siste oppdateringene og nye funksjoner som vi vurderer å inkludere i den endelige lanseringen av V1. [Se siste gjeldende next-versjoner her](https://github.com/digdir/designsystemet/releases).
+
+Om du har tilbakemeldinger er det kjempefint om du deler dette i [#Designsystemet-kanalen på Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ), oppretter [issues i Github](https://github.com/digdir/designsystemet/issues/new/choose), eller sender oss en [epost](mailto:[email protected]). 
+
+Din innsats og dine innspill er helt avgjørende for at vi skal kunne levere et designsystem som fungerer optimalt for alle.
+
+Takk for at dere er med oss på denne reisen – sammen kan vi skape noe virkelig verdifullt!
+
+<Contributors
+  authors={[
+    'Marianne Røsvik',
+    'Michael Marszalek',
+    'Lasse Straum',
+    'Eirik Backer',
+    'Øyvind Thune',
+    'Tobias Barsnes',
+  ]}
+/>
+
+<br/>