merge

.github/workflows/build-and-test.yml

@@ -166,8 +166,8 @@ jobs:
         with:
           name: components-js-vrt-puppeteer-regression
           path: ./packages/components-js/tests/vrt/puppeteer/results
-  components-js-vrt-playwright:
-    name: 'Components JS VRT (Playwright)'
+  components-js-common-vrt-playwright-chrome:
+    name: 'Components JS VRT Common (Playwright Chrome)'
     runs-on: ubuntu-latest
     steps:
       - name: 'Checkout'
@@ -182,12 +182,58 @@ jobs:
         uses: ./.github/actions/docker-run-playwright
         with:
           entrypoint: run-test-vrt-playwright
-          args: --components-js
+          args: --components-js:chrome:common
+      - name: 'VRT Regression (Playwright)'
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: components-js-vrt-common-playwright-chrome-regression
+          path: ./packages/components-js/tests/vrt/playwright/results
+  components-js-custom-states-vrt-playwright-chrome:
+    name: 'Components JS VRT Custom/States (Playwright Chrome)'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout'
+        uses: actions/checkout@v3
+      - name: 'Setup and install'
+        uses: ./.github/actions/setup-and-install
+        with:
+          github-token: ${{ secrets.github-token }}
+      - name: 'Build assets, component-meta, components, components-js, shared and utilities'
+        uses: ./.github/actions/build-components-js
+      - name: 'VRT Test (Playwright)'
+        uses: ./.github/actions/docker-run-playwright
+        with:
+          entrypoint: run-test-vrt-playwright
+          args: --components-js:chrome:customAndStates
       - name: 'VRT Regression (Playwright)'
         if: failure()
         uses: actions/upload-artifact@v3
         with:
-          name: components-js-vrt-playwright-regression
+          name: components-js-vrt-custom-states-playwright-chrome-regression
+          path: ./packages/components-js/tests/vrt/playwright/results
+  components-js-vrt-playwright-safari:
+    name: 'Components JS VRT (Playwright Safari)'
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout'
+        uses: actions/checkout@v3
+      - name: 'Setup and install'
+        uses: ./.github/actions/setup-and-install
+        with:
+          github-token: ${{ secrets.github-token }}
+      - name: 'Build assets, component-meta, components, components-js, shared and utilities'
+        uses: ./.github/actions/build-components-js
+      - name: 'VRT Test (Playwright)'
+        uses: ./.github/actions/docker-run-playwright
+        with:
+          entrypoint: run-test-vrt-playwright
+          args: --components-js:safari
+      - name: 'VRT Regression (Playwright)'
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          name: components-js-vrt-playwright-safari-regression
           path: ./packages/components-js/tests/vrt/playwright/results
   components-angular:
     name: 'Components Angular'
@@ -292,6 +338,11 @@ jobs:
         with:
           entrypoint: run-build
           args: --components-react
+      - name: 'E2E Test components-react/remix'
+        uses: ./.github/actions/docker-run-playwright
+        with:
+          entrypoint: run-test-e2e
+          args: --components-react/remix
       - name: 'VRT Test components-react/remix'
         uses: ./.github/actions/docker-run-playwright
         with:

docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.5"
 
 services:
   design-system:
-    image: ghcr.io/porsche-design-system/porsche-design-system/playwright:v1.39.0-focal-test
+    image: ghcr.io/porsche-design-system/porsche-design-system/playwright:v1.39.0-focal-test2
     working_dir: /opt/porsche-design-system-app
     user: "${RUN_UID}:${RUN_GID}"
     ports:
@@ -64,7 +64,7 @@ services:
       - utilities-utilities-node-modules:/opt/porsche-design-system-app/packages/utilities/projects/utilities/node_modules
       - utilities-styles-node-modules:/opt/porsche-design-system-app/packages/utilities/projects/styles/node_modules
   change-volume-owner:
-    image: ghcr.io/porsche-design-system/porsche-design-system/playwright:v1.39.0-focal-test
+    image: ghcr.io/porsche-design-system/porsche-design-system/playwright:v1.39.0-focal-test2
     volumes:
       - home:/opt/porsche-design-system-volumes/home
       - monorepo-node-modules:/opt/porsche-design-system-volumes/root-node_modules

docker/node/bin/run-test-e2e

@@ -7,6 +7,7 @@ if
   [[ "--components-angular" == "${1}" ]] ||
   [[ "--components-react" == "${1}" ]] ||
   [[ "--components-react/nextjs" == "${1}" ]] ||
+  [[ "--components-react/remix" == "${1}" ]] ||
   [[ "--components-vue" == "${1}" ]] ||
   [[ "--crawler" == "${1}" ]] ||
   [[ "--storefront" == "${1}" ]]

docker/node/bin/run-test-vrt-playwright

@@ -4,7 +4,10 @@ set -o errexit
 set -o pipefail
 
 if
-  [[ "--components-js" == "${1}" ]]
+  [[ "--components-js" == "${1}" ]] ||
+  [[ "--components-js:safari" == "${1}" ]] ||
+  [[ "--components-js:chrome:customAndStates" == "${1}" ]] ||
+  [[ "--components-js:chrome:common" == "${1}" ]];
 then
   yarn test:vrt:playwright:${1:2}
 fi

