Merge branch 'refs/heads/main' into feat/radiobutton-size-xs

sbb-design-systems · Jul 15, 2024 · 01b58fa · 01b58fa
2 parents 325ac06 + dbfd5aa
commit 01b58fa
Show file tree

Hide file tree

Showing 100 changed files with 3,096 additions and 3,441 deletions.
diff --git a/.github/workflows/continuous-integration-requested.yml b/.github/workflows/continuous-integration-requested.yml
@@ -0,0 +1,27 @@
+name: Continuous Integration Requested
+on:
+  workflow_run:
+    workflows: [Continuous Integration]
+    types: [requested]
+
+env:
+  PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
+
+jobs:
+  remove-labels:
+    runs-on: ubuntu-latest
+    if: github.event.workflow_run.event == 'pull_request'
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - name: "Add 'preview-available' label"
+        if: env.PR_NUMBER != ''
+        # This label is used for filtering deployments in ArgoCD.
+        # At the start of the Continuous Integration workflow, we remove the container available labels
+        # which will be re-added after the Continuous Integration Secure workflow.
+        run: |
+          gh issue edit $PR_NUMBER --remove-label "preview-available"
+          gh issue edit $PR_NUMBER --remove-label "diff-available"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/continuous-integration-secure.yml b/.github/workflows/continuous-integration-secure.yml
@@ -20,18 +20,20 @@ jobs:
   preview-image:
     runs-on: ubuntu-latest
     if: >
-      github.event.workflow_run.conclusion == 'success' && (
-        github.event.workflow_run.event == 'pull_request' || (
-          github.event.workflow_run.event == 'push' &&
-          github.event.workflow_run.head_branch == 'main'
-        )
-      )
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.pull_requests[0] != null
     permissions:
       deployments: write
       packages: write
       pull-requests: write
     steps:
       - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
       - uses: actions/download-artifact@v4
         with:
           name: storybook
@@ -42,11 +44,10 @@ jobs:
         run: node ./scripts/clean-storybook-files.cjs
 
       - name: Create GitHub Deployment
-        id: tag-name
         uses: actions/github-script@v7
         with:
           script: |
-            const environment = process.env.PR_NUMBER ? `pr${process.env.PR_NUMBER}` : 'main';
+            const environment = `pr${process.env.PR_NUMBER}`;
             const payload = { owner: context.repo.owner, repo: context.repo.repo, environment };
             const { data: deployment } = await github.rest.repos.createDeployment({
               ...payload,
@@ -60,56 +61,30 @@ jobs:
               state: 'in_progress',
               environment_url: `https://${context.repo.repo}-${environment}.app.sbb.ch`,
             });
-            return environment;
-          result-encoding: string
 
       - name: 'Container: Build and preview image'
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
-          docker build --tag $IMAGE_REPO_PREVIEW:${{ steps.tag-name.outputs.result }} .
-          docker push $IMAGE_REPO_PREVIEW:${{ steps.tag-name.outputs.result }}
+          docker build --tag $IMAGE_REPO_PREVIEW:pr$PR_NUMBER .
+          docker push $IMAGE_REPO_PREVIEW:pr$PR_NUMBER
         env:
           DOCKER_BUILDKIT: 1
 
       - name: "Add 'preview-available' label"
-        if: env.PR_NUMBER != ''
         # This label is used for filtering deployments in ArgoCD
-        run: gh issue edit ${{ env.PR_NUMBER }} --repo ${{ github.repository }} --add-label "preview-available"
+        run: gh issue edit $PR_NUMBER --add-label "preview-available"
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-  codecov:
-    runs-on: ubuntu-latest
-    if: >
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success'
-    permissions:
-      pull-requests: write
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/download-artifact@v4
-        with:
-          name: coverage
-          path: coverage/
-          run-id: ${{ github.event.workflow_run.id }}
-          github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
-      - uses: codecov/codecov-action@v3
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          directory: coverage
-          override_branch: ${{ github.event.workflow_run.head_branch }}
-          override_commit: ${{ github.event.workflow_run.head_commit.id }}
-          override_pr: ${{ env.PR_NUMBER }}
-          fail_ci_if_error: true
-          verbose: true
-
   visual-regression:
     runs-on: ubuntu-latest
     if: >
       github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success'
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.pull_requests[0] != null
     permissions:
       checks: write
+      deployments: write
       packages: write
       pull-requests: write
     steps:
@@ -138,19 +113,36 @@ jobs:
             const { readdirSync, readFileSync } = await import('fs');
             const diffUrl = process.env.DIFF_URL.replace('{}', process.env.PR_NUMBER);
             const diffInfo = JSON.parse(readFileSync('dist/visual-regression-app/diff.json', 'utf8'));
