From 5f23b4a7609c2958d543bd8ce5439526d5deee82 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 18 Mar 2024 15:51:40 +0100
Subject: [PATCH] Fix handout samples

---
 .../react/src/components/abbr/basic.html      |  6 --
 .../react/src/components/handout/basic.tsx    | 62 +++++++++++++------
 2 files changed, 44 insertions(+), 24 deletions(-)
 delete mode 100644 packages/samples/react/src/components/abbr/basic.html

diff --git a/packages/samples/react/src/components/abbr/basic.html b/packages/samples/react/src/components/abbr/basic.html
deleted file mode 100644
index 1320495460..0000000000
--- a/packages/samples/react/src/components/abbr/basic.html
+++ /dev/null
@@ -1,6 +0,0 @@
-Ich bin <kol-abbr _label="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
-Ich bin
-<kol-abbr _label="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).
diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx
index a2b3110c87..49739744b7 100644
--- a/packages/samples/react/src/components/handout/basic.tsx
+++ b/packages/samples/react/src/components/handout/basic.tsx
@@ -6,6 +6,7 @@ import {
 	KolAbbr,
 	KolAccordion,
 	KolAlert,
+	KolBadge,
 	KolBreadcrumb,
 	KolButton,
 	KolButtonLink,
@@ -39,6 +40,7 @@ import {
 import { getTheme, getThemeName } from '../../shares/store';
 
 import type { FC } from 'react';
+import { getRoot } from '../../shares/react-roots';
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -60,15 +62,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'montag',
 				label: 'Montag',
-				render: (el, data) => {
-					const button = document.createElement('kol-button');
-					button.setAttribute('_label', data.label);
-					button.setAttribute('data-theme', 'default');
-					button.setAttribute('style', 'font-size: 75%');
-					button.setAttribute('exportparts', 'button,normal');
-					button._on = { onClick: console.log };
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
-					el.appendChild(button);
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolButton _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -87,8 +86,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -109,33 +112,56 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				render: (el, data) => {
 					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
 				},
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
 			},
 		],