docker/node/build-and-push-base-image-playwright.sh

@@ -2,7 +2,7 @@
 
 REGISTRY=ghcr.io/chbinousamy/porsche-design-system
 IMAGE=playwright
-TAG=v1.39.0-focal-test
+TAG=v1.39.0-focal-test2
 
 docker pull $REGISTRY/$IMAGE:latest
 

docs/dependencies.md

@@ -48,6 +48,8 @@ Angular versions used to build any of its dependent libraries.
 We are now on `Angular v15` after conformation of our consuming teams. Before upgrading to a new version, ensure all
 consuming teams are already on the next major.
 
+Helpful overview: https://angular.io/guide/versions#actively-supported-versions
+
 ### Affected dependencies:
 
 - `typescript`

package.json

@@ -115,12 +115,16 @@
     "test:e2e:components-angular": "yarn --cwd ./packages/components-angular test:e2e",
     "test:e2e:components-react": "yarn --cwd ./packages/components-react test:e2e",
     "test:e2e:components-react/nextjs": "yarn --cwd ./packages/components-react/projects/nextjs test:e2e",
+    "test:e2e:components-react/remix": "yarn --cwd ./packages/components-react/projects/remix test:e2e",
     "test:e2e:components-vue": "yarn --cwd ./packages/components-vue test:e2e",
     "test:e2e:crawler": "yarn --cwd ./packages/crawler test:e2e",
     "test:e2e:storefront": "yarn --cwd ./packages/storefront test:e2e",
     "test:a11y:storefront": "yarn --cwd ./packages/storefront test:a11y",
     "test:vrt:puppeteer:components-js": "yarn --cwd ./packages/components-js test:vrt:puppeteer",
     "test:vrt:playwright:components-js": "yarn --cwd ./packages/components-js test:vrt:playwright",
+    "test:vrt:playwright:components-js:chrome:common": "yarn --cwd ./packages/components-js test:vrt:playwright:chrome:common",
+    "test:vrt:playwright:components-js:chrome:customAndStates": "yarn --cwd ./packages/components-js test:vrt:playwright:chrome:customAndStates",
+    "test:vrt:playwright:components-js:safari": "yarn --cwd ./packages/components-js test:vrt:playwright:safari",
     "test:vrt:components-angular": "yarn --cwd ./packages/components-angular test:vrt",
     "test:vrt:components-react": "yarn --cwd ./packages/components-react test:vrt",
     "test:vrt:components-react/nextjs": "yarn --cwd ./packages/components-react/projects/nextjs test:vrt",

packages/component-meta/scripts/generateComponentMeta.ts

