feat: add disabled to accordion, details and links too

packages/components/.knip.json

@@ -0,0 +1,16 @@
+{
+	"entry": ["src/index.ts"],
+	"ignore": ["src/assets/**", "src/dev/**", "src/global/**"],
+	"ignoreBinaries": [],
+	"ignoreDependencies": [
+		"@stencil/angular-output-target",
+		"@stencil/react-output-target",
+		"@stencil/solid-output-target",
+		"@stencil/vue-output-target",
+		"eslint-plugin-html",
+		"eslint-plugin-jsdoc",
+		"eslint-plugin-json",
+		"eslint-plugin-react"
+	],
+	"project": ["src/**/*.ts"]
+}

packages/components/package.json

@@ -52,19 +52,19 @@
 	],
 	"scripts": {
 		"build": "npm run build:light",
+		"build:deps": "pnpm --filter @public-ui/components^... build",
 		"build:light": "npm run clear && mkdir doc && cross-env NODE_ENV=production stencil build --docs --prod && node scripts/hashing.js && node scripts/autogen.doc.js && node scripts/vaadin.js && npm run format -- -w",
 		"clear": "rimraf dist doc loader www ../adapters/angular/v11/src ../adapters/angular/v12/src ../adapters/angular/v13/src ../adapters/angular/v14/src ../adapters/angular/v15/src ../adapters/angular/v16/src ../adapters/angular/v17/src ../adapters/hydrate/dist ../adapters/react/src ../adapters/solid/src ../adapters/vaadin/*.java ../adapters/vue/src",
-		"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*,@public-ui/*,@stencil/*,eslint-*,postcss-windicss,tslib,workbox-build",
 		"format": "prettier --check src",
 		"lighthouse": "lighthouse --chrome-flags=\"--headless\" --output-path lighthouse.report.html --preset=desktop --quiet",
-		"lint": "eslint src && tsc --noemit",
-		"unused": "ts-prune src -e",
+		"lint": "tsc --noemit && eslint src",
 		"start": "cross-env NODE_ENV=development stencil build --dev --serve --watch --no-open",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",
 		"test": "cross-env NODE_ENV=test stencil test --spec --json --outputFile dist/jest-test-results.json",
 		"test:watch": "cross-env NODE_ENV=test stencil test --spec --watchAll",
 		"postpack": "mv package.bak.json package.json",
-		"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"
+		"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",
+		"xunused": "knip"
 	},
 	"dependencies": {
 		"@floating-ui/dom": "1.6.1",
@@ -76,35 +76,31 @@
 	"devDependencies": {
 		"@stencil/angular-output-target": "0.8.4",
 		"@stencil/core": "4.11.0",
-		"@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.7",
-		"@types/color-convert": "2.0.3",
 		"@types/jest": "26.0.24",
 		"@types/markdown-it": "13.0.7",
 		"@types/mustache": "4.2.5",
 		"@types/node": "ts5.3",
 		"@types/pug": "2.0.10",
 		"@types/twig": "1.12.16",
-		"@types/wcag-contrast": "3.0.3",
 		"@typescript-eslint/eslint-plugin": "6.20.0",
 		"@typescript-eslint/parser": "6.20.0",
 		"autoprefixer": "10.4.17",
-		"clean-css": "5.3.3",
 		"color-rgba": "2.4.0",
 		"cross-env": "7.0.3",
+		"clsx": "2.1.0",
 		"cssnano": "6.0.3",
 		"eslint": "8.56.0",
-		"eslint-config-prettier": "9.1.0",
 		"eslint-plugin-html": "7.1.0",
 		"eslint-plugin-jsdoc": "48.0.4",
 		"eslint-plugin-json": "3.1.0",
 		"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",
+		"knip": "4.2.3",
 		"lighthouse": "11.5.0",
 		"mustache": "4.2.0",
 		"postcss": "8.4.33",
@@ -116,10 +112,7 @@
 		"terser": "5.27.0",
 		"tslib": "2.6.2",
 		"twig": "1.17.1",
-		"typescript": "5.3.3",
-		"wcag-contrast": "3.0.0",
-		"webpack": "5.90.1",
-		"workbox-build": "7.0.0"
+		"typescript": "5.3.3"
 	},
 	"files": [
 		"assets",

packages/components/src/components.d.ts

@@ -21,6 +21,10 @@ export namespace Components {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     interface KolAccordion {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -407,6 +411,10 @@ export namespace Components {
         "_on"?: KoliBriCardEventCallbacks;
     }
     interface KolDetails {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -1643,6 +1651,10 @@ export namespace Components {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1698,6 +1710,10 @@ export namespace Components {
           * Defines the custom class attribute if _variant="custom" is set.
          */
         "_customClass"?: CustomClassPropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1771,6 +1787,10 @@ export namespace Components {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -2898,6 +2918,10 @@ declare namespace LocalJSX {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     interface KolAccordion {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -3282,6 +3306,10 @@ declare namespace LocalJSX {
         "_on"?: KoliBriCardEventCallbacks;
     }
     interface KolDetails {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -4508,6 +4536,10 @@ declare namespace LocalJSX {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4563,6 +4595,10 @@ declare namespace LocalJSX {
           * Defines the custom class attribute if _variant="custom" is set.
          */
         "_customClass"?: CustomClassPropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4636,6 +4672,10 @@ declare namespace LocalJSX {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */

packages/components/src/components/accordion/component.tsx

@@ -1,13 +1,13 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
 
+import { featureHint, propagateFocus, setState, validateDisabled, validateLabel, validateOpen } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
-import { featureHint, propagateFocus, setState, validateLabel, validateOpen } from '@public-ui/schema';
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { watchHeadingLevel } from '../heading/validation';
 
-import type { AccordionAPI, AccordionStates, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
+import type { AccordionAPI, AccordionStates, DisabledPropType, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
 - onClick auf der KolAccordion anwenden
@@ -40,6 +40,7 @@ export class KolAccordion implements AccordionAPI {
 				<div
 					class={{
 						accordion: true,
+						disabled: this.state._disabled === true,
 						open: this.state._open === true,
 					}}
 				>
@@ -50,6 +51,7 @@ export class KolAccordion implements AccordionAPI {
 							slot="expert"
 							_ariaControls={this.nonce}
 							_ariaExpanded={this.state._open}
+							_disabled={this.state._disabled}
 							_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}
 							_label={this.state._label}
 							_on={{ onClick: this.onClick }}
@@ -67,6 +69,11 @@ export class KolAccordion implements AccordionAPI {
 		);
 	}
 
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 */
+	@Prop() public _disabled?: boolean = false;
+
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
 	 */
@@ -93,6 +100,11 @@ export class KolAccordion implements AccordionAPI {
 		_level: 1,
 	};
 
+	@Watch('_disabled')
+	public validateDisabled(value?: DisabledPropType): void {
+		validateDisabled(this, value);
+	}
+
 	@Watch('_label')
 	public validateLabel(value?: LabelPropType): void {
 		validateLabel(this, value, {
@@ -118,6 +130,7 @@ export class KolAccordion implements AccordionAPI {
 	}
 
 	public componentWillLoad(): void {
+		this.validateDisabled(this._disabled);
 		this.validateLabel(this._label);
 		this.validateLevel(this._level);
 		this.validateOn(this._on);

packages/components/src/components/accordion/readme.md

@@ -109,12 +109,13 @@ Standardansicht gelegt.
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                                                                                 | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                             | `undefined` |
-| `_level`              | `_level`  | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
-| `_on`                 | --        | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                               | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                                                                 | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                               | `false`     |
+| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                             | `undefined` |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
+| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                               | `false`     |
 
 ## Slots
 

packages/components/src/components/accordion/test/html.mock.ts

@@ -21,7 +21,7 @@ export const getAccordionHtml = (
 	);
 	return `<kol-accordion${props._open ? ' _open' : ''}>
   <mock:shadow-root>
-    <div class="accordion ${props._open ? 'open' : ''}">
+    <div class="accordion${props._disabled ? ' disabled' : ''}${props._open ? ' open' : ''}">
       ${getHeadingWcHtml(
 				{
 					_label: '',
@@ -32,7 +32,8 @@ export const getAccordionHtml = (
 						{
 							_ariaControls: 'nonce',
 							_ariaExpanded: props._open === true,
-							_icons: `codicon codicon-${props._open ? 'chrome-minimize' : 'add'}`,
+							_disabled: props._disabled,
+							_icons: `codicon codicon-${props._open ? 'remove' : 'add'}`,
 							_label: props._label,
 						},
 						undefined,

packages/components/src/components/accordion/test/snapshot.spec.tsx

@@ -19,9 +19,10 @@ executeTests<AccordionProps>(
 		return page;
 	},
 	{
+		_disabled: [true, false],
 		_label: ['Überschrift'],
-		// _level: [1, 2, 3, 4, 5, 6],
-		// _open: [true, false],
+		_level: [1, 2, 3, 4, 5, 6],
+		_open: [true, false],
 	},
 	getAccordionHtml,
 	{

packages/components/src/components/button.css

@@ -19,8 +19,4 @@
 		margin: auto;
 		width: 100%;
 	}
-	:is(button):disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
 }

packages/components/src/components/button/component.tsx

@@ -16,7 +16,6 @@ import type {
 	TooltipAlignPropType,
 } from '@public-ui/schema';
 import {
-	a11yHintDisabled,
 	mapBoolean2String,
 	mapStringOrBoolean2String,
 	propagateFocus,
@@ -40,7 +39,7 @@ import {
 	validateTooltipAlign,
 	watchString,
 } from '@public-ui/schema';
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
@@ -103,10 +102,10 @@ export class KolButtonWc implements ButtonAPI {
 					aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}
 					class={{
 						button: true,
+						disabled: this.state._disabled === true,
 						[this.state._variant as string]: this.state._variant !== 'custom',
 						[this.state._customClass as string]:
 							this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
-						'icon-only': this.state._hideLabel === true,
 						'hide-label': this.state._hideLabel === true,
 					}}
 					disabled={this.state._disabled}
@@ -283,9 +282,6 @@ export class KolButtonWc implements ButtonAPI {
 	@Watch('_disabled')
 	public validateDisabled(value?: DisabledPropType): void {
 		validateDisabled(this, value);
-		if (value === true) {
-			a11yHintDisabled();
-		}
 	}
 
 	@Watch('_hideLabel')