Merge branch 'develop' into feature/buttonFontSize

public-ui · Nov 9, 2023 · 66c740f · 66c740f
2 parents 306794d + e4fb0d4
commit 66c740f
Show file tree

Hide file tree

Showing 288 changed files with 127 additions and 109 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -280,3 +280,7 @@ version:
 
 - prop `_label` now required
 - prop `_version` removed (use `_label` instead)
+
+kol-heading:
+
+- slot `default` renamed to `expert`
diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
 		"ncu:minor": "ncu -t minor -u -x rimraf && pnpm -r exec ncu -t minor -u -x rimraf,rxjs,typescript,zone.js",
 		"ncu:patch": "ncu -t patch -u -x rimraf && pnpm -r exec ncu -t patch -u -x rimraf",
 		"pack": "pnpm -r exec pnpm pack",
-		"postinstall": "pnpm exec playwright install",
+		"postinstall": "npm-run-all postinstall:*",
+		"postinstall:build": "pnpm -r build",
+		"postinstall:playwright": "pnpm exec playwright install",
 		"prepare:husky": "rimraf .husky && husky install && npm-run-all prepare:husky:*",
 		"prepare:husky:commitlint": "husky add .husky/commit-msg \"npx commitlint --edit $1\"",
 		"prepare:husky:depcheck": "husky add .husky/pre-push \"pnpm -r depcheck\"",
@@ -39,7 +41,7 @@
 		"lint-staged": "15.0.2",
 		"npm-check-updates": "16.14.6",
 		"npm-run-all": "4.1.5",
-		"pnpm": "8.10.0",
+		"pnpm": "8.10.2",
 		"prettier": "3.0.3",
 		"rimraf": "3.0.2",
 		"ts-node": "10.9.1",

diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json
@@ -63,9 +63,9 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
-		"@angular/compiler": "16.2.11",
-		"@angular/compiler-cli": "16.2.11",
-		"@angular/core": "16.2.11",
+		"@angular/compiler": "16.2.12",
+		"@angular/compiler-cli": "16.2.12",
+		"@angular/core": "16.2.12",
 		"@public-ui/components": "2.0.0-rc.8",
 		"@types/minimatch": "5.1.2",
 		"@types/minimist": "1.2.4",

diff --git a/packages/adapters/react/package.json b/packages/adapters/react/package.json
@@ -51,7 +51,7 @@
 		"@types/minimist": "1.2.4",
 		"@types/node": "ts5.1",
 		"@types/normalize-package-data": "2.4.3",
-		"@types/react": "18.2.33",
+		"@types/react": "18.2.36",
 		"@types/react-dom": "18.2.14",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",

diff --git a/packages/adapters/solid/package.json b/packages/adapters/solid/package.json
@@ -51,7 +51,7 @@
 		"@types/minimist": "1.2.4",
 		"@types/node": "ts5.1",
 		"@types/normalize-package-data": "2.4.3",
-		"solid-js": "1.8.4",
+		"solid-js": "1.8.5",
 		"typescript": "5.2.2",
 		"unbuild": "1.2.1"
 	},

diff --git a/packages/adapters/vue/package.json b/packages/adapters/vue/package.json
@@ -54,7 +54,7 @@
 		"@types/normalize-package-data": "2.4.3",
 		"typescript": "5.2.2",
 		"unbuild": "1.2.1",