@@ -216,12 +216,12 @@ const generateComponentMeta = (): void => {
           propValue === 'true'
             ? true
             : propValue === 'false'
-            ? false
-            : // undefined values get lost in JSON.stringify, but null is allowed
-              propValue
-                ?.replace(/^['"](.*)['"]$/, '$1') // propValue is a string and might contain a string wrapped in quotes since it is extracted like this
-                .replace(/\s+/g, ' ') // remove new lines and multiple spaces
-                .replace(/,( })/, '$1') || null; // remove trailing comma in original multiline objects
+              ? false
+              : // undefined values get lost in JSON.stringify, but null is allowed
+                propValue
+                  ?.replace(/^['"](.*)['"]$/, '$1') // propValue is a string and might contain a string wrapped in quotes since it is extracted like this
+                  .replace(/\s+/g, ' ') // remove new lines and multiple spaces
+                  .replace(/,( })/, '$1') || null; // remove trailing comma in original multiline objects
 
         if (typeof cleanedValue === 'string') {
           if (cleanedValue.match(/^\d+$/)) {
@@ -470,7 +470,16 @@ const generateComponentMeta = (): void => {
     }
 
     // named slots
-    const namedSlots = Array.from(source.matchAll(/<slot name="([a-z]+)"/g)).map(([, slotName]) => slotName);
+    const namedSlots = Array.from(source.matchAll(/<slot name="((?!internal-)[a-z-]+?)"/g)).map(
+      ([, slotName]) => slotName
+    );
+
+    if (source.includes('<Label')) {
+      namedSlots.push('label');
+    }
+    if (/<Label[\s\S]+?description/.test(source)) {
+      namedSlots.push('description');
+    }
     if (source.includes('<StateMessage')) {
       namedSlots.push('message');
     }

packages/component-meta/tests/unit/specs/__snapshots__/componentMeta.spec.ts.snap

@@ -987,6 +987,7 @@ exports[`should match snapshot 1`] = `
     "namedSlots": [
       "header",
       "footer",
+      "sub-footer",
     ],
     "nestedComponents": [
       "p-button-pure",
@@ -2094,12 +2095,11 @@ exports[`should match snapshot 1`] = `
     "namedSlots": [
       "label",
       "description",
-      "select",
       "message",
     ],
     "nestedComponents": [
-      "p-button-pure",
       "p-icon",
+      "p-button-pure",
     ],
     "props": {
       "description": null,
@@ -3358,6 +3358,7 @@ exports[`should match snapshot 1`] = `
         "error",
         "success",
       ],
+      "submitButton": "boolean",
       "theme": [
         "light",
         "dark",
@@ -3411,6 +3412,7 @@ exports[`should match snapshot 1`] = `
       "showCounter": true,
       "showPasswordToggle": true,
       "state": "none",
+      "submitButton": true,
       "theme": "light",
       "unit": null,
       "unitPosition": "prefix",

packages/components-angular/angular.json

@@ -27,7 +27,7 @@
             "styles": ["@porsche-design-system/shared/css/styles.css"],
             "inlineStyleLanguage": "scss",
             "scripts": [],
-            "indexTransform": "./scripts/transformIndexHtml.js"
+            "indexTransform": "./scripts/injectPartials.js"
           },
           "configurations": {
             "production": {

packages/components-angular/karma.conf.js

@@ -3,7 +3,7 @@
 const path = require('path');
 const fs = require('fs');
 const globby = require('globby');
-const transformIndexHtml = require('./scripts/transformIndexHtml');
+const injectPartials = require('./scripts/injectPartials');
 
 if (process.env.CI) {
   // using chrome that comes with playwright
@@ -23,7 +23,7 @@ const injectPartialsIntoKarmaContextHtml = () => {
 
   fs.copyFileSync(filePath, backupFilePath); // create backup
   const fileContent = fs.readFileSync(filePath, 'utf8');
-  const modifiedFileContent = transformIndexHtml({}, fileContent);
+  const modifiedFileContent = injectPartials({}, fileContent);
   fs.writeFileSync(filePath, modifiedFileContent);
 };
 injectPartialsIntoKarmaContextHtml();

packages/components-angular/package.json

@@ -38,7 +38,7 @@
     "@angular/platform-browser": "^15.2.10",
     "@angular/platform-browser-dynamic": "^15.2.10",
     "@angular/router": "^15.2.10",
-    "@porsche-design-system/components-angular": "3.8.0",
+    "@porsche-design-system/components-angular": "3.9.0",
     "angular-imask": "^6.6.3",
     "imask": "^7.1.3",
     "rxjs": "^7.8.1",

packages/components-angular/projects/angular-wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-angular",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,12 +17,13 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.8.0",
+    "@porsche-design-system/components-js": "3.9.0",
     "tslib": "^2.6.1"
   },
   "peerDependencies": {
     "@angular/common": ">=15.0.0 <18.0.0",
-    "@angular/core": ">=15.0.0 <18.0.0"
+    "@angular/core": ">=15.0.0 <18.0.0",
+    "rxjs": "^6.5.3 || ^7.4.0"
   },
   "exports": {
     "./jsdom-polyfill": {

packages/components-angular/projects/angular-wrapper/src/porsche-design-system.module.ts

@@ -1,24 +1,40 @@
-import { ModuleWithProviders, NgModule, Optional } from '@angular/core';
-import { DECLARATIONS } from './lib/components/barrel';
+import { inject, type ModuleWithProviders, NgModule, Optional } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 import { load } from '@porsche-design-system/components-js';
+import { DECLARATIONS } from './lib/components/barrel';
+import type { Theme } from './lib/types';
+import { THEME_TOKEN } from './utils';
 
 export type PorscheDesignSystemModuleConfig = {
   prefix?: string;
   cdn?: 'auto' | 'cn';
+  theme?: Theme;
 };
 
 export class DefaultConfig implements PorscheDesignSystemModuleConfig {
   prefix = '';
+  theme: 'light'; // since theme exists on almost every component, it is defined here kind of like a global prop
+  // other component configurations should probably go into a separate `components`, `componentProps` or `componentDefaults`
+  // property similar to https://mui.com/material-ui/customization/theme-components/
 }
 
 // TODO: unit tests are missing
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
+  providers: [
+    {
+      provide: THEME_TOKEN,
+      useValue: new BehaviorSubject('light'),
+    },
+  ],
 })
 export class PorscheDesignSystemModule {
+  private theme$ = inject(THEME_TOKEN);
+
   constructor(@Optional() configParam: DefaultConfig) {
-    const configs = (configParam || ([new DefaultConfig()] as unknown)) as PorscheDesignSystemModuleConfig[];
+    const configs = (configParam as unknown as DefaultConfig[]) || [new DefaultConfig()];
+    this.theme$.next(configs[0].theme || 'light'); // first config sets the theme
     configs.forEach(load);
   }
 

packages/components-angular/projects/angular-wrapper/src/public-api.ts

@@ -1,6 +1,6 @@
 export { componentsReady } from '@porsche-design-system/components-js';
 export * from './lib/components/barrel';
 export * from './lib/types';
-export { PorscheDesignSystemModule } from './porsche-design-system.module';
-export type { PorscheDesignSystemModuleConfig } from './porsche-design-system.module';
+export { PorscheDesignSystemModule, type PorscheDesignSystemModuleConfig } from './porsche-design-system.module';
+export { THEME_TOKEN } from './utils';
 export { ToastManager } from './toast-manager';