fix: align image, logo and kolibri (#5531)

packages/components/src/components/image/style.css

@@ -1,4 +1,7 @@
 @layer kol-component {
+	:host {
+		display: inline-block;
+	}
 	img {
 		max-height: 100%;
 		max-width: 100%;

packages/components/src/components/logo/style.css

@@ -1,7 +1,7 @@
 @import url(../style.css);
 @layer kol-component {
 	:host {
-		display: block;
+		display: inline-block;
 	}
 
 	text {

packages/create-kolibri/templates/kolibri-theme/package.json

@@ -15,7 +15,7 @@
 		"lint": "eslint src",
 		"prepack": "unbuild",
 		"test": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
 		"unused": "knip"
 	},
 	"devDependencies": {

packages/samples/react/src/components/button-link/image.tsx

@@ -8,7 +8,7 @@ export const ButtonLinkImage: FC = () => (
 		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolButtonLink _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>
 );

packages/samples/react/src/components/card/selection.tsx

@@ -21,7 +21,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -41,7 +41,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -61,7 +61,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Beispielbild" src="https://via.placeholder.com/200" />
+						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>

packages/samples/react/src/components/handout/basic.tsx

@@ -987,7 +987,7 @@ export const HandoutBasic: FC = () => (
 			</KolCard>
 		</div>
 		<KolVersion _label="5.0.2-test.2"></KolVersion>
-		{/* <KolImage _src="assets/images/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
+		{/* <KolImage _src="/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}
 	</div>

packages/samples/react/src/components/image/basic.tsx

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
 
-export const ImageBasic: FC = () => <KolImage _src="https://placehold.co/100x100/cc006e/white" _alt="Beispielbild: 100 × 100" />;
+export const ImageBasic: FC = () => <KolImage className="w-80%" _src="/abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

packages/samples/react/src/components/link/image.tsx

@@ -8,12 +8,12 @@ export const LinkImage: FC = () => (
 		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Abgrenzung" slot="expert" src="https://public-ui.github.io/assets/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>
 );

packages/samples/react/src/components/logo/basic.tsx

@@ -2,4 +2,4 @@ import React, { FC } from 'react';
 import { KolLogo } from '@public-ui/react';
 import { Bundesministerium } from '@public-ui/components';
 
-export const LogoBasic: FC = () => <KolLogo _org={Bundesministerium['Die Bundesregierung']} style={{ width: 300 }} />;
+export const LogoBasic: FC = () => <KolLogo className="w-50%" _org={Bundesministerium['Die Bundesregierung']} />;

packages/samples/react/src/components/nav/active.tsx

@@ -2,23 +2,22 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC, useEffect, useState } from 'react';
-
-import { useNavigate } from 'react-router';
+import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 
 export const NavActive: FC = () => {
-	const [links, setLinks] = useState([]);
+	const [links, setLinks] = useState<ButtonOrLinkOrTextWithChildrenProps[]>([]);
 
 	const handleLinks = (route: string) => {
 		const link = links.find((link) => link._label === route);
+		if (!link) return;
 		link._active = !link._active;
 		setLinks(links);
 	};
-
 	useEffect(() => {
 		setLinks([
 			{
 				_label: 'Main',
-				_icons: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_on: {
 					onClick: () => handleLinks('Main'),
 				},
@@ -36,20 +35,21 @@ export const NavActive: FC = () => {
 				},
 			},
 			{
-				_active: false,
+				_active: true,
 				_label: 'Alert',
 				_on: {
 					onClick: () => handleLinks('Alert'),
 				},
 				_children: [
 					{
 						_label: 'Main',
-						_icons: 'fa-solid fa-house',
+						_icons: 'codicon codicon-home',
 						_on: {
 							onClick: () => handleLinks('/'),
 						},
 					},
 					{
+						_active: true,
 						_label: 'Abbr',
 						_href: '/abbr',
 						_on: {
@@ -83,6 +83,5 @@ export const NavActive: FC = () => {
 			},
 		]);
 	}, []);
-
-	return <KolNav _label="Main navigation" _links={links} />;
+	return <KolNav _ariaLabel="Main navigation" _links={links} />;
 };

packages/samples/react/src/components/nav/basic.tsx

@@ -9,7 +9,7 @@ export const NavBasic: FC = () => (
 		_links={[
 			{
 				_label: 'Homepage',
-				_icons: 'fa-solid fa-house',
+				_icons: 'codicon codicon-home',
 				_href: '#/',
 			},
 			{

packages/samples/react/src/components/table/with-pagination.tsx

@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
 
 import { KolTable } from '@public-ui/react';
-import { KoliBriTableHeaders } from '@public-ui/components';
-import { KoliBriTablePaginationProps } from '@public-ui/components/src';
+import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
 import { DATA } from './test-data';
 
 const HEADERS: KoliBriTableHeaders = {
@@ -13,7 +12,7 @@ const HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
-const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _total: 1 };
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _max: 1 };
 
 export const TableWithPagination: FC = () => (
 	<div>

packages/samples/react/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -4,7 +4,7 @@ import { FormValues } from './AppointmentForm';
 import { ErrorList } from './ErrorList';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { fetchAvailableTimes } from './appointmentService';
-import { Option } from '@public-ui/components/src';
+import { Option } from '@public-ui/components';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();

packages/themes/bmf/package.json

@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"test": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test --update-snapshots"
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BMF kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/bzst/package.json

@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"test": "THEME_MODULE=src/index THEME_EXPORT=BZSt kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BZSt kolibri-visual-test --update-snapshots"
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=BZSt kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/default/package.json

@@ -44,7 +44,7 @@
 		"lint": "eslint src && tsc --noemit",
 		"prepack": "unbuild",
 		"-test": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots"
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=DEFAULT kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/ecl/package.json

@@ -10,8 +10,8 @@
 		"test:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test",
 		"test:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test",
 		"test-update": "npm-run-all test-update:*",
-		"test-update:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test --update-snapshots",
-		"test-update:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test --update-snapshots"
+		"test-update:ecl-ec": "THEME_MODULE=src/index THEME_EXPORT=ECL_EC kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"test-update:ecl-eu": "THEME_MODULE=src/index THEME_EXPORT=ECL_EU kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/itzbund/package.json

@@ -6,8 +6,8 @@
 		"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*",
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
-		"-test": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots"
+		"test": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=ITZBund kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/mfm/package.json

@@ -7,7 +7,7 @@
 		"format": "prettier --check src",
 		"lint": "eslint src && tsc --noemit",
 		"-test": "THEME_MODULE=src/index THEME_EXPORT=MFM kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=MFM kolibri-visual-test --update-snapshots"
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT=MFM kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/themes/zoll/package.json

@@ -11,9 +11,9 @@
 		"test:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test",
 		"test:zoll-v3": "THEME_MODULE=src/v3/index THEME_EXPORT=ZOLLv3 kolibri-visual-test",
 		"test-update": "npm-run-all test-update:*",
-		"test-update:mapz": "THEME_MODULE=src/index THEME_EXPORT=MAPZ kolibri-visual-test --update-snapshots",
-		"test-update:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test --update-snapshots",
-		"test-update:zoll-v3": "THEME_MODULE=src/v3/index THEME_EXPORT=ZOLLv3 kolibri-visual-test --update-snapshots"
+		"test-update:mapz": "THEME_MODULE=src/index THEME_EXPORT=MAPZ kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"test-update:zoll-v2": "THEME_MODULE=src/index THEME_EXPORT=ZOLLv2 kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"test-update:zoll-v3": "THEME_MODULE=src/v3/index THEME_EXPORT=ZOLLv3 kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
 	},
 	"devDependencies": {
 		"@public-ui/schema": "2.0.0-rc.7",

packages/tools/visual-tests/README.md

@@ -1,53 +1,58 @@
-# KoliBri - Visual Tests
-
-## Motivation
-
-The `KoliBri` Visual Tests provide a way to add visual regression testing to **theme** modules.  
-It takes screenshots of every component defined in the [React Sample App](https://github.com/public-ui/kolibri/tree/develop/packages/samples/react) with the theme applied and compares them to their references.
-
-## Installation
-
-You can install the `KoliBri` Visual Tests with `npm`, `pnpm` or `yarn`:
-
-```bash
-npm i -D @public-ui/visual-tests
-pnpm i -D @public-ui/visual-tests
-yarn add -D @public-ui/visual-tests
-```
-
-## Usage
-
-Add the following npm scripts to the theme's `package.json`:
-
-```json
 {
+	"name": "{{kebab name}}",
+	"version": "0.0.0",
+	"description": "{{description}}",
+	"author": {
+		"name": "{{author}}",
+		"email": "{{email}}"
+	},
+	"license": "EUPL-1.2",
+	"private": false,
 	"scripts": {
-		"test": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test",
-		"test-update": "THEME_MODULE=src/index THEME_EXPORT=THEME_NAME kolibri-visual-test --update-snapshots"
-	}
+		"build": "unbuild",
+		"depcheck": "depcheck",
+		"format": "prettier --check src",
+		"lint": "eslint src",
+		"prepack": "unbuild",
+		"test": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test",
+		"test-update": "THEME_MODULE=src/index THEME_EXPORT={{capital name}} kolibri-visual-test --update-snapshots theme-snapshots.spec.js",
+		"unused": "knip"
+	},
+	"devDependencies": {
+		"@public-ui/components": "2.0.0-rc.7",
+		"@public-ui/schema": "2.0.0-rc.7",
+		"@public-ui/visual-tests": "2.0.0-rc.7",
+		"@typescript-eslint/eslint-plugin": "6.8.0",
+		"@typescript-eslint/parser": "6.8.0",
+		"depcheck": "1.4.7",
+		"eslint": "8.51.0",
+		"eslint-config-prettier": "9.0.0",
+		"eslint-plugin-html": "7.1.0",
+		"eslint-plugin-jsdoc": "46.8.2",
+		"eslint-plugin-json": "3.1.0",
+		"eslint-plugin-no-loops": "0.3.0",
+		"knip": "2.35.0",
+		"npm-check-updates": "16.14.6",
+		"prettier": "3.0.3",
+		"unbuild": "1.2.1"
+	},
+	"peerDependencies": {
+		"@public-ui/components": "2.0.0-rc.7"
+	},
+	"sideEffects": false,
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.mjs",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"assets",
+		"dist"
+	]
 }
-```
-
-- `THEME_MODULE` defines the relative path to the TypeScript module containing the the theme definitions. Without file extension.
-- `THEME_EXPERT` defines the name of the export within the the module. (e.g., `export const THEME_NAME = {/**/};`) Defaults to `default`.
-
-Run the tests with `npm test`. The first time, this will create a new folder `snapshots` which is supposed to be committed to the repository.
-In the following runs, new screenshots will be compared to this reference.
-
-To update the reference screenshots call `npm run test-update`.
-
-It's recommended to add the `test-results` folder to the `.gitignore` file:
-
-```bash
-/test-results/
-```
-
-It's also recommended to automatically run the tests before packing/publishing the module:
-
-```json
-{
-	"scripts": {
-		"prepack": "npm test"
-	}
-}
-```