Merge remote-tracking branch 'origin/main' into feat/lean-form-field-…

…size-s # Conflicts: # src/components/form-field/form-field/form-field.scss
sbb-design-systems · May 9, 2024 · 7f4f4c9 · 7f4f4c9
2 parents 6788287 + 8f8c249
commit 7f4f4c9
Show file tree

Hide file tree

Showing 339 changed files with 4,463 additions and 4,212 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -15,9 +15,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true

diff --git a/.github/ISSUE_TEMPLATE/contributing-request.yml b/.github/ISSUE_TEMPLATE/contributing-request.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true

diff --git a/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml b/.github/ISSUE_TEMPLATE/feature-request-or-enhancement.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true

diff --git a/.github/ISSUE_TEMPLATE/question.yml b/.github/ISSUE_TEMPLATE/question.yml
@@ -10,9 +10,9 @@ body:
     attributes:
       label: Preflight Checklist
       options:
-        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
+        - label: I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
           required: true
-        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+        - label: I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
           required: true
         - label: I have searched the [issue tracker](https://github.com/orgs/lyne-design-system/projects/4) for an issue that matches the one I want to file, without success.
           required: true

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -2,8 +2,8 @@
 
 <!-- Please ensure you've completed the following steps by replacing [ ] with [x]-->
 
-- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/CONTRIBUTING.md) for this project.
-- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
+- [ ] I have read the [Contributing Guidelines](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CONTRIBUTING.md) for this project.
+- [ ] I agree to follow the [Code of Conduct](https://github.com/lyne-design-system/lyne-components/blob/main/docs/CODE_OF_CONDUCT.md) that this project adheres to.
 - [ ] I have searched the [pull request tracker](https://github.com/lyne-design-system/lyne-components/pulls) for a Pull Request (PR) that matches the one I want to submit, without success.
 
 ## Issue
@@ -17,7 +17,7 @@ Please check if your PR fulfills the following requirements:
 - [ ] Tests for the changes have been added (for bug fixes / features)
 - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features)
 
-See [Review Guidelines](../REVIEW.md) for more information what is checked during review process.
+See [Review Guidelines](../docs/REVIEW.md) for more information what is checked during review process.
 
 ## Changes
 

diff --git a/.github/workflows/continuous-integration-secure.yml b/.github/workflows/continuous-integration-secure.yml
@@ -8,10 +8,13 @@ on:
     workflows: [Continuous Integration]
     types: [completed]
 
-permissions:
-  deployments: write
-  packages: write
-  pull-requests: write
+env:
+  IMAGE_REPO_PREVIEW: ghcr.io/${{ github.repository }}/storybook-preview
+  IMAGE_REPO_VISUAL_REGRESSION: ghcr.io/${{ github.repository }}/visual-regression
+  PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
+  VISUAL_REQUIRED: 'pr: visual review required'
+  VISUAL_APPROVED: 'pr: visual review approved'
+  DIFF_URL: https://lyne-visual-regression-diff-pr{}.app.sbb.ch
 
 jobs:
   preview-image:
@@ -23,9 +26,10 @@ jobs:
           github.event.workflow_run.head_branch == 'main'
         )
       )
-    env:
-      PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
-      IMAGE_REPO: ghcr.io/${{ github.repository }}/storybook-preview
+    permissions:
+      deployments: write
+      packages: write
+      pull-requests: write
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
@@ -42,7 +46,7 @@ jobs:
         uses: actions/github-script@v7
         with:
           script: |
-            const environment = process.env.PR_NUMBER ? `preview-pr${process.env.PR_NUMBER}` : 'preview-main';
+            const environment = process.env.PR_NUMBER ? `preview-pr${process.env.PR_NUMBER}` : 'main';
             const payload = { owner: context.repo.owner, repo: context.repo.repo, environment };
             const { data: deployment } = await github.rest.repos.createDeployment({
               ...payload,
@@ -59,30 +63,28 @@ jobs:
             return environment;
           result-encoding: string
 
-      - name: 'Container: Login to GitHub Container Repository'
-        run: echo ${{ secrets.GITHUB_TOKEN }} | docker login ghcr.io --username ${{ github.actor }} --password-stdin
-      - name: 'Container: Build image'
-        run: docker build -t $IMAGE_REPO:${{ steps.tag-name.outputs.result }} .
+      - 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 }}
         env:
           DOCKER_BUILDKIT: 1
-      - name: 'Container: Publish image'
-        run: docker push $IMAGE_REPO:${{ steps.tag-name.outputs.result }}
 
       - name: "Add 'preview-available' label"
         if: env.PR_NUMBER != ''
         # This label is used for filtering deployments in ArgoCD
-        uses: actions-ecosystem/action-add-labels@v1
-        with:
-          labels: preview-available
-          number: ${{ env.PR_NUMBER }}
+        run: gh issue edit ${{ env.PR_NUMBER }} --repo ${{ github.repository }} --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'
-    env:
-      PR_NUMBER: ${{ github.event.workflow_run.pull_requests[0] != null && github.event.workflow_run.pull_requests[0].number || '' }}
+    permissions:
+      pull-requests: write
     steps:
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
@@ -100,3 +102,94 @@ jobs:
           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'
