Merge branch 'next' into fix/pagination-api-align

.github/workflows/checks.yml

@@ -17,4 +17,3 @@ jobs:
         run: yarn biome ci .
       - name: Lint CSS
         run: yarn lint-style
-

.github/workflows/test.yml

@@ -0,0 +1,61 @@
+name: Test
+on:
+  workflow_dispatch:
+  pull_request:
+    paths:
+      - 'packages/**'
+      - 'apps/storybook/**'
+
+permissions:
+  checks: write
+  # Required to put a comment into the pull-request
+  pull-requests: write
+
+jobs:
+  checks:
+    name: Build & test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/gh-setup
+      - name: Build
+        run: yarn build
+      - name: Types
+        run: yarn types:react
+      - name: Test
+        run: yarn test
+      - name: 'Report Coverage'
+        if: success() || failure()
+        uses: davelosert/vitest-coverage-report-action@v2
+      - name: Publish unit test report
+        uses: mikepenz/action-junit-report@v4
+        if: success() || failure()
+        with:
+          report_paths: 'test-report.xml'
+          detailed_summary: true
+          check_name: Unit Test Report
+          check_annotations: true
+          check_title_template: '{{FILE_NAME}} / {{TEST_NAME}}'
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build storybook
+        run: yarn build:storybook
+      - name: Run Storybook tests
+        run: yarn test:storybook
+      - name: Replace relative paths in test report
+        uses: jacobtomlinson/gha-find-replace@v3
+        if: success() || failure()
+        with:
+          include: 'apps/storybook/test-report.xml'
+          find: '../../'
+          replace: ''
+          regex: false
+      - name: Publish Storybook test report
+        uses: mikepenz/action-junit-report@v4
+        if: success() || failure()
+        with:
+          report_paths: 'apps/storybook/test-report.xml'
+          detailed_summary: true
+          check_name: Storybook Test Report
+          check_annotations: true
+          check_title_template: '{{FILE_NAME}} / {{TEST_NAME}}'

.gitignore

@@ -35,3 +35,6 @@ coverage/
 
 # Typescript
 next-env.d.ts
+
+# jest/vitest test reports
+test-report.xml

apps/storybook/.storybook/test-runner.ts

@@ -0,0 +1,50 @@
+import { type TestRunnerConfig, getStoryContext } from '@storybook/test-runner';
+import { checkA11y, configureAxe, injectAxe } from 'axe-playwright';
+
+/*
+ * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api
+ * to learn more about the test-runner hooks API.
+ */
+
+const config: TestRunnerConfig = {
+  // Tags to include, exclude, or skip. These tags are defined as annotations in your story or meta.
+  tags: {
+    exclude: [],
+  },
+  async preVisit(page) {
+    await injectAxe(page);
+  },
+  async postVisit(page, context) {
+    // Get the entire context of a story, including parameters, args, argTypes, etc.
+    const storyContext = await getStoryContext(page, context);
+
+    /*
+     * Accessibility testing
+     */
+
+    await configureAxe(page, {
+      // Apply story-level a11y rules
+      rules: storyContext.parameters?.a11y?.config?.rules,
+    });
+
+    const isA11yDisabled = storyContext.parameters?.a11y?.disable === true;
+    if (!isA11yDisabled) {
+      await checkA11y(
+        page,
+        '#storybook-root',
+        {
+          detailedReport: true,
+          detailedReportOptions: {
+            html: true,
+          },
+          verbose: false,
+          axeOptions: {},
+        },
+        false,
+        'v2',
+      );
+    }
+  },
+};
+
+export default config;

apps/storybook/package.json

@@ -4,7 +4,10 @@
   "private": true,
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "storybook build -o ./dist"
+    "build": "storybook build -o ./dist",
+    "static-storybook": "npx http-server dist --port 6006 --silent",
+    "test-storybook": "rimraf test-report.xml && wait-on tcp:6006 && test-storybook --junit",
+    "run-and-test-storybook": "concurrently -k -s first -n 'SB,TEST' -c 'magenta,blue' 'yarn static-storybook' 'yarn test-storybook'"
   },
   "author": "",
   "license": "ISC",
@@ -30,11 +33,26 @@
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
+    "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.2.9",
     "@storybook/types": "^8.2.9",
     "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
+    "axe-playwright": "^2.0.2",
+    "concurrently": "^9.0.1",
+    "http-server": "^14.1.1",
     "remark-gfm": "^4.0.0",
-    "storybook": "^8.2.9"
+    "rimraf": "^6.0.1",
+    "storybook": "^8.2.9",
+    "wait-on": "^8.0.1"
+  },
+  "jest-junit": {
+    "suiteName": "Storybook tests",
+    "outputName": "test-report.xml",
+    "addFileAttribute": "true",
+    "ancestorSeparator": " › ",
+    "suiteNameTemplate": "{filepath}",
+    "classNameTemplate": "{classname}",
+    "testNameTemplate": "{title}"
   }
 }

biome.jsonc

@@ -1,17 +1,18 @@
 {
   "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
   "organizeImports": { "enabled": true },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
   "files": {
     "ignoreUnknown": true,
     "ignore": [
-      "node_modules/**",
-      ".next/**",
       ".vscode/**",
       ".github/**",
       ".changeset/**",
-      "dist/**",
       "./package.json", // yarn and biome disagrees on package.json formatting
-      "tsc-build/**",
       "design-tokens/**/*",
       "packages/theme/brand/**/*",
       "apps/storefront/tokens/**"
@@ -52,7 +53,6 @@
     "rules": {
       "recommended": true,
       "a11y": {
-        "noSvgWithoutTitle": "off",
         "noNoninteractiveElementToInteractiveRole": "off",
         "useValidAnchor": "off",
         "useButtonType": "off",
@@ -85,6 +85,20 @@
     {
       "include": ["**/packages/cli/**/*.ts"],
       "formatter": { "lineWidth": 120 }
+    },
+    {
+      "include": [
+        "**/apps/_components/**",
+        "**/apps/storefront/**",
+        "**/apps/theme/**"
+      ],
+      "linter": {
+        "rules": {
+          "a11y": {
+            "noSvgWithoutTitle": "off"
+          }
+        }
+      }
     }
   ]
 }

package.json

@@ -10,6 +10,7 @@
   ],
   "scripts": {
     "test": "vitest",
+    "test:storybook": "yarn workspace @designsystemet/storybook run-and-test-storybook",
     "test:coverage": "vitest run --coverage",
     "storybook": "yarn workspace @designsystemet/storybook dev",
     "storefront": "yarn workspace storefront dev",

packages/css/skeleton.css

@@ -46,6 +46,6 @@
 
 @keyframes ds-skeleton-opacity-fade {
   to {
-    opacity: 0.4;
+    background: rgb(from var(--dsc-skeleton-background) r g b / 0.4);
   }
 }

packages/react/src/components/Alert/Alert.stories.tsx

@@ -116,8 +116,8 @@ export const UtenAria: Story = (args) => (
 );
 
 export const MedAria: Story = (args) => (
-  <Alert {...args} color='danger'>
-    <Heading level={2} size='xs' spacing role='alert'>
+  <Alert {...args} color='danger' role='alert'>
+    <Heading level={2} size='xs' spacing>
       Vi klarer ikke lagre skjemaet
     </Heading>
     <Paragraph>