-            const createCheck = async (success) => await github.rest.checks.create({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              name: 'Visual Regression',
-              head_sha: context.payload.workflow_run.head_sha,
-              details_url: diffUrl,
-              output: {
-                title: `Visual Regression ${success ? 'Success' : `Failed (${diffInfo.changedAmount + diffInfo.newAmount})`}`,
-                summary: diffUrl,
-                text: `Changes: ${diffInfo.changedAmount}\nNew: ${diffInfo.newAmount}`,
-              },
-              ...(success ? { status: 'completed', conclusion: 'success' } : { status: 'in_progress' }),
-            });
+            const createCheck = async (success) => {
+              await github.rest.checks.create({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: 'Visual Regression',
+                head_sha: context.payload.workflow_run.head_sha,
+                details_url: diffUrl,
+                output: {
+                  title: `Visual Regression ${success ? 'Success' : `Failed (${diffInfo.changedAmount + diffInfo.newAmount})`}`,
+                  summary: diffUrl,
+                  text: `Changes: ${diffInfo.changedAmount}\nNew: ${diffInfo.newAmount}`,
+                },
+                ...(success ? { status: 'completed', conclusion: 'success' } : { status: 'in_progress' }),
+              });
+              
+              const environment = `pr${process.env.PR_NUMBER}-diff`;
+              const payload = { owner: context.repo.owner, repo: context.repo.repo, environment };
+              const { data: deployment } = await github.rest.repos.createDeployment({
+                ...payload,
+                ref: context.payload.workflow_run.head_sha,
+                auto_merge: false,
+                required_contexts: ['integrity', 'build', 'test', 'lint']
+              });
+              await github.rest.repos.createDeploymentStatus({
+                ...payload,
+                deployment_id: deployment.id,
+                state: success ? 'inactive' : 'in_progress',
+                environment_url: diffUrl,
+              });
+            };
 
             // If we have no screenshots, we do not need to create a check.
             if (readdirSync('dist/screenshots').length <= 1) {
@@ -178,7 +170,7 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Add label and create container
+      - name: Create visual regression container
         if: steps.screenshot-check.outputs.result == 'changed' || steps.screenshot-check.outputs.result == 'empty'
         run: |
           echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
@@ -187,10 +179,39 @@ jobs:
             --tag $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER \
             .
           docker push $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER
-
+        env:
+          DOCKER_BUILDKIT: 1
+      - name: Apply labels
+        if: steps.screenshot-check.outputs.result == 'changed' || steps.screenshot-check.outputs.result == 'empty'
+        run: |
           gh issue edit $PR_NUMBER --remove-label "$VISUAL_APPROVED"
           gh issue edit $PR_NUMBER --add-label "$VISUAL_REQUIRED"
-          gh issue edit $PR_NUMBER --add-label "visual-regression-diff-available"
+          gh issue edit $PR_NUMBER --add-label "diff-available"
         env:
-          DOCKER_BUILDKIT: 1
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  codecov:
+    runs-on: ubuntu-latest
+    if: >
+      github.event.workflow_run.event == 'pull_request' &&
+      github.event.workflow_run.conclusion == 'success' &&
+      github.event.workflow_run.pull_requests[0] != null
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/download-artifact@v4
+        with:
+          name: coverage
+          path: coverage/
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
+      - uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          directory: coverage
+          override_branch: ${{ github.event.workflow_run.head_branch }}
+          override_commit: ${{ github.event.workflow_run.head_commit.id }}
+          override_pr: ${{ env.PR_NUMBER }}
+          fail_ci_if_error: true
+          verbose: true
diff --git a/.storybook/theme.js b/.storybook/theme.js
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from '@storybook/theming';
 
 const version = process.env.STORYBOOK_COMPONENTS_VERSION;
 let title = `sbb-components`;

diff --git a/package.json b/package.json
@@ -78,22 +78,26 @@
     "@custom-elements-manifest/analyzer": "0.10.3",
     "@custom-elements-manifest/to-markdown": "0.1.0",
     "@eslint/eslintrc": "3.1.0",
-    "@eslint/js": "9.6.0",
+    "@eslint/js": "9.7.0",
     "@lit-labs/router": "^0.1.3",
     "@lit-labs/testing": "0.2.4",
     "@lit/react": "1.0.5",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "1.0.1",
-    "@storybook/addon-a11y": "8.1.11",
-    "@storybook/addon-actions": "8.1.11",
-    "@storybook/addon-essentials": "8.1.11",
-    "@storybook/addon-interactions": "8.1.11",
-    "@storybook/addon-links": "8.1.11",
-    "@storybook/blocks": "8.1.11",
-    "@storybook/test": "8.1.11",
-    "@storybook/web-components": "8.1.11",
-    "@storybook/web-components-vite": "8.1.11",
+    "@storybook/addon-a11y": "8.2.2",
+    "@storybook/addon-actions": "8.2.2",
+    "@storybook/addon-essentials": "8.2.2",
+    "@storybook/addon-interactions": "8.2.2",
+    "@storybook/addon-links": "8.2.2",
+    "@storybook/blocks": "8.2.2",
+    "@storybook/manager-api": "8.2.2",
+    "@storybook/preview-api": "8.2.2",
+    "@storybook/test": "8.2.2",
+    "@storybook/theming": "8.2.2",
+    "@storybook/types": "8.2.2",
+    "@storybook/web-components": "8.2.2",
+    "@storybook/web-components-vite": "8.2.2",
     "@types/glob": "8.1.0",
     "@types/mocha": "10.0.7",
     "@types/node": "20.14.10",
@@ -111,12 +115,12 @@
     "date-fns": "3.6.0",
     "esbuild": "0.23.0",
     "esbuild-sass-plugin": "3.3.1",
-    "eslint": "9.6.0",
+    "eslint": "9.7.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-import-x": "0.5.3",
+    "eslint-plugin-import-x": "3.0.1",
     "eslint-plugin-lit": "1.14.0",
-    "eslint-plugin-react": "7.34.3",
+    "eslint-plugin-react": "7.34.4",
     "eslint-plugin-storybook": "0.8.0",
     "eslint-plugin-yml": "1.14.0",
     "glob": "11.0.0",
@@ -128,17 +132,17 @@
     "npm-run-all2": "6.2.2",
     "playwright": "1.44.1",
     "postcss": "8.4.39",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup-plugin-postcss-lit": "2.1.0",
-    "sass": "1.77.7",
+    "sass": "1.77.6",
     "sinon": "18.0.0",
-    "storybook": "8.1.11",
-    "stylelint": "16.6.1",
+    "storybook": "8.2.2",
+    "stylelint": "16.7.0",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "13.1.0",
-    "stylelint-scss": "6.4.0",
+    "stylelint-scss": "6.4.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.5.3",
     "typescript-eslint": "7.16.0",
@@ -153,7 +157,7 @@
     "jackspeak": "2.1.1",
     "lit": "3.1.4",
     "playwright": "1.44.1",
-    "prettier": "3.3.2"
+    "prettier": "3.3.3"
   },
   "prettier": {
     "singleQuote": true,

diff --git a/renovate.json b/renovate.json
@@ -25,7 +25,7 @@
       "enabled": false
     },
     {
-      "matchPackageNames": ["jackspeak", "@web/dev-server-core"],
+      "matchPackageNames": ["jackspeak", "@web/dev-server-core", "sass"],
       "enabled": false
     },
     {

diff --git a/...elements-experimental/journey-summary/__snapshots__/journey-summary.snapshot.spec.snap.js b/...elements-experimental/journey-summary/__snapshots__/journey-summary.snapshot.spec.snap.js
@@ -1,7 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-journey-summary renders"] = 
+snapshots["sbb-journey-summary renders DOM"] = 
+`<sbb-journey-summary>
+</sbb-journey-summary>
+`;
+/* end snapshot sbb-journey-summary renders DOM */
+
+snapshots["sbb-journey-summary renders Shadow DOM"] = 
 `<div class="sbb-journey-summary">
   <div>
     <div class="sbb-journey-summary__via-block">
@@ -36,9 +42,15 @@ snapshots["sbb-journey-summary renders"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-journey-summary renders */
+/* end snapshot sbb-journey-summary renders Shadow DOM */
+
+snapshots["sbb-journey-summary renders without vias DOM"] = 
+`<sbb-journey-summary>
+</sbb-journey-summary>
+`;
+/* end snapshot sbb-journey-summary renders without vias DOM */
 
-snapshots["sbb-journey-summary renders without vias"] = 
+snapshots["sbb-journey-summary renders without vias Shadow DOM"] = 
 `<div class="sbb-journey-summary">
   <div>
     <div class="sbb-journey-summary__date">
@@ -60,9 +72,15 @@ snapshots["sbb-journey-summary renders without vias"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-journey-summary renders without vias */
+/* end snapshot sbb-journey-summary renders without vias Shadow DOM */
+
+snapshots["sbb-journey-summary renders with second journey DOM"] = 
+`<sbb-journey-summary round-trip="">
+</sbb-journey-summary>
+`;
+/* end snapshot sbb-journey-summary renders with second journey DOM */
 
-snapshots["sbb-journey-summary renders with second journey"] = 
+snapshots["sbb-journey-summary renders with second journey Shadow DOM"] = 
 `<div class="sbb-journey-summary">
   <div>
     <div class="sbb-journey-summary__date">
@@ -124,5 +142,5 @@ snapshots["sbb-journey-summary renders with second journey"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-journey-summary renders with second journey */
+/* end snapshot sbb-journey-summary renders with second journey Shadow DOM */