+    permissions:
+      checks: write
+      packages: write
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+      - run: yarn install --frozen-lockfile --non-interactive
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: visual-regression-screenshots
+          path: dist/screenshots/
+          run-id: ${{ github.event.workflow_run.id }}
+          github-token: ${{ secrets.GH_ACTIONS_ARTIFACT_DOWNLOAD }}
+
+      - name: Build diff-app
+        run: yarn build:diff-app
+
+      - name: Create check if changed
+        uses: actions/github-script@v7
+        id: screenshot-check
+        with:
+          script: |
+            const { readdirSync, readFileSync } = await import('fs');
+
+            // If we have no screenshots, we do not need to create a check or containers.
+            if (!readdirSync('dist/screenshots').length) {
+              return 'empty';
+            }
+
+            const diffUrl = process.env.DIFF_URL.replace('{}', process.env.PR_NUMBER);
+            const diffInfo = JSON.parse(readFileSync('dist/diff.json', 'utf8'));
+            let previousDiffInfo = {};
+            try {
+              const response = await fetch(diffUrl + 'diff.json');
+              if (response.ok) {
+                previousDiffInfo = await response.json();
+              }
+            } catch {}
+
+            // If the diff hash is the same as previously, we do not need to update the state or containers.
+            if (diffInfo.hash === previousDiffInfo.hash) {
+              return 'no-change';
+            }
+
+            const { data: deployment } = await github.rest.checks.create(({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              name: 'Visual Regression Check',
+              head_sha: context.payload.workflow_run.head_sha,
+              status: 'in_progress',
+              details_url: diffUrl,
+              output: {
+                title: 'Visual Regression Check',
+                summary: diffUrl,
+                text: `Changes: ${diffInfo.changedAmount}\nNew: ${diffInfo.newAmount}`,
+              }
+            });
+
+            return 'changed';
+          result-encoding: string
+
+      - name: Remove labels when no failed screenshots exist
+        if: steps.screenshot-check.outputs.result == 'empty'
+        run: gh issue edit $PR_NUMBER --remove-label "$VISUAL_REQUIRED"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Add label and create container
+        if: steps.screenshot-check.outputs.result == 'changed'
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u $ --password-stdin
+          docker build --tag $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER .
+          docker push $IMAGE_REPO_VISUAL_REGRESSION:pr$PR_NUMBER
+
+          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"
+        env:
+          DOCKER_BUILDKIT: 1
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/web-components-vite';
 import { type BuildOptions, type UserConfig, mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.ts'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/web-components-vite',

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -46,6 +46,10 @@
   .sbdocs-content {
     max-width: var(--sbb-breakpoint-medium-max) !important;
   }
+
+  .sb-show-main.sb-main-padded {
+    padding: 2rem;
+  }
 </style>
 
 <script>
@@ -97,6 +101,13 @@
     };
   }
 
+  if (isChromatic()) {
+    const sheet = new CSSStyleSheet();
+    sheet.insertRule(`.sb-show-main.sb-main-padded { padding: 0rem; }`);
+
+    document.adoptedStyleSheets.push(sheet);
+  }
+
   function inIframe() {
     try {
       return windowRef.self !== windowRef.top;

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,5 +1,12 @@
 import * as tokens from '@sbb-esta/lyne-design-tokens';
-import '../src/components/core/styles/global.scss';
+import type { StoryContext } from '@storybook/types';
+import type { Decorator } from '@storybook/web-components';
+import isChromatic from 'chromatic/isChromatic';
+import { html } from 'lit';
+
+import { withBackgroundDecorator } from '../src/storybook/testing/with-background-decorator.js';
+
+import '../src/components/core/styles/standard-theme.scss';
 
 const getViewportName = (key: string): string =>
   key.replace(/(^SbbBreakpoint|Min$)/g, '').toLowerCase();
@@ -8,6 +15,7 @@ const breakpoints = Object.entries(tokens)
   .filter(([key]) => key.startsWith('SbbBreakpoint') && key.endsWith('Min'))
   .map(([key, value]) => ({ key: getViewportName(key), value: value as number }))
   .sort((a, b) => a.value - b.value);
+
 /**
  * https://www.chromatic.com/docs/viewports/
  * CHROMATIC RESTRICTIONS:
@@ -52,19 +60,21 @@ export const parameters = {
     source: { format: 'html' },
   },
   viewport: { viewports: storybookViewports },
+  backgrounds: { disable: true },
   options: {
     storySort: {
       // Story section order.
       // https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
-      order: [
-        'pages',
-        ['home', 'home personalized'],
-        'components',
-        ['*', 'form elements', 'cards', 'layout'],
-        'styles',
-        'timetable',
-        'internals',
-      ],
+      order: ['introduction', 'pages', 'components', 'styles', 'timetable', 'internals'],
     },
   },
 };
+
+export const decorators: Decorator[] = [
+  (story, context: StoryContext) =>
+    isChromatic() && context.parameters.layout !== 'fullscreen'
+      ? html`<div style="padding: 2rem;min-height: 100vh">${story()}</div>`
+      : story(),
+  withBackgroundDecorator,
+  (story) => (isChromatic() ? html`<div class="sbb-disable-animation">${story()}</div>` : story()),
+];