-		"vue": "3.3.7"
+		"vue": "3.3.8"
 	},
 	"peerDependencies": {
 		"@public-ui/components": "2.0.0-rc.8",

diff --git a/packages/components/.eslintrc.js b/packages/components/.eslintrc.js
@@ -49,6 +49,13 @@ config.overrides.push({
 	rules: {
 		'jsx-a11y/no-access-key': 'off',
 		// 'react/no-unused-state': 'error',
+
+		'jsx-a11y/label-has-associated-control': [
+			2,
+			{
+				depth: 3, // allow labels deeply nested into spans
+			},
+		],
 	},
 });
 config.overrides.push({

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -67,46 +67,46 @@
 		"prepack": "npm run build && cp package.json package.bak.json && rimraf dist/collection dist/kolibri/assets/@leanup dist/types/assets/@leanup && node scripts/anonymous.js && node scripts/minify.js"
 	},
 	"dependencies": {
-		"@a11y-ui/core": "1.0.7",
+		"@a11y-ui/core": "1.1.0",
 		"@floating-ui/dom": "1.5.3",
 		"@public-ui/schema": "2.0.0-rc.8",
 		"i18next": "23.6.0",
 		"markdown-it": "13.0.2"
 	},
 	"devDependencies": {
 		"@stencil/angular-output-target": "0.8.3",
-		"@stencil/core": "4.6.0",
+		"@stencil/core": "4.7.1",
 		"@stencil/postcss": "2.1.0",
 		"@stencil/react-output-target": "0.5.3",
 		"@stencil/solid-output-target": "file:node_martin/stencil-solid-output-target-0.0.1.tgz",
 		"@stencil/vue-output-target": "0.8.6",
-		"@types/color-convert": "2.0.2",
+		"@types/color-convert": "2.0.3",
 		"@types/jest": "26.0.24",
 		"@types/markdown-it": "13.0.5",
 		"@types/mustache": "4.2.4",
 		"@types/node": "ts5.1",
 		"@types/pug": "2.0.8",
 		"@types/twig": "1.12.14",
 		"@types/wcag-contrast": "3.0.2",
-		"@typescript-eslint/eslint-plugin": "6.9.0",
-		"@typescript-eslint/parser": "6.9.0",
+		"@typescript-eslint/eslint-plugin": "6.10.0",
+		"@typescript-eslint/parser": "6.10.0",
 		"autoprefixer": "10.4.16",
 		"clean-css": "5.3.2",
 		"color-convert": "2.0.1",
 		"color-rgba": "2.4.0",
 		"cross-env": "7.0.3",
 		"cssnano": "6.0.1",
-		"eslint": "8.52.0",
+		"eslint": "8.53.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-jsx-a11y": "6.7.1",
+		"eslint-plugin-jsx-a11y": "6.8.0",
 		"eslint-plugin-no-loops": "0.3.0",
 		"eslint-plugin-react": "7.33.2",
 		"jest": "26.6.3",
 		"jest-cli": "26.6.3",
-		"lighthouse": "11.2.0",
+		"lighthouse": "11.3.0",
 		"mustache": "4.2.0",
 		"postcss": "8.4.31",
 		"postcss-sorting": "8.0.2",
@@ -118,7 +118,7 @@
 		"rimraf": "3.0.2",
 		"rxjs": "7.8.1",
 		"stencil-awesome-test": "1.0.6",
-		"terser": "5.22.0",
+		"terser": "5.24.0",
 		"tslib": "2.6.2",
 		"twig": "1.16.0",
 		"typescript": "5.2.2",

diff --git a/packages/components/src/components/a11y.css b/packages/components/src/components/a11y.css
@@ -1,20 +1,19 @@
+/*
+ * This file contains all rules for accessibility.
+ */
 @layer kol-global {
-	/*
-	 * This file contains all rules for accessibility.
-	 */
 	:host {
 		/*
 		 * Minimum size of interactive elements.
 		 */
 		--a11y-min-size: 44px;
-		font-size: inherit;
-	}
-
-	* {
 		/*
 		 * Verdana is an accessible font that can be used without requiring additional loading time.
 		 */
 		font-family: Verdana;
+	}
+
+	* {
 		/*
 		 * This rule enables the word dividing for all texts. That is important for high zoom levels.
 		 */

diff --git a/packages/components/src/components/accordion/test/html.mock.ts b/packages/components/src/components/accordion/test/html.mock.ts
@@ -27,12 +27,16 @@ export const getAccordionHtml = (
 					_level: props._level,
 				},
 				{
-					default: `${getButtonWcHtml({
-						_ariaControls: 'nonce',
-						_ariaExpanded: props._open === true,
-						_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
-						_label: props._label,
-					})}`,
+					expert: `${getButtonWcHtml(
+						{
+							_ariaControls: 'nonce',
+							_ariaExpanded: props._open === true,
+							_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
+							_label: props._label,
+						},
+						undefined,
+						' slot="expert"'
+					)}`,
 				}
 			)}
 			<div class="wrapper">

diff --git a/packages/components/src/components/alert/test/html.mock.ts b/packages/components/src/components/alert/test/html.mock.ts
@@ -56,7 +56,7 @@ export const getAlertHtml = (props: Props, innerHTML = '', additionalHTML = ''):
 										_level: props._level,
 									},
 									{
-										default: props._label,
+										expert: props._label,
 									}
 							  )
 							: ''

diff --git a/packages/components/src/components/card/test/html.mock.ts b/packages/components/src/components/card/test/html.mock.ts
@@ -21,7 +21,7 @@ export const getCardHtml = (props: Props): string => {
 						_level: props._level,
 					},
 					{
-						default: '',
+						expert: '',
 					}
 				)}
 			</div>

diff --git a/packages/components/src/components/heading/component.tsx b/packages/components/src/components/heading/component.tsx
@@ -61,49 +61,49 @@ export class KolHeadingWc implements API {
 				return (
 					<h1 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h1>
 				);
 			case 2:
 				return (
 					<h2 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h2>
 				);
 			case 3:
 				return (
 					<h3 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h3>
 				);
 			case 4:
 				return (
 					<h4 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h4>
 				);
 			case 5:
 				return (
 					<h5 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h5>
 				);
 			case 6:
 				return (
 					<h6 class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</h6>
 				);
 			default:
 				return (
 					<strong class="headline">
 						{headline}
-						<slot />
+						<slot name="expert" />
 					</strong>
 				);
 		}

diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
@@ -18,7 +18,7 @@ export class KolHeading implements Props {
 	public render(): JSX.Element {
 		return (
 			<kol-heading-wc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline}>
-				<slot />
+				<slot name="expert" slot="expert" />
 			</kol-heading-wc>
 		);
 	}

diff --git a/packages/components/src/components/heading/test/html.mock.ts b/packages/components/src/components/heading/test/html.mock.ts
@@ -5,7 +5,7 @@ import { Props, States } from '../types';
 export const getHeadingWcHtml = (
 	props: Props,
 	slots: {
-		default?: string;
+		expert?: string;
 	} = {},
 	additionalAttrs = ''
 ): string => {
@@ -22,22 +22,22 @@ export const getHeadingWcHtml = (
 		<kol-heading-wc${additionalAttrs}>
 			<${tag} class="headline">
 				${state._label}
-				${typeof slots.default === 'string' ? slots.default : `<slot />`}
+				${slots.expert !== undefined ? slots.expert : '<slot name="expert" slot="expert"></slot>'}
 			</${tag}>
 		</kol-heading-wc>`;
 };
 
 export const getHeadingHtml = (
 	props: Props,
 	slots: {
-		default?: string;
+		expert?: string;
 	} = {}
 ): string => {
 	return `
 <kol-heading>
 	<mock:shadow-root>
 		${getHeadingWcHtml(props)}
 	</mock:shadow-root>
-	${slots.default !== undefined ? slots.default : ''}
+	${slots.expert !== undefined ? slots.expert : ''}
 </kol-heading>`;
 };
diff --git a/packages/components/src/components/style.css b/packages/components/src/components/style.css
@@ -33,15 +33,6 @@
 		cursor: pointer;
 	}
 
-	/* font-family is NOT inherited all HTML elements. */
-	button,
-	input,
-	option,
-	select,
-	textarea {
-		font-family: inherit;
-	}
-
 	/* This is the text label. */
 	.icon-only > kol-span-wc > span > span {
 		display: none;

diff --git a/packages/designer/package.json b/packages/designer/package.json
@@ -44,21 +44,21 @@
 		"monaco-editor-webpack-plugin": "7.1.0",
 		"prettier": "2.8.8",
 		"register-service-worker": "1.7.2",
-		"solid-js": "1.8.4",
+		"solid-js": "1.8.5",
 		"world_countries_lists": "2.8.2"
 	},
 	"devDependencies": {
 		"@leanup/stack": "1.3.48",
 		"@leanup/stack-solid": "1.3.48",
 		"@leanup/stack-webpack": "1.3.48",
 		"@types/prettier": "2.7.3",
-		"@unocss/preset-mini": "0.57.1",
-		"@unocss/webpack": "0.57.1",
+		"@unocss/preset-mini": "0.57.2",
+		"@unocss/webpack": "0.57.2",
 		"ajv": "8.12.0",
 		"chromedriver": "118.0.1",
 		"cpy-cli": "5.0.0",
 		"depcheck": "1.4.7",
-		"eslint-plugin-jsx-a11y": "6.7.1",
+		"eslint-plugin-jsx-a11y": "6.8.0",
 		"eslint-plugin-no-loops": "0.3.0",
 		"nightwatch-axe-verbose": "2.2.2",
 		"npm-run-all": "4.1.5",

diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json
@@ -24,23 +24,23 @@
 		"@public-ui/components": "2.0.0-rc.8",
 		"@public-ui/react": "2.0.0-rc.8",
 		"@public-ui/themes": "2.0.0-rc.8",
-		"@types/node": "20.8.9",
-		"@types/react": "18.2.33",
+		"@types/node": "20.8.10",
+		"@types/react": "18.2.36",
 		"@types/react-dom": "18.2.14",
-		"@unocss/preset-uno": "0.57.1",
-		"@unocss/webpack": "0.57.1",
+		"@unocss/preset-uno": "0.57.2",
+		"@unocss/webpack": "0.57.2",
 		"ajv": "8.12.0",
 		"chromedriver": "118.0.1",
 		"cpy-cli": "5.0.0",
-		"eslint-plugin-jsx-a11y": "6.7.1",
+		"eslint-plugin-jsx-a11y": "6.8.0",
 		"eslint-plugin-react": "7.33.2",
 		"formik": "2.4.5",
 		"nightwatch-axe-verbose": "2.2.2",
 		"npm-run-all": "4.1.5",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
-		"react-router": "6.17.0",
-		"react-router-dom": "6.17.0",
+		"react-router": "6.18.0",
+		"react-router-dom": "6.18.0",
 		"rimraf": "3.0.2",
 		"ts-prune": "0.10.3",
 		"typescript": "5.2.2",
-Original file line number
+Diff line change
@@ Expand Up @@
     										_level: props._level,
     									},
     									{
-    										default: props._label,
+    										expert: props._label,
     									}
     							  )
     							: ''
@@ Expand